Primitive colours

Colour ramps: the raw layer every theme re-points

These raw values never get used directly in components. Instead, they feed into the semantic layer where each value gets assigned a role like "page background" or "primary text". Keeping them separate means the palette can evolve without touching any component styles, and it is what makes re-theming cheap: the shipped theme presets rebase these ramps, and overriding a primitive cascades through everything built on it.

Neutral

Red

Orange

Yellow

Green

Teal

Blue

Purple

Step 07 is each chromatic ramp's key colour, outlined above. It is the value the ramp is built around, and the one the playground rebases when you re-theme. Hover any step for its token name and value.

Neutral alpha

00 · 1%

00 · 60%

00 · 90%

01 · 1%

01 · 60%

01 · 82%

09 · 66%

02 · 80%

03 · 80%

07 · 80%

08 · 80%

09 · 1%

09 · 80%

09 · 60%

10 · 60%

10 · 1%

True black

Solid

50%

70%

These carry an alpha channel, so each one sits over a light and dark half to show what it does to whatever is behind it.