Spacing fails more quietly than colour. A wrong colour gets noticed; 13px where 12px belonged does not. What remains is a screen that feels vaguely untidy in a way nobody can point at.
Why multiples of four
A four-based scale is not an aesthetic claim, it is a way to reduce the number of choices. Free choice between 0 and 96 offers ninety-seven candidates; restricting to multiples of four and thinning the upper end leaves about a dozen. Fewer candidates means faster decisions and a much higher chance that the same situation gets the same value twice — which is what consistency actually is.
There is a practical reason too: four divides cleanly into common body sizes, and it produces fewer fractional pixels when the page is scaled to 125% or 150%.
Keep small values close together (4, 8, 12, 16) and large values far apart (48, 64, 80, 96). Four pixels is clearly visible between an icon and its label and completely invisible between two sections. A scale should follow perception, not arithmetic.
Three kinds of gap cover almost everything
Having a scale does not mean using it freely everywhere. Layout spacing really comes in three kinds.
Within an element is the gap between an icon and its label, or a heading and its standfirst — things that must read as one unit. Between blocks is card to card, paragraph to paragraph. Between sections is where the scene changes. Fix those three as tokens and building a new component rarely involves a spacing decision at all.
One exception voids the whole scale
A heading looks a touch tight on one screen, so you add margin-top: 13px. On its own that is harmless. The damage comes next: the following person reads that code and learns that the scale does not apply here.
If that spot genuinely needs thirteen pixels, the scale is missing a step. Amend it. Amending a scale is one line; exceptions accumulate forever.
WordPress adds one more wrinkle: editors can insert arbitrary gaps with spacer blocks, and those values live outside your scale where only the rendered page reveals them. Closing that gap is the subject of parts five and six.
Where layout structure meets performance continues in the Themes & plugins archive, and how conventions like this get established and verified during real work is published on our process page.
Next part
You now have a list of colours and a list of gaps. The next part plants them in the theme, so that a change in one :root block moves the entire site.