Design tokens, done properly.
A colour that passes 4.5:1 on white does not pass on a dark surface. So one value per colour is broken. Everything here carries a value per mode.
Colour. Pick your brand.
Status, neutral and accent colours follow from it. Each keeps a light and a dark value, and the dark one is generated until you take it over.
Brand
Status
Neutral
Type. Choose two families.
Leading and tracking are computed per step. They are properties of size, not constants of the family, and one line-height across a scale is wrong at both ends.
Any Google family. Search is popularity-ordered, so the ones you have heard of come first.
Body text. Every other step is a power of the ratio from here.
Wider ratios give headings more presence and run out of room faster on small screens.
Leading and tracking are computed per step, not set once. Larger text needs tighter leading and negative tracking; small text needs the opposite. A single line-height across a scale is the usual mistake.
| Step | Size | Leading | Tracking |
|---|---|---|---|
| xs | 10px | 1.6500000000000001 | +0.005em |
| sm | 13px | 1.6500000000000001 | +0.002em |
| base | 16px | 1.54 | -0.002em |
| lg | 20px | 1.42 | -0.006em |
| xl | 25px | 1.33 | -0.011em |
| 2xl | 31.5px | 1.25 | -0.019em |
| 3xl | 39px | 1.19 | -0.027em |
| 4xl | 49px | 1.1400000000000001 | -0.03em |
| 5xl | 61px | 1.11 | -0.03em |
Layout. Set the rhythm.
Spacing is dense where components live and sparse where pages breathe. Nested corners stay concentric. Elevation is shadow on light and lightness on dark.
Every spacing and radius step is a multiple of this.
1px reads as structure. 2px and up reads as a deliberate style choice.
Multiplies the whole spacing scale, not individual values.
0 gives square corners throughout.
Borders and surface tone carry it. On dark surfaces a shadow is nearly invisible, so each level also names the surface tone that carries it there.
Linear at the small end where component padding lives, geometric at the large end where page rhythm does. A flat 4px ladder gives twenty interchangeable steps and none of the useful big ones.
An inner radius must be the outer radius minus the gap between them, or the two curves visibly drift apart. Left is computed, right uses the same radius for both.