# DESIGN SYSTEM — App 21 · Lifetrack

Green blurred-glass medical tracker. Rebuilt from the reference screenshot `refs/r21-lifetrack.png`. It is a 1024×768 stage showing 3 phones, and every control on it is interactive.

## 1. Foundations
- **Font:** Instrument Sans (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 #fff,0 0 0 2px #CFCFD2,0 30px 60px -26px rgba(0,0,0,.35)`
- **Screen background:** `#B9DDB2` · **Page:** `#E4E5E8`

## 2. Colour tokens (sampled from the reference)
| Token | Value |
|---|---|
| `--page` | `#E4E5E8` |
| `--ink` | `#0E1A12` |
| `--ink-2` | `#4F6356` |
| `--g1` | `#9FD49A` |
| `--g2` | `#4E9A5A` |
| `--g3` | `#1F5B2E` |
| `--frame` | `#1A1A1A` |
| `--frame-ring` | `0 0 0 1px #fff,0 0 0 2px #CFCFD2,0 30px 60px -26px rgba(0,0,0,.35)` |
| `--screen` | `#B9DDB2` |
| `--toast-bg` | `#0E1A12` |

## 3. Components (CSS classes in `App 21 - Lifetrack.html`)
`.k-island` · `.bgA` · `.bgB` · `.bgC` · `.shape` · `.ob` · `.cta` · `.skip` · `.hd` · `.brand` · `.gl` · `.rb` · `.bp` · `.pill` · `.ecg` · `.mets` · `.met` · `.add` · `.me` · `.gq` · `.prog` · `.opts` · `.op`

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

## 4. Screens
1. **Onboarding**: blurred green chevron, Continue / Skip
2. **Dashboard**: blood-pressure glass card with live ECG, 4 metric glass tiles
3. **Goal**: goal picker with glass radio pills, progress bar

## 5. Brand slot: "Cyborg Design"
Dashboard › header wordmark (was "Lifetrack"); the sub-line "Medical Systems" is kept.
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.