The scaffolding nobody sees and everybody breaks. Get spacing, whitespace, alignment and type right, and the page forgives you almost anything.
Before colour, before cleverness, there’s the grid you can’t see. Spacing, alignment and type are the bones of a layout — invisible when they work, and the quiet reason a page reads as ‘cheap’ when they don’t. None of these crimes happen on purpose. They happen one reasonable nudge at a time.
Concept 01 · Spacing
The 8-Point Grid
The intent: only ever 8 · 16 · 24 · 32. Five numbers. Your eye can’t measure pixels — but it absolutely clocks when things don’t line up.
How it dies — in three acts
How you claw it back — the method
Audit. List every spacing value in the file. Yes, all of them — that’s the part nobody does.
Round. Map each to the nearest 8. 13→16, 5→8, 25→24. The excuse doesn’t matter; the nearest step does.
Re-snap. Apply it and ship. The only step that touches the file — and it takes a minute.
Lock it. Save the eight values as tokens or styles, so the next late-night nudge has nowhere to land.
Step 1–2 · the audit
Why this works — the grid isn’t about being tidy. It’s that when everyone reaches for the same few numbers, things nobody coordinated line up anyway — the whole reason a product stops looking like ten people built it and starts looking like one. The lock (step 4) is what keeps it that way after you leave.
Concept 02 · Spacing
Whitespace
The intent: one idea per screen, with room to breathe. Empty space isn’t wasted — it’s the thing that tells the eye what matters.
How it dies — in three acts
2nd CTAbadge
cookiesNew!app store
How you claw it back — the method
List. Write down everything competing for the eye on this one screen.
Choose. Name the single job of the screen. There is only one. Everything else serves it or goes.
Cut or demote. Delete what you can; push the rest below the fold or into a menu.
Protect. Give the survivor real space, and lock the layout so ‘just one more thing’ has to fight for room.
Step 1 · what’s competing
Why this works — the eye can only chase one thing at a time. Whitespace doesn’t make a page emptier — it makes the one thing you want seen impossible to miss. Luxury brands aren’t minimal because they ran out of ideas; empty space reads as confidence, clutter reads as panic.
Concept 03 · Structure
Alignment
The intent: one invisible edge everything hangs off. You never see the line — but the second it’s there, the layout says ‘an adult made this.’
How it dies — in three acts
How you claw it back — the method
Pick an edge. Choose one line — usually the left — that everything will hang off.
Audit. Find every element that isn’t on it. Your eye is brilliant at spotting this.
Snap. Move each one to the edge. Stop eyeballing; your eye prevents nothing.
Grid it. Put a real column grid behind the file so the next person can’t drift either.
Step 2 · what’s off the line
Why this works — misalignment is a tiny constant alarm the reader can’t name — they just feel ‘rushed’ or ‘cheap.’ A shared edge switches off a hundred of those alarms at once. It is the single cheapest way to look expensive.
Concept 04 · Type
The Type Scale
The intent: pick five sizes, maybe six. Use only those. The gaps between them are what tell the reader ‘this is a different level.’
How it dies — in three acts
Headline
A subhead that supports it
Body copy doing the quiet work of being read.
caption / legal
How you claw it back — the method
List. Pull every distinct font size the file actually uses. There are more than you think.
Map. Snap each to the nearest step on your scale. 15→16, 17→18, 19→20.
Delete. Remove the in-between sizes. Nobody will miss them — they were never doing anything.
Lock. Save the scale as text styles or tokens so ‘a smidge bigger’ isn’t a one-click option.
Step 1 · the sizes in use
Why this works — a scale isn’t about the exact numbers, it’s that the gaps are big enough to read as ‘a different level.’ Sizes a pixel apart look like a mistake, not a hierarchy. Fewer, bolder steps and the type does its job before anyone reads a word.
The Crime Scene
Four spacing crimes on one layout — tap the one that makes it feel most broken.
the grid
whitespace
alignment
type scale
Spot the crime — The Invisible Grid
11 quick ones. You’ve made at least half of these. No judgement.
Confession booth · Which of these four are you guiltiest of?
The confession booth — deal yourself a sin
“
—
— anonymous designer (probably you)
You’ve learned the tells
You can read the bones now — the 13px margin, the 4px misalignment, the 17px that should be 16. They were never visible bugs; together they were a constant low hum of ‘rushed.’ Round to the grid, snap to one edge, collapse the sizes, and the hum stops.
The Hall of Shame
Four villains that haunt every grid, every margin, every type ramp. Tap one to see its crime — and its sentence.
The 13px Margin
‘It’s basically 16.’
tap to flip →
The 13px Margin
the crime
A hard-coded one-off margin nobody rounds. Six months later there’s a 7 and a 25 too — the layout feels vaguely off and no one can say why.
the fix
Snap every value to the 8-point scale. One explained exception becomes forty unexplained ones.
The Filled Page
‘There’s empty space — use it.’
tap to flip →
The Filled Page
the crime
Whitespace treated as waste, every gap crammed until nothing can be seen first. Cluttered reads as panic.
the fix
Protect the room around the one thing that matters. Isolation is what makes it impossible to miss.
The Eyeballed Nudge
‘Looks about right.’
tap to flip →
The Eyeballed Nudge
the crime
Elements nudged by eye until they almost line up — read as a mistake the viewer can’t name.
the fix
Put everything on a shared edge. One alignment line silences a hundred ‘this feels off’ alarms.
The 15.5px Body
‘Close enough to 16.’
tap to flip →
The 15.5px Body
the crime
Body text at 14, 15, 16 and 17 — sizes a pixel apart that read as errors, not levels.
the fix
One body size from the scale; snap headings to real steps. The in-between sizes were never doing anything.
The Pushback Playbook
The questions you actually get about spacing, grids and type — and the polite, specific way to answer them.
How do I defend whitespace to someone who wants it ‘filled’?
Whitespace isn’t empty, it’s the thing that makes the one element you want seen impossible to miss. Show the before/after: same content, crammed vs. given room. Cluttered reads as panic; spacious reads as confidence. They’re paying for attention, and attention needs the silence around it.
When is it actually OK to break the grid?
Once, on purpose, for the one thing that matters most. A grid earns its power by being kept — which is exactly why a single deliberate break becomes an instant focal point. Break it twice and you don’t have a grid, you have noise.
How do I make a layout look ‘professional’ with zero budget?
Put everything on one shared edge. Alignment is the single cheapest way to look expensive — it switches off a hundred tiny ‘this feels off’ alarms at once, costs nothing, and quietly says ‘an adult made this.’ Do that before reaching for shadows or a pricier font.
Why does my layout feel ‘cheap’ when nothing is obviously wrong?
Because lots of tiny things are slightly wrong — a 13px margin, a 4px misalignment, a 17px that should be 16. None is a visible bug, but together they’re a constant low hum of ‘rushed.’ Round the spacing to a grid, snap to one edge, collapse the type sizes; the hum stops.
Two elements look almost lined up. Do a few pixels matter?
Almost-aligned is worse than clearly apart — the eye reads it as a mistake it can’t name. Snap both to one shared edge. Near-misses are exactly what make a layout feel ‘off’ when nothing is obviously wrong.
🎨
Up next · Part 2
The Surface
Type and colour — the layer everyone has an opinion about, and therefore the one that gets quietly wrecked.