Semantic Colours
Semantic tokens map a use-case (surface, ink, outline) to a primitive. Always prefer these over raw palette colors in app code — they swap with theme.
surface
Use for cards, panels, page chrome, alert backgrounds. Steps from soft (gray-1) to inverted (gray-7).
base
gray
menu
red
green
amber
blue
orange
violet
cyan
alert
white
modal
selected
cards
pink
ink
Use for typography, icons, and any glyph-style fill. gray-8 is body text; gray-4/5 is secondary.
base
gray
red
green
amber
blue
cyan
violet
alert
white
pink
outline
Use for borders, dividers, focus rings, outlined controls.
base
gray
red
green
amber
blue
orange
violet
white