Spacing Scale Generator

Try the Generator

Why Spacing Needs a System

Spacing is the least glamorous part of a design system and the fastest way to tell whether a product has one. Open a mature app and every gap between elements will be one of a small set of values: 4, 8, 12, 16, 24, 32, 48, and 64 pixels at the common 4px base. Open a young codebase and the gaps are a graveyard of intentions: 7px here, 11px there, 23px where someone nudged a layout by hand.

The difference matters for three reasons. Consistency: when every gap comes from the same ladder, screens built by different people still look like the same product. Speed: spacing tokens turn every layout decision into a lookup instead of a debate. Maintenance: when a brand wants breathing room or density, you change the base value and the whole product follows, instead of hunting down hundreds of hard-coded pixels.

How the Ladder Is Built

The generator multiplies your base unit by the sequence 1, 2, 3, 4, 6, 8, 12, 16. At a 4px base that yields the canonical set: 4 for the tightest gaps, 8 for standard separation, 12 and 16 for padding and cards, 24 and 32 for panels and sections, and 48 and 64 for the largest page-level spacing. The 3x and 6x steps fill the spaces the powers of two miss, because real layouts need intermediate sizes between 16 and 32.

The 8pt preset doubles the base to 8, producing 8, 16, 24, 32, 48, 64, 96, 128. Use it when the product has no need for gaps below 8px, which is common in dashboard-heavy tools with dense tables. The tool includes the 0.5 step, half the base, for the rare inset that needs less than one full unit without breaking the system.

Every token is named by its position rather than its pixel value. That is deliberate: a token called space-4 means the fourth step, so changing the base from 4 to 8 renames nothing and reflows everything. Components keep using space-2 and space-6 while the brand's density changes underneath them.

How to Use the Generator

1. Start with the 4pt preset, which matches most design systems and tools.
2. Confirm the base: products with dense UI usually keep 4px; spacious marketing sites can jump to 8px.
3. Watch the layout example rebuild as you change the base, so you feel the density shift before committing.
4. Copy the CSS export into your token file, or the Tailwind config if the project uses Tailwind.
5. Replace hard-coded gaps with tokens as you touch each component, and stop inventing new values from that point on.

Spacing Mistakes That Erode a System

The first mistake is treating the tokens as a suggestion. Designers hand off a mockup with a 22px gap, developers write 22px because the mockup said so, and the ladder quietly grows one rung at a time. Round to the nearest token at handoff, and flag the new value in review instead of shipping it.

The second is using negative margins and transform tricks to fight the layout engine. A component that needs to break the grid occasionally is fine; a component that needs to break it constantly is telling you the tokens are wrong for its context. Adjust the surrounding structure instead.

The third is mixing the spacing system with the type system instead of uniting them. If margins come from one ladder and line heights from another, vertical rhythm never settles. Run the vertical rhythm calculator beside this tool and let the type spacing and the layout spacing agree.

A fourth failure is skipping the audit. Systems do not stay clean on their own; every new screen and every rushed fix is a chance for a stray value to slip in. A monthly pass that greps the codebase for spacing values outside the token set takes minutes and catches the drift before it becomes the norm. The token set is the contract, and like any contract it needs occasional enforcement.

Where This Fits with the Other Tools

Spacing tokens are the frame that the type tokens hang on. The vertical rhythm calculator produces the spacing tied to line height, this tool produces the layout spacing, and the type scale calculator plus the hierarchy generator provide the sizes that fill the frame. The brand kit bundles everything into one export, and the typography playground is where the complete system gets exercised with real content.

FAQ

What is the 8pt grid system?

The 8pt system builds every spacing value from multiples of 8px. The idea is that components sized in multiples of 8 align across breakpoints, devices, and scaled layouts without fractional gaps. Many design systems use it with an underlying 4px unit so smaller details can still use 4px steps.

What is the difference between a 4pt and an 8pt scale?

The naming is about the smallest gap you allow. A 4pt scale includes 4px steps for tight UI details like icon offsets and compact buttons. An 8pt scale starts at 8px and suits layouts with larger components and fewer small gaps. Most systems ship the 4px base and use its even values everywhere, which this tool does by default.

Why do spacing values like 4, 8, 12, 16, 24 keep appearing?

That sequence is the 1, 2, 3, 4, 6, 8, 12, 16 multiplier ladder applied to a 4px base. It stays small near the bottom where UI details live and grows quickly at the top where page sections separate. The gaps between consecutive values look natural because the later steps double, matching how screens use space.

Should spacing tokens work with the type scale?

Yes. Line heights and margins are vertical spacing, and if they come from a different system than the padding and gaps, elements drift out of alignment. The vertical rhythm calculator produces spacing that matches your line height; this tool produces the layout spacing. Combine the two token sets in one stylesheet.

Can I use these tokens in Tailwind?

The export includes a ready-to-paste tailwind.config.js extension that maps spacing utilities like p-4 and gap-6 to your exact values. Tailwind's default scale is already similar, so the config mainly matters when your base is not 4px or you want a stricter set.

Is it bad to hard-code a few pixel values?

No. The rule is to never invent new values, not to never use values at all. A one-off 17px gap on a single screen creates drift because the next person rounds it to 16 or 18. Using the nearest token keeps the system whole even when a value feels slightly arbitrary.

How many spacing tokens should a design system have?

Ten or fewer for most products. The eight steps in this ladder plus the half step cover everything from a 2px divider offset to a 64px page gap. More tokens than that usually means the scale is being used as a menu of free choices instead of a system. If you catch yourself reaching for a value between steps, the layout is telling you it needs a different structure, not a finer scale.