# DESIGN SYSTEM — App 31 · Level Up Learning

Pink/lavender playful learning app. Rebuilt from the reference screenshot `refs/r31-learning.png`. It is a 1024×768 stage showing 3 phones, and every control on it is interactive.

## 1. Foundations
- **Font:** Onest (Google Fonts). Base UI text is 7.5–10px on a 288px-wide phone (≈ 2.6× on device).
- **Frame:** pw 258px · ph 560px · pr 44px · pb 0px. Ring `0 30px 60px -26px rgba(160,60,160,.35)`
- **Screen background:** `#fff` · **Page:** `#F6D2F2`

## 2. Colour tokens (sampled from the reference)
| Token | Value |
|---|---|
| `--page` | `#F6D2F2` |
| `--ink` | `#141414` |
| `--ink-2` | `#7B7B7B` |
| `--pink` | `#E9A6F0` |
| `--blue` | `#A9C1F2` |
| `--ora` | `#F6A24A` |
| `--yel` | `#F0C95C` |
| `--frame` | `#fff` |
| `--frame-ring` | `0 30px 60px -26px rgba(160,60,160,.35)` |
| `--screen` | `#fff` |
| `--toast-bg` | `#141414` |

## 3. Components (CSS classes in `App 31 - Level Up Learning.html`)
`.rb` · `.hd` · `.mo` · `.wk` · `.path` · `.stk` · `.cp` · `.act` · `.leg` · `.tab` · `.prg` · `.hot` · `.offs` · `.of` · `.todo` · `.tg` · `.ms` · `.onb`

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

## 4. Screens
1. **Calendar**: week strip, "Map the Path" course card, activity donut with legend
2. **Dashboard**: progress, hot offers, to-do counters (tap to complete), milestones
3. **Onboarding**: illustration, 3-step headline, progress-ring Next button

## 5. Brand slot: "Cyborg Design"
Dashboard › milestone assignee name (was "John Doe").
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.