# DESIGN SYSTEM — App 23 · Wander Travel

Lime + misty-blue travel booking. Rebuilt from the reference screenshot `refs/r23-travel.png`. It is a 1024×768 stage showing 3 phones, and every control on it is interactive.

## 1. Foundations
- **Font:** Urbanist (Google Fonts). Base UI text is 7.5–10px on a 288px-wide phone (≈ 2.6× on device).
- **Frame:** pw 288px · ph 622px · pr 44px · pb 5px. Ring `0 0 0 1px #fff,0 0 0 2px #D2D3D6,0 30px 60px -26px rgba(0,0,0,.3)`
- **Screen background:** `#F2F2F3` · **Page:** `#E6E7EA`

## 2. Colour tokens (sampled from the reference)
| Token | Value |
|---|---|
| `--page` | `#E6E7EA` |
| `--ink` | `#141414` |
| `--ink-2` | `#7B7D82` |
| `--lime` | `#D8F46B` |
| `--dark` | `#262626` |
| `--frame` | `#111` |
| `--frame-ring` | `0 0 0 1px #fff,0 0 0 2px #D2D3D6,0 30px 60px -26px rgba(0,0,0,.3)` |
| `--screen` | `#F2F2F3` |
| `--toast-bg` | `#262626` |
| `--toast-fg` | `#D8F46B` |

## 3. Components (CSS classes in `App 23 - Wander Travel.html`)
`.k-island` · `.mist` · `.rb` · `.hd` · `.av` · `.h1` · `.cats` · `.ct` · `.sh` · `.rec` · `.flash` · `.nav` · `.tb` · `.sr` · `.inp` · `.fp` · `.rng` · `.pls` · `.pl` · `.fac` · `.tg` · `.show` · `.bk` · `.plc` · `.bbody` · `.card` · `.ci` · `.pr` · `.conf`

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

## 4. Screens
1. **Home**: greeting, highlighted headline, category pills, recommended card, flash-deal countdown
2. **Search**: search, categories, dual-thumb price range, rating, facilities, toggle, live result count
3. **Booking**: hero, glass place bar, booking + price cards, Confirm

## 5. Brand slot: "Cyborg Design"
Booking › place title in the glass bar (was "Bali Exotica").
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.