Spaces Wizard

Visual controls generate perfect spacing scales automatically.

---

Structure Overview

Spacing follows the same structure as Font Sizes:

• Wizard Mode – Auto-calculated with aspect ratios, min/max values, steps
• Manual Mode – Per-step control with comma-separated names
• Fluid vs Fixed – Viewport scaling or single value
• Pixels vs Rems – Figma-compatible input, accessible output
• Extend Defaults – Add to or replace Tailwind defaults

---

Key Differences from Font Sizes

1. Utility Values

Click “Add Utility Spacing” → Adds:

• 0 – Zero spacing (no margin/padding)
• px – 1px spacing (for borders)
• auto – Auto spacing (for centering)

Use cases:

No margin
Centered with auto margin
1px border

---

2. Builder Integration

Note: Most visual builders don’t have spacing systems to import (unlike font sizes).

You cannot fetch spacing from Gutenberg/Bricks/Oxygen. Define your spacing scale manually.

---

3. Usage Examples

Padding:

Padding all sides
Horizontal 8, Vertical 4

Margin:

Margin all sides
Top 8, Bottom 4

Gap (Flexbox/Grid):

Flex with gap
Grid with gap

Space Between:

Vertical spacing between children

---

Common Spacing Patterns

Example Scale (9 steps, base at step 4):

Step 1: base / ratio³ = 8.19px   (1)
Step 2: base / ratio² = 10.24px  (2)
Step 3: base / ratio  = 12.8px   (4)
Step 4: base         = 16px      ← BASE (8)
Step 5: base × ratio  = 20px     (16)
Step 6: base × ratio² = 25px     (32)
...

Generated Output:

@theme {
  --spacing-1: clamp(0.25rem, 0.231rem + 0.094vw, 0.313rem);
  --spacing-2: clamp(0.5rem, 0.463rem + 0.188vw, 0.625rem);
  --spacing-4: clamp(1rem, 0.925rem + 0.375vw, 1.25rem);
  --spacing-8: clamp(2rem, 1.85rem + 0.75vw, 2.5rem);
  --spacing-16: clamp(4rem, 3.7rem + 1.5vw, 5rem);
}

---

Recommended Aspect Ratios

• 1.2 (Minor Third) – Tight, balanced
• 1.25 (Major Third) – Moderate jumps, recommended
• 1.333 (Perfect Fourth) – Larger gaps
• 1.5 (Perfect Fifth) – Dramatic spacing