Foundations
The visual and structural decisions every component inherits. Each card below is live: switch the colour mode or context in the header and watch it follow.
Foundations
The contract the rest of the system rests on.
Color
Seven OKLCH ramps, six surface levels, and the pairing rule.
Type
A 1.200 scale from 16px, with line heights on the 4px grid.
Layout
One 4px unit, read as three axes and four layers, tight to open.
Shape
Radius named by what it wraps, and one focus ring.
Size
Control heights and icon sizes, all on the grid.
Elevation
Six levels of z-order, not a menu of shadows.
Motion
Four roles. Exits are faster than entrances.
Themes
Brand and density skins, each a file of token overrides.
Tokens
Every token in the system, with its value in each theme.