Spacing
Updated 2026-05-19
| Token | Value | Usage | Status | |
|---|---|---|---|---|
| --zen-spacing-3xs | 0.125rem (2px) | Tightest spacing, hairline gaps | 🟡 Proposed | |
| --zen-spacing-2xs | 0.25rem (4px) | Between elements within a small component | 🟢 Shipped | |
| --zen-spacing-xs | 0.5rem (8px) | Default spacing between components | 🟢 Shipped | |
| --zen-spacing-sm | 0.75rem (12px) | Padding in a large component | 🟢 Shipped | |
| --zen-spacing-md | 1rem (16px) | Padding in a large component; spacing between components | 🟢 Shipped | |
| --zen-spacing-lg | 1.5rem (24px) | Spacing between sections | 🟢 Shipped | |
| --zen-spacing-xl | 2rem (32px) | Use when a clear separation is needed | 🟢 Shipped | |
| --zen-spacing-2xl | 3rem (48px) | Major section breaks, page padding | 🟡 Proposed | |
| --zen-spacing-3xl | 4rem (64px) | Hero sections, full-page layout | 🟡 Proposed |