docs(design): define Stitch-backed product direction

2026-08-02 03:26:54 +02:00
parent f0c0af128e
commit 73e361002d
11 changed files with 221 additions and 5 deletions
@@ -0,0 +1,60 @@
+# 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.