Use semantic tokens, not these
This page exists for inspection. In code, reach for --color-background-success, not --color-green-500. Primitives are the inventory; semantic tokens are how components consume them.
Reading the rampsEach step encodes lightness: 100 is the lightest tint, 1000 is the deepest shade. The 500 step is the "default" weight of each hue — what role tokens map to when no emphasis modifier is applied.
The palette
Neutral
color/neutral
- Neutral0
- Neutral100
- Neutral200
- Neutral300
- Neutral400
- Neutral500
- Neutral600
- Neutral700
- Neutral800
- Neutral900
- Neutral1000
- Neutral1100
Blurple
color/blurple
- Blurple100
- Blurple200
- Blurple300
- Blurple400
- Blurple500
- Blurple600
- Blurple700
- Blurple800
- Blurple900
- Blurple1000
Green
color/green
- Green100
- Green200
- Green300
- Green400
- Green500
- Green600
- Green700
- Green800
- Green900
- Green1000
Blue
color/blue
- Blue100
- Blue200
- Blue300
- Blue400
- Blue500
- Blue600
- Blue700
- Blue800
- Blue900
- Blue1000
Purple
color/purple
- Purple100
- Purple200
- Purple300
- Purple400
- Purple500
- Purple600
- Purple700
- Purple800
- Purple900
- Purple1000
Pink
color/pink
- Pink100
- Pink200
- Pink300
- Pink400
- Pink500
- Pink600
- Pink700
- Pink800
- Pink900
- Pink1000
Orange
color/orange
- Orange100
- Orange200
- Orange300
- Orange400
- Orange500
- Orange600
- Orange700
- Orange800
- Orange900
- Orange1000
Yellow
color/yellow
- Yellow100
- Yellow200
- Yellow300
- Yellow400
- Yellow500
- Yellow600
- Yellow700
- Yellow800
- Yellow900
- Yellow1000
Red
color/red
- Red100
- Red200
- Red300
- Red400
- Red500
- Red600
- Red700
- Red800
- Red900
- Red1000
Natural
color/natural
- Natural100
- Natural200
- Natural300
- Natural400
- Natural500
- Natural600
- Natural700
- Natural800
- Natural900
- Natural1000
Alpha
Translucent overlays. Use white-alpha on dark surfaces, black-alpha on light. Hex values include the alpha byte (e.g., #FCFCFC1A for a 10% white).
White Alpha
color/white-alpha
- WhiteAlpha100
- WhiteAlpha200
- WhiteAlpha300
- WhiteAlpha400
- WhiteAlpha500
- WhiteAlpha600
- WhiteAlpha700
- WhiteAlpha800
- WhiteAlpha900
- WhiteAlpha1000
Black Alpha
color/black-alpha
- BlackAlpha100
- BlackAlpha200
- BlackAlpha300
- BlackAlpha400
- BlackAlpha500
- BlackAlpha600
- BlackAlpha700
- BlackAlpha800
- BlackAlpha900
- BlackAlpha1000