Foundations
The token system — semantic colours, type, spacing, radius and elevation. Dark mode and accents swap tokens, never components.
Accent & semantic colours
Semantic tints carry an AA-safe foreground for small text. The accent ramp follows the picker in the top bar — try it.
Type scale
Page title
Section heading
Card heading
Body copy — most of the interface reads at this size.
Caption and helper text.
JetBrains Mono — data, SKUs, code.
Radius scale
Assigned by element class: 4 chips · 6 controls · 8 larger controls · 10 cards · 12 trays · 18 modals.
Elevation
Soft, layered shadows — flat by default, lift on hover, drag for pick-up states.
card
lift
drag