Design System

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.

App shell
Submit form

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.