Spacing & radii
Three breakpoints, one section rhythm, a handful of radii. Desktop at 1440px matches Figma exactly; tablet follows the 834px frame and mobile the 390px frame. Nothing may overflow horizontally between 375 and 2400px.
Breakpoints
| Name | Range | Tailwind prefix | Design frame |
|---|---|---|---|
| Mobile | < 768px | (none, mobile-first) | 390px |
| Tablet | 768 to 1279px | md: | 834px |
| Desktop | ≥ 1280px | xl: | 1440px |
Section rhythm
| Element | Mobile | Tablet | Desktop |
|---|---|---|---|
| Section padding (top and bottom) | 64px | 96px | 120px |
| Page gutter | 20px | 32px (nav) / 40px | 64px |
| Content container | 100% | 100% | 1200px (copy), 1312 to 1392px (wide grids), 1440px (nav) |
| Headline to copy | 16 to 20px | 20px | 20px |
| Copy to buttons | 32px | 40px | 40px |
| Card grid gap | 20px | 24px | 24px |
| Fixed nav height | 72px | 76px | 76px (hero top padding = nav + spacing; scroll-padding-top 80px) |
Radii
Named so they never clash with Tailwind side utilities: rounded-chip, rounded-tile, rounded-frame, rounded-card, rounded-pill.
chip · 6px
tile · 8px
frame · 12px
card · 14px
pill · 9999px
chip for tags and inline code, tile for small media and list rows, frame for mockups and dark panels, card for cards and sections, pill for buttons and badges.
Shadows
Three only. Cards and sections use hairline borders instead of shadows; the catalogue itself uses none.
card-drop
soft
button · Secondary buttons, tab indicators, icon buttons: a half-pixel ring + two soft drops (no border)