← Design system

Color

Eight named ramps, eleven tints each. Map: --color-{ramp}-{tint}. The semantic tokens (--ink, --fill, --accent, etc.) resolve through these — most production code should reach for the semantic token, not the raw ramp.

--color-sky-

50 100 200 300 400 500 600 700 800 900 950

--color-red-

50 100 200 300 400 500 600 700 800 900 950

--color-orange-

50 100 200 300 400 500 600 700 800 900 950

--color-yellow-

50 100 200 300 400 500 600 700 800 900 950

--color-green-

50 100 200 300 400 500 600 700 800 900 950

--color-purple-

50 100 200 300 400 500 600 700 800 900 950

--color-cyan-

50 100 200 300 400 500 600 700 800 900 950

--color-stone-

50 100 200 300 400 500 600 700 800 900 950