spacing-scale

Generate a consistent spacing scale by defining a base value, an exponential ratio, and a step count to produce scalable tokens. This provides standardized margins, padding, and gaps, eliminating ad-hoc spacing decisions across layout components.

Yes, you can output CSS variables and Tailwind config tokens from a single generated spacing scale. The tool supports multiple output formats including CSS custom properties, Tailwind spacing definitions, and JSON tokens for seamless integration.

An exponential spacing scale calculates layout dimensions using a base value multiplied by a consistent ratio across each step. You need it when building token-based design systems requiring predictable, scalable spacing for margins, padding, and grid gaps.

Yes, the generated spacing scale supports configurable naming styles including tshirt and numeric naming conventions. This allows you to map arbitrary spacing values to a named scale, simplifying migration and standardizing component layouts.

Configure spacing tokens by providing a base value and a ratio to generate a centered exponential spacing scale. For example, using a base of 4 and a ratio of 1.5 generates a 10-step scale covering consistent layout measurements.

Standardize margins and padding by generating a centralized spacing scale and exporting it as CSS custom properties and JSON tokens. This ensures consistent layout values across your design system and prevents mismatches between components.