Spacing Scale
Build a linear or modular scale and export it as variables.
About Spacing Scale
Spacing Scale generates a consistent set of spacing values as CSS variables, either linear (4, 8, 12, 16…) or modular, where each step multiplies the last by a ratio. Using a scale rather than arbitrary numbers is what makes a design feel deliberate — the eye notices when padding is 14px in one place and 16px in another, even if it cannot say why.
How to use it
- Choose linear or modular, and set the base value.
- For modular, pick a ratio — 1.25 or 1.333 are safe choices.
- Copy the CSS variables.
Questions
Linear or modular?
Linear for layout spacing — padding, gaps, margins — because predictable multiples of 4 or 8 are easier to reason about. Modular for type sizes, where each step should feel proportionally larger.
Why base everything on 4 or 8?
It keeps values divisible at common screen densities and gives enough steps without being fiddly. An 8-point grid is the most widely used convention in interface design.
How do these work with Tailwind?
Drop the variables into a Tailwind v4 @theme block and they become spacing utilities automatically.
Spacing Scale is free and runs entirely in your browser. No account, no upload, no watermark, no limit on use.