# AutoGo Design System

AutoGo is an on-demand roadside assistance platform — an Uber-like model for tow trucks and mobile mechanics. Users request help (tow, jump start, flat tire, fuel delivery, lockout), get matched with a nearby operator, and track them to arrival.

**Design stance:** users are stressed, stranded roadside, often at night. The UI must be calm, legible, and unambiguous. Dark mode is the default. No decoration that competes with the one thing that matters: *when is help arriving.*

Sample data (names, addresses, plates, VND prices) is Vietnamese; ALL UI text is English.

Source: built from a written brief (no Figma/codebase provided). No logo was provided — render "AutoGo" in plain type (Inter 800) wherever a mark would go.

## Content fundamentals
- Tone: calm, direct, reassuring. Short sentences. No exclamation marks, no humor, no emoji.
- Address the user as "you"; AutoGo speaks as "we" sparingly ("We've notified your operator").
- Sentence case everywhere except status badges (UPPERCASE) and the SOS label.
- Lead with the answer: "Arriving in 12 min", not "Your operator is currently en route and expected…".
- Numbers carry the message: ETA and price are the largest elements on any status screen.
- Examples: "Help is on the way" · "Minh is 2.4 km away" · "Total — 890.000₫" · "You're safe to wait in your vehicle".

## Visual foundations
- **Color:** deep navy `#0F1B2D` base with charcoal `#1A2332` surfaces. `#E63B2E` (rescue red) is reserved exclusively for the Request Assistance button and SOS — it appears nowhere else, so it always means "get help". Green `#2E9E5B` = completed/safe. Amber `#F5A623` = warnings and pending states. Teal `#38B6B0` = active work (EN ROUTE, IN PROGRESS). Info blue `#4C8FDB` for ASSIGNED and links. **Light variant** for back-office web: set `data-theme="light"` on any container — white surfaces, `#16243A` text, AA-darkened semantics.
- **Type:** Inter (SF Pro fallback), weights 400–800. Body minimum 16px, captions 14px floor. ETA/price at 40–56px, weight 800, `font-variant-numeric: tabular-nums`.
- **Surfaces & elevation:** flat fills, 1px subtle borders (`--border-subtle`), soft deep shadows (`--shadow-card`) only on floating sheets. No gradients, no glassmorphism, no textures.
- **Corners:** 12px buttons/inputs, 16px cards/sheets, pill badges. SOS is a circle.
- **Spacing:** 4px scale; 20px screen gutters; generous whitespace — one primary action per screen.
- **Motion:** functional only — 150–200ms ease-out fades/slides; a slow 2s pulse on SEARCHING and SOS. No bounces.
- **States:** hover = darker fill (or subtle `--status-neutral-soft` on ghost); press = darker still; focus = 3px info-blue ring (`--focus-ring`); disabled = 40% opacity.
- **Touch targets:** ≥48px everywhere; primary buttons 56px.
- **Imagery:** none in-product. Maps are the only "imagery" (dark map style). Use striped placeholders labeled `map view` in mocks.

## Iconography
- No proprietary icon set was provided. The system uses **Lucide** (stroke icons, 2px stroke, outline style) via CDN — a flagged substitution; replace with brand icons when available.
- Usage: 20–24px inline with text, `--text-secondary` color by default; never multicolor; no emoji or unicode-as-icon.

## Status vocabulary
SEARCHING (amber, pulsing) → ASSIGNED (blue) → EN ROUTE (teal) → ARRIVED (green) → IN PROGRESS (teal) → COMPLETED (green). CHANGE PENDING (amber, pulsing) flags requests awaiting user approval. CANCELLED is muted gray.

## Index
- `overview.html` — palette, type scale, and full component set on one canvas.
- `styles.css` — global entry; imports `tokens/` (fonts, colors, typography, spacing; dark default + `[data-theme="light"]` variant).
- `guidelines/` — foundation specimen cards (colors, type, spacing, radii).
- `components/actions/` — Button, IconButton, SosButton.
- `components/forms/` — Input, Switch, PhotoUploadTile, StarRating.
- `components/status/` — StatusBadge, StatusCard, Stepper, EtaDisplay.
- `ui_kits/customer-app/` — customer mobile app: 18 screens (c1–c5 batch prefixes), flow boards, and a gallery `index.html`.
- `ui_kits/provider-app/`, `ui_kits/back-office/` — reserved for the next products (back-office uses the light variant).
- `SKILL.md` — agent-facing usage guide.

## Intentional additions
- `SosButton` — the brief names SOS as a first-class action; built as its own circular component.
- `EtaDisplay` — the brief requires extra-large ETA/price figures; codified as a component.