Build a spacing scale for layouts

Space out your layouts consistently.

Enter a base unit, ratio, and number of steps to generate a spacing scale in px, rem, em, and Tailwind spacing units. Copy the result as CSS custom properties or JSON.

Base unit (px)RatioSteps

Spacing scale

Token	px	rem	em	Tailwind
1	4	0.25	1	1
2	8	0.5	2	2
3	16	1	4	4
4	32	2	8	8
5	64	4	16	16
6	128	8	32	32
7	256	16	64	64
8	512	32	128	128

A spacing scale for margins, padding and gaps

Inconsistent spacing is one of the quickest ways to make an interface look unpolished: 13 pixels here, 15 there, 22 somewhere else. A spacing scale replaces those one-off numbers with a short list of steps, so every gap in the design comes from the same family.

Choose a base unit and a ratio, and this generator builds the scale with pixel, rem, em and Tailwind values, and exports it as CSS custom properties or JSON design tokens.

How to use it

Set the base unit, usually 4 or 8 pixels.
Choose a ratio: 2 doubles each step, 1.5 grows more gently.
Set the number of steps.
Copy the scale as CSS variables or JSON tokens and use only those values for spacing.

Example: base 4 px, doubling

Input

Base 4, ratio 2, 5 steps

Output

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 32px;
  --space-5: 64px;
}

Doubling gives big jumps, which keeps choices clear: 8 for tight gaps inside a component, 16 between related items, 32 or 64 between sections.

Why a 4 or 8 pixel base

Common screen sizes and densities divide evenly by 4 and 8, so elements land on whole pixels and stay crisp on any device. Many design systems, including Google's Material Design, build on an 8-pixel grid with a 4-pixel half step for small details such as icon padding. Tailwind CSS counts its spacing in 4-pixel units, which is why the table shows a Tailwind column: a value of 4 there means p-4, or 16 pixels.

Spacing shows relationships

Space is how a layout tells readers what belongs together. Items in a group sit close; separate groups get more room. A heading should be closer to the paragraph it introduces than to the one before it. With a scale, this becomes a simple rule: one step for inside a component, larger steps for between components and sections.

Using the tokens

Add the CSS variables to :root and write padding: var(--space-3) instead of 16px, so a later change to the scale updates the whole site. The JSON export fits design-token pipelines such as Style Dictionary and design tools that import tokens, keeping design files and code in agreement.

Questions

Linear or geometric steps?

A ratio of 2 or 1.5 gives geometric steps that grow faster at the large end, which suits layout spacing. Some systems use a linear 4-pixel step for the small values and geometric steps above that.

Should spacing be in rem?

Using rem lets spacing grow when readers enlarge text, which keeps layouts proportional. Pixels are fine for hairline details such as borders.

Is anything uploaded?

No. The scale is calculated in your browser.