Macro · sections breatheMicro · letters breatheLoop · back to the unit
You now hold a unit, a rail, a scaffold, its four families, and a grid that bends to any screen. Machinery, all of it — teachable, checkable, lintable. What the machinery cannot do is decide where the silence goes: how much space, distributed how, so that a screen full of correct parts becomes a composition.
That is this capstone: white space as material, density as a decision, balance as physics — and finally a teardown bench where you read any screen through every lens the series built.
01 · White space is material
Placed, not left over
Every tool in this series was secretly a way of placing emptiness: tokens are sized emptiness, gutters are structural emptiness, margins are framing emptiness. Composition just names the two registers. Macro white space lives between sections and around focal points — it is what makes a page feel composed. Micro white space lives inside things — line-height, padding, the gap under a label — and makes content feel crafted.
Both come from the same scale, which is why the loop is about to close: the article ends where the series began, at the base unit.
Same card, same ink. Left: filled. Right: composed — the button finally has silence to speak into.
The law
White space is not what’s left; it’s what’s placed.
02 · Density is a decision
The density dial
“How much white space?” has a systematic answer: it is the base unit, chosen per surface. A trading dashboard earns base-4 compactness — its user scans it two hundred times a day. A product page earns base-8 comfort. A brand page earns base-12 silence, and reads as more expensive for it.
Here is Article 1’s promise paying off: because every distance is a token, one dial re-spaces the entire composition — coherently, instantly, with zero per-element edits.
The density dial
One card, one base unit — 4, 8 or 12. Every padding and gap is a multiple of it.
Base unit (px)
03 · Balance
Where the mass sits
Every element carries visual weight — Visual Hierarchy taught the levers. Composition asks where the weight sums: the layout’s centre of mass. Symmetric balance mirrors it — formal, stable, a little static. Asymmetric balance offsets one large mass with a small distant counterweight — the same physics as a steelyard scale, and the livelier of the two.
The amber dot below is the live centroid of the arrangement. Watch where each preset puts it — and how far a page can feel from “balanced” while every individual element is fine.
Balance the spread
The dot is the layout’s centre of mass, computed live from the blocks.
The law
Balance the mass, not the boxes — a small weight far out steadies a large one near centre.
04 · The first viewport
One fold, one focal
The first viewport is a composition with a deadline: about five seconds to say what this page is, where to look, and what to do next. That means one focal area — not three heroes fighting — a visible next step, and enough macro space that the focal point is found rather than searched for.
Every series lens converges here: the unit sets the breathing room, the rail holds the entry edge, the grid seats the hero, the count keeps it honest at 360px — and the balance decides whether the fold feels poised or precarious.
1
focal area per fold
~5s
for the fold to explain itself
6
lenses you now own
05 · The capstone teardown
Read the screen
The final skill is reading this machinery in other people’s work. Below is a small landing page. Stack the lenses the series gave you — rails, columns, the beat — and watch a finished surface decompose into system. Do this to one screen you admire every day and composition stops being mystical in a month.
Read the screen
A finished page — and the three lenses that explain it. Stack them.
The law
If you can name the unit, the edges and the columns, you can rebuild any screen you admire.
06 · Score a real screen
The layout audit
Twenty questions, each scored 0 (missing or broken), 1 (partially working) or 2 (deliberate and consistent). Open any screen — yours, or one you admire — and score it honestly. The verdict bands are calibrated to real review practice.
0/40
Seen in the wild
Both of these are correct
A luxury product page and a data terminal. Opposite densities — and each one right, because each chose its base for its reader.
Base 12 · luxury
One product, oceans of silence
Three elements and a fortune in emptiness. The space IS the brand voice — nothing competes, so the one object reads as precious.
Base 4 · terminal
Everything, one glance
Base-4 density, strict beat, disciplined rails. Scanned two hundred times a day — the rhythm is what keeps it legible at this pressure.
The loop closes
Unit → edges → scaffold → families → response → composition. Six articles, one idea worn six ways: replace per-case judgement with a shared system, then spend your judgement where systems end. The loop closes where it began — with a single base unit. Read the series again and Article 1 will read differently: you now know what the 8 was for.
The real references
Where the field agrees
Four sources worth reading in full — the systems and research this article stands on.
Approved because it looks goodStakeholders sign off a polished screen while users miss the primary action — the review asked “pretty?” instead of “can the task be completed?”FixTest structure before decoration: wireframe-level walkthroughs, real tasks, blurred and 20%-zoom checks.
Whitespace spread evenlyEvery gap identical in the name of consistency — so space can no longer distinguish tightly related items from separate ideas.FixDistribute meaningfully: the ratio of gaps IS the information. Uniformity is the absence of composition, not the presence of order.
Marketing air in an operational toolA dashboard styled like a brand page — elegant in the deck, endless scrolling in real use.FixMatch density to the task and the visit frequency. Terminals earn compact; campaigns earn silence; neither earns the other’s costume.
Local excellence, global disorderEvery card, button and illustration is individually superb — assembled without a page-level contract, the whole reads as noise.FixJudge the page as one composition first: entry point, path, resting point, action. Components are ingredients, never the meal.
The vocabulary
The Composition glossary
Six words for placing silence. Tap a card to flip it.
The nuance
Questions you actually ask
Train the eye
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.