Spacing Scale Generator

In short A spacing scale is a fixed set of allowed gaps — typically built from a 4px or 8px base — and its value is not that the numbers are correct but that there are only eight of them. Most inconsistent-looking interfaces are inconsistent in their spacing rather than their colour or type: a 12px gap here, 14px there and 15px somewhere else, none of them wrong and none of them the same. Restricting yourself to a scale makes that impossible by construction. Four is the usual base because it divides cleanly into the 8px rhythm most design systems use while still allowing a genuinely tight 4px gap for things like the space between an icon and its label. A doubling scale — 4, 8, 16, 32, 64 — gives large obvious jumps and few options, which is easy to apply and sometimes too coarse in the middle. A linear one gives finer control and more decisions. The output belongs in CSS custom properties or a Tailwind config rather than typed into rules, because the whole benefit disappears the moment someone writes `margin: 13px`. Consistency here beats correctness: a scale everyone actually uses is worth more than a better scale nobody follows.