# DESIGN SYSTEM — App 26 · Pulse Events

Black + soft-yellow event tickets. Rebuilt from the reference screenshot `refs/r26-events.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 40px · pb 0px. Ring `0 30px 60px -26px rgba(0,0,0,.45)`
- **Screen background:** `#0E0E0E` · **Page:** `#E3E4E6`

## 2. Colour tokens (sampled from the reference)
| Token | Value |
|---|---|
| `--page` | `#E3E4E6` |
| `--ink` | `#fff` |
| `--ink-2` | `#8C8C8C` |
| `--yel` | `#F2F36B` |
| `--bg` | `#0E0E0E` |
| `--card` | `#1C1C1C` |
| `--line` | `#2C2C2C` |
| `--frame` | `#0E0E0E` |
| `--frame-ring` | `0 30px 60px -26px rgba(0,0,0,.45)` |
| `--screen` | `#0E0E0E` |
| `--toast-bg` | `#F2F36B` |
| `--toast-fg` | `#111` |

## 3. Components (CSS classes in `App 26 - Pulse Events.html`)
`.rb` · `.hd` · `.av` · `.srch` · `.sh` · `.cats` · `.cat` · `.feat` · `.stk` · `.join` · `.top` · `.nav` · `.fade` · `.dhero` · `.tk` · `.ab` · `.map` · `.buy` · `.uh` · `.mo` · `.days` · `.evs` · `.ev`

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

## 4. Screens
1. **Home**: categories, featured event with Join, Top 10 carousel
2. **Event Detail**: hero, ticket card with seats, about, location, Buy Ticket
3. **Upcoming**: date strip, selectable event cards

## 5. Brand slot: "Cyborg Design"
Home › featured event title (was a third-party artist 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.