Colors
A warm-neutral foundation with a purple voice. Brand for action, neutral for structure, semantic for meaning. Every value here is a token — never write a hex code in component code.
Brand
The brand voice. Use for primary actions, links, brand-coloured surfaces and selection. Avoid using shades darker than 600 for body text — contrast is fine but the feel becomes heavy.
brand/50
#F0EEFF
brand/100
#DDD8FF
brand/200
#BEB5FF
brand/300
#A597FA
brand/400
#8B7CF6
brand/500
#745FF1
brand/600
#6048E8
brand/700
#4D38C9
brand/800
#3D2BAD
brand/900
#221870
brand/950
#150D4D
Neutral
Warm grey ramp — slightly off-cool to feel premium and editorial. Use for text, borders and surface backgrounds. Never use cold pure-grey hex codes.
neutral/0
#FAFAF8
neutral/50
#F4F2EE
neutral/100
#E8E5DF
neutral/200
#D1CEC7
neutral/300
#B6B2AB
neutral/400
#9E9B94
neutral/500
#85827B
neutral/600
#6B6861
neutral/700
#524F4A
neutral/800
#3A3835
neutral/900
#1C1B19
neutral/950
#0F0E0C
Semantic
Use only when the colour communicates state. Decoration uses Brand or Neutral.
| Token | CSS variable | Hex | |
|---|---|---|---|
| Success 50 | --color-success-50 | #EDFBF2 | |
| Success 600 | --color-success-600 | #16A34A | |
| Warning 50 | --color-warning-50 | #FFFBEB | |
| Warning 600 | --color-warning-600 | #D97706 | |
| Danger 50 | --color-danger-50 | #FEF2F2 | |
| Danger 600 | --color-danger-600 | #DC2626 | |
| Info 50 | --color-info-50 | #EFF6FF | |
| Info 600 | --color-info-600 | #2563EB |
Surfaces
Surfaces adapt to light / dark mode. Use these tokens instead of raw neutral shades on backgrounds.
surface-base
--color-surface-base
surface-raised
--color-surface-raised
surface-sunken
--color-surface-sunken
surface-overlay
--color-surface-overlay
surface-inverse
--color-surface-inverse
border
--color-border