Spacing Scale Generator

A spacing scale is the foundation of a cohesive design system. Rather than using arbitrary pixel values scattered throughout your interface, a consistent scale ensures visual harmony and makes layouts predictable for both designers and developers. This tool generates a carefully calculated spacing scale based on a mathematical ratio, so that each step feels proportional and intentional.

To use the tool, choose your base spacing unit (typically 4px or 8px), select a scale ratio (like golden ratio, major third, or perfect fourth), and generate your complete scale. The output includes all the spacing values you'll need for padding, margins, gaps, and other layout measurements. You can copy individual values or export the entire scale in formats like CSS variables, Tailwind configuration, or JSON for seamless integration into your design system.