Spacing Scale Generator

When to Use

• Starting a new design system and need a spacing foundation
• Auditing an inconsistent spacing system
• Migrating from arbitrary spacing values to a scale
• Creating documentation for your spacing tokens

The Prompt

Generate a spacing scale for a design system.

Parameters:
- Base unit: [4px / 8px]
- Scale type: [linear / geometric / custom]
- Number of steps: [8-12]
- Output format: [CSS variables / JSON / Tailwind config]

For each step, include:
1. Token name (e.g., spacing-1, spacing-2 or space-xs, space-sm, space-md)
2. Pixel value
3. Rem value (assume 16px root)
4. Common use case (e.g., "icon to label gap", "section padding", "card inner padding")

Also generate:
- A "when to use which" quick reference guide
- Semantic aliases (e.g., spacing-component-padding = spacing-4, spacing-section-gap = spacing-8)
- Do's and Don'ts for applying the scale

Example Output

## Spacing Scale (base: 4px, linear)

| Token        | px  | rem    | Use Case                          |
|-------------|-----|--------|-----------------------------------|
| spacing-0   | 0   | 0      | Reset, flush alignment            |
| spacing-1   | 4   | 0.25   | Icon-to-label gap, tight pairs    |
| spacing-2   | 8   | 0.5    | Related element gap, inline items |
| spacing-3   | 12  | 0.75   | Input padding, small card gap     |
| spacing-4   | 16  | 1      | Component padding, list gap       |
| spacing-5   | 20  | 1.25   | Card padding, group spacing       |
| spacing-6   | 24  | 1.5    | Section divider, medium gap       |
| spacing-8   | 32  | 2      | Section padding, form group gap   |
| spacing-10  | 40  | 2.5    | Large section gap                 |
| spacing-12  | 48  | 3      | Page section spacing              |
| spacing-16  | 64  | 4      | Hero padding, major sections      |

## Semantic Aliases
- `space-component-padding` = spacing-4 (16px)
- `space-card-padding` = spacing-5 (20px)
- `space-section-gap` = spacing-8 (32px)
- `space-page-margin` = spacing-6 (24px mobile), spacing-12 (48px desktop)

## Do's and Don'ts
- DO use scale values for all spacing. Never use arbitrary pixel values.
- DO use smaller values (1-3) within components, larger (6-16) between sections.
- DON'T mix scale values with hardcoded numbers (e.g., padding: 13px).
- DON'T use spacing tokens for sizing. Use separate size tokens.