Spacing Scale Generator

Generate a consistent spacing scale for your design system in seconds.

Loading tool...

About Spacing Scale Generator

A consistent spacing scale is the foundation of any design system. This tool generates tokens from a single base unit — the most common is 4px, which aligns with Material Design, Tailwind, and most UI frameworks. Each step multiplies the base by a fixed factor so the scale is perfectly proportional. Export the result as CSS custom properties (--spacing-md), Tailwind CSS spacing config, or SCSS variables and paste them straight into your project. Using a shared scale eliminates arbitrary magic numbers and makes spacing decisions instantly consistent across components and breakpoints.

Built and maintained by Meet Shah · Last updated 31 July 2026

What this tool is used for

Producing a spacing scale from a base unit rather than choosing values ad hoc.
Generating matching CSS custom properties and a Tailwind config.
Replacing arbitrary paddings with a consistent set of steps.
Producing T-shirt-sized tokens a team can talk about.
Getting a scale to review before adopting it.

Frequently Asked Questions

Why base a scale on 4 or 8 pixels?: Because both divide evenly at every common screen density — an 8px step is 16 device pixels at 2× and 24 at 3×, so nothing lands on a half pixel and blurs. It also makes spacing decisions finite: there are six choices, not sixty.
Should the steps be linear or geometric?: Mostly linear at the small end and increasingly spread at the large end, which is what a multiplier list like 0.5, 1, 2, 3, 4, 6, 8, 12, 16 gives. Purely geometric scales grow too fast to offer a usable gap between 24 and 32px.
Should I use rem or px?: rem for spacing that should grow when a reader increases their browser font size — which is most vertical rhythm — and px where a value must stay fixed, such as a hairline border. A rem-based scale is the accessible default.
Why name the steps rather than use numbers?: Because names survive a change of scale. If `space-4` means 16px and you rebase the system, every usage is now wrong; `space-md` still means "medium". The trade is that names are vaguer, which is why many teams use both.
How many steps does a system need?: Eight to twelve. Fewer forces awkward compromises in dense interfaces; more and nobody can tell 20px from 24px apart in review, so the scale stops being a constraint and becomes a menu.
Why base a spacing scale on 4 or 8 pixels?: Because it keeps every value on a shared grid, so components align without one-off adjustments. Eight is coarse enough to stay consistent and four gives the finer steps small components need.

Common errors and gotchas

Generating more steps than a team will use, which invites inconsistency rather than preventing it.
Naming steps by their pixel value, which makes the scale impossible to change later.
Choosing a base grid that does not match the type scale's line heights.
Applying the scale to type sizes as well, where a different ratio usually reads better.
Adopting a scale without migrating existing values, so both live side by side.