🍋 Design Tools
Spacing Scale Generator
chars
words
sentences
lines
Spacing Scale Options
Results
Result
About Spacing Scale Generator
Generate consistent spacing systems for layouts. Choose from Tailwind, linear, Fibonacci, or power-of-2 scales with visual previews.
How It Works
Select a scale type and base unit. The generator outputs CSS custom properties, Tailwind v4 theme tokens, and an ASCII visual reference showing the relative size of each spacing value.
Frequently Asked Questions
Why use a spacing scale instead of arbitrary values?
A consistent spacing scale prevents visual inconsistency. When all spacing comes from the same scale, the UI feels cohesive and is easier to maintain.
What is the Tailwind spacing scale?
Tailwind uses a 4px base unit with non-linear steps: 0, 1, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 80, 96 (in 4px multiples).