Open any rough UI and the problem is almost always spacing. 13px here, 20px there, 6px somewhere else — nothing lines up, and the whole thing feels sloppy without anyone knowing why. The fix isn’t taste. It’s a scale, and it takes an hour to set up.
Multiples of four
Pick one base unit and multiply it. Four works because it divides cleanly and still gives you fine control at the small end. Every margin, padding, and gap becomes a multiple: 4, 8, 12, 16, 24, 32, 48, 64px. If a value isn’t on that list, it’s a bug, not a decision. Skip odd bases like 5 or 6 — halves and quarters stop landing on whole pixels and edges start to look fuzzy. Tailwind’s default spacing already works this way — one unit equals 4px.
Five values, not twenty
You don’t need every multiple. Most interfaces run on about six spacing values, and reaching for a seventh usually means two elements should share one. Fewer options make every layout call faster and more consistent. Name them once as tokens and stop typing raw numbers. Cut the options and you spend less time deciding spacing and more time shipping it.
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
}Gap over margin
Stop pushing elements around with margins. Set the parent to display: flex or grid and control the rhythm with gap. One property spaces every child evenly — no margin-collapsing surprises, no leftover space clinging to the last item. When spacing lives on the container, adding or removing a child never breaks the layout. It also makes responsive work trivial: change one gap value at a breakpoint and the whole row reflows on its own.
Ship it
Delete every hard-coded spacing value and swap in a token from your six-step scale. Lay out with gap, not margins. Do that and alignment stops being something you eyeball — it falls out of the system for free, on every screen you build after this one. Six values, one base, spacing on the container — that’s the whole system.