Spacing
The 4px spatial scale — every step, what it's for, and the rhythm rules that use them.
Rules
The gap is the relationship
Space is how the eye groups things, so the gap widens as the relationship loosens — tight from a label to its value, widest between sections. Two elements the same distance apart read as equally related, whether or not they are.
Step up, not sideways
When a gap feels wrong, move to the next rung rather than to a number between rungs. Off-scale values are only for optical corrections of 2px or less — never to make something “look right” at a size the scale already covers.
Space before chrome
If a group reads as ambiguous, widen the gap before reaching for a rule, a border, or a card. Most hierarchy problems are spacing problems wearing a disguise.
One rhythm per surface
A surface picks a small set of steps and repeats them. Ten different gaps on one page reads as noise even when every value is on the scale — the scale is a vocabulary, not a licence.
Last updated on 2026-09-13