# Application 11 — Volt EV · Design System

> Single source of truth for App 11. Rebuilt 1:1 from the reference screenshot `refs/r11-ev.png`. **Do not restyle**: new screens must reuse these tokens and components.
> Agents: read this file, then `AI_GUIDE.md`. Machine-readable values are in `tokens.json`.

- Entry: `apps/app-11/App 11 - Volt EV.html` (CSS lives in its `<style>`, with tokens in `:root`)
- Screens: `src/screens.jsx` · Shared frame/icons/hooks: `../shared/kit.jsx` + `../shared/kit.css`
- Font: **Urbanist** (Google Fonts)
- Photos: `assets/` and `../shared/avatars/` (CC/public-domain stand-ins for the reference imagery)

## 1. Look & feel
Neutral grey page, off-white (#F6F6F6) screens, near-black (#1A1A1A) blocks, electric neon yellow (#F5F900) as the only accent. Cars are cut-out PNGs floating with a neon glow line under the wheels. Masonry of 9 small phones.

## 2. Colour & frame tokens (`:root`)
| Token | Value |
|---|---|
| `--page` | `#A7A8A9` |
| `--ink` | `#141414` |
| `--ink-2` | `#6B6B6B` |
| `--muted` | `#9A9A9A` |
| `--neon` | `#F5F900` |
| `--neon-2` | `#FBFD1A` |
| `--dark` | `#1A1A1A` |
| `--card` | `#fff` |
| `--soft` | `#EFEFEF` |
| `--chip` | `#F3F3F3` |
| `--ok` | `#35C759` |
| `--frame` | `#F6F6F6` |
| `--frame-ring` | `0 20px 40px -18px rgba(0,0,0,.3)` |
| `--screen` | `#F6F6F6` |
| `--toast-bg` | `#1A1A1A` |

**Phone frame:** `--page: #A7A8A9` · `--font: 'Urbanist',system-ui,sans-serif` · `--pw: 204px` · `--ph: 440px` · `--pr: 26px` · `--pb: 0px` · `--frame: #F6F6F6` · `--frame-ring: 0 20px 40px -18px rgba(0,0,0,.3)` · `--screen: #F6F6F6`.
Colours were sampled pixel-by-pixel from the reference. Keep them exact.

## 3. Components
| Class | Spec |
|---|---|
| `.vc` | 80 tall #1A1A1A card r14, battery bar neon |
| `.cont` | Back circle · white Continue pill with neon wheel · dark next circle |
| `.slider` | 26 tall track, neon fill, 22 dark knob showing value; drag to set |
| `.qa` | 4-up 34 tall tiles; selected neon |
| `.dial` | 90 ring, neon arc + dark handle, ± buttons |
| `.mode` | 32 tall white pill row; active icon neon |
| `.nav` | Dark pill, 26 circles; active neon |

Shared (kit): `Phone` (status bar + island + home indicator), `I` icons (24 viewBox, 1.7 stroke, round), `Img` (cover photo div), `useToast()` (pill that drops from the top), `Stage` (1024×768 scaled canvas).

## 4. Screens
1. Settings — dark vehicle card (battery bar), grey setting rows, dark icon nav
2. Onboarding — pale-green top, giant white wordmark, dark car + neon glow, "Don’t Sit At Home Go For A Ride!" with neon marker box, dark "Get Started Today" with neon arrow
3. Continue step — car + back / neon-wheel Continue pill / dark next
4. Dashboard — Blackstar selector, 76% battery, car, draggable charge-limit slider (neon fill, dark knob), 4 quick actions, dark Charging card with neon Stop button, nav
5. Manage — headline with neon highlight, owners avatars +3.2m, huge "VOLT" word behind car
6. Climate — dark interior photo header, temperature ring dial ±, mode rows (Dog/Camp/Defrost)
7. Payment — wallet card, KWH/Total tiles, car at charger, neon "Pay with Apple Pay"
8. Profile — avatar, Premium chip, vehicle card

## 5. Brand slot: "Cyborg Design"
Exactly **one** existing text was swapped for the `BRAND` constant (`'Cyborg Design'`, defined in `../shared/kit.jsx`), with **no** change to its font, size, weight or colour:
- Onboarding › giant background wordmark (was the car maker name — removed, trademark). Same 58/800 white.
To rename the brand everywhere, change `BRAND` in the kit. Never add a new element just to show the brand.

## 6. Interaction
Every chip, tab, date, time, card and toggle changes state. Primary buttons give toast feedback. Press = `scale(.95–.97)`. Screen entry uses `k-fade`/`k-push` (0.35 s `cubic-bezier(.2,.8,.2,1)`).

## 7. Adding a screen
1. Add a component in `src/screens.jsx` that only uses the classes above.
2. Mount it in `App()` inside a `<Ph>` at the phone size from `--pw/--ph`.
3. Selected states use the accent from §2. Keep the text scale inside the ranges used here.
4. Update §4 and `tokens.json`.