Spacing scale
A fixed short list of allowed spacing values (4, 8, 16, 24, 32) so every gap on the page comes from the same set.
See it
What it is
A spacing scale is a short, fixed list of allowed spacing values, and the rule that nothing outside the list is used. Pick a base unit and build multiples from it. A strict 8-point scale runs 8, 16, 24, 32, 48, 64, 96. A 4px-based scale is the same idea one notch finer, keeping 4 and 12 as half-steps for tight spacing inside components. Every padding, margin, and gap then comes from the same vocabulary instead of whatever felt right that afternoon.
This is what people mean by the '8-point grid'. Material Design specifies 8dp, Apple works in 8pt, and Tailwind's numeric spacing utilities are the same idea with names attached. The payoff is not beauty, it is decisions you no longer have to make and a page where unrelated components happen to line up. Steps usually grow non-linearly, because the difference between 4 and 8 matters and the difference between 88 and 96 does not.
Gotcha: a scale with too many steps is not a scale. If 4, 8, 12, 16, 20, and 24 are all legal you are still eyeballing it, just with extra ceremony. Keep it sparse, expose the steps as design tokens rather than raw numbers, and accept the one honest exception: optical nudges of 1px or 2px to fix things that measure right and look wrong.
Ask AI for it
Refactor this component's spacing onto a 4px-based scale (8-point steps with 4 and 12 as the two half-steps): define CSS custom properties --space-1 through --space-8 as 4, 8, 12, 16, 24, 32, 48, and 64px, then replace every hardcoded padding, margin, and gap with the nearest token. No arbitrary values, no odd numbers. Use the smaller steps inside components and the larger steps between sections, and list any place you had to break the scale with a one line reason.