Twelve columns. Four-pixel baseline.
The UI stays composed with every image removed. Order comes from the grid, the rules and the type, not from the pictures.
Twelve columns, 24px gutters; the primary surface takes eight, the inspector four.
Common column combinations
Six numbers define the grid; everything else derives from them.
Rail 56, navigation 232, inspector 320; the primary surface takes what remains.
Breakpoints
| Breakpoint | From | Margin | Shell | Columns |
|---|---|---|---|---|
| phone | 0 | 16px | single column; nav as sheet | every col spans 12 |
| tablet | 720px | 32px | rail + surface | col-1…5 span 6; col-7…10 span 12 |
| desktop | 1080px | 48px | nav + surface (+ inspector) | full 12 |
| wide | 1440px | 48px, centred | nav + surface + inspector | full 12, max 1440 |
Line heights land on 4px so type and rules align without adjustment.
Line heights sit on the 4px baseline.
Body is 16/24, body-s 14/20, label 13/16, micro 11/14. Display sizes use unitless line heights so they scale with the fluid clamp and still land on the grid at the base size. The tinted lines behind this paragraph are the baseline.
Remove every picture. Nothing collapses.
The layout is composed by type, rules and space; imagery is added to it, never relied on.
Today
What matters now?
- Recut Daily Bread to 24 fpsRunning
- Reply to the Fleet threadIdle
Today
What matters now?
- Recut Daily Bread to 24 fpsRunning
- Reply to the Fleet threadIdle