DESIGN
rechaj-swap-app — product design
Section titled “rechaj-swap-app — product design”Rider mobile app. Battery swap, station discovery, payments.
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 a rider-facing mobile app. While it has a different audience than the internal-tool apps (Retrofit, Kit Production, Ops), the canonical foundations still apply. Before adding a new screen, read these sections of the master DESIGN.md:
- Prototype shell — device-only, no surrounding chrome —
.phone390×844, dark backdrop, no external chrome. - Mobile App Anatomy —
rsm-*scaffold — adopt the.sb/ page-head /.rsm-body/.rsm-nav/ home-indicator anatomy. Bottom-sheet shell (.rsm-sheet-*) for confirmations, pickers, photo previews. - Status chips — canonical 3-color rule — Pending / In progress / Completed (+ red failure). Use for swap state (Pending pickup / Swap in progress / Completed).
- Success / Confirmation Modal — bottom sheet (DEFAULT) — every successful swap, payment, registration ends in this sheet.
- Activated-sheet Success Modal — full-screen confirmation for major transitions (account activated, password reset, first swap completed).
- Inline error sheet — recoverable input errors (invalid station QR, payment declined, KYC mismatch).
- Class-name prefix ownership.
- Alert Toast — save / payment / state-change confirmations.
- Starter checklist for a new app — 12-point checklist.
The swap app is organised by ROLE, not by prototype. Three surfaces live in prototypes/: swap-station-manager.html is the reference build and the source-of-truth for swap-specific patterns (swap timer, payment confirmation, battery unlock, energy capture); charge-station-manager.html is the energy module alone; swap-pm.html is the station manager plus a station switcher. Take swap patterns from the station manager.
Class-name prefix
Section titled “Class-name prefix”swap-* for swap-specific components (station tile, battery card, swap timer, payment receipt). Register 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. - ✅
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.