Palettes
The twenty-three global ramps that every semantic colour token is cut from.
Solid families
Eighteen families at thirteen steps each: fourteen hues, then four greys. Every colour a component paints is a step on one of these ramps. Indigo ships here, but no component uses it: blue roles use the blue ramp.
10013 steps1300
--global-red-900#BC1C1Chsl(0 74% 42%)6.32 : 1AAon white3.14 : 1AA Largeon ink
Hover or tab to a cell to read its token, value and contrast.
Semantic mapping
The primary tokens and the global steps they come from.
| Semantic token | Global step | Value |
|---|---|---|
| --color-primary | --global-blue-900 | #00AEEF |
| --color-primary-hover | --global-blue-800 | #0ABEFF |
| --color-primary-active | --global-blue-1000 | #1877F2 |
| --color-primary-dark | --global-blue-1100 | #0C296A |
The blue ramp holds one hue from 100 to 1300. Pressed, 1000, is a deeper cyan-blue rather than a different blue, so a pressed primary darkens without changing hue. It’s also the first step to pass 4.5:1 on white.
Alpha families
Five ramps in rgba(), for scrims, hover washes and anything that sits over a map, chart or photo.
10013 steps1300
--global-neutral-grey-alpha-900rgba(6, 0, 11, 0.48)alpha — no fixed ratio
Usage
- Reach for a semantic token on Colour first. Use a global step only when none fits.
- Use an alpha family over a map, chart or photo, where a solid fill would hide what’s underneath.
- Check an alpha colour’s contrast in place, because it depends on what’s behind it.