Spacing
Spacing
Section titled “Spacing”A consistent spacing system creates rhythm and visual harmony. Our spacing scale is based on a 4px base unit, following patterns from Carbon and Polaris.
Spacing Scale
Section titled “Spacing Scale”Spacing tokens
| Token | Value | Usage |
|---|---|---|
--space-1 | 0.25rem (4px) | Icon padding, tight gaps |
--space-2 | 0.5rem (8px) | Inline spacing, small gaps |
--space-3 | 0.75rem (12px) | Component padding |
--space-4 | 1rem (16px) | Standard gutter, card padding |
--space-5 | 1.25rem (20px) | Section padding |
--space-6 | 1.5rem (24px) | Component margin |
--space-8 | 2rem (32px) | Section margin |
--space-10 | 2.5rem (40px) | Page padding |
--space-12 | 3rem (48px) | Large section gap |
--space-16 | 4rem (64px) | Hero spacing |
--space-20 | 5rem (80px) | Major layout breaks |
Container Widths
Section titled “Container Widths”Max widths
| Token | Value | Usage |
|---|---|---|
--container-sm | 640px | Narrow content |
--container-md | 768px | Standard content |
--container-lg | 1024px | Wide layouts |
--container-xl | 1280px | Full-width pages |
Guidelines
Section titled “Guidelines”- All spacing uses multiples of 4px (0.25rem)
- Use scale tokens instead of arbitrary values
- Padding: prefer
--space-4(16px) for card interiors - Gap:
--space-2(8px) inline,--space-6(24px) block - Page margins: 24px mobile → 40px+ desktop