# Application 8 — AI Chat Study · Design System

> Single source of truth for App 8. Rebuilt 1:1 from the reference screenshot `refs/r08-ai-chat.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-8/App 8 - AI Chat Study.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: **Plus Jakarta Sans (+ Caveat for the handwritten bubble)** (Google Fonts)
- Photos: `assets/` and `../shared/avatars/` (CC/public-domain stand-ins for the reference imagery)

## 1. Look & feel
Playful: sky-blue gradient with white clouds, navy + red "WELCOME BACK!" headline, orange (#FD6815) actions, black 1.5px "neo-brutal" outlines with hard 3px bottom shadow on cards and bubbles.

## 2. Colour & frame tokens (`:root`)
| Token | Value |
|---|---|
| `--page` | `#F2F2F3` |
| `--ink` | `#111` |
| `--ink-2` | `#555` |
| `--muted` | `#8E8E93` |
| `--orange` | `#FD6815` |
| `--orange-2` | `#FF8A3D` |
| `--navy` | `#13235C` |
| `--red` | `#EE3B33` |
| `--sky` | `#6DC9FC` |
| `--sky-2` | `#BFE7FD` |
| `--sky-3` | `#E9F7FD` |
| `--line` | `#1A1A1A` |
| `--frame` | `#fff` |
| `--frame-ring` | `0 0 0 1px #E3E3E5,0 24px 50px -16px rgba(0,0,0,.15)` |
| `--screen` | `#fff` |

**Phone frame:** `--page: #F2F2F3` · `--font: 'Plus Jakarta Sans',system-ui,sans-serif` · `--pw: 290px` · `--ph: 626px` · `--pr: 38px` · `--pb: 5px` · `--frame: #fff` · `--frame-ring: 0 0 0 1px #E3E3E5,0 24px 50px -16px rgba(0,0,0,.15)` · `--screen: #fff`.
Colours were sampled pixel-by-pixel from the reference. Keep them exact.

## 3. Components
| Class | Spec |
|---|---|
| `.obtn` | 44 tall orange pill 13/600 white |
| `.logo` | 24 orange rounded tile with sparkle + 15/700 wordmark |
| `.ask` | 36 tall white pill 1.2px #D9D9DB border, 28 orange send circle |
| `.tile` | 64 tall r9 white, 1.3px border; selected border orange |
| `.rc/.bb` | 1.6px #1A1A1A border, r10–12, box-shadow 0 3px 0 #1A1A1A |
| `.hnav` | 56 tall pill, 1.6px black outline; active item expands to orange pill with label |
| `.c-in` | 40 tall black input pill + 40 orange send circle |

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 — logo + Skip pill, navy/red headline with red underline swoosh, 3D character in soft vignette, lime handwritten bubble, orange sparks, coin card, orange "Get Started" + Log In link
2. Home — logo + bell + avatar, greeting, search pill with orange send, 4 outlined tiles (Study Help/Homework/Explain/More), Recent Chats outlined card with hard shadow, pill nav with expanding orange Home
3. Chat — back/logo/menu, bot bubbles (orange circle avatar) and user bubbles with photo, typing dots, black input pill + orange send

## 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 › header logo wordmark (was "AI Chat"). Same 15px/700, same orange sparkle tile.
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`.