DESIGN
rechaj-agent-app — product design
Section titled “rechaj-agent-app — product design”Field agent mobile app. Onboarding, KYC capture, customer signup.
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 product is built on the canonical mobile-app 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 (account activated, KYC submitted, customer onboarded).
- Inline error sheet — bottom-sheet pattern for recoverable input errors with primary forward + secondary retry CTAs.
- Read-only Evidence Sheet + Edit-submission affordance — for any captured evidence the agent can review or edit.
- Camera-only evidence — no infrastructure hints — KYC photo capture goes through the in-app camera viewfinder; no gallery import; never surface EXIF/SHA helper copy.
- Starter checklist for a new app — 12-point checklist to walk through before the first screen ships.
Class-name prefix
Section titled “Class-name prefix”agent-* for agent-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.