Patterns / Mobile
Mobile is first-class.
Field operators submit reports from phones in PPE on noisy floors. The app is installable as a PWA. Tap targets are 44×44 minimum. The bottom nav is thumb-reachable. No hover-only affordances.
Schematic · 220×440 · top status bar + content + bottom nav
The PWA install banner appears on the third visit (not the first — that's intrusive). Once installed, the app gets app-icon presence on the home screen, full-screen rendering, push notifications via Web Push (VAPID), and offline draft saving via IndexedDB.
Tap targets are 44×44 minimum. Operators wear gloves. Operators sweat. The button must absorb both.
Bottom navigation
A four-tab bottom nav covers the most-trafficked routes per role. Active tab uses var(--fg-accent) text and a 2px top border at offset 0; inactive tabs are var(--fg-muted). Labels appear on iPad-size and up.