Primitive colours

Colour ramps built from a single palette in Figma

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.

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.