Spacing
Spacing scale and layout conventions used in the design system.
The design system uses Tailwind's default 4px-based spacing scale.
Spacing scale (4px base unit)
14px
28px
312px
416px
624px
832px
1040px
1248px
1664px
2080px
2496px
Component conventions
| Context | Spacing | Example |
|---|---|---|
| Icon gap in buttons | gap-2 (8px) | Button with leading icon |
| Form field stack | gap-2 label-to-input, gap-4 between fields | Login form |
| Card internal padding | p-4 (16px) | Standard card |
| Card large padding | p-6 (24px) | Hero or feature cards |
| Page section gap | gap-6 to gap-8 | Between major sections |
| Dialog padding | p-6 | Modal body content |
| Table cell padding | px-4 py-2 | Data table cells |
Container
The container is centered with responsive max-widths:
<div className="container"> {/* centered, 2rem padding, max-w-[1400px] at 2xl */}