Layout & Spacing
A consistent spacing system based on a 4px base unit. Use these tokens for margins, padding, and gaps to maintain visual rhythm.
Spacing Scale
Based on a 4px base unit. Tailwind classes map directly to these values.
| Token | Value | Visual | Use Case |
|---|---|---|---|
| space-0 | 0px | None | |
| space-1 | 4px | Tight grouping, icon padding | |
| space-2 | 8px | Related elements, input padding | |
| space-3 | 12px | Standard gap | |
| space-4 | 16px | Component internal padding | |
| space-5 | 20px | Card padding | |
| space-6 | 24px | Section spacing | |
| space-8 | 32px | Large gaps | |
| space-10 | 40px | Section breaks | |
| space-12 | 48px | Major section breaks | |
| space-16 | 64px | Page-level spacing | |
| space-20 | 80px | Hero sections | |
| space-24 | 96px | Massive spacing |
Border Radius
rounded-sm
4px
Small buttons, chips, badges
rounded-md
6px
Inputs, small cards
rounded-lg
8px
Cards, modals (default)
rounded-xl
12px
Large cards, panels
rounded-full
9999px
Circular elements, pills
Grid System
12-column grid with responsive breakpoints. Gutters and margins adjust at each breakpoint.
| Breakpoint | Min Width | Columns | Gutter | Margin |
|---|---|---|---|---|
| sm | 640px | 4 | 16px | 16px |
| md | 768px | 8 | 24px | 24px |
| lg | 1024px | 12 | 24px | 32px |
| xl | 1280px | 12 | 32px | 48px |
| 2xl | 1536px | 12 | 32px | auto |
Content Width
Optimal content widths for readability. Prose should never exceed 75 characters per line.
Long-form text, articles
Conversational UI
Tables, dashboards
Maximum content width
Density Guidelines
Spacious but not sparse. The interface should feel like there's room to think.
Compact
For data-dense contexts
- Row height: 12px padding
- Use in: Tables, lists, dense data
Comfortable
Default for most UI
- Gaps: 16-24px
- Use in: Chat messages, forms, cards
Generous
For featured content
- Padding: 20-24px
- Use in: Cards, modals, panels
Expansive
For hero/marketing sections
- Spacing: 48-80px
- Use in: Headers, landing pages
Component Sizing
| Component | Height | Horizontal Padding |
|---|---|---|
| Button (sm) | 32px | 12px |
| Button (md) | 40px | 16px |
| Button (lg) | 48px | 20px |
| Input | 40px | 12px |
| Card | auto | 20px (all sides) |
| Modal | auto | 24px (all sides) |