The Spacing System
The most invisible decision in design — and the one that quietly holds everything together.
Ask why a product feels polished and people point at the colours or the font. They’re almost never the reason. The reason is usually spacing — the gaps, padding and margins that, when they share one rhythm, make a hundred separate pieces read as one calm whole.
The fix isn’t taste; it’s a system. Pick one base unit, space everything in multiples of it, and the layout starts to align itself — even across screens built by people who never spoke. This article builds that system from the ground up, with the ruler in your hands.
The cost of guessed gaps
Spacing by eye feels fine in the moment. You nudge a margin to 13px because it looks right, a gap to 22px because the card felt tight. Each decision is reasonable on its own. The trouble is the sum: a screen full of one-off distances that never quite repeat, so nothing lines up and the whole thing reads as faintly off.
Worse, none of it is reusable. The next screen invents its own numbers, the next teammate invents theirs, and six months in your product is a patchwork of near-misses. A spacing system replaces all of that with a single rule: every distance is a multiple of one base unit.
The magic is what that buys you for free — accidental alignment. Two designers who never coordinated, working on different screens, both reach for 16 and 24 and 32. Their work lines up because it shares a rhythm, not because they agreed. That is the quiet engine behind “this feels like one product.”
One unit, every gap
The most common base unit is 8. You space and size everything in multiples — 8, 16, 24, 32, 40, 48, 64 — and drop to a 4-point half-step only for tight spots like the gap between an icon and its label.
Why 8 and not 10? Because 8 divides cleanly at the screen densities real devices use (1×, 1.5×, 2×, 3×), so it stays crisp where odd numbers blur a half-pixel. It also gives a small, memorable set of values — few enough to hold in your head, plentiful enough for any layout.
Tap the ruler. Watch a single token drive both the gap between elements and the padding inside one — same scale, every direction.
Which token do I reach for?
The scale gives you the values; the roles tell you which one a given gap deserves. Six roles cover almost every distance on a screen.
Decide it once, reuse it everywhere
A raw number like 16px is a decision waiting to drift. Give it a name — space-2 — and it becomes a token: a single source of truth that drives padding, margins and grid gaps alike. Now spacing is decided once and applied a thousand times, and changing the system means changing one value, not hunting a thousand.
One scale should govern every distance: the padding inside a component, the margin outside it, and the gap between siblings in a grid or flex row. When all three pull from the same tokens, a component dropped into any new screen already fits the rhythm.
Build a card below from nothing but tokens — pick its padding and its inner gap, and read the CSS it produces.
Snap to the beat
A system isn’t only about which values you use — it’s about using them consistently, in both directions, so the page keeps a steady beat top-to-bottom and side-to-side. Off-grid spacing — a 13px margin here, a 7px gap there — is exactly what makes a layout feel restless even when nothing is obviously wrong.
Flip the demo against an 8px grid. In ad-hoc mode the blocks drift off the lines; in rhythm mode they snap onto them, and the whole card settles. You can feel the difference before you can name it.
The system serves the eye, not the reverse
The scale is a powerful default, not a tyrant. Two moments call for a deliberate exception. The first is the half-step: when 8px is too coarse — the gap between a 24px icon and its label, say — drop to 4. Keep it rare; if you’re reaching for 4 constantly, your base unit may be wrong.
The second is the optical adjustment. Sometimes mathematically-correct spacing reads as visually wrong — a glyph that’s heavier on one side, an icon that looks low when perfectly centred. There, the eye outranks the grid: nudge it until it looks right, then document the exception so a teammate doesn’t “fix” it back.
The discipline lives in one word: deliberate. One explained exception is craft. Forty unexplained ones are how the system quietly dies — the 13px margin nobody rounded, the contractor’s 22px, the late-night 6px nudge. Mature teams even lint spacing in code and design tools, so an off-scale value can’t ship by accident.
Same card, two systems
The exact same content — once spaced on the 8-point scale, once by eye. Nothing else changes.
Every gap is a multiple of 8. The card breathes evenly; the eye reads one steady rhythm.
Each gap is ‘about right’ and none repeats. Subtly restless — and impossible to reuse on the next screen.
Spacing is the unit the whole layout is measured in. Alignment is keeping every element true to that scale’s edges; the grid is the larger scaffold those same multiples build — column widths and gutters are just spacing tokens at a bigger size. Get the unit right first, and alignment and grids inherit its rhythm for free. That’s why this is article one.
Where the field agrees
Four sources worth reading in full — the systems and research this article stands on.
Where spacing dies
The Spacing glossary
Six words for thinking in units, not pixels. Tap a card to flip it.
Questions you actually ask
Run the numbers
Ten questions in mixed formats — multiple choice, multi-correct, fill-in, match, order, read-think-connect and write-your-own — each with layered hints: a nudge, the reasoning, then a deeper connection. Served from the question bank, never hardcoded.