Every gap comes from a list · Design, Before Any Software

The fault you can find in ten seconds

Open any layout made without a system and measure the gaps. You will find something like 6, 9, 10, 14, 15, 18, 22, 25, 30 pixels, with no two the same and no reason behind any of them. Each was set by dragging something until it looked right, in a moment, against whatever was next to it at the time.

This is the most reliable cause of work that looks amateur without looking obviously wrong. No single gap is a mistake. The absence of a pattern is the mistake, because the reader is constantly asked to decide whether a 14px gap and a 15px gap mean different things, and the answer keeps being no.

The scale

Pick a base unit and build a ramp on it. Four pixels is the usual base, for a practical reason: it divides cleanly at the device pixel ratios real phones use, so nothing lands on a half pixel and blurs.

4   8   12   16   24   32   48   64   96

Nine values, which is more than most designs need. Notice the shape: small steps at the bottom, doubling at the top. That is deliberate, and it follows from the threshold lesson in the first block — a difference registers in proportion to what it is compared with, so a constant 4px step would become invisible by the time you reach 40 and 44.

Some systems use a strict 8px base with a 4px half-step, which is where the widely used 8-point grid comes from. Others use a modular ratio. The specific ramp matters far less than the fact that there is one.

Assign meanings, not just numbers

A scale becomes useful when each step owns a job:

4 — space between a glyph and its label, inside a badge.
8 — inside a group: label to input, icon to text.
16 — between related items in a list; page gutter on a phone.
24 — between groups within a section.
32 / 48 — between sections.
64 / 96 — between major regions, or above a section on a large screen.

With meanings attached, the question when you are laying something out stops being how big should this gap be and becomes what is the relationship here, which has an answer you can defend to someone else.

Implementing it for free

In CSS, custom properties make the scale the only source of spacing values:

css

:root {
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 1rem;     /* 16px */
  --space-4: 1.5rem;   /* 24px */
  --space-5: 2rem;     /* 32px */
  --space-6: 3rem;     /* 48px */
}
.field { margin-bottom: var(--space-4); }
.field label { margin-bottom: var(--space-2); }

Using rem rather than px means the whole scale grows when a reader increases their base font size, which is the behaviour you want and which a pixel scale silently refuses to give them.

In drawing tools, set the document grid to the base unit and enable snapping. Inkscape: File > Document Properties > Grids, with Snap to grid on. Krita and GIMP both offer a configurable grid under View. Figma's free tier has layout grids and an 8px nudge setting. None of this requires a paid tool.

The audit

List every distinct gap value in a finished design and count them. More than about six on a single page means you have gaps that were never decided. Map each stray onto the nearest scale value and delete it. Almost always the design improves immediately, because several accidental near-differences collapse into either a real difference or none.

In a browser, developer tools give you this for free: inspect an element and the box model diagram shows the computed margin and padding, which is what shipped rather than what you meant.

Where to break it

The scale governs relationships between objects. It does not govern optical corrections, which are the subject of a later lesson in this block. If a 16px gap between an icon and its label looks like 18px because the icon's artwork has built-in padding, you fix that with a 14px value and a note explaining why.

The distinction is worth stating precisely, because it is the difference between a system and a superstition:

Structural spacing comes from the scale. Optical corrections are exceptions, they are small, and each one has a written reason.

A design with three documented exceptions is a system. A design with thirty undocumented ones is where you started.

What it does not buy you

A spacing scale makes a layout consistent. It does not make it well grouped — you can apply the scale perfectly and still put 24px inside a group and 16px around it, which is the error from the previous lesson expressed in tidier numbers. The scale is a vocabulary. Grouping is what you say with it.