Design System

Patterns / Dashboard

KPI row first. Narrative second.

Every operator dashboard opens with a small KPI block — one or two numbers an operator scans first. Below that: a priority feed (urgent items, photo carousel for incident apps) and an activity stream. Sidebar is 240px on desktop, collapses to a 56px icon rail at md.

Operator dashboard — desktop, sidebar + KPI + priority feed
Production dashboard · 1440 wide · names redacted240px sidebar · KPI · priority · activity

KPI cards use tabular Geist 36 weight 600. The priority panel cycles photos at 8-second intervals — long enough to scan, short enough to hint there's more. Activity is a chronological union of submit / status-change / action / verification events, capped at 20 items.

Mobile composition

Same hierarchy, vertical stack, sidebar collapses to a four-tab bottom nav. KPI block stays first. Photo carousel becomes horizontally swipeable.

Operator dashboard — mobile, 393 wide, bottom nav visible

Production dashboard · 393 wide · 4-tab bottom nav

KPI row first. Narrative second. Operators have 30 seconds at the kettle — give them the numbers that matter, and let everything else live below the fold.