DESIGN
Atlas — product design
Section titled “Atlas — product design”Operations backoffice (v2). Replaces the legacy rechaj-backoffice. Case management, fleet ops, KaaG telemetry.
Rationale
Section titled “Rationale”Atlas is the single backoffice that every internal Rechaj role logs into. Its design challenge is persona-tailored defaults: an onboarding agent and a fleet manager should never see each other’s primary surface. Each persona’s flow is documented and prototyped separately under flows/, then assembled at runtime by Atlas’s role-aware shell.
The shared chrome (sidebar, top bar, search, notifications, profile menu) is built from the global design system — no Atlas-specific deviations there. What changes per persona is the contents of the work area and which sidebar items are visible.
Inherits from global DESIGN.md
Section titled “Inherits from global DESIGN.md”Atlas is a web backoffice (1440px desktop). The mobile rsm-* scaffold doesn’t apply — Atlas has its own role-aware shell — but every token, brand, table, header, status-chip, and timeline pattern is shared. Before designing a new persona surface, read these sections of the master DESIGN.md:
- Global Rules — official logo SVG, no emojis, no card strokes.
- Color Tokens, Typography, Spacing, Shadows — token foundations.
- Table Design — case list, dispatch queue, fleet roster, billing tables.
- App header (
.mhdr) — canonical sub-page header. - Status chips — canonical 3-color rule.
- Status timeline (state-machine progress) — case / dispatch / KaaG lifecycle logs.
- Detail Page — main card + activity timeline — case detail / fleet vehicle detail / billing record.
- Class-name prefix ownership.
For persona-specific bottom-sheet or modal patterns within Atlas (e.g. on tablet-mode dispatcher view), the mobile bottom-sheet shell and activated-sheet success modal are inheritable.
Class-name prefix
Section titled “Class-name prefix”atlas-* for Atlas-specific components (sidebar nav, role-switcher, case-table cells). 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.
Personas & flows
Section titled “Personas & flows”| Persona | Status | Prototype |
|---|---|---|
| Onboarding Agent | shipped (in design) | flows/onboarding-agent/ |
| Technical Specialist · KaaG | shipped (in design) | flows/technical-specialist-kaag/ |
| Product Manager · KaaG | shipped (in design) | flows/product-manager-kaag/ |
| VP Product · KaaG | shipped (in design) | flows/vp-product-kaag/ |
| Operations Dispatcher | planned | — |
| Customer Support Agent | planned | — |
| Fleet Manager | planned | — |
| Finance / Billing | planned | — |
| Admin | planned | — |
Index + how-to: flows/README.md.
Screens
Section titled “Screens”See screens/ for the canonical KaaG telemetry / dashboard mockups (cross-persona screens).
Prototypes
Section titled “Prototypes”See prototypes/ for narrated end-to-end flows that span personas.