Foundations
Foundations
Spacing
A 4px base unit scaled through Tailwind’s spacing scale. Generous whitespace beats cramming.
Rhythm
Stack related content with
space-y-3 or gap-4. Separate major sections with space-y-8–12. Page padding starts at 16px on mobile and grows to 24–40px on desktop.Scale (Tailwind units)
- 14px
- 28px
- 312px
- 416px
- 520px
- 624px
- 832px
- 1040px
- 1248px
- 1664px
Component padding
Buttons h-10 · Cards p-6 · Inputs px-3
Stack gaps
Form fields gap-4 · Inline actions gap-2
Layout
Sidebar 240–256px · Content max ~1400px