# Application 15 — PawCare · Design System

> Single source of truth for App 15. Rebuilt 1:1 from the reference screenshot `refs/r15-pawcare.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-15/App 15 - PawCare.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: **Albert Sans** (Google Fonts)
- Photos: `assets/` and `../shared/avatars/` (CC/public-domain stand-ins for the reference imagery)

## 1. Look & feel
Light grey page, off-white screens, sky blue (#9DD3EC) hero blocks, pastel lavender (#B1A4FB) and pink (#ECD3FE) product cards, charcoal (#1E1F1F) pill nav. Masonry of 10 small phones.

## 2. Colour & frame tokens (`:root`)
| Token | Value |
|---|---|
| `--page` | `#D1D3D7` |
| `--ink` | `#141414` |
| `--ink-2` | `#6B6B6B` |
| `--blue` | `#9DD3EC` |
| `--blue-2` | `#7AC6E8` |
| `--purple` | `#B1A4FB` |
| `--pink` | `#ECD3FE` |
| `--nav` | `#1E1F1F` |
| `--chip` | `#F1F1F2` |
| `--card` | `#fff` |
| `--frame` | `#FAFAFA` |
| `--frame-ring` | `0 0 0 1px #E6E6E8,0 20px 40px -18px rgba(0,0,0,.25)` |
| `--screen` | `#FAFAFA` |
| `--toast-bg` | `#1E1F1F` |

**Phone frame:** `--page: #D1D3D7` · `--font: 'Albert Sans',system-ui,sans-serif` · `--pw: 204px` · `--ph: 440px` · `--pr: 26px` · `--pb: 0px` · `--frame: #FAFAFA` · `--frame-ring: 0 0 0 1px #E6E6E8,0 20px 40px -18px rgba(0,0,0,.25)` · `--screen: #FAFAFA`.
Colours were sampled pixel-by-pixel from the reference. Keep them exact.

## 3. Components
| Class | Spec |
|---|---|
| `.nav` | #1E1F1F pill, 28 circles; active sky blue |
| `.cat` | 26 tall pill with 22 photo; selected charcoal |
| `.prod` | 94 tall r12 pastel card, 22 white + circle, product photo at bottom |
| `.fl` | Blue flash card, 22 countdown circles, 24 tall discount track |
| `.go` | 28 tall charcoal pill with blue paw circle |
| `.add` | 30 tall sky-blue 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. Onboarding — blue hero with cat, scalloped edge, wordmark with white-box second word, paws, "Smart Pet Care", back circle + dark "Let’s Go" pill
2. Flash sale — countdown circles (live), discount segmented
3. Best selling / Home — blue header (location, cart, bell, "For Buddy", search), category pills with photo, pastel product cards with + button, free-delivery coupon
4. Filter — search, categories, top-search tags, popular products
5. Product — name, circular stage, quantity stepper with live price, blue Add to Cart
6. Profile — blue card with avatar, dark Edit Profile, rows
7. Autoship — controls and subscription header

## 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:
- Onboarding › wordmark (was "Paw|Care"; now "Cyborg" + white-box "Design"). Also the product name on the Product screen (was "Sanicat" — trademark).
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`.