Free Spacing Scale Generator — Build a Modular Spacing System

A spacing scale is the small set of spacing values a design system allows — the only margins, paddings, and gaps a component is permitted to use. Instead of picking arbitrary numbers like 13px here and 27px there, you choose from a deliberate sequence such as 4, 8, 12, 16, 24, 32, 48. That constraint is what makes an interface feel coherent: when every gap is a step on the same scale, rhythm and alignment fall into place automatically, and the design reads as intentional rather than improvised. This tool generates that sequence from two inputs — a base size and a ratio — and outputs it as design tokens you can drop into your system.

The base size anchors the scale; 4px or 8px are the common choices, because they divide cleanly and align with the pixel grids and density guidelines used across web and mobile platforms. The ratio determines how the steps grow. A linear step (adding the base each time) produces an even, predictable scale ideal for dense, data-heavy UIs. A geometric ratio — multiplying by a constant like 1.5 or the golden ratio — produces a scale that grows faster at the top, which suits expressive, editorial layouts where large spaces should feel distinctly larger. Generating both from the same controls lets you compare and pick the rhythm that fits the product.

The real payoff is tokens. Exporting the scale as named design tokens — rather than loose pixel values scattered through stylesheets — gives you a single source of truth that every component references. Change the base or the ratio in one place and the whole interface re-spaces consistently. Tokens also translate cleanly into the systems teams actually use: CSS custom properties, a Tailwind spacing config, a theme object in a component library, or a shared tokens file consumed by both design and engineering. That shared vocabulary is what keeps a design and its implementation from drifting apart.

A consistent spacing scale pays dividends well past the first build. It makes components composable, because a card, a form, and a modal all speak the same spacing language and nest predictably. It speeds up review, because "use the next step up" is a clearer instruction than "add about six more pixels." And it improves accessibility and responsiveness, since a disciplined scale gives you sensible, proportional values to swap between breakpoints instead of hand-tuning magic numbers at every screen size.

Because the generator runs entirely in the browser, there is nothing to upload and no account to create — you set a base and a ratio, see the scale and its tokens immediately, and copy them into your stylesheet, config, or design file. It pairs with the other design tooling on this site, from gradient and colour tools to the type-scale thinking that governs the same system, so the spacing rhythm and the visual style stay in step.