Spacing System
Our spacing system is built on a 4px baseline grid, creating rhythm and hierarchy in layouts. This consistent approach to spacing helps create visual harmony across all interfaces and components.
Spacing Scale
Our spacing scale is based on a 4px grid system, with increments that follow a pattern designed to provide enough variety while maintaining consistency. Click on any spacing token to copy it to your clipboard.
| Token | Value | Usage | Visual |
|---|---|---|---|
space-1 | 0.25rem (4px) | Minimal spacing, icons, tight elements | |
space-2 | 0.5rem (8px) | Small spacing, compact layouts | |
space-3 | 0.75rem (12px) | Medium-small spacing | |
space-4 | 1rem (16px) | Default spacing, standard padding | |
space-5 | 1.25rem (20px) | Medium spacing | |
space-6 | 1.5rem (24px) | Large-medium spacing | |
space-8 | 2rem (32px) | Large spacing, section dividers | |
space-10 | 2.5rem (40px) | Extra large spacing | |
space-12 | 3rem (48px) | 2x large spacing | |
space-16 | 4rem (64px) | 3x large spacing, major sections | |
space-20 | 5rem (80px) | 4x large spacing | |
space-24 | 6rem (96px) | Maximum spacing, page sections |
Spacing Variables
Our spacing tokens are available as CSS variables and can be used in your styles. They're also available through Tailwind's spacing utilities.
/* CSS Variable usage */margin-top: var(--space-4); /* 16px */padding: var(--space-2); /* 8px *//* Tailwind usage */mt-4 /* margin-top: 1rem (16px) */p-2 /* padding: 0.5rem (8px) */