Patterns

Layout

Use max-w-7xl container with responsive padding for consistent layouts.

max-w-7xl mx-auto px-4

All interactive components support focus states for accessibility.

Use spacing scale for consistent margins and padding (4px base unit).

spacing-1 = 0.25rem (4px)

spacing-2 = 0.5rem (8px)

spacing-4 = 1rem (16px)

spacing-8 = 2rem (32px)