# Application 12 — Nest Estate · Design System

> Single source of truth for App 12. Rebuilt 1:1 from the reference screenshot `refs/r12-real-estate.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-12/App 12 - Nest Estate.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: **Sora** (Google Fonts)
- Photos: `assets/` and `../shared/avatars/` (CC/public-domain stand-ins for the reference imagery)

## 1. Look & feel
Warm grey page, bright white screens with double white bezel, monochrome UI (#1C1C1C black actions, #F1F1F2 chips), photography does the colour.

## 2. Colour & frame tokens (`:root`)
| Token | Value |
|---|---|
| `--page` | `#BAB7B5` |
| `--ink` | `#161616` |
| `--ink-2` | `#6E6E6E` |
| `--muted` | `#9A9A9A` |
| `--dark` | `#1C1C1C` |
| `--chip` | `#F1F1F2` |
| `--card` | `#fff` |
| `--soft` | `#F6F6F7` |
| `--line` | `#EDEDED` |
| `--frame` | `#FBFBFC` |
| `--frame-ring` | `0 0 0 5px #fff,0 0 0 6px #E4E4E4,0 30px 60px -24px rgba(0,0,0,.3)` |
| `--screen` | `#FBFBFC` |
| `--toast-bg` | `#1C1C1C` |

**Phone frame:** `--page: #BAB7B5` · `--font: 'Sora',system-ui,sans-serif` · `--pw: 286px` · `--ph: 620px` · `--pr: 40px` · `--pb: 0px` · `--frame: #FBFBFC` · `--frame-ring: 0 0 0 5px #fff,0 0 0 6px #E4E4E4,0 30px 60px -24px rgba(0,0,0,.3)` · `--screen: #FBFBFC`.
Colours were sampled pixel-by-pixel from the reference. Keep them exact.

## 3. Components
| Class | Spec |
|---|---|
| `.sq` | 36 square r12 #F1F1F2 icon button; .dk = black |
| `.ty` | 36 tall chip with 28 white icon tile; selected black |
| `.lst` | r20 grey frame with r16 photo + white body r16 |
| `.rate` | 28 tall r10 chip with star |
| `.fac` | 58 tall r14 tiles; selected black |
| `.agent` | White r14 row, 30 black circles |
| `.nav` | 48 frosted white pill; active black pill with label |
| `.bar` | 72 tall white bottom bar r22 top |

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 — location pin + bell squares, search + black filter square, type chips with icon tiles, large listing card (photo r16 inside grey r20 frame, House tag, heart, rating, bed/bath chips, price), two mini cards, frosted pill nav with expanding black Home
2. Detail — rounded photo hero with back/heart squares and like/view/share pills, grey sheet: House tag + rating, title, location, 3 facility tiles (selected black), description with Read More, agent card with black message/call circles; white bottom bar with price + black "Schedule Tour"
3. 3D Tour — full-bleed room photo you can drag to pan, back square + title, white Room sheet with room tiles (selected black)

## 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:
- Detail › agent role line (was "Property Agent"). Same 8px grey.
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`.