FREE TOOL · NO AI · DESIGN TOKENS
Spacing Scale Generator
Enter a base unit. Get a complete spacing scale exported as CSS custom properties, Tailwind spacing config, or Figma-ready values.
Spacing Scale Generator
Consistent spacing tokens in seconds.
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-9: 36px;
--space-10: 40px;
--space-11: 44px;
--space-12: 48px;
}What you get
Full spacing scale
Token names, px values, and rem values for every step in your scale.
CSS custom properties
`--space-1`, `--space-2`, `--space-4`… ready to paste into your `:root`.
Tailwind + Figma export
Drop-in `spacing` config for Tailwind or comma-separated px list for Figma.
How it works
Set your base unit
Default 4px (the standard 4px grid). Any value works.
Choose scale type
Linear (4, 8, 12, 16…) or exponential (4, 6, 9, 13.5…).
Export tokens
CSS custom properties, Tailwind `spacing` config, or Figma values. One click to copy.
Why use this
Consistent spacing builds trust
Arbitrary spacing creates visual noise. A scale makes every layout decision faster and more consistent.
One source of truth
Generate once, reference everywhere. Change the base unit and the whole system updates.