Spacing

Consistent spacing system for layouts and components.

Page Containers

Standard max-widths for different page types.

Dashboard pagesmax-w-5xl mx-auto px-6 py-8

Standard dashboard content width

Landing sectionsmax-w-6xl mx-auto px-4 md:px-6

Wider for marketing pages

Docs pagesmax-w-4xl mx-auto px-6 py-12

Comfortable reading width

Component Spacing

Padding and gaps for common components.

ElementPaddingGap

Cardsp-4 to p-5—

Buttons (sm)h-7 px-2.5 or h-8 px-3gap-1.5

Buttons (default)h-9 px-4gap-2

Form rowspx-4 py-3—

Section margins—space-y-6

Vertical Rhythm

Consistent vertical spacing using space-y-*

space-y-1.5Tight within form fields

space-y-3Within sections

space-y-4Between form groups

space-y-6Between sections

space-y-8Major section breaks

space-y-12Page section breaks

Quick Reference

tsx

// Page container
<div className="max-w-5xl mx-auto px-6 py-8">

// Card
<div className="rounded-xl border border-border/50 bg-card p-5">

// Section spacing
<div className="space-y-6">

// Form row
<div className="flex items-center justify-between px-4 py-3">

// Button
<Button className="h-9 px-4 text-sm rounded-full">