# DESIGN SYSTEM — App 28 · Fuel Finder

Green fuel-station finder. Rebuilt from the reference screenshot `refs/r28-fuel.png`. It is a 1024×768 stage showing 3 phones, and every control on it is interactive.

## 1. Foundations
- **Font:** Inter Tight (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 4px #fff,0 0 0 5px #D5D5D8,0 30px 60px -26px rgba(0,0,0,.3)`
- **Screen background:** `#F7F7F8` · **Page:** `#E4E4E7`

## 2. Colour tokens (sampled from the reference)
| Token | Value |
|---|---|
| `--page` | `#E4E4E7` |
| `--ink` | `#141414` |
| `--ink-2` | `#7C7E82` |
| `--g` | `#22C23A` |
| `--gs` | `#DDF2D9` |
| `--frame` | `#111` |
| `--frame-ring` | `0 0 0 1px #fff,0 0 0 4px #fff,0 0 0 5px #D5D5D8,0 30px 60px -26px rgba(0,0,0,.3)` |
| `--screen` | `#F7F7F8` |
| `--toast-bg` | `#22C23A` |

## 3. Components (CSS classes in `App 28 - Fuel Finder.html`)
`.k-island` · `.rb` · `.top` · `.hd` · `.sh` · `.rec` · `.rc` · `.nav` · `.mp` · `.pinm` · `.near` · `.ns` · `.nc` · `.pc` · `.th` · `.tr`

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

## 4. Screens
1. **Home**: photo hero with search, recommended stations carousel
2. **Map**: map with station pins, nearby stations sheet
3. **Prices**: searchable price table, sortable by Gas / Diesel / Petrol

## 5. Brand slot: "Cyborg Design"
Home › first recommended station name (was a third-party chain 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.