# MobilityOps Control Rail design system

## Product principles

1. **Decisions before decoration.** Readiness, attention and next action lead each page.
2. **Persisted truth only.** Counts and health claims come from current API responses;
   unavailable and unconfigured services are stated honestly.
3. **Evidence before consequence.** Returns and merges preview their impact before the
   irreversible request; knowledge answers identify evidence sufficiency.
4. **Dense, never cramped.** Thin rules and compact type replace nested cards, while
   interactive targets remain at least 40 px (44 px in mobile navigation and key flows).

## Tokens

| Role | Token | Value |
|---|---|---|
| Primary structure | `--petrol` | `#0f172a` |
| Secondary structure | `--petrol-2` | `#15243a` |
| Primary action | `--teal-dark` | `#0b6f67` |
| Active highlight | `--teal` | `#0f8f83` |
| Action tint | `--teal-pale` | `#e7f7f4` |
| Canvas | `--canvas` | `#f5f7fa` |
| Surface | `--surface` | `#ffffff` |
| Divider | `--line` | `#dbe2ea` |
| Body ink | `--ink` | `#0f172a` |
| Secondary text | `--muted` | `#657386` |
| Critical | `--critical` | `#c93636` |
| Warning | `--warning` | `#b96812` |
| Success | `--success` | `#17724b` |
| Keyboard focus | `--focus` | `#14b8a6` |
| Standard radius | `--radius` | `4px` |

Typography uses Inter when available and a system sans-serif fallback. Page titles are
28–35 px desktop and 24–26 px mobile; section headings are 16 px; table content is 12 px
with 10 px uppercase labels. Hierarchy comes from position, weight and rules rather than
display-sized text.

## Core component grammar

- **Shell:** 224 px desktop rail, 64 px sticky top bar, persistent synthetic-data band.
- **Mobile shell:** 58 px top bar, off-canvas full navigation and six-item 65 px bottom bar.
- **Readiness:** horizontal definition-list band; warning and critical values get a
  semantic underline and text color.
- **Work panel:** one border, 4 px radius, section header, optional compact controls and
  ruled content. No nesting for decorative depth.
- **Status:** text plus dot/shape and semantic foreground/background; color is never the
  only carrier.
- **Tables:** explicit headers on desktop; `data-label` term/value rows on mobile.
- **Feedback:** normalized loading, empty and error surfaces keep page context.
- **Motion:** 160–280 ms for hover/page entry; removed under `prefers-reduced-motion`.

## Accessibility and responsive rules

- Skip link, named navigation landmarks and one main landmark per authenticated page.
- 3 px high-contrast `:focus-visible` outline with offset.
- Form labels remain programmatic; icon-only controls carry accessible names and titles.
- Desktop tables become labelled row cards below 700 px; no header meaning is lost.
- The document has no horizontal overflow at 390, 768, 1280 or 1440 px.
- All status and evidence states include readable text; critical actions are separated
  from navigation and review precedes commit.