What is the difference between linear, geometric, modular, and Fibonacci scales?

Linear multiplies the base by each step (a 4px grid gives 4, 8, 12, 16…), so growth is constant. Geometric and modular both compound by a ratio — each step is the previous one times the ratio — so gaps accelerate; "modular" is just the typographic name for the same maths (a major third is ×1.25, the golden ratio ×1.618). Fibonacci multiplies the base by the Fibonacci sequence (1, 2, 3, 5, 8, 13…) for an organically accelerating rhythm that grows faster than linear but more gently than a steep ratio.

When does the ratio field appear, and what values make sense?

The ratio control only shows for Geometric and Modular scales, since linear and Fibonacci derive their growth from the step index instead. Useful values come from typographic scales: 1.125 (major second), 1.2 (minor third), 1.25 (major third), 1.333 (perfect fourth), 1.5 (perfect fifth), and 1.618 (golden ratio). Lower ratios give a tight, subtle scale; higher ratios spread out fast, so you usually want fewer steps.

How are px and rem values calculated?

Each step is computed in px from your base unit and the progression, then converted to rem by dividing by the root size you set (16px by default). Choosing rem as the output unit emits rem values while the ruler still shows the px equivalent, so you keep the accessibility benefits of rem without losing the concrete pixel reference. The zero step is always output as plain 0.

What does the audit check for?

It flags three common foot-guns: steps that resolve to fractional pixels (which can blur on standard-density displays), a largest step that has grown unusually big (a sign your ratio or step count is too aggressive), and a ratio of 1 or below that would produce a flat or shrinking scale. It also notes when the base unit is unusually small. The warnings are advisory — the scale still generates so you can decide.

What do the export formats produce, and what are the utility classes?

CSS variables emit a :root block of --space-* custom properties; Tailwind v4 produces an @theme block of --spacing-* tokens; Tailwind v3 gives a module.exports config under theme.extend.spacing; SCSS emits a $spacing map; and JSON gives a token document with px and rem for each step. When you enable utility classes (CSS and SCSS only), the export also generates margin (m, mt, mr, mb, ml, mx, my), padding, and gap (gap, gap-x, gap-y) classes for every token.

Can I save or share an exact scale?

Yes. The base unit, scale type, step count, ratio, unit, root size, naming scheme, utility-class toggle, and selected export format are all encoded into the page URL as you work, and the output panel exposes a share link. Bookmark or send that URL and the identical scale regenerates when it loads.

Spacing Scale Calculator

Generate a coherent spacing system from one base unit — linear, geometric, modular, or Fibonacci — with numeric or t-shirt names and px/rem values per step. A live visual ruler and an applied-layout demo show the rhythm as you edit, an audit flags fractional-pixel and runaway steps, and you can export to CSS variables, Tailwind v4 @theme, Tailwind v3 config, SCSS, or JSON — with optional margin/padding/gap utilities.

About this ToolHow it works, benefits & use cases

Most spacing tools spit out a flat list of numbers. This one builds a real spacing system you can see and feel before you ship it. Pick a base unit and a progression — linear (multiply the base by each step), geometric or modular (compound by a ratio, the same maths typographers use for type scales), or Fibonacci (1, 2, 3, 5, 8…) — and choose numeric or t-shirt (xs, sm, md, lg…) token names. A live visual ruler renders every step proportionally, and an applied-layout demo wires the same tokens into real card padding and gaps so you can judge the vertical rhythm, not just read pixel values. A built-in audit flags fractional-pixel steps that blur on 1× displays and runaway top-end sizes. Every step is computed in both px and rem (normalised against a root size you set), and you can export to CSS custom properties, Tailwind v4 @theme, a Tailwind v3 config, an SCSS map, or JSON — optionally bundling margin, padding, and gap utility classes. The whole configuration lives in a shareable URL.

How to Use

1Start from a preset (Tailwind 4px, Material 8px, Golden ratio, Major third, or Fibonacci) or set the base unit yourself.
2Choose a scale type — Linear, Geometric, Modular, or Fibonacci — and set the number of steps.
3For Geometric or Modular scales, set the ratio that compounds each step (e.g. 1.5, 1.618, 1.25).
4Pick your unit (rem or px) and root size for rem conversion, and a numeric or t-shirt naming scheme.
5Watch the visual ruler and applied-layout demo update live, and check the audit for fractional-pixel or oversized warnings.
6Choose an export format, optionally enable utility classes, then copy, download, or share the generated code.

Key Benefits

Four progression models: linear, geometric, modular (type-scale) ratios, and Fibonacci
Numeric or t-shirt token naming, with px and rem computed per step
Live visual ruler plus an applied-layout demo that shows real padding and gaps
Audit warns about fractional pixels, runaway top-end steps, and bad ratios
Five export formats: CSS variables, Tailwind v4 @theme, Tailwind v3 config, SCSS map, and JSON
Optional margin / padding / gap utility-class generation for CSS and SCSS
Adjustable root size for accurate rem conversion, and a shareable URL for handoff

Common Use Cases

Defining a 4px or 8px spacing foundation for a new component library
Generating Tailwind v4 @theme spacing tokens or a v3 config that matches an existing design
Producing CSS margin/padding/gap utilities without hand-writing dozens of classes
Comparing geometric, modular, and Fibonacci rhythms visually before standardising
Exporting a JSON token file with px and rem values for a design-token pipeline
Sharing an exact spacing spec with a teammate via a single link

Visual ruler

0.25rem · 4px

0.375rem · 6px

0.5625rem · 9px

0.8438rem · 13.5px

1.2656rem · 20.25px

1.8988rem · 30.38px

2.8475rem · 45.56px

4.2713rem · 68.34px

6.4075rem · 102.52px

Applied to a layout

PricingNew

Spacing derived from your scale drives this card's padding and gaps.

TagTagTag

6 steps resolve to fractional pixels (e.g. 4 = 13.5px), which can blur on 1× displays.

Generated code

CSS variables — updates live

:root {
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.375rem;
  --space-3: 0.5625rem;
  --space-4: 0.8438rem;
  --space-5: 1.2656rem;
  --space-6: 1.8988rem;
  --space-7: 2.8475rem;
  --space-8: 4.2713rem;
  --space-9: 6.4075rem;
}

Start from a preset

Scale

Base unit

Steps

Ratio

Scale type

Units & naming

Unit

Root size

Token naming

Export format

Emit margin / padding / gap utility classes

Applies to the CSS variables and SCSS map exports.

Pick a progression, not a pile of numbers

A spacing scale grows your base unit by a predictable rule. Linear multiplies the base by each step (a 4px grid: 4, 8, 12…). Geometric and modular compound by a ratio so gaps accelerate — the same maths typographers use for type scales. Fibonacci follows 1, 2, 3, 5, 8… for an organic rhythm.

Why the ruler and the demo

Numbers in a table hide whether a scale actually feels right. The ruler shows each step proportionally, and the applied-layout demo wires the same tokens into real gaps and padding so you see the vertical rhythm before you commit — then export the exact set you previewed.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on

Spacing Scale Calculator

How to Use

Key Benefits

Common Use Cases

Start from a preset

Scale

Units & naming

Export format

Pick a progression, not a pile of numbers

Why the ruler and the demo

Was this tool helpful?

Share Your Experience

Related tools

Frequently Asked Questions - Spacing Scale Calculator