Spacing Scale
The fixed set of gaps, padding and margin values a product is allowed to use, usually built on a 4 or 8 pixel base.
Deliverables & ArtifactsA spacing scale removes a decision that gets made badly hundreds of times. Values step from a base — 4, 8, 12, 16, 24, 32, 48, 64 — and components use steps rather than arbitrary numbers. The gain is not tidiness: it is that vertical rhythm stays consistent when three teams build three screens, and that a designer and an engineer disagreeing about a gap have a small set of options rather than an argument about 14 versus 16.
The rule that makes it work in practice is proximity: related things get a smaller step than unrelated things, consistently. A label 4px from its input and 24px from the next field reads as grouped without any borders. Most “cluttered” interfaces are not too dense — they use the same gap everywhere, so nothing groups.
In practice
A design system audit found 47 distinct padding values in a component library built by four teams. Mapping to an eight-step scale changed the rendered output by at most 2px in any place and cut the CSS by roughly 15%, because most declarations collapsed into shared tokens.
Where teams get it wrong
- Arbitrary values that bypass the scale, which reintroduce the problem one component at a time.
- The same gap between related and unrelated elements, so nothing groups visually.
- A scale that is linear all the way up, giving too many indistinguishable large steps.
- Spacing defined in the design file but not exported as tokens.
- Negative margins used to escape the scale rather than fixing the component.
Learn more
You may ask
Frequently Asked Questions
Should a spacing scale use a 4px or 8px base?
8px with 4px half-steps is the common compromise: 8 keeps the scale short, and 4 gives the finer control that dense interfaces need. A pure 8px base forces awkward rounding inside small components.
How does spacing communicate grouping?
By proximity. Consistently smaller gaps within a group than between groups makes structure readable without borders or backgrounds. Uniform spacing everywhere is what makes a dense screen feel cluttered.
Related terms
All terms- Design TokenA named variable holding one design decision — a colour, spacing step, radius or type size — so the value can change everywhere from one place.
- Grid SystemThe columns, gutters and margins a layout is built on — the structure deciding where things can go before anybody decides what goes there.
- Typography ScaleThe fixed set of text sizes a product is allowed to use, and the line heights and weights that travel with each one.
- Design SystemThe single source of truth for how a product looks and behaves: tokens, components, patterns, usage rules and the process for changing them.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us