# DESIGN SYSTEM — App 20 · Smart Health

Orange health tracker. Rebuilt from the reference screenshot `refs/r20-smart-health.png`. It is a 1024×768 stage showing 3 phones, and every control on it is interactive.

## 1. Foundations
- **Font:** Plus Jakarta 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 42px · pb 0px. Ring `0 0 0 1px rgba(0,0,0,.04),0 30px 60px -26px rgba(90,60,20,.35)`
- **Screen background:** `#fff` · **Page:** `#E6D8C8`

## 2. Colour tokens (sampled from the reference)
| Token | Value |
|---|---|
| `--page` | `#E6D8C8` |
| `--ink` | `#161616` |
| `--ink-2` | `#7A7470` |
| `--or` | `#FB8C0B` |
| `--or-2` | `#FFA533` |
| `--peach` | `#FDE3C2` |
| `--vio` | `#8E5CF6` |
| `--blue` | `#4DA3F0` |
| `--frame` | `#fff` |
| `--frame-ring` | `0 0 0 1px rgba(0,0,0,.04),0 30px 60px -26px rgba(90,60,20,.35)` |
| `--screen` | `#fff` |
| `--toast-bg` | `#FB8C0B` |

## 3. Components (CSS classes in `App 20 - Smart Health.html`)
`.k-island` · `.rb` · `.av` · `.sp` · `.dots` · `.hm` · `.hd` · `.ring` · `.leg` · `.mind` · `.tiles` · `.tile` · `.sc` · `.grid` · `.c1` · `.c0` · `.cw` · `.ch` · `.cv` · `.cvh` · `.cvo` · `.days` · `.task` · `.stk`

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

## 4. Screens
1. **Splash**: orange cloud hero, runners illustration, 3-step onboarding
2. **Home**: activity rings with legend, AI wellbeing card, 4 pastel tiles
3. **Schedule**: tappable dot calendar (peach / hatched / violet), daily tasks

## 5. Brand slot: "Cyborg Design"
Splash › logo wordmark at the top (was "Smart Health").
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.