# DESIGN SYSTEM — App 25 · Body Goals

Lime + violet body tracker on sage. Rebuilt from the reference screenshot `refs/r25-body-goals.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 262px · ph 560px · pr 40px · pb 4px. Ring `0 0 0 1px #fff,0 0 0 2px #C9CCD2,0 24px 50px -24px rgba(0,0,0,.25)`
- **Screen background:** `#E9EBE6` · **Page:** `#CDD1DA`

## 2. Colour tokens (sampled from the reference)
| Token | Value |
|---|---|
| `--page` | `#CDD1DA` |
| `--ink` | `#141414` |
| `--ink-2` | `#6E7073` |
| `--lime` | `#C6F24E` |
| `--vio` | `#7A62E0` |
| `--screen` | `#E9EBE6` |
| `--frame` | `#F4F5F2` |
| `--frame-ring` | `0 0 0 1px #fff,0 0 0 2px #C9CCD2,0 24px 50px -24px rgba(0,0,0,.25)` |
| `--toast-bg` | `#141414` |
| `--toast-fg` | `#C6F24E` |

## 3. Components (CSS classes in `App 25 - Body Goals.html`)
`.rb` · `.hd` · `.hero` · `.well` · `.wave` · `.mets` · `.met` · `.nav` · `.gh` · `.gp` · `.gauge` · `.gg` · `.g2` · `.sug` · `.sg` · `.ph` · `.me` · `.grp` · `.row`

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

## 4. Screens
1. **Home**: anatomy hero, draggable wellbeing waveform, 4 metric tiles
2. **Goals**: bar-segment gauge, goal sliders, suggestions
3. **Profile**: user card, Personal / Other settings groups

## 5. Brand slot: "Cyborg Design"
Profile › user card sub-line (was the email address).
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.