Skip to content

Colors

Gray, alpha, and hue scales that semantic tokens build on.

Primary actions use the grayscale (brand-primary → gray-900). Hue scales are for status, charts, and decorative accents — not default controls.

Grayscale

0
25
50
75
100
150
200
250
300
350
400
450
500
550
600
650
700
750
800
850
900
925
950
975
1000

Alphas

0
02
04
05
06
08
10
12
15
16
20
25
30
35
40
50

Primary colors

Red

25
50
75
100
200
300
400
500
600
700
800
900
950
1000
a25
a50
a75
a100
a200
a300

Orange

25
50
75
100
200
300
400
500
600
700
800
900
950
1000
a25
a50
a75
a100
a200
a300

Yellow

25
50
75
100
200
300
400
500
600
700
800
900
950
1000
a25
a50
a75
a100
a200
a300

Green

25
50
75
100
200
300
400
500
600
700
800
900
950
1000
a25
a50
a75
a100
a200
a300

Blue

25
50
75
100
200
300
400
500
600
700
800
900
950
1000
a25
a50
a75
a100
a200
a300

Purple

25
50
75
100
200
300
400
500
600
700
800
900
950
1000
a25
a50
a75
a100
a200
a300

Pink

25
50
75
100
200
300
400
500
600
700
800
900
950
1000
a25
a50
a75
a100
a200
a300

Semantic mapping

Prefer semantic tokens in UI. Reach for raw hue steps only when no semantic token fits.

RoleTokensSource
Primary actionsbrand-primary, brand-foregroundgray-900 / gray-0
Surfaces & textbackground-*, surface, fg-*gray + alpha
Success / decorative greendecorative-greengreen scale
Infodecorative-blueblue scale
Dangerdestructivered scale
Warningwarningorange scale
Focusringgray-1000

Do

  • Use bg-brand-primary for primary buttons, checked switches, and selected checkboxes
  • Use bg-background-* / bg-fg-* for foundation diagrams and neutral chrome
  • Use hue scales (green-*, blue-*, …) for status, data viz, and decorative accents

Don't

  • Don't use green-* as the default fill for primary actions or docs illustrations
  • Don't invent hex values outside the scales on this page
  • Don't use destructive for decorative red — use decorative-crimson