Spacing
A consistent spacing scale creates visual rhythm and hierarchy. All spacing uses rem units for accessibility. Apply via var(--ds-space-*) tokens.
--ds-space-00 (0px)
--ds-space-10.25rem (4px)
--ds-space-20.5rem (8px)
--ds-space-30.75rem (12px)
--ds-space-41rem (16px)
--ds-space-51.25rem (20px)
--ds-space-61.5rem (24px)
--ds-space-82rem (32px)
--ds-space-102.5rem (40px)
--ds-space-123rem (48px)
--ds-space-164rem (64px)
| Context | Token | Example |
|---|---|---|
| Tight inline spacing | --ds-space-1 | Icon-to-label gap |
| Related elements | --ds-space-2 | Badge padding, chip gap |
| Component padding | --ds-space-3 to --ds-space-4 | Button, input, card padding |
| Section spacing | --ds-space-6 to --ds-space-8 | Between card groups |
| Page sections | --ds-space-10 to --ds-space-16 | Hero to content gap |