Tags: web-dev concept

Spacing Systems

Date: 2026-08-16

---

One scale of spacing values, derived from a base unit, used for every gap in the interface. It is the cheapest single thing that makes a design look deliberate — and the one most often left to per-component judgement.

---

A spacing system is a bounded set of values for margin, padding and gap, generated from a base unit, that every space must be chosen from.

The scale

Base of 4px, which divides cleanly and gives enough granularity at small sizes:

0     0
1     4px
2     8px
3     12px
4     16px
5     20px
6     24px
8     32px
10    40px
12    48px
16    64px
20    80px
24    96px

Note it stops being linear after 6. Fine granularity matters between 4px and 24px, where component padding lives; above that, nobody can tell 52px from 56px, so the steps widen.

An 8px base is the common alternative. It halves the number of steps and forces more consistency; 4px gives more room for tight component interiors. Either works — mixing them doesn’t.

Why it does so much

AD HOC                   ON A SCALE
padding: 14px            padding: 16px
margin-bottom: 18px      margin-bottom: 16px
gap: 11px                gap: 8px
padding-top: 22px        padding-top: 24px

Nothing in the left column is wrong. The problem is that no two values relate to each other, so the eye finds no rhythm and the result reads as unconsidered without anyone being able to point at a mistake.

The right column has three distinct values instead of four near-identical ones, and the relationships are visible: 8 is half of 16, 24 is one and a half times it.

Relationships carry meaning

The most useful property, and the one that gets missed: spacing communicates grouping.

label                    ← 4px  (bound to its field)
[input field]
                         ← 24px (separate field group)
label
[input field]
                         ← 48px (new section)
SECTION HEADING

Proximity is the strongest grouping signal available, stronger than borders or backgrounds. Getting the ratios right — tight within a group, loose between groups — does more for scannability than any amount of styling.

The common failure is uniform spacing everywhere, which makes everything look equally related and forces the reader to work out the structure from content alone.

Applying it

• Space between, not around. Prefer gap and one-directional margins to margins on every side — collapsing margins and double-spacing are avoidable problems
• Components own their inside, layouts own their outside. A component that sets its own external margin can’t be reused, because the margin is a decision about context — Component API Design
• Name by role where it helps. space.inset.md for padding, space.stack.lg for vertical gaps. It reads better than numbers and survives a change of base — Design Tokens

Where it goes wrong

• The escape hatch. One margin-top: 13px and the scale is advisory. This is the whole failure mode, and it happens under deadline
• Too many steps. A scale with every multiple of 4 up to 96 is 24 options, which is no constraint at all
• Not applying it to layout. Component padding on a scale but page gutters picked by eye leaves the largest spaces the least considered
• Optical adjustments treated as violations. Sometimes a value genuinely needs to be off-scale — icon alignment, optical centring of a glyph. Allow it, comment it, and keep it inside the component rather than pretending the scale is inviolable

The relationship to type

Spacing and line height are the same substance seen twice. A vertical rhythm holds when the spacing scale and the line heights share factors — 24px line height with 8, 16, 24, 48 spacing lines up; 22px line height with a 4px scale never quite does — Type Scale.