DESIGN
rechaj-ops-app — product design
Section titled “rechaj-ops-app — product design”Operations mobile app. MEI inspection, station ops, dispatch.
Rationale
Section titled “Rationale”(Why this product looks the way it does. Audience, primary jobs-to-be-done, the visual decisions that diverge from the global system and why.)
Inherits from global DESIGN.md
Section titled “Inherits from global DESIGN.md”This is an internal-tool mobile app built on the canonical rsm-* scaffold defined in the master DESIGN.md. Before adding a new screen, read these sections — everything you need to match the design system is in the global file:
- Mobile App Anatomy —
rsm-*scaffold —.phonedevice shell,.rsm-page-head,.rsm-body,.rsm-nav, section heads, summary cards, queue rows, result bands, stat tiles, Profile screen anatomy, bottom-sheet shell. - Status chips — canonical 3-color rule — Pending / In progress / Completed (+ red failure variant only).
- Class-name prefix ownership — declare this product’s prefix(es) at the top of this file before introducing new components.
- Activated-sheet Success Modal — full-screen confirmation for major transitions (dispatch confirmed, inspection finalized, station handed over).
- Inline error sheet — bottom-sheet pattern for recoverable input errors.
- Read-only Evidence Sheet + Edit-submission affordance — view-only audit of any captured inspection / dispatch evidence, with edit re-entry to the capture screen.
- Camera-only evidence — no infrastructure hints — inspection photos go through the in-app camera viewfinder; never surface EXIF/SHA helper copy.
- Starter checklist for a new app — 12-point checklist to walk through before the first screen ships.
If this app surfaces scored evaluations (MEI composite, station readiness score, etc.), use .rsm-result-band with the canonical X.XX / 5 · Band X format + band-action pill (Proceed / Conditional / Escalate / Reject). The retrofit-app MEI v2 weighted scoring is the reference implementation.
Class-name prefix
Section titled “Class-name prefix”ops-* for ops-specific components beyond the shared rsm-* scaffold. Register any new prefix in the global class-name ownership table.
Cards — no strokes
Section titled “Cards — no strokes”Restating the global rule because every product CSS extension tries to drift back into single-side accent stripes:
- ❌
border: 1px solid var(--grey3)(or any colour) on any card, readonly tile, sheet, row, or grouping container. - ❌ Single-side accent stripes — no
border-left,border-top,border-right, orborder-bottomto colour-code state. Use the card’s background tint alone to communicate state. - ✅
background: <neutral or tinted bg>+box-shadow: var(--sh-card)+border-radius: 14px.
Screens
Section titled “Screens”See screens/ for canonical interactive HTML mockups.
Prototypes
Section titled “Prototypes”See prototypes/ for narrated end-to-end flows.