Neutral
The greyscale the interface is built on, from pure black to white.
neutral-900
#000000
neutral-800
#121212
neutral-700
#171717
neutral-600
#1F1F1F
neutral-500
#242424
neutral-450
#2A2A2A
neutral-400
#2F2F2F
neutral-300
#363636
neutral-200
#636363
neutral-100
#B4B4B4
neutral-000
#FFFFFF
Green
The accent family, used for interactive and success states.
green-100
#3ECF8E
green-200
#148253
green-300
#2C7051
green-400
#00623A
Amber
Reserved for warning states.
amber-100
#F5A623
amber-200
#8A5A10
Text
Type colors by importance. Each token points to a primitive, shown on the right.
text/primary
neutral-000
text/secondary
neutral-100
text/tertiary
neutral-200
text/accent
green-100
Icon
Icon colors, mirroring the text hierarchy.
icon/primary
neutral-000
icon/secondary
neutral-100
icon/accent
green-100
Background
Surface colors, from the page itself up through cards and badges.
bg/page
neutral-900
bg/inset
neutral-800
bg/card
neutral-700
bg/badge
neutral-600
Border
Divider and outline colors, by weight.
border/subtle
neutral-600
border/default
neutral-400
border/strong
neutral-200
Action
Button colors. Primary carries the accent, secondary stays neutral.
action/primary/bg
green-400
action/primary/border
green-200
action/secondary/bg
neutral-500
action/secondary/border
neutral-300
Status
Feedback colors for success, warning and neutral states.
status/success
green-100
status/warning
amber-100
status/neutral
neutral-200
