# DESIGN SYSTEM — App 22 · Volt Controls

Neon-yellow EV control app. Rebuilt from the reference screenshot `refs/r22-ev-controls.png`. It is a 1024×768 stage showing 3 phones, and every control on it is interactive.

## 1. Foundations
- **Font:** Inter Tight (Google Fonts). Base UI text is 7.5–10px on a 288px-wide phone (≈ 2.6× on device).
- **Frame:** pw 288px · ph 622px · pr 44px · pb 5px. Ring `0 0 0 1px #D5D5D5,0 30px 60px -26px rgba(0,0,0,.35)`
- **Screen background:** `#F4F4F4` · **Page:** `#A8A9AB`

## 2. Colour tokens (sampled from the reference)
| Token | Value |
|---|---|
| `--page` | `#A8A9AB` |
| `--ink` | `#141414` |
| `--ink-2` | `#7A7A7A` |
| `--neon` | `#F4F20A` |
| `--dark` | `#1A1A1A` |
| `--chip` | `#fff` |
| `--soft` | `#F1F1F1` |
| `--frame` | `#fff` |
| `--frame-ring` | `0 0 0 1px #D5D5D5,0 30px 60px -26px rgba(0,0,0,.35)` |
| `--screen` | `#F4F4F4` |
| `--toast-bg` | `#1A1A1A` |
| `--toast-fg` | `#F4F20A` |

## 3. Components (CSS classes in `App 22 - Volt Controls.html`)
`.k-island` · `.rb` · `.hd` · `.bat` · `.lim` · `.sl` · `.sc` · `.sh` · `.qa` · `.chg` · `.nav` · `.ct` · `.ctl` · `.vs` · `.two` · `.tp` · `.sheet` · `.dd` · `.et` · `.rt` · `.bb` · `.kp` · `.acts`

Each rule is written once, in its screen's CSS block. Selected states always use the `.on` modifier.

## 4. Screens
1. **Home**: battery %, draggable charge limit slider, quick actions, charging bar
2. **Controls**: top-view car with 6 toggle controls, vehicle status, Start / Vent
3. **Trip**: road hero, route sheet with stops, KPIs, Send to Car

## 5. Brand slot: "Cyborg Design"
Home › vehicle name in the header (was "Blackstar").
The text comes from `BRAND` in `../shared/kit.jsx`. It keeps the exact font, size, weight and colour of the text it replaced. Nothing else in the layout changes.

## 6. Motion
- Toasts drop in from the top with a spring (`.k-toast`, 450ms).
- List and grid refreshes use `kfade` (350ms), staggered 30–50ms per item.
- Active pills and nav items change colour/width over 200–300ms.