# DESIGN SYSTEM — App 16 · Match Hire

Yellow job-matching app on warm cream glass. Rebuilt from the reference screenshot `refs/r16-job-match.png`. It is a 1024×768 stage showing 3 phones, and every control on it is interactive.

## 1. Foundations
- **Font:** Plus Jakarta Sans (Google Fonts). Base UI text is 7.5–10px on a 288px-wide phone (≈ 2.6× on device).
- **Frame:** pw 262px · ph 566px · pr 38px · pb 0px. Ring `0 0 0 1px rgba(255,255,255,.7),0 40px 60px -30px rgba(120,80,0,.35)`
- **Screen background:** `linear-gradient(180deg,#F7F6F3,#EFEBE3)` · **Page:** `#F4E3BE`

## 2. Colour tokens (sampled from the reference)
| Token | Value |
|---|---|
| `--page` | `#F4E3BE` |
| `--ink` | `#1B1B1B` |
| `--ink-2` | `#6B6B6B` |
| `--y` | `#FEC008` |
| `--y2` | `#F5B400` |
| `--dark` | `#1E1E1E` |
| `--map` | `#3A3323` |
| `--frame` | `#F5F3EF` |
| `--frame-ring` | `0 0 0 1px rgba(255,255,255,.7),0 40px 60px -30px rgba(120,80,0,.35)` |
| `--screen` | `linear-gradient(180deg,#F7F6F3,#EFEBE3)` |
| `--toast-bg` | `#1E1E1E` |

## 3. Components (CSS classes in `App 16 - Match Hire.html`)
`.k-phone` · `.cb` · `.av` · `.hd` · `.h1` · `.tiles` · `.tile` · `.pl` · `.mg` · `.sh` · `.ap` · `.pay` · `.chips` · `.c1` · `.c2` · `.c3` · `.nav` · `.map` · `.radar` · `.me` · `.pin` · `.mtop` · `.fl` · `.sheet` · `.pt` · `.pc` · `.jd` · `.xb`

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

## 4. Screens
1. **Home**: greeting, Find/Post/Manage tiles, applicant list
2. **Map**: dark map with salary pins, nearby results sheet
3. **Profile & Job Match**: yellow candidate card, hire CTA, job description grid

## 5. Brand slot: "Cyborg Design"
Home › first applicant card location line (was "Zurich, Switzerland").
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.