Spacing Scale

Whitespace used to be set by eye. If the gap between a heading and body text looked tight you opened it a little, and if it looked loose you closed it, which left one mockup carrying 13, 14, 16, and 18 all at once. Why 18 was there, the person who drew it usually couldn't say.

The cost shows up when those numbers reach code. An engineer measures the mockup and types what they measured, so the same card ends up with different padding on different screens. Ask in review why this one is 18 and the answer is that it looked better, which decides nothing about what the next screen should use.

A spacing scale removes that argument by deciding the allowed values up front. With only eight cells to choose from, nobody debates 13 against 14.

Pick one base unit and build the table from its multiples. Basing it on 4 or 8 is the convention; choose 4 and you get eight cells like 4, 8, 12, 16, 24, 32, 48, and 64.

Three rules hold it together.

1. Nothing outside the table. If something looks like it needs 18, pick 16 or 24. Allow one exception and the table becomes a suggestion, and arbitrary numbers come back.
2. Cells have to differ visibly. A table reading 4, 5, 6, 7 gives whoever is choosing no perceptible difference, so they go back to picking by feel.
3. Gaps widen as values grow. 4 to 8 is a doubling, while 60 to 64 looks like the same number twice, so the upper end spreads out as 24, 32, 48, 64.

The table gets used by name rather than by value. Names like space-4 registered as design tokens let the design tool and the codebase read one table. A grid system — the frame that fixes columns and the spaces between them — pulls its values from the same table, which puts the gutter between columns and the padding inside a card on one shared ruler.

"This gap is 18 and that's not on the scale. Should we make it 16?"

A value from outside the table got in, so move it to the nearest cell.

"Should the spacing scale be based on 4 or on 8?"

Settling the base unit. Eight means fewer cells and less to manage; four allows finer adjustment.

"The spacing values are hardcoded, so changing the scale doesn't reach them."

Pointing out that some places still write the number instead of the name.

At Pagedeck, Noa started by pulling every spacing value out of forty screens and counting them. Twenty-three distinct values turned up, and nine of those appeared exactly once. The table came down to eight cells based on 4, and each one-off value moved to the nearest cell. Theo registered those eight in code and deleted the rest of the numbers.