8-pt Spacing Scale

Space things in steps of 4 or 8 pixels, and layouts stay consistent.

A multiple-of-8 (or 4) scale gives consistent rhythm and predictable layouts.

8-pt Spacing Scale, side by side

Pick a spacing scale and reuse it. Equal, predictable gaps are what make a layout feel calm.

How to apply it

Pick {4, 8, 12, 16, 24, 32, 48} and use them everywhere — no arbitrary values.

8-pt Spacing Scale in practice: a concrete example

Why design systems pick 8

Choose a fixed set of spacing steps, say 4, 8, 12, 16, 24, 32, 48, and use only those, and a layout snaps into rhythm: gaps repeat, cards line up, and nothing lands on a stray 13px by accident. Most systems, including Material and the token sets behind shared Figma libraries, build on a 4 or 8 base for exactly this reason. Eight also divides cleanly across common screen densities, so edges stay crisp.

Common 8-pt Spacing Scale mistakes

Keeping the scale in the design file but typing arbitrary values (11px, 17px, 25px) in code, which quietly breaks the rhythm.
Using one step for unrelated relationships, so the gap between sections and the padding inside a button look identical and the grouping reads wrong.
Treating the scale as sacred for optical work. Icons and type sometimes need a 1-2px nudge to look centred even when the maths disagrees.

When 8-pt Spacing Scale doesn't apply

Hairline borders, focus rings, and optical alignment often need sub-scale values like 1px or 2px that no 8-point step covers, and that is fine: the scale governs layout spacing, not every measurement. Dense professional tools may also adopt a tighter 4-point base so more information fits without feeling cramped.

Practise it on a real challenge

Profile Card — nothing quite lines up

A teammate's profile card uses gaps of 6, 11, and 13px — no scale, just values nudged by eye. It looks subtly broken and no one on the team can say exactly why.

Put 8-pt Spacing Scale into practice

UI Design System Manager — Track components, tokens, and brand in one source of truth.