Experience
Experience
Responsive
Mobile · Tablet · Desktop
Design once with a fluid system, then verify in device frames. Foundry’s baseline is 390px mobile-first, then tablet shells, then desktop density.
Breakpoints
sm 640 · md 768 · lg 1024 · xl 1280 · 2xl 1536. Content max ~1400px. Touch targets ≥ 44px on mobile/tablet; desktop may use compact 36–40px toolbars.
Phone · 390 · 390×844
mobile
Primary mobile baseline. 44px targets, single column, bottom sheets.
- · Single column, bottom navigation
- · Sheets over dialogs for multi-step
- · Thumb-zone primary actions
Responsive shell recipe
Hide bottom nav on desktop; show sidebar from lg. Same tokens, different chrome.
Mobile
390–430px
Stack, full-bleed cards, bottom tabs
Tablet
768–1024px
2-col grids, optional rail, split views
Desktop
1280px+
Sidebar shell, density tools, multi-pane