Designers
ToolsDocsProAll the Possibles

All 141 tools / Layout, grids and spacing

Detect the spacing base unit in a stylesheet, list off-grid values and propose a cleaner scale

Spacing auditFreeFor designers and developers

15/day

free runs a day, no sign-in.

Before: what you give it

The example input, as typed in. You paste text, CSS, markup or notes.

:root {
  --ink: #1a1a1a;
  --paper: #fafaf7;
  --accent: #e4572e;
  --accent-hover: var(--accent);
  --space-2: 8px;
  --radius: 6px;
  --font-body: "Source Serif 4", Georgia, serif;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}
@media (prefers-color-scheme: dark) { :root { --ink: #f2f2ee; --paper: #141414; } }
body { font: 400 17px/1.55 var(--font-body); color: var(--ink); background: var(--paper); }
h1 { font-size: 48px; line-height: 1.05; margin: 0 0 24px; }
h2 { font-size: 30px; margin: 32px 0 12px; }
small { font-size: 13px; }
...

After: what comes back

The first lines of a real run on that input. Nothing here is edited by hand.

# Spacing audit

10 distinct values across margin 4, padding 6; 3 zero values skipped.

## Findings

- medium: No base unit: only 60% of uses sit on the best-fitting grid. Fix: Choose 4px or 8px and snap values to multiples of it.
- low: 4 off-grid values (9px, 10px, 15px, 18px).

## Scale

10 distinct values; no clean base unit (best fit 60% on a 4px multiple).

Near-duplicates (within 1px):
... full output on the tool page

What you get

Base unit, distinct count against a budget, off-grid values, gaps, and an old-to-new table

What it cannot do

Percent, vw, calc() and clamp() values are counted as fluid and left out of the grid fit.

Who it is for

  • Designers
  • Developers

Free and Pro

Free15 runs a day per IP address, up to 100,000 characters a run.
ProNo daily limit, 300 requests a minute, up to 200,000 characters a run.

What each plan includes

Use it from your assistant

The tool is called audit_spacing. Connect the server once, then ask for it by name or just describe the job. Install steps for each app.

claude mcp add --transport http designers https://designers.allthepossibles.com/mcp
curl -X POST https://designers.allthepossibles.com/api/spacing-audit -H 'content-type: application/json' -d '{"css":":root {\n  --ink: #1a1a1a;\n  --paper: #fafaf7;\n  --accent: #e4572e;\n  --accent-hover: var(--accent);\n  --space-2: 8px;\n  --radius: 6px;\n  --font-body: \"Source Serif 4\", Georgia, serif;\n  --ease: cubic-bezier(0.2, 0, 0, 1);\n}\n@media (prefers-color-scheme: dark) { :root { --ink: #f2f2ee; --paper: #141414; } }\nbody { font: 400 17px/1.55 var(--font-body); color: var(--ink); background: var(--paper); }\nh1 { font-size: 48px; line-height: 1.05; margin: 0 0 24px; }\nh2 { font-size: 30px; margin: 32px 0 12px; }\nsmall { font-size: 13px; }\n.btn { padding: 10px 18px; border-radius: var(--radius); background: var(--accent); color: #fff; border: 0; outline: none; transition: background 180ms var(--ease); }\n.btn:hover { background: #c9441f; }\n.button-secondary { padding: 9px 16px; border-radius: 4px; border: 1px solid #1a1a1a; background: transparent; }\n.card { padding: 20px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.12); margin-bottom: 15px; }\na { color: var(--accent); }\na:hover { text-decoration: underline; }\n@media (min-width: 768px) { .card { padding: 28px; } }"}'

Try it here

The form starts with the same example input, so you can run it first and then swap in your own.

More in layout, grids and spacing

All layout, grids and spacing tools