Grouping – Space is information too

Before you consciously read a screen, your brain has already decided what belongs with what. That pre-processing runs on rules – mapped by 1920s perceptual psychologists and known as the Gestalt principles – and it runs whether or not anyone designed for it. So designers design for it: if the brain is going to group things anyway, make sure it groups the right things.

The four rules doing the work

• Proximity – close together reads as related, far apart as unrelated, regardless of styling. The strongest rule, and the root cause of most “this layout feels confusing” complaints – like a label floating equidistant between two fields, claiming both.
• Similarity – things that look alike read as the same category, even scattered. Why every primary button in a product wears one colour: the sameness is the signal.
• Common region – things inside one boundary read as a group, strongly enough to overrule distance. Why “put it in a card” works – and why every needless box is a false claim.
• Figure/ground – the brain splits every scene into subject and backdrop. Modals dim the page behind them to force the split; at any moment a screen should have an answerable “what’s the figure here?”

Watch the first and third rules fight, with every confound removed – nothing below changes colour, size or shape:

The ambiguous middle of that slider deserves a second look, because it’s a real-world bug: equal spacing everywhere is a claim that nothing relates to anything. The practical rule – space between groups must be visibly larger than space within them – fixes more confused layouts than any amount of restyling.

Space, spent on purpose

Whitespace is not what’s left over when the content runs out; it’s an active material. Two distinctions earn their keep. Macro vs micro: the space around layout blocks (page margins, section gaps) versus the space inside elements (button padding, letter spacing) – organised at different scales, solved by different decisions. Passive vs active: passive space just keeps things readable; active space is spent deliberately – isolating one element so it outranks everything else. That’s the spacing lever from the hierarchy lesson, and it’s most of what separates “polished and calm” (Linear, Apple) from merely “clean-looking”.

The ladder that makes it repeatable

How much space, though? Teams stop eyeballing by adopting an 8pt grid: every margin, padding and gap is a multiple of one base unit (8px classically, with 4px half-steps). Spacing that steps 8-16-24-32 reads as considered; 7-13-22-29 reads as slightly off even to people who can’t say why:

Why 8? It halves cleanly, and common screen densities scale from it without blurry sub-pixel edges – but honestly, the magic isn’t the number, it’s having a ladder. Dozens of small per-screen judgement calls collapse into one decision made once. (Layout has an equivalent inherited convention – the 12-column grid – and a current-generation successor in container queries, which the viewports course treats properly.)

Check this page’s homework

This lesson’s layout spacing – the margins and gaps doing its grouping work – runs on the site’s 4px-base ladder: 4, 8, 12, 16, 24, 32, 48, 64, 96. (The micro space inside controls is tuned to its type instead, exactly per the macro/micro split above – /system documents which is which.) Overlay the ruling and see: