# Application 10 — Task Flow · Design System

> Single source of truth for App 10. Rebuilt 1:1 from the reference screenshot `refs/r10-task-manager.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-10/App 10 - Task Flow.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: **Figtree** (Google Fonts)
- Photos: `assets/` and `../shared/avatars/` (CC/public-domain stand-ins for the reference imagery)

## 1. Look & feel
Warm greige page with huge faded "TASK MANAGER" word; light grey screen fading to cream at the bottom; sunflower yellow (#FDBD15) + teal (#139476) project cards, charcoal (#2F2F2F) dark elements.

## 2. Colour & frame tokens (`:root`)
| Token | Value |
|---|---|
| `--page` | `#CFCCC6` |
| `--ink` | `#1B1B1B` |
| `--ink-2` | `#6E6E6E` |
| `--muted` | `#9A9A9A` |
| `--yellow` | `#FDBD15` |
| `--yellow-2` | `#F6B400` |
| `--green` | `#139476` |
| `--dark` | `#2F2F2F` |
| `--nav` | `#262626` |
| `--cell` | `#C9CCD1` |
| `--line` | `#DADADA` |
| `--frame` | `#F3F3F3` |
| `--frame-ring` | `0 0 0 1.5px #fff,0 26px 50px -18px rgba(0,0,0,.25)` |
| `--screen` | `linear-gradient(180deg,#E7E7E6 0%,#EDEDEB 55%,#F1E9C4 100%)` |
| `--toast-bg` | `#262626` |

**Phone frame:** `--page: #CFCCC6` · `--font: 'Figtree',system-ui,sans-serif` · `--pw: 268px` · `--ph: 588px` · `--pr: 34px` · `--pb: 4px` · `--frame: #F3F3F3` · `--frame-ring: 0 0 0 1.5px #fff,0 26px 50px -18px rgba(0,0,0,.25)` · `--screen: linear-gradient(180deg,#E7E7E6 0%,#EDEDEB 55%,#F1E9C4 100%)`.
Colours were sampled pixel-by-pixel from the reference. Keep them exact.

## 3. Components
| Class | Spec |
|---|---|
| `.pc` | 140×150 r20 project card with rings, tag, arrow circle, avatar stack, mini progress |
| `.chip` | 30 tall outline pill; selected yellow |
| `.seg` | 36 tall #D6D6D6 track; active #2F2F2F white text |
| `.cell` | 34 tall r7 #C9CCD1; weekends/out-of-month hatched; events span columns |
| `.plan` | r20 dark card, 3px yellow border, hatched Included tab |
| `.nav` | 52 tall #262626 bar, 40 yellow rounded-square FAB |
| `.next` | 40 tall yellow pill |

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 — avatar + "Hey, Courtney Henry", chat/crown circles, 2-line title (second line grey), white search pill with yellow mic, filter chips (selected yellow), horizontal project cards (yellow/green/indigo, concentric rings, HIGH tag, arrow circle, avatars +4, progress), My Cards row, dark nav with square yellow FAB
2. Schedule — back/chat circles, Calendar/Activity segmented (dark active), "Track Your / Schedule", month pill, Mon-first grid (weekends yellow, hatched out-of-month, multi-day event cells), white add-task sheet
3. Subscription — Monthly/Yearly segmented, Starter plan dark card with yellow border + hatched "Included" tab, struck price + yellow price, dashed divider, green check features, light Essentials plan, yellow Next

## 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:
- Home › second project card title (was "Fintech App"). Same 13/600 white.
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`.