A color system that sparks joy

Every value in OKLCH. Perceptually uniform, wide-gamut, designed not eyeballed.

01 — Palette Explorer

6 families, 30 swatches

The complete accent primitive scale. 6 families tuned for perceptual uniformity with consistent hue angles. Click any swatch to copy its OKLCH value.

02 — Neutral Scale

14 stops, warm grays

The backbone of the system. Hue 60-70 keeps grays warm — no cold blue tint anywhere. Click to copy.

03 — Token Architecture

3 tiers, zero shortcuts

Color flows through 3 tiers. Primitives name the raw value. Semantic tokens give it meaning. Component tokens bind it to UI. Nothing skips a tier.

1 Primitives

Raw OKLCH values. Named by family and lightness. No semantic meaning.

maps to

2 Semantic

Theme-aware. Light and dark values hand-tuned independently.

used by

3 Component

UI-specific. Buttons, badges, toggles. Always reference semantic tokens.

04 — Semantic Mapping

Meaning, not coordinates

Semantic tokens map primitives to intent. Every token has a light and dark value — both hand-tuned, not generated. Click to copy the token name.

05 — Component Tokens

UI-bound values

The final tier. Component tokens reference semantic tokens and never touch primitives directly. Buttons, badges, toggles — each gets exactly the tokens it needs.