---
name: spacing
description: Generate a complete spacing scale from a base unit. Outputs CSS custom properties and shows recommended usage for each step.
user-invokable: true
---

# /spacing — Spacing Scale Generator

## Usage
`/spacing [base-unit]` (default: 4px)

Generate the full scale:
- --space-1: 4px (tight inline spacing)
- --space-2: 8px (default inline spacing, icon gaps)
- --space-3: 12px (compact card padding)
- --space-4: 16px (standard card padding, form gaps)
- --space-5: 20px (comfortable padding)
- --space-6: 24px (section internal padding)
- --space-8: 32px (large gaps, card spacing)
- --space-10: 40px (section breaks)
- --space-12: 48px (major section padding)
- --space-16: 64px (section vertical padding)
- --space-20: 80px (large section padding)
- --space-24: 96px (hero-level spacing)
- --space-32: 128px (maximum spacing)

Output as CSS custom properties and Tailwind spacing config.