61 lines
2.9 KiB
Markdown
61 lines
2.9 KiB
Markdown
# 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.
|