# DESIGN SYSTEM — App 24 · Mode Fashion

Monochrome fashion store with a blush banner. Rebuilt from the reference screenshot `refs/r24-fashion.png`. It is a 1024×768 stage showing 3 phones, and every control on it is interactive.

## 1. Foundations
- **Font:** Outfit (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 30px 60px -26px rgba(90,60,40,.3)`
- **Screen background:** `#FAFAFA` · **Page:** `#F1E4D8`

## 2. Colour tokens (sampled from the reference)
| Token | Value |
|---|---|
| `--page` | `#F1E4D8` |
| `--ink` | `#141414` |
| `--ink-2` | `#7B7B7B` |
| `--dark` | `#1E1E1E` |
| `--chip` | `#EDEDED` |
| `--blush` | `#F7DCD3` |
| `--frame` | `#111` |
| `--frame-ring` | `0 0 0 1px #fff,0 30px 60px -26px rgba(90,60,40,.3)` |
| `--screen` | `#FAFAFA` |
| `--toast-bg` | `#1E1E1E` |

## 3. Components (CSS classes in `App 24 - Mode Fashion.html`)
`.k-island` · `.sq` · `.hd` · `.logo` · `.srch` · `.seg` · `.ban` · `.sh` · `.cats` · `.tr` · `.hb` · `.nav` · `.tb` · `.flt` · `.gr` · `.it` · `.pd` · `.pb` · `.sz` · `.pa`

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

## 4. Screens
1. **Home**: wordmark, search, Women/Men segment, banner, categories, trending
2. **Catalog**: filter chips, 2-column product grid with wishlist
3. **Product**: photo carousel, size picker, description, Add to Bag

## 5. Brand slot: "Cyborg Design"
Home › store wordmark at the top-left (was a third-party retailer logo), in the same 800-weight tight tracking.
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.