Free Design Calculators
Spacing Scale Generator
Generate a proportional spacing system and copy it as CSS custom properties.
What this tool does
Create a repeatable rhythm from one base value.
The generator compounds a base spacing value by a chosen ratio for a defined number of steps.
It visualizes the relative progression and exports the result as numbered CSS custom properties.
Use the tool
Generate a spacing scale
Set a base, ratio, and number of steps, then copy the resulting tokens.
Build a consistent spacing scale
Spacing tokens
space-14pxspace-28pxspace-316pxspace-432pxspace-564pxspace-6128pxspace-7256pxspace-8512pxHow to use it
Three quick steps
- 1Choose the smallest reusable spacing value.
- 2Set a ratio and step count.
- 3Copy the CSS variables and test whether the scale supports real component needs.
Worked example
Create a compact doubling scale
Start at 4px with a ratio of 2.
FAQ
Questions about the spacing scale generator
Practical details about using the tool and understanding its result.
Keep working
Related tools
Column and Gutter Calculator
Calculate column width from canvas size, column count, gutters, and outer margins.
Open toolType Scale Calculator
Generate a modular typography scale in pixels and rems from a base size and ratio.
Open toolGolden Ratio Calculator
Create larger and smaller proportional companions from any positive measurement.
Open toolFrom one asset to the whole workflow
Carry a consistent spacing rhythm through every approved interface.
Draftroom keeps projects, creative files, feedback, revisions, and approvals connected in one workspace.