Tool
Spacing Scale Generator
Generate consistent spacing scales for design systems.
Design Tools
What this tool does
Build a simple px spacing scale from a base increment and step count.
How to use
- Enter base spacing increment in px.
- Set number of steps.
- Copy the generated scale values.
Examples
4px base, 8 steps
Input: base=4, steps=8
Output: 4, 8, 12, 16, 20, 24, 28, 32 px
Common 4px grid system spacing.
Common use cases
- Define design token spacing
- Create Tailwind-style scales
- Standardize layout margins and padding
FAQ
Can I use rem instead?
Output is in px; convert with rem-to-px using your root font size.
Is this a geometric scale?
Linear increment from base × step number.
How many steps should I use?
8–12 steps cover most UI spacing needs.
Related tools
Last reviewed: 2026-05-23