Spacing Scale Generator
Overview
Generate consistent spacing scales using a base value and ratio. Creates exponentially distributed values centered around a base unit for harmonious layouts.
When to Use
- Setting up spacing tokens for a new project
- Standardizing padding and margin values
- Creating a gap/grid system
- Migrating from arbitrary spacing to tokens
Quick Reference
| Naming Style |
Example Names |
Best For |
| T-shirt |
xs, sm, md, lg, xl |
Semantic, readable |
| Numeric |
100, 200, 300... |
Precise, extensible |
| Unit |
When to Use |
| px |
Fixed layouts, pixel-perfect designs |
| rem |
Scalable, respects user font settings |
| em |
Component-relative spacing |
The Process
- Get base value: Default 4px or 0.25rem (common base unit)
- Get ratio: How much each step grows (1.5 is balanced, 2 is dramatic)
- Ask steps: How many spacing values (8-12 is typical)
- Ask naming: T-shirt sizes (xs, sm, md, lg) or numeric (100, 200, 300)?
- Ask unit: px, rem, or em?
- Ask format: CSS, Tailwind, or JSON?
- Generate: Create scale centered on base, expanding in both directions
Common Ratios
| Ratio |
Character |
Example (base 4px) |
| 1.25 |
Tight |
2, 2.5, 3, 4, 5, 6, 8 |
| 1.5 |
Balanced |
1.8, 2.7, 4, 6, 9, 13.5 |
| 1.618 |
Golden |
1.5, 2.5, 4, 6.5, 10.5, 17 |
| 2 |
Dramatic |
1, 2, 4, 8, 16, 32 |
Output Formats
CSS Custom Properties:
:root {
--spacing-xs: 2px;
--spacing-sm: 4px;
--spacing-md: 8px;
--spacing-lg: 16px;
--spacing-xl: 32px;
}
Tailwind Config:
module.exports = {
theme: {
spacing: {
'xs': '2px',
'sm': '4px',
'md': '8px',
'lg': '16px',
'xl': '32px',
}
}
}
JSON Tokens:
{
"spacing": {
"xs": "2px",
"sm": "4px",
"md": "8px",
"lg": "16px",
"xl": "32px"
}
}
Algorithm
The scale is centered on the base value at the midpoint:
value = baseValue * (ratio ^ (step - midpoint))
For a 10-step scale with base 4 and ratio 1.5:
- Step 0 (5 below mid): 4 * 1.5^-5 = 0.53
- Step 5 (midpoint): 4 * 1.5^0 = 4
- Step 9 (4 above mid): 4 * 1.5^4 = 20.25
T-shirt Size Mapping
Full range: 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl
The midpoint of your scale maps to "md" and expands outward.
1---2name: spacing-scale3description: Generates consistent spacing tokens using base values and ratios. Use when creating margin/padding systems, gap tokens, or layout spacing. Outputs CSS custom properties, Tailwind config, or JSON tokens.4---5
6# Spacing Scale Generator
7
8## Overview
9
10Generate consistent spacing scales using a base value and ratio. Creates exponentially distributed values centered around a base unit for harmonious layouts.
11
12## When to Use
13
14- Setting up spacing tokens for a new project
15- Standardizing padding and margin values
16- Creating a gap/grid system
17- Migrating from arbitrary spacing to tokens
18
19## Quick Reference
20
21| Naming Style | Example Names | Best For |
22|--------------|---------------|----------|
23| T-shirt | xs, sm, md, lg, xl | Semantic, readable |
24| Numeric | 100, 200, 300... | Precise, extensible |
25
26| Unit | When to Use |
27|------|-------------|
28| px | Fixed layouts, pixel-perfect designs |
29| rem | Scalable, respects user font settings |
30| em | Component-relative spacing |
31
32## The Process
33
341. **Get base value**: Default 4px or 0.25rem (common base unit)
352. **Get ratio**: How much each step grows (1.5 is balanced, 2 is dramatic)
363. **Ask steps**: How many spacing values (8-12 is typical)
374. **Ask naming**: T-shirt sizes (xs, sm, md, lg) or numeric (100, 200, 300)?
385. **Ask unit**: px, rem, or em?
396. **Ask format**: CSS, Tailwind, or JSON?
407. **Generate**: Create scale centered on base, expanding in both directions
41
42## Common Ratios
43
44| Ratio | Character | Example (base 4px) |
45|-------|-----------|-------------------|
46| 1.25 | Tight | 2, 2.5, 3, 4, 5, 6, 8 |
47| 1.5 | Balanced | 1.8, 2.7, 4, 6, 9, 13.5 |
48| 1.618 | Golden | 1.5, 2.5, 4, 6.5, 10.5, 17 |
49| 2 | Dramatic | 1, 2, 4, 8, 16, 32 |
50
51## Output Formats
52
53**CSS Custom Properties:**
54```css
55:root {
56 --spacing-xs: 2px;
57 --spacing-sm: 4px;
58 --spacing-md: 8px;
59 --spacing-lg: 16px;
60 --spacing-xl: 32px;
61}
62```
63
64**Tailwind Config:**
65```js
66module.exports = {
67 theme: {
68 spacing: {
69 'xs': '2px',
70 'sm': '4px',
71 'md': '8px',
72 'lg': '16px',
73 'xl': '32px',
74 }
75 }
76}
77```
78
79**JSON Tokens:**
80```json
81{
82 "spacing": {
83 "xs": "2px",
84 "sm": "4px",
85 "md": "8px",
86 "lg": "16px",
87 "xl": "32px"
88 }
89}
90```
91
92## Algorithm
93
94The scale is centered on the base value at the midpoint:
95
96```
97value = baseValue * (ratio ^ (step - midpoint))
98```
99
100For a 10-step scale with base 4 and ratio 1.5:
101- Step 0 (5 below mid): 4 * 1.5^-5 = 0.53
102- Step 5 (midpoint): 4 * 1.5^0 = 4
103- Step 9 (4 above mid): 4 * 1.5^4 = 20.25
104
105## T-shirt Size Mapping
106
107Full range: 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl
108
109The midpoint of your scale maps to "md" and expands outward.
majiayu000