Colour

Consume the semantic tokens. The raw ramp below them exists so the semantic names have somewhere to point — reach for it only when no semantic token fits.

Semantic

surface-primary

page background

surface-secondary

cards, panels

surface-tertiary

raised surface

surface-quaternary

borders, dividers

action

links, borders, accents

hovered

hover state

body-primary

headings, body text

body-secondary-lighter

secondary text

body-secondary

captions, muted

error

error text

Brand gradient

Raw ramp

brand-0

#E8E6F0

brand-50

#C6C4CC

brand-100

#645F70

brand-200

#B19AFE

brand-210

#9980FF

brand-300

#8252FC

brand-400

#20EFFE

brand-500

#5F20FE

brand-600

#4004AF

brand-670

#1B0D4E

brand-910

#0D0D0F

brand-950

#050505