Design tokens
The surface ladder, white-alpha lines, hierarchy by value step, and the transition rule that makes hover 0ms on purpose.
tokens.css is the single source of truth; tailwind.config.ts only points at it.
- •Surface ladder — depth via a lighter step, never a shadow:
#070f1csunken,#0a1424base, then surfaces 1–5 from#0e1b2eto#2a3f5c. - •Lines are white-alpha so they adapt to any surface: hairline
rgba(255,255,255,0.08), border0.14. - •Text is hierarchy by value step, not colour:
#e6edf6→#94a3b8→#64748b→#475569. - •Accent
#d9a521, used sparingly. Brand gold is a gradient, so it cannot be a Tailwind colour and is always applied inline.
Type scale: overline 10, caption 11, body 12, title 13, stat 15, display 22.
Motion: instant 80ms, micro 120ms, standard 200ms, large 300ms. *` { transition-property: none }** is the base rule — hover and selection are 0ms, because motion on a pointer-reactive control reads as latency. Onboarding is the deliberate exception and carries its own animation set, all disabled under prefers-reduced-motion`.
Gotcha: because these are var()-based rather than RGB channels, Tailwind’s /opacity suffix does not work. text-accent/40 renders nothing. Use a predefined wash or a built-in scale like white/[0.04].