Token Tint

The brand scales

Each brand color — primary, secondary, and tertiary, all treated as equals — is converted to OKLCH, a perceptual color space where equal numeric steps look like equal visual steps. Eleven lightness targets from near-white (50) to near-black (950) are paired with a chroma curve that peaks in the middle of the scale, and each exact color is snapped into the step whose lightness it matches best, so it always sits naturally in its own scale.

Light-mode colors

Light surfaces are built from a tinted neutral ramp at very high lightness (roughly 93–99% in OKLCH). Page, card, elevated, input, hover, and active backgrounds each step down slightly in lightness so interactive states are perceptible without feeling heavy.

Dark-mode colors

Dark mode is generated separately, not flipped. Surfaces live in a low-lightness band (roughly 16–30%), elevation gets lighter as it rises (the opposite of light mode's shadow logic), chroma is reduced so backgrounds don't glow, and primary text is softened off pure white to limit halation.

Tinted neutrals

Every "gray" keeps your brand hue at a whisper of chroma (≈0.004–0.014). It's below the threshold where you'd call the surface colored, but enough that neutrals feel like family rather than generic gray swapped in from another product.

Accessible text

Each text token starts at a designed lightness, then its WCAG 2.1 contrast ratio against its background is measured. If it misses its target — 7:1 for primary text, 4.5:1 for secondary and links, 3:1 for large/subtle text — its lightness is nudged step by step until it passes.

Semantic colors

Success, warning, error, and info start from fixed, universally recognizable hues, then each hue is pulled a few degrees toward your brand hue and its chroma is scaled to match your color's intensity. States stay instantly readable while feeling native to the system.

The secondary and tertiary colors

The secondary and tertiary hues each get their own eleven-step OKLCH scale, anchored to your exact colors the same way the primary scale is. They power the mixed and trio gradients, their own glows and shadows, and highlight moments like the chart's tertiary bars and secondary peak — a three-hue system that stays coordinated because all scales share the same lightness ladder. The Suggest buttons derive companions by rotating the primary's OKLCH hue — 150° for the secondary, 210° for the tertiary — while keeping its lightness and guaranteeing lively chroma, so the trio contrasts in hue but matches in visual weight.

Shareable palettes

All three colors are encoded in the page URL (for example #1a3a63+168294+cfe6fa) whenever they change. Copy the share link and anyone who opens it sees the exact same generated system — no account, no export needed.

Contrast math

Ratios use the WCAG 2.1 formula: each color's relative luminance is computed from linearized sRGB channels, and the ratio is (L₁ + 0.05) / (L₂ + 0.05), from 1:1 up to 21:1 for black on white.

Why dark mode isn't an inversion

Inverting a light theme puts the most saturated, brightest colors on the darkest surfaces, reverses elevation logic, and produces glaring pure-white text. Designing the dark ramp independently — muted surfaces, lighter-when-higher elevation, desaturated brand tones, softened text — is what makes it feel intentional.

Read the full documentation →