Design Spacing Scale Calculator
Set a base spacing unit, scale ratio, starting step, and number of steps to create a clear token ladder for your interface.
Set values to generate a spacing scale.
Spacing tokens
Rounded from base × ratio^step.
A QUICK WALKTHROUGH
How to use this tool
- Enter a positive base unit, choose px or rem, and set a ratio greater than 1.
- Choose the starting step and number of tokens.
- Review the rounded values, then copy or download the CSS custom properties.
Geometric token ladder
Each raw token is base × ratio^step. A starting step of 0 includes the base value; higher steps grow by the selected ratio and lower starting steps can create smaller tokens.
Transparent rounding
Pixel output rounds each value to the nearest whole pixel. Rem output keeps up to four decimal places. The raw formula is shown in the CSS comment so the generated scale remains easy to audit.
Local CSS output
All calculations happen in this browser. The page does not upload design values or inspect your project files.
GOOD TO KNOW
Common questions
Why are pixel values rounded?
Whole pixels are easier to use in many interface token sets. The preview and CSS comment show that values are rounded from the geometric formula.
What does the starting step change?
Step 0 is the base. Starting at 1 begins with base × ratio, while a negative step creates smaller values.
Does this choose a best design system?
No. It creates a predictable mathematical scale. Choose the ratio, number of steps, and naming conventions that fit your product.