Color palette
These are the primitive color ramps — the bottom layer of the four-layer token model. Every semantic, component, and theme token ultimately resolves to one of the shades below.
Each ramp runs the standard 50–950 scale. The five neutral
ramps add a tuned 350 step — the dark-theme text-muted shade,
chosen so muted text keeps ≥ 4.5:1 contrast even on muted-bg
(the ramp’s 700) surfaces. The gray ramp is
the project’s default neutral; slate / zinc / neutral / stone
are the alternative neutrals offered by the
Theme builder. The
accent / status hues back the built-in data-color themes and the
fixed semantic info / success / warning / error colors.
The step number is a lightness
Section titled “The step number is a lightness”The seven chromatic ramps are generated, not hand-picked. Each is one
hue angle run through a shared ladder, written as oklch(L C H):
Lcomes from the step and is identical across hues, so600means the same darkness whether the hue is blue or amber.Cis an absolute target per step, clamped to whatever that hue can actually hold in sRGB at that lightness. Chroma as a fraction of the gamut maximum would trace the gamut boundary instead, whose shape swings by hue — green’s is widest at high lightness, so a fixed fraction makesgreen.200more colorful thangreen.500and the light tints come out neon.His constant down the ramp, so a ramp never drifts in hue.
That is what lets the accent themes
share one shape and one foreground rule. scripts/build-ramp.mjs
regenerates the values and test/ramp.test.mjs asserts the committed
tokens still match the ladder.
The five neutral ramps are not generated. They were already perceptually even — lightness spread of at most 1.8 points at any step, against 18.3 for the chromatic ramps before this change — and dark mode is built entirely from them, so they were left alone.
Swatches are labelled with their sRGB hex for pasting into other tools;
hover a swatch to see the token path and its authored oklch() value.
oklch(1 0 0)black oklch(0 0 0)Neutrals
color.graycolor.slatecolor.zinccolor.neutralcolor.stoneAccent & status hues
color.bluecolor.indigocolor.violetcolor.fuchsiacolor.rosecolor.redcolor.orangecolor.ambercolor.limecolor.greencolor.tealReferencing a shade
Section titled “Referencing a shade”When you author a custom theme (see Authoring your own theme), point a DTCG token at a primitive by its path:
{ "color": { "action": { "primary": { "bg": { "$type": "color", "$value": "{primitive.color.violet.600}" } } } }}Hover any swatch above to see its exact {primitive.color.*} path and
hex. The build resolves the reference to the concrete value; the
primitive itself is never emitted.
Related
Section titled “Related”- Theming overview — the four-layer model.
- Color themes — the
data-coloraccent axis built on these ramps. - Theme builder — generate a custom theme; the neutral-ramp picker uses the ramps above.