Runs locally
Spacing Scale
A spacing ramp from a base and a ratio.
Ctrl+Enter runs. Ctrl+Shift+Backspace clears.
Export and import are available after you sign in. Sign in
A spacing ramp from a base and a ratio. Runs in the browser. Nothing is uploaded.
About this tool
Give a design system a predictable rhythm. Enter the base spacing, the ratio and the number of steps, and get a list of values to use as spacing tokens.
How to use it
- 01
Enter the base spacing in pixels.
- 02
Choose the ratio.
- 03
Set the number of steps and copy the values.
FAQ
Frequently asked questions
Why use a spacing scale?
A fixed set of values keeps layouts consistent and makes design and code reviews easier.
Can I use a ratio of 2?
Yes. A ratio of 2 gives a doubling scale such as 4, 8, 16 and 32.