Mono is one of the color families shipped with this release. The v1 neutral workhorse — inks and surfaces..

Shades#

Palette table#

ShadeClass fragmentValueBest role
50mono-50#8a93a6Lightest tint — page backgrounds, subtle fills, hover backgrounds for rows and list items.
100mono-100#8a93a6Very light — section backgrounds, badges on light UI, tinted code blocks.
200mono-200#8a93a6Light — borders on light themes, dividers with personality, chip backgrounds.
300mono-300#8a93a6Soft — secondary borders, disabled states with color, placeholder decorations.
400mono-400#8a93a6Medium-light — icons on dark surfaces, decorative accents, chart lines.
500mono-500#8a93a6The primary step — buttons, links, brand fills, key interactive elements.
600mono-600#8a93a6Hover step — hover states for 500 elements, or primary on very light UIs.
700mono-700#8a93a6Active step — pressed states, emphasized text on light tinted backgrounds.
800mono-800#8a93a6Dark — text on light palettes, headers in tinted sections, dark UI fills.
900mono-900#8a93a6Very dark — deep section backgrounds, high-contrast text carriers.
950mono-950#8a93a6Darkest — near-black tinted backgrounds, hero surfaces, footer tones.

Use it#

html
<div class="bg-mono-500 text-white p-6 rounded-xl">Mono surface</div>
<p class="text-mono-600 dark:text-mono-400">Adaptive text</p>
<div class="border border-mono-200 dark:border-mono-800 bg-mono-50 dark:bg-mono-950 p-4 rounded-lg">Panel</div>

Per-usage guides#

Mono textstext-mono-* in practice.Mono backgroundsbg-mono-* in practice.Mono bordersborder-mono-* in practice.Mono gradientsfrom-mono-* in practice.

Contrast#

Flip point: shades 50–400 want dark text (text-slate-900); shades 500+ want white text. Verify with the accessibility/color-contrast|contrast guide.

colors/pastel-sky|pastel-sky · colors/minimal-ice|minimal-ice · colors/color-pairing|Pairing recipes