Design tool
Spacing Scale Generator
Create reusable CSS spacing tokens with a predictable rhythm.
Spacing tokens
4px · 8px · 16px · 32px · 64px · 128px
How the spacing scale generator works
Generate a consistent geometric spacing scale from a base size and ratio.
A 4 px base with ratio 2 creates 4, 8, 16, 32, and 64 px steps.
Assumptions and limitations
A geometric scale is a design aid, not a requirement; round values if your layout benefits from simpler tokens.
Inputs and results stay in your browser. Blank, invalid, or mathematically undefined inputs show a clean placeholder instead of a broken number.
Practical use
Use this design tool to explore scenarios quickly, then verify important decisions against the original source data or requirements.
Frequently asked questions
Does the spacing scale generator send my data anywhere?
No. It runs client-side in your browser and makes no network requests.
Why is the result blank or shown as a dash?
One or more inputs are blank, outside the accepted range, or would make the calculation undefined. Check the labels and enter finite values.
Can I use decimal values?
Yes, where decimals are meaningful. Counts that represent whole items may require integers.