2.9 KiB
2.9 KiB
MobilityOps Control Rail design system
Product principles
- Decisions before decoration. Readiness, attention and next action lead each page.
- Persisted truth only. Counts and health claims come from current API responses; unavailable and unconfigured services are stated honestly.
- Evidence before consequence. Returns and merges preview their impact before the irreversible request; knowledge answers identify evidence sufficiency.
- 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-labelterm/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-visibleoutline 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.