Design System
Spacing
Spacing tokens provide consistent spacing throughout the design system. All spacing values are based on a 4px base unit.
Spacing Scale
Our spacing system uses a consistent scale based on 4px increments. This ensures visual harmony and makes spacing decisions easier.
| Token | Value | Preview |
|---|---|---|
--spacing-0 | 0 | |
--spacing-1 | 0.25rem (4px) | |
--spacing-2 | 0.5rem (8px) | |
--spacing-3 | 0.75rem (12px) | |
--spacing-4 | 1rem (16px) | |
--spacing-6 | 1.5rem (24px) | |
--spacing-8 | 2rem (32px) | |
--spacing-12 | 3rem (48px) | |
--spacing-16 | 4rem (64px) | |
--spacing-24 | 6rem (96px) |