Colour
The colour tokens: one brand cyan, a neutral ramp for text and surfaces, and three status families.
When to use
- Use cyan,
--color-primary, for fills and large marks. - Use blue-1000,
--color-primary-active, for blue text, icons, thin lines and the focus ring. On the blue-100 tint, use blue-1100. - For meaning, use a
SEMANTICtoken, never a ramp step. Put a tone’s text on its own surface.
Don’t use it
- Cyan for text, icons or thin lines on white. Use blue-1000.
- Indigo or
--color-infofor blue status. Use the info tone.
Brand
The primary cyan and its four states, all on the blue ramp. Pressed is blue-1000, #1877F2, one step deeper on the same ramp.
#00AEEF
2.53 : 1
--color-primary
2.53 : 1
--color-primary
#0ABEFF
2.14 : 1
--color-primary
-hover
2.14 : 1
--color-primary
-hover
#1877F2
4.23 : 1
--color-primary
-active
4.23 : 1
--color-primary
-active
#EBFAFF
1.07 : 1
--color-primary
-light
1.07 : 1
--color-primary
-light
#0C296A
13.63 : 1
--color-primary
-dark
13.63 : 1
--color-primary
-dark
Neutrals
Thirteen steps. 50–200 are surfaces, 400–600 are borders, and 900 and darker are text.
--color-grey-50--color-grey-1200
--color-grey-900#4F4D55hsl(255 5% 32%)8.32 : 1AAAon white2.39 : 1Failon ink
Hover or select a step to read its value and contrast.
Status tones
Six tones, in order of severity, each with seven roles. A tone’s text and icon pass on its own surface. onFill is for text or an icon on the solid fill.
Success
Done, healthy, in range
Warning
Marginal, worth watching
Attention
Someone needs to act
Error
Failed, unsafe, out of range
Info
Running now, or news
Neutral
Idle, off, no status
--color-success, --color-warning and --color-error are the fill role here.Roles
Every other colour role, named by job. Hover a swatch for its value.
Text
Icon
Surface
Border
Interactive
Chart
Brand
surface.scrim, grey-1300 at 50%, behind dialogs and drawers.Where they're used
- Dashboard widgets: the status panel, badges and freshness read
SEMANTIC.status, under their widget names (ok, note, act, bad, live, idle). - Mobile: the same tokens. Screens import them, so a phone and the dashboard can’t drift apart.
- Controls: alerts, field errors and toasts take a tone’s surface, border and text.
Accessibility
| Key | What it does |
|---|---|
| Tab | Moves focus to the selected grey step. |
| Right / Down | Selects the next, darker step. |
| Left / Up | Selects the previous, lighter step. |
| Home / End | Selects the lightest or darkest step. |