Spacing Token Scale Generator

Generate spacing design tokens (linear or modular) as CSS custom properties, a Tailwind spacing object and an SCSS map.

Open tool

Overview

The Spacing Token Scale Generator turns a base unit into a complete, consistent set of spacing tokens for margins, padding and gaps. It is for designers and developers building a design system who want a single source of truth for spacing. Choose linear or modular mode, the base, number of steps, output unit and root size, then copy the CSS variables, Tailwind config or SCSS map straight into your project.

Try Spacing Token Scale Generator

An unhandled error has occurred. Reload ×