The token layer
Foundations are what the instrument is made of: color roles, the 4px grid, type, elevation, motion, and icons. Brand is why. Guidelines are how we write. This layer is the coded language components will import.
Every value here is a token. Components — Canvas, Rail, Panel — consume these names. They do not invent private hex, space, or easing.
Color
Roles, not a mood board
Fill vs text vs focus. Brand teal is a fill. Contrast is a pair.
Layout4px, 12 columns
Grid for alignment. Space for padding. Density is orthogonal.
TypographyNewsreader + Geist
Body never below 16. Display for empty headlines.
Elevation0–4, short ladder
Most dashboard lives at 0–1. Ink elevates by surface, not shadow.
MotionChange explains itself
Ease-out, short, on the delta. Reduced motion is a first-class path.
IconographyTabler outline, 24
Named by action, not shape. Ether sizes 16 / 20 / 24.