# Application 9 — Style Hub · Design System

> Single source of truth for App 9. Rebuilt 1:1 from the reference screenshot `refs/r09-style-hub.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-9/App 9 - Style Hub.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: **Outfit** (Google Fonts)
- Photos: `assets/` and `../shared/avatars/` (CC/public-domain stand-ins for the reference imagery)

## 1. Look & feel
Dark olive-black (#0E1407→#070B03) with neon lime (#A7FD20) glow; translucent white 5–7% surfaces, 1px white/lime hairlines.

## 2. Colour & frame tokens (`:root`)
| Token | Value |
|---|---|
| `--page` | `#2B2F27` |
| `--screen` | `#0E1407` |
| `--ink` | `#F2F4EE` |
| `--ink-2` | `#B7BCAE` |
| `--muted` | `#7F8577` |
| `--lime` | `#A7FD20` |
| `--lime-d` | `#6FA80F` |
| `--card` | `#1B2014` |
| `--card-2` | `#232A1A` |
| `--chip` | `#262B20` |
| `--line` | `rgba(167,253,32,.14)` |
| `--frame` | `#121708` |
| `--frame-ring` | `0 0 0 1.5px #4A5140,0 30px 60px -20px rgba(0,0,0,.6)` |
| `--toast-bg` | `#A7FD20` |
| `--toast-fg` | `#101505` |

**Phone frame:** `--page: #2B2F27` · `--screen: #0E1407` · `--font: 'Outfit',system-ui,sans-serif` · `--pw: 286px` · `--ph: 618px` · `--pr: 40px` · `--pb: 0px` · `--frame: #121708` · `--frame-ring: 0 0 0 1.5px #4A5140,0 30px 60px -20px rgba(0,0,0,.6)`.
Colours were sampled pixel-by-pixel from the reference. Keep them exact.

## 3. Components
| Class | Spec |
|---|---|
| `.day` | 34×46 r12 #262B20; selected lime + dark text + 0 0 16px lime glow |
| `.time` | 26 tall pill; selected lime |
| `.sp-i` | 44 avatar ring; selected 1.5px lime + lime check dot |
| `.conf` | Glass card r18, lime inner glow at bottom, lime hairline |
| `.lbtn` | 32 tall lime pill with calendar icon |
| `.nav` | Floating glass pill, items 36; active = lime-tinted pill with 30 lime circle + label |
| `.row` | 40 tall r12 white 4.5% row, 24 outline icon 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. Splash — radial green glow, giant faint scissors, lime crescent-profile + scissors mark, brand text
2. Appointments — "Chose Date And Time" + title, menu circle; October day chips (selected lime with glow), Morning time pills, specialist avatars (selected lime ring + check), glass confirm card with date/time chips and lime "Book Now", floating glass nav where active item expands with a lime circle
3. Profile — back/menu circles, glass card with avatar (lime ring), name/email, Edit Profile chip, 7 setting rows with circle icons + chevron

## 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:
- Splash › text under the logo (was "Style Hub"). Same 15/600 lime.
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`.