# DESIGN SYSTEM — App 17 · Dream Job

Lime job board. Rebuilt from the reference screenshot `refs/r17-dream-job.png`. It is a 1024×768 stage showing 3 phones, and every control on it is interactive.

## 1. Foundations
- **Font:** Onest (Google Fonts). Base UI text is 7.5–10px on a 288px-wide phone (≈ 2.6× on device).
- **Frame:** pw 282px · ph 612px · pr 40px · pb 0px. Ring `0 0 0 1px #d8d8d8,0 34px 50px -26px rgba(0,0,0,.25)`
- **Screen background:** `#F4F4F4` · **Page:** `#E2E2E2`

## 2. Colour tokens (sampled from the reference)
| Token | Value |
|---|---|
| `--page` | `#E2E2E2` |
| `--ink` | `#161616` |
| `--ink-2` | `#7A7A7A` |
| `--lime` | `#AEEA1E` |
| `--lime-2` | `#C7F26A` |
| `--dark` | `#111` |
| `--map` | `#3E3F3C` |
| `--frame` | `#fff` |
| `--frame-ring` | `0 0 0 1px #d8d8d8,0 34px 50px -26px rgba(0,0,0,.25)` |
| `--screen` | `#F4F4F4` |
| `--toast-bg` | `#111` |

## 3. Components (CSS classes in `App 17 - Dream Job.html`)
`.sq` · `.top` · `.hd` · `.srch` · `.sh` · `.co` · `.cc` · `.lg` · `.job` · `.map` · `.pin` · `.mtb` · `.loc` · `.res` · `.rr` · `.ptb` · `.pc` · `.ab`

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

## 4. Screens
1. **Home**: search, popular company carousel, popular jobs
2. **Map**: grey map with salary pins, location glass bar, results
3. **Profile**: lime candidate card, about, work experience

## 5. Brand slot: "Cyborg Design"
Home › first Popular Company card name (was a third-party company name).
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.