How to use the Spacing Scale Generator
- 1. Set the baseUsually 4 or 8 px.
- 2. Choose the patternLinear multiples, Fibonacci-like growth, or a geometric ratio.
- 3. Copy the outputCSS variables and a Tailwind spacing block.
Worked example
An 8 px base with the linear pattern and 10 steps gives 8, 16, 24, 32, 48, 64, 96, 128, 160, 192 px. The first four steps go up by one base unit, the next two by two units and the rest by four, so small steps stay fine-grained for padding inside buttons while large steps jump enough to separate page sections. With T-shirt names they become 3xs to 6xl, and in rem the first is 0.5rem.
Fibonacci-like growth from 8 px gives 4, 8, 16, 24, 40, 64, 104 and so on, adding the previous two steps. A geometric scale multiplies each step by your ratio.
Using a spacing scale well
- Use only scale values for padding, margin and gap; it is the consistency that makes layouts feel calm.
- Smaller inside, larger outside: space inside a component is usually less than space between components.
- Multiples of 4 line up with most icon sizes and avoid half-pixel blur on some screens; the tool notes values that are not.
- Name by role later if you like, such as space-section, built on these raw steps.
The bar chart shows each step's size relative to the largest so you can see the rhythm at a glance. Combine the scale with sizes from the type scale generator and store both with the design tokens JSON generator.
Frequently asked questions
4 px or 8 px base?
8 px is common for marketing sites and roomy apps; 4 px gives finer control for dense interfaces. Many systems use 4 px with most values landing on multiples of 8.
Can I use this with Tailwind?
Yes. Paste the spacing block into your theme; in Tailwind v4 you can also set a single --spacing base variable.
Is the Spacing Scale Generator free?
Yes, the Spacing Scale Generator is free. The first time you generate your first scale, you are asked for your name and WhatsApp number once. After that, this and every other Uncodemy tool opens straight away without the form.