Space.
Space rivals colour for how much of a system it shapes, yet it is the part designers cannot see. An 8px rhythm grounds it, with deliberate 4px increments for dense situations. One scale is applied as inset, stack, and inline space.
- Base unit
- 8px grid
- Scale
- 7 steps · 0–40px
- Vocabulary
- Inset · Stack · Inline
- Page scale
- The website · W6–W7
The 8px grid
Everything is spaced on an 8px rhythm. Eight is the base unit; layout steps follow that beat first, so type, padding, and gaps all land on the same measure. The scale also names 4px increments for dense UI, including 4 and 12, where a full eight is too much. Those named steps are deliberate, not exceptions.
Everything aligns to 8px first, with named 4px increments for tighter moments.
The layout steps. Reach for the 8px rhythm first; the 4px increments are for tight controls only.
The scale
The six non-zero spacing steps, drawn to their own proportion. Most follow the 8px rhythm; the named 4px increments serve denser moments. Together with the zero step, these seven named values are the entire vocabulary.
Inset, stack & inline
The scale is applied three ways. Inset is the padding within an element or container; stack is the vertical space between items; inline is the horizontal space across a row. One measure colour reveals all three. They read apart by form, not by hue: a frame, a horizontal band, a vertical band.
Inset
Padding on all sides: the breathing room within an element.
Stack
Vertical space between stacked items.
Inline
Horizontal space between items in a row.
Space revealed
The whole vocabulary appears in one worked example. On the left is a finished card. On the right, the same card reveals its spacing: a red inset, stacks between rows, and an inline gap between tags. Each band is labelled with its value.
A concise read on the period: the headline metrics and where the quarter landed against plan.
A concise read on the period: the headline metrics and where the quarter landed against plan.
Squish & stretch
Some controls take an asymmetric inset. A squish cuts the top and bottom for buttons, pills, and table cells, where height is at a premium. A stretch adds top and bottom for inputs and textareas, where the value needs room. Both still draw from the one scale.
Misuse
Space is composed, not hand-placed. Use the named scale and the right layout relationship, and never sprinkle one-off margins to nudge things into place.