# Application 14 — Momentum AI · Design System

> Single source of truth for App 14. Rebuilt 1:1 from the reference screenshot `refs/r14-ai-tasks.png`. **Do not restyle**: new screens must reuse these tokens and components.
> Agents: read this file, then `AI_GUIDE.md`. Machine-readable values are in `tokens.json`.

- Entry: `apps/app-14/App 14 - Momentum AI.html` (CSS lives in its `<style>`, with tokens in `:root`)
- Screens: `src/screens.jsx` · Shared frame/icons/hooks: `../shared/kit.jsx` + `../shared/kit.css`
- Font: **DM Sans** (Google Fonts)
- Photos: `assets/` and `../shared/avatars/` (CC/public-domain stand-ins for the reference imagery)

## 1. Look & feel
Near-black page, olive-to-black gradient screens with film grain, soft lime (#D4F56B) glow accents, translucent 4% cards with 7% hairlines.

## 2. Colour & frame tokens (`:root`)
| Token | Value |
|---|---|
| `--page` | `#181918` |
| `--ink` | `#F3F5EE` |
| `--ink-2` | `#A9AEA2` |
| `--muted` | `#7C8176` |
| `--lime` | `#D4F56B` |
| `--lime-2` | `#B8E03A` |
| `--card` | `#1E221A` |
| `--card-2` | `#262B20` |
| `--line` | `rgba(255,255,255,.07)` |
| `--frame` | `#1E211A` |
| `--frame-ring` | `0 0 0 1.5px #3B4033,0 30px 60px -20px rgba(0,0,0,.7)` |
| `--screen` | `linear-gradient(180deg,#3A4A18 0%,#1F2613 36%,#161913 62%,#121411 100%)` |
| `--toast-bg` | `#D4F56B` |
| `--toast-fg` | `#121411` |

**Phone frame:** `--page: #181918` · `--font: 'DM Sans',system-ui,sans-serif` · `--pw: 286px` · `--ph: 620px` · `--pr: 40px` · `--pb: 0px` · `--frame: #1E211A` · `--frame-ring: 0 0 0 1.5px #3B4033,0 30px 60px -20px rgba(0,0,0,.7)` · `--screen: linear-gradient(180deg,#3A4A18 0%,#1F2613 36%,#161913 62%,#121411 100%)`.
Colours were sampled pixel-by-pixel from the reference. Keep them exact.

## 3. Components
| Class | Spec |
|---|---|
| `.rb/.pill` | 34 glass circle / pill, 6% white + 10% border |
| `.asst` | 106 tall pale-lime gradient card with orb |
| `.bar` | 16 tall striped track, glowing lime fill |
| `.act` | 86 tall glass action card, arrow circle turns lime when active |
| `.col` | 30 wide capsule tube with inner gradient fill; active glows |
| `.nav` | 56 glass bar, 38 lime FAB raised -30 |

Shared (kit): `Phone` (status bar + island + home indicator), `I` icons (24 viewBox, 1.7 stroke, round), `Img` (cover photo div), `useToast()` (pill that drops from the top), `Stage` (1024×768 scaled canvas).

## 4. Screens
1. Home — grid/“12 Active Tasks”/bell/avatar, date, "Let’s Build Momentum Today", pale-lime AI Assistant card with glowing orb, Today’s Progress with glowing bar (tap a task to advance), All Tasks chips + task row, glass nav with raised lime AI FAB
2. Quick Capture — close/more, title, capture card with Type/Speak/Upload (selected lime) + input, 6 Suggested Action cards (selected shows lime arrow)
3. Tasks — My Tasks/Team/Projects segmented (lime), Today’s Focus chart with 5 capsule tubes + % tips (tap to highlight), lime Boost button, Top Priority card

## 5. Brand slot: "Cyborg Design"
Exactly **one** existing text was swapped for the `BRAND` constant (`'Cyborg Design'`, defined in `../shared/kit.jsx`), with **no** change to its font, size, weight or colour:
- Tasks › Top Priority task title (was cropped "Team Stand…"). Same 11/500.
To rename the brand everywhere, change `BRAND` in the kit. Never add a new element just to show the brand.

## 6. Interaction
Every chip, tab, date, time, card and toggle changes state. Primary buttons give toast feedback. Press = `scale(.95–.97)`. Screen entry uses `k-fade`/`k-push` (0.35 s `cubic-bezier(.2,.8,.2,1)`).

## 7. Adding a screen
1. Add a component in `src/screens.jsx` that only uses the classes above.
2. Mount it in `App()` inside a `<Ph>` at the phone size from `--pw/--ph`.
3. Selected states use the accent from §2. Keep the text scale inside the ranges used here.
4. Update §4 and `tokens.json`.