# DESIGN SYSTEM — App 18 · Orange Nest

Orange real-estate app on mint glass. Rebuilt from the reference screenshot `refs/r18-property-map.png`. It is a 1024×768 stage showing 3 phones, and every control on it is interactive.

## 1. Foundations
- **Font:** DM Sans (Google Fonts). Base UI text is 7.5–10px on a 288px-wide phone (≈ 2.6× on device).
- **Frame:** pw 276px · ph 604px · pr 44px · pb 5px. Ring `0 30px 60px -24px rgba(0,0,0,.35)`
- **Screen background:** `#F4F7F4` · **Page:** `#D5DDD8`

## 2. Colour tokens (sampled from the reference)
| Token | Value |
|---|---|
| `--page` | `#D5DDD8` |
| `--ink` | `#161616` |
| `--ink-2` | `#6B6F6C` |
| `--or` | `#F7801E` |
| `--mint` | `#E3ECE5` |
| `--frame` | `#111` |
| `--frame-ring` | `0 30px 60px -24px rgba(0,0,0,.35)` |
| `--screen` | `#F4F7F4` |
| `--toast-bg` | `#F7801E` |

## 3. Components (CSS classes in `App 18 - Orange Nest.html`)
`.k-island` · `.gl` · `.cb` · `.s1` · `.hd` · `.srch` · `.tabs` · `.stack` · `.feat` · `.sh` · `.rec` · `.nav` · `.map` · `.pin` · `.mtop` · `.agentc` · `.dhero` · `.hot` · `.room` · `.dsheet` · `.chips` · `.thumbs` · `.book`

Each rule is written once, in its screen's CSS block. Selected states always use the `.on` modifier.

## 4. Screens
1. **Home**: greeting, status chips, stacked listing card, recommendations
2. **Map**: street map with property pins, agent card
3. **Detail**: hero with room hotspot, specs, gallery, description, Book Now

## 5. Brand slot: "Cyborg Design"
Map › agent card role line (was "Step Sister").
The text comes from `BRAND` in `../shared/kit.jsx`. It keeps the exact font, size, weight and colour of the text it replaced. Nothing else in the layout changes.

## 6. Motion
- Toasts drop in from the top with a spring (`.k-toast`, 450ms).
- List and grid refreshes use `kfade` (350ms), staggered 30–50ms per item.
- Active pills and nav items change colour/width over 200–300ms.