Spacing Scale Generator
Generate a consistent spacing scale for your design system and export as CSS, SCSS, Tailwind, or JSON.
Settings
Visual Scale
:root {
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-7: 1.75rem; /* 28px */
--space-8: 2rem; /* 32px */
--space-9: 2.25rem; /* 36px */
--space-10: 2.5rem; /* 40px */
}How to Use the Spacing Scale Generator
- 1.Set your base spacing unit — 4px is common for tight UI, 8px for more spacious layouts.
- 2.Choose a scale method: Linear (base × 1, 2, 3…) or Ratio-based (base × ratio^n, like type scales).
- 3.Adjust the number of steps and pick a naming convention (numbered, T-shirt, or Tailwind-style).
- 4.Preview the scale as a visual bar chart — larger bars show the relative size of each step.
- 5.Select an export format (CSS, SCSS, Tailwind, JSON) and click Copy to grab your scale.
What is a Design System Spacing Scale?
A spacing scale is a predefined set of spacing values used consistently across a design system for margins, padding, gaps, and layout measurements. Without a scale, individual designers and developers pick spacing intuitively — leading to dozens of slightly different values (14px here, 16px there, 18px somewhere else) that make the UI feel inconsistent and are difficult to maintain.
The most common foundation is a base-4 or base-8 grid. A 4px base produces values of 4, 8, 12, 16, 20, 24… which align cleanly with Tailwind's default spacing scale and most icon grid systems. An 8px base (8, 16, 24, 32, 40…) is slightly coarser but very common in larger applications. A ratio-based scale (using the same ratios as type scales) creates more expressive, progressively larger steps — useful for layout spacing that needs to feel rhythmically related to typography.
Exporting as CSS custom properties or design tokens (JSON) allows the same spacing values to be referenced across CSS, SCSS, Tailwind, and even Figma via token plugins — ensuring design and code stay in sync as the system evolves.
Frequently Asked Questions
Should I use a 4px or 8px base unit?
A 4px base gives more granularity and is better for dense UIs (dashboards, data tables). An 8px base produces cleaner, more spacious results and is easier to work with in most app and marketing contexts. Both align to common device pixel ratios.
What is a design token?
A design token is a named variable that stores a design decision — a specific color, font size, or spacing value — in a format that can be consumed by design tools and code. The JSON export from this tool is a spacing token file compatible with tools like Style Dictionary and Figma's Token Studio plugin.
How does spacing relate to typography?
Using the same ratio for both your type scale and your spacing scale creates visual rhythm — the spaces between elements feel proportionally related to the sizes of the text they contain. This is the basis of a "vertical rhythm" system in typography-first design.