Spacing
Defines consistent margins, padding, and layouts for visual harmony, readability, and structure across all design elements and components.
| Name | Base unit multiplier | Rem | Px |
|---|---|---|---|
| space-25 | 0.25x | 0.125rem | 2px |
| space-50 | 0.5x | 0.25rem | 4px |
| space-100 | 1x | 0.5rem | 8px |
| space-150 | 1.5x | 0.75rem | 12px |
| space-200 | 2x | 1rem | 16px |
| space-300 | 3x | 1.5rem | 24px |
| space-400 | 4x | 2rem | 32px |
| space-600 | 6x | 3rem | 48px |
| space-800 | 8x | 4rem | 64px |
| space-1200 | 12x | 6rem | 96px |