Generate a consistent spacing scale (4px, 8px, 12px...) using a base unit and ratio for design systems.
A design system holds together only if every margin, padding, and gap comes from one small set of numbers. This tool produces that set: enter a base unit and a ratio, and it returns a ladder of spacing values, each step multiplying the previous one by the ratio, the same modular-scale idea typographers use, applied to space. The output is meant to be copied into design tokens (CSS custom properties, Sass variables, a JSON token file) so every component draws on the same scale. The usual surprise: a ratio of 2 doubles each step (4, 8, 16, 32); it does not add the base (4, 8, 12).
A concrete input and expected output from the current implementation.
Input
base: 4, ratio: 2, steps: 6
Expected output
4px, 8px, 16px, 32px, 64px, 128px
Each value multiplies the previous one by the ratio: 4 × 2 = 8, 8 × 2 = 16, and so on through six steps. The base is the first step, and the scale is geometric, so gaps between consecutive values widen as the scale grows.
The base anchors the scale: the first value equals the base itself, and every later value is the base multiplied by the ratio raised to the step number. A ratio of 2 doubles each step (4, 8, 16, 32); ratios near 1.25 or 1.5 keep steps close together, the way type scales stay close. Raising the ratio spreads the ladder outward; lowering it packs it tighter.
The values come out with px units and as a plain numbered list, sized for copying into CSS custom properties, a Sass map, or a JSON design-token file. Because every value derives from two inputs, changing the base or the ratio regenerates the whole scale, so updating a design system's spacing is a two-number change rather than a hunt through every component.
It depends on the job. A ratio of 2 gives a sparse doubling ladder (4, 8, 16, 32, 64) that suits layout-level spacing; 1.25 or 1.5 give closely packed steps that suit padding inside components. A practical test: the scale should offer usable values across the 4-64px range your UI actually uses. If the ladder jumps past what you need, the ratio is too steep.
Used in reverse, yes. Try candidate base and ratio pairs until the generated series lines up with the values you actually use; the values that fit neither a doubling nor a linear pattern stand out as the ones to standardize first. If nothing matches, the existing spacing is likely ad hoc, and starting from a clean generated scale is the fix.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.