# Application 7 — Glow Barber · Design System

> Single source of truth for App 7. Rebuilt 1:1 from the reference screenshot `refs/r07-barber-purple.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-7/App 7 - Glow Barber.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: **Manrope** (Google Fonts)
- Photos: `assets/` and `../shared/avatars/` (CC/public-domain stand-ins for the reference imagery)

## 1. Look & feel
Light, soft lavender page; saturated purple (#7D4FD6) headers and gradient CTAs; white rounded sheets overlapping the purple header.

## 2. Colour & frame tokens (`:root`)
| Token | Value |
|---|---|
| `--page` | `#E6EDF4` |
| `--screen` | `#fff` |
| `--ink` | `#1D1B26` |
| `--ink-2` | `#6B6878` |
| `--muted` | `#9C99A8` |
| `--line` | `#EEEBF3` |
| `--purple` | `#7D4FD6` |
| `--purple-2` | `#9B5DF5` |
| `--purple-d` | `#6A3FC4` |
| `--lav` | `#F1EAFB` |
| `--lav-2` | `#E4D8F8` |
| `--sel` | `#8A3FE0` |
| `--star` | `#F5B400` |
| `--rate` | `#F29100` |
| `--visa-a` | `#35A98E` |
| `--visa-b` | `#86D46A` |
| `--frame` | `#fff` |
| `--frame-ring` | `0 20px 44px -10px rgba(70,60,120,.18)` |
| `--toast-bg` | `#1D1B26` |

**Phone frame:** `--page: #E6EDF4` · `--screen: #fff` · `--font: 'Manrope',system-ui,sans-serif` · `--pw: 240px` · `--ph: 520px` · `--pr: 30px` · `--pb: 0px` · `--frame: #fff` · `--frame-ring: 0 20px 44px -10px rgba(70,60,120,.18)`.
Colours were sampled pixel-by-pixel from the reference. Keep them exact.

## 3. Components
| Class | Spec |
|---|---|
| `.pbtn` | Primary pill button 38 tall, gradient purple→#9B5DF5, 12/700 white, purple glow |
| `.hd` | Purple header, 12px side padding, avatar 26 with white ring, 26 outline bell |
| `.srch` | 28 tall white pill, inner lavender "Search" button 22 tall |
| `.promo` | 92 tall purple card r14 with lavender tab behind, photo circle right |
| `.am` | Action circles 34 lavender, purple icon; selected = purple fill + white icon |
| `.date/.time` | Date chip 36 tall r7 #F4F3F7; selected lavender + #8A3FE0. Time pill 21 outline; selected purple fill |
| `.visa` | 118 tall green gradient card r12 |
| `.cardrow` | 40 tall r9 #F6F5FA row with radio |
| `.nav` | 52 tall #1C1B20 bar with 34 purple FAB raised -30px, 4px white ring |

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 — purple header (avatar, bell, search pill with "Search" button), overlapping white sheet: "Get Special Discount" promo with circular photo, 4 appointment actions (lavender circles), Top Saloons 2-col grid, dark bottom nav with raised purple FAB
2. Detail — full-bleed photo with glass play button, title + rating, Read More, price + save %, date chips (selected = lavender bg + purple text), time pills (selected = purple fill), review row, gradient "Booking" button
3. Payment — purple header (back/bell circles), green VISA card with chip/NFC, pager dots, card rows with radio (Master/Visa/Paypal), gradient "Payment" button
4. Chat — purple header with online dot, call/video circles, bubbles (them = #F4F3F7, me = purple), input pill
5. Onboarding — purple→white radial rays, circular photo bubbles, "Refresh, Relax, Look Fabulous", outline pill CTA with arrow circle, 3-step pager

## 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 › Top Saloons › first card title (was "GlowUp Studio"). Same 7px/600 Manrope, ink colour.
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`.