Four seeds, twelve accents,
ten neutrals — one hue dial.
naina's color system is organized by what a color does, not what shade it is. Twelve action colors and ten neutrals — all derived from four seeds in OKLch. Turn one knob, the whole system shifts in lockstep.
01 — Actions
Pick a role, not a shade.
12345678910
One hue, ten stops. The neutrals borrow a hint of chroma from the primary so backgrounds, text, and borders feel like they belong to the same family — not gray slapped next to color.
02 — Seeds
Four seeds, each a role with one hue.
seed-0
seed-1
seed-2
seed-3
Each seed produces three tiers — base, hover, deeper — by stepping lightness. That's twelve accents from four numbers. Nothing else needs configuring.
03 — Why OKLch
The right model finally beats the hex picker.
Perceptually uniform lightness. Predictable brightness across hues. Stable hue while you dim. Wider-than-sRGB gamut. One control changes intent across the whole system.
Predictable
Lightness means lightness
Step L by 5% and the result is visibly 5% lighter — in any hue. No more eyeballing two blues that "feel" the same brightness.
Stable
Hue doesn't drift
Dim an OKLch color and it stays the same color. Try that with HSL — your bright orange becomes brown.
Wide
P3 by default
Modern browsers render OKLch in P3 where the screen supports it. You get richer color for free, with sRGB as a graceful fallback.
Ready to ship?
Tune one hue. Restyle the whole app.
Generate the full token set — accents, neutrals, light + dark — from your AI tool, then ship it as part of a running app.