Snap to the scale

The reason your layout looks arbitrary is that it is. Somewhere there is a margin-bottom: 13px next to a padding: 11px next to a gap: 15px, each chosen because it looked about right in isolation, and together they say nothing at all.

There are two rules here and they are usually taught as one. They deserve separating, because one of them is a convention and the other is close to a law.

The rule that is nearly a law

Space is how you say what belongs with what, and this was settled a century ago. Wertheimer, setting out the laws of perceptual organisation:

“In each of the above cases that form of grouping is most natural which involves the smallest interval. They all show, that is to say, the predominant influence of what we may call The Factor of Proximity.”

So: the space between groups must exceed the space within them. If a label sits 16px from its input and the next field sits 16px below that, you have not built two fields. You have built four things in a row, and every reader has to work out the pairing for themselves.

The modern quantitative version adds the part that makes this chapter useful. Kubovy, Holcombe and Wagemans found that grouping strength “approximates a decreasing exponential function of the relative distance” between elements, and that it “is robust under transformations of scale.”

Read that carefully. Relative distance. Grouping is driven by the ratio between your gaps, not by their absolute size. Double every value in your layout and the grouping survives unchanged, which is precisely why the previous move’s doubling exercise does not destroy your hierarchy.

It also means the thing that matters about a spacing scale is not which numbers are on it. It is that adjacent steps are far enough apart to read as different.

The rule that is a convention

The specific scale, 4 8 12 16 24 32 48 64 96 128, comes from Refactoring UI, and their reasoning is about distinguishability rather than mathematics:

“Creating a spacing and sizing system isn’t quite as simple as something like ‘make sure everything is a multiple of 4px’, a naive approach like that doesn’t make it any easier to choose between 120px and 125px.”

That is the point. A linear scale gives you too many indistinguishable neighbours. A scale where each step is meaningfully larger than the last gives you a small set of choices that are visibly different from each other, which is what turns spacing into a decision you can make quickly and consistently.

And the convergence is real. Material’s spacing system “is measured on an 8dp scale, where space100 = 8dp”. IBM’s Carbon ships 2, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96, 160. Different teams, different products, broadly the same shape: small steps at the bottom, widening as they grow.

Tailwind v4 went further and made the whole thing a multiplier. Every spacing utility is now “dynamically derived from a single spacing scale variable”, with --spacing: 0.25rem and .mt-8 { margin-top: calc(var(--spacing) * 8); }. The scale stopped being a list and became a ratio, which is exactly what the perception research says it always was.

The move

Pick a scale, use only values from it, and make the gap between groups at least one full step larger than the gap within them.

BEFORE                          AFTER

label     margin-bottom: 6px    label     margin-bottom: 4px   ] within
input     height: 38px          input                          ]
field     margin-bottom: 11px   field     margin-bottom: 24px  ] between
label     margin-bottom: 7px
input     height: 38px          within:  4px
field     margin-bottom: 13px   between: 24px
                                ratio:   6x
within:  6, 7px
between: 11, 13px               one step within, several steps
ratio:   ~1.8x                  between. the pairing is now
                                unambiguous at any zoom level
the eye has to work out
which label goes with which

The ratio column is the one to watch. At 1.8x the reader is doing arithmetic. At 6x they are not doing anything at all, which is the goal.

What it costs

A scale rejects values you will genuinely want. Something will look right at 20px and your scale offers 16 or 24. Take 24, and take it consistently: the cost of one slightly-too-large gap is far lower than the cost of reintroducing arbitrary values, because the moment one exists the next developer adds another.

And the specific numbers are not sacred. If you already have an 8-based scale, keep it. The transferable rules are the ratio between adjacent steps and the between-versus-within relationship. Swapping one convention for another buys you nothing and costs you a migration.

Try this week

Open one form and measure two gaps: between a label and its input, and between one field and the next.

If the second is not at least twice the first, that form is harder to read than it needs to be, and the fix is one line per field.

Then grep your stylesheet for spacing values and count the distinct ones. Most codebases have between twenty and forty. Map them onto eight, starting with the most common, and delete the rest.

You will not be able to see the difference on any single component. You will see it immediately on a page with six of them.