04Grid
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.
COLUMNS 12GUTTER 24MARGIN 48 / 32 / 16MAX 1440
Columns04.1
01
02
03
04
05
06
07
08
09
10
11
12
col-8 · primary surface
col-4 · inspector
col-3
col-3
col-3
col-3
col-5 · figure
col-7 · prose
Numbers04.2
12
columns24px
gutter48px
desktop margin (32 tablet, 16 phone)4px
baseline1440px
max width44px
minimum targetShell widths04.3
rail 56
primary surface · min 0, max 880 prose / 1200 wide
inspector 320
| 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 |
Baseline rhythm04.4
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.
Composed without imagery04.5
Remove every picture. Nothing collapses.
Carol M. Highsmith
Fall display in Grand Teton National Park
Library of CongressNo known restrictions
Today
What matters now?
- Recut Daily Bread to 24 fpsRunning
- Reply to the Fleet threadIdle
no image
Today
What matters now?
- Recut Daily Bread to 24 fpsRunning
- Reply to the Fleet threadIdle