Spacing Token Scale Generator
Generate spacing design tokens (linear or modular) as CSS custom properties, a Tailwind spacing object and an SCSS map.
About this tool
The Spacing Token Scale Generator turns a base unit into a complete, consistent set of spacing tokens for margins, padding and gaps. It is for designers and developers building a design system who want a single source of truth for spacing. Choose linear or modular mode, the base, number of steps, output unit and root size, then copy the CSS variables, Tailwind config or SCSS map straight into your project.
Frequently asked questions
What is the difference between linear and modular spacing?
Linear spacing multiplies the base by the step number (base × n), giving an even progression like 4, 8, 12, 16. Modular spacing multiplies by a ratio raised to the step (base × ratio^(n-1)), giving a geometric progression like 4, 8, 16, 32.
What base value should I use?
A 4px base is the most common because it divides evenly into typical 8px and 16px grids. Set base=8 for a coarser scale or base=2 for very fine control.
Which formats does it output?
It outputs a readable table plus three copy-ready formats: CSS custom properties (--space-N), a Tailwind theme.spacing object, and an SCSS map ($spacing: (...)).