Spacing Scale Generator

How to use it

1. Pick a base unit. 8px is the safe default; 4px gives finer control.
2. Choose linear for product UI or modular for editorial layouts with bigger jumps.
3. Set how many steps you need. Most systems ship 6 to 9.
4. Copy the CSS variables and reference var(--space-3) instead of raw numbers everywhere.

Why snap spacing to a scale

Inconsistent spacing is the fastest way to make a polished interface feel amateur, and it usually happens one arbitrary 13px margin at a time. A scale removes the guesswork: there is no 13px, only step 3 or step 4, so every gap on every screen agrees with the next. That is what makes a design system feel like one product rather than fifty pages built by fifty moods. Wire the tokens into your components once and spacing stops being a decision you relitigate on every card.

A real scale, walked through end to end

Here's a scale I actually shipped, on a billing settings screen for a subscription product. Base unit 8px, linear, eight steps. That gives 8, 16, 24, 32, 40, 48, 56, 64. Before the scale existed the page used 6px, 10px, 14px, 18px, 20px, 30px and a lonely 44px that nobody could explain, because it had been nudged by hand in three separate pull requests over about five months.

The mapping went like this. Inside a form field, the gap between the label and the input became step 1, so 8px. The gap between two stacked fields became step 2, 16px. The padding inside the card that wrapped the form became step 3, 24px. The gap between the card and the next card became step 4, 32px. Section-to-section vertical rhythm on the page took step 6, 48px, and the top padding under the page header took step 8, 64px. Six values covered every single measurement on a screen that previously used eleven.

Notice the pattern that fell out of it. Related things sit one or two steps apart. Unrelated things sit four or more steps apart. That gap ratio is what your eye actually reads as grouping, and it does more work for perceived quality than any border or shadow you could add. When the redesign shipped, the visual difference was obvious even though not a single color, font, or corner radius had changed.

One detail worth stealing: I never used step 5 or step 7 anywhere. That's fine. A scale is a menu, not a checklist. If half your steps go unused on most screens, the scale is probably the right length and your team is being disciplined.

Mistakes I keep seeing, and how to catch them

The most common one is treating the scale as a suggestion. Someone needs a card to line up with a sidebar, so they write 22px, ship it, and now the scale has a hole in it. Catch this with a lint rule or a simple grep for hard-coded px values in your styles. If you can't run a linter, scan a rendered page with your browser's element inspector and look at the computed padding numbers. Anything that isn't a scale value is a bug.

The second mistake is stacking margins to fake a step that doesn't exist. A 16px margin plus a 8px padding is not step 3. It looks like 24px right up until one of the two elements changes, and then it silently drifts. Pick one owner for each gap. My rule is that containers own the space inside them and layout owns the space between them, which usually means gap on a flex or grid parent rather than margins on children.

Third: too many steps. I've inherited systems with sixteen spacing tokens where steps 9 through 16 were used a combined four times. That isn't a scale, that's a permission slip. Six to nine steps is the range where people can hold the whole set in their head, and holding it in your head is the entire point.

Fourth, and this one's subtle: optical spacing around type. A 16px gap under a heading with 1.1 line height does not read the same as a 16px gap under body copy at 1.6 line height, because the line box already carries leading above and below the glyphs. If a heading looks too far from its paragraph, drop a step rather than inventing 13px.

Where the default advice stops working

Linear scales get uncomfortable at the top end. Step 8 to step 9 on an 8px base is 64px to 72px, a 12 percent jump that your eye can barely register, so the last few steps stop feeling distinct. That's exactly the case for switching to modular, or for running a hybrid: linear from 4px to 48px for component internals, then a handful of bigger hand-picked section values like 96px and 144px for page-level rhythm. Purists hate the hybrid. I use it constantly and I've never regretted it.

Dense data tables are the other place the rules bend. Row padding of 8px vertical is already generous in a spreadsheet-style grid, and half your scale is simply too big to appear anywhere. If your product is mostly tables, build on a 4px base and expose 4, 8, 12, 16, 24, 32 instead.

Touch targets are not spacing, and confusing the two causes real bugs. A 44px minimum tap target is a sizing constraint from platform guidelines, not a step you reach by adding padding until it fits. Set the target size explicitly, then let padding come from the scale inside it.

Getting the tokens into a real workflow

Copy the CSS variables into a single tokens file that nothing else writes to. That file is the source of truth, and everything downstream derives from it rather than restating it. In Tailwind, extend the spacing theme key so the generated utilities point at your variables instead of the framework defaults, which means a stray class name can't smuggle in an off-scale value. In Figma, create a variable collection with the same token names, then use them in auto-layout gap and padding fields, because matching names are what make a design review conversation short.

For handoff, the thing engineers want is the name, not the number. If your spec says 24px, someone will type 24px. If it says space-3, they reach for the token, and the next theme change carries automatically. Ship the token names in your redlines and stop shipping raw pixels.

Common questions

What is a spacing scale?

A spacing scale is a fixed set of spacing values, usually built from one base unit, that you use for every margin, padding, and gap in a design system. Instead of picking arbitrary numbers like 13px or 27px, you snap to the scale, so spacing stays consistent across the whole interface.

Should I use a 4px or 8px base?

An 8px base is the most common because it divides cleanly on most screens and keeps the scale short. A 4px base gives you finer control for tight components. Many teams use 4px as the base unit but only expose the even multiples (4, 8, 16, 24) as tokens.

Linear or modular spacing?

Linear (multiples of the base) is predictable and works for most product UI. A modular scale (each step multiplied by a ratio) grows faster and suits editorial layouts where you want dramatic jumps between small and large spacing. This tool does both.

Is it free and private?

Yes. No sign-up, no email, no watermark. Everything runs in your browser, so nothing you enter is uploaded. Copy the CSS variables straight into your stylesheet.

How many spacing steps should a design system ship?

Six to nine. That is the range a team can hold in memory, which is the whole point of a scale. Systems with fourteen or more tokens usually have a long tail that gets used two or three times, and every unused step is one more decision someone has to make on every component.

Should spacing tokens use px or rem?

Ship rem for anything that should scale with the user font size, such as padding around text and vertical rhythm between blocks. Keep px for values tied to physical layout like hairline borders and fixed icon gutters. This tool prints both, so you can pick per token rather than committing the whole scale one way.

What do I do when a design needs a value between two steps?

Round to the nearest step first and look at it in context. Nine times out of ten the difference is invisible and the design is fine. If it genuinely reads wrong, the cause is usually optical, most often line height above or below text, and the fix is choosing a different step rather than adding a new one.

Can I use the same spacing scale for mobile and desktop?

The token names stay the same, but the mapping changes. A section gap that is step 6 on desktop is often step 4 on a phone. Keep one scale, then swap which step each layout slot uses at your breakpoints, so you are not maintaining two parallel sets of numbers.

Spacing tokens live next to color and type in a real system. See how they fit together in the step-by-step design system guide, then set your type rhythm with the type scale calculator.