Color tokens
Semantic names ({primary}, {surface}) beat raw hex — one token update propagates everywhere.
Ink
#1a1033Primary text, headings on light surfaces
Primary
#7c3aedCTAs, links, active nav, brand emphasis
Accent
#f472b6Highlights, badges, secondary emphasis
Surface
#faf5ffPage backgrounds, card fills
Muted
#6b7280Secondary text, placeholders, metadata
Gradient
Logo tiles, hero bands, marketing accents
Spacing scale
space-14px — Icon gaps, tight inline spacingspace-28px — Button padding-y, chip gapsspace-312px — Input padding, list item gapsspace-416px — Card padding, section guttersspace-624px — Stack gaps between form fieldsspace-832px — Section separation❌ Without tokens: #7C3AED, #7c3aed, purple-600 — three names, same intent, drift guaranteed.
✅ With tokens: always colors.primary — designers and engineers align.