Control Tower - Design System

Numbers are tabular, right-aligned, and monospace. Every rupee, count, rate and timestamp uses IBM Plex Mono with tabular-nums, so columns scan vertically and digits never jump as values tick live.

Status is never colour alone. Severity and state always pair a colour with an icon/dot and a text label, readable for colour-blind operators and in a glance across a wall display.

Progressive disclosure. The table shows the 20% you triage on; the drill-down panel holds the other 80% (full record, timeline, related events) so the grid stays scannable.

One accent, spent on action. Signal orange marks only the current action or the live/critical state. Teal carries filters and data accents. Everything else stays in the neutral navy ramp.

Semantic mapping is fixed: green = healthy / resolved, amber = degraded / at-risk, red = fault / SLA breach, orange = the one action needed now. Meanings never cross.

Two row densities share one token pair (--row-py, --row-fs). Comfortable for triage, compact to fit ~40% more rows on a control-room display. Toggle it live from the table toolbar or ⌘K → density.

Faceted, additive, reversible. Facets (facility, severity, type, status) combine with search and saved views. Every active filter shows as a removable chip with a live result count, and one click clears all, so the operator is never lost in a filter state they can't see.

Grid lines at ~8% alpha on the Y-axis only. Series order fixed (teal → green → amber → violet). Tooltips use mono numerals. No 3D, no gradients heavier than 12% fill. A dashed line always means plan/target, solid means actual.

Body text ≥ 4.5:1 on navy · 2px focus ring on every interactive · full keyboard path for the command palette and row actions · status carries icon + text, not colour alone · prefers-reduced-motion pauses live ticks and row animations.