# Application 13 — Toon Stream · Design System

> Single source of truth for App 13. Rebuilt 1:1 from the reference screenshot `refs/r13-cartoon.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-13/App 13 - Toon Stream.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: **Lexend (+ Fredoka for card titles)** (Google Fonts)
- Photos: `assets/` and `../shared/avatars/` (CC/public-domain stand-ins for the reference imagery)

## 1. Look & feel
Lavender page, black-bezel phones, mint (#F4FDE7) sheets, lime (#A4EA02) actions, bright 3D-cartoon artwork.

## 2. Colour & frame tokens (`:root`)
| Token | Value |
|---|---|
| `--page` | `#D5D8EA` |
| `--ink` | `#121212` |
| `--ink-2` | `#5E6458` |
| `--lime` | `#A4EA02` |
| `--lime-2` | `#8FD000` |
| `--mint` | `#F4FDE7` |
| `--mint-2` | `#E6F8CC` |
| `--chip` | `#fff` |
| `--frame` | `#0E0E0E` |
| `--frame-ring` | `0 30px 60px -24px rgba(60,60,110,.4)` |
| `--screen` | `linear-gradient(180deg,#F3FCE4,#EAF7D6)` |
| `--toast-bg` | `#121212` |

**Phone frame:** `--page: #D5D8EA` · `--font: 'Lexend',system-ui,sans-serif` · `--pw: 290px` · `--ph: 626px` · `--pr: 40px` · `--pb: 3px` · `--frame: #0E0E0E` · `--frame-ring: 0 30px 60px -24px rgba(60,60,110,.4)` · `--screen: linear-gradient(180deg,#F3FCE4,#EAF7D6)`.
Colours were sampled pixel-by-pixel from the reference. Keep them exact.

## 3. Components
| Class | Spec |
|---|---|
| `.lbtn` | 46 tall lime pill |
| `.chip` | 34 tall white pill; selected lime |
| `.card` | 150×222 r20 featured card, 3D side stacking (translateX ±52, scale .86, rotateY) |
| `.tile` | 92×124 r14 poster with duration chip and Fredoka title |
| `.play` | 40 lime circle |
| `.meta span` | 28 tall pale-green pills |

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. Welcome — castle artwork, mint sheet with outlined tag, 22px title, lime "Started Streaming"
2. Home — avatar + name, bell, search with lime filter, chips (selected lime), 3D stacked featured carousel (tap side cards to bring forward), Popular Series tiles with duration chip
3. Detail — hero art with back/info circles, mint sheet: date, title + lime play, meta chips, rating/views/likes, Episode row

## 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 › featured card subtitle (was "Reef Series"). Same 8.5px 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`.