Patterns

Composable layout primitives and common UI patterns. These aren't components — they're recipes for combining tokens and components into real interfaces.

Patterns

Available Patterns

  • Layouts — Container, Grid, Stack, Cluster, Split, Sidebar, Center
  • Empty States — No-content messaging with icons and CTAs

When to Use Patterns

Patterns solve recurring layout problems. Instead of writing custom CSS for every page, reach for a pattern:

Need Pattern Example
Vertical rhythm Stack Form fields, card lists
Horizontal grouping Cluster Tags, button groups
Two-column layout Split Sidebar + content
Responsive grid Grid Card galleries, icon grids
Centered content Center Hero sections, empty states
Page structure Container Max-width + padding