All 141 tools / Layout, grids and spacing
Generate a set of spacing tokens from a base unit, as a linear ladder, a modular scale or your own steps
Spacing scaleFreeFor designers and developers
25/day
free runs a day, no sign-in.
Before: what you give it
The example input, as typed in. You type in numbers or values.
base: 8 ratio: 1.5 count: 8
After: what comes back
The first lines of a real run on that input. Nothing here is edited by hand.
Spacing scale (modular), base 8px, 8 tokens --space-1: 8px (0.5rem). Inside a component: between an input and its label, chip padding, list item inner gaps. --space-2: 12px (0.75rem). Component padding: buttons, cards, table cells, gaps between related controls. FLAG: 12px is not a multiple of 8px (nearest multiple: 16px, off by 4px) --space-3: 18px (1.125rem). Between sibling components: card to card, form field to form field. FLAG: 18px is not a multiple of 8px (nearest multiple: 16px, off by 2px) --space-4: 27px (1.688rem). Between sibling components: card to card, form field to form field. FLAG: 27px is not a multiple of 8px (nearest multiple: 24px, off by 3px) --space-5: 40.5px (2.531rem). Between groups inside a section: heading to its content, toolbar to canvas. FLAG: 40.5px is not a multiple of 8px (nearest multiple: 40px, off by 0.5px); 40.5px is a fractional pixel and will blur borders on 1x screens --space-6: 60.75px (3.797rem). Between sections on a page, and page gutters on larger screens. FLAG: 60.75px is not a multiple of 8px (nearest multiple: 64px, off by 3.25px); 60.75px is a fractional pixel and will blur borders on 1x screens ... full output on the tool page
What you get
Tokens with px, rem and a usage line, off-grid flags, and CSS custom properties in rem and px
What it cannot do
Up to 18 tokens linear and 24 modular; the 4 or 8 point unit itself is a convention.
Who it is for
- Designers
- Developers
Free and Pro
| Free | 25 runs a day per IP address. |
|---|---|
| Pro | No daily limit, 300 requests a minute. |
Use it from your assistant
The tool is called build_spacing_scale. 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/mcpcurl -X POST https://designers.allthepossibles.com/api/spacing-scale -H 'content-type: application/json' -d '{"base":8,"ratio":1.5,"count":8}'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
- Grid builder
Build a column or modular grid from a page width, with every span width, CSS and Figma layout settings
- Proportion calculator
Work out the missing side of a golden, root-2 or custom ratio and split a container at that ratio
- Breakpoint planner
Plan responsive breakpoints from the widths where your layout breaks, with ready CSS and fluid clamp() rules
- Proximity and alignment check
Find near-miss alignments, uneven gaps and orphaned boxes in a layout from box coordinates or markup
- Spacing audit
Detect the spacing base unit in a stylesheet, list off-grid values and propose a cleaner scale
- Navigation depth
Analyse a navigation tree for depth, breadth, one-child branches, naming collisions and orphan pages