# DESIGN SYSTEM — App 35 · Basiri v4

**Base:** white background, RTL. Fonts: Estedad for display text, Vazirmatn for UI text. Device: 390×844, radius 58.

## Tokens (`src/app.css :root`)
| Token | Value | Role |
|---|---|---|
| `--vio` | #7B3FE4 | Primary / active |
| `--lav` | #F4EFFF | Active tab tile, chips, alert |
| `--yel` | #F9B90B | Podcast poster only |
| `--grn` | #1FAF6A | Done |
| `--ink` | #111118 | Text, black CTA |
| `--line` | #EEEEF3 | 1px card ring |
| `--r` | 24px | Cards and banners |

## Components
- **Header** (`.hd`): 44px round icon buttons, title centred, a hairline appears on scroll.
- **Tab bar** (`.tb`): 78px floating, radius 30, blurred. The centre tab is a raised `.orb`, 66px.
- **Banner** (`.ban`): photo + dark side gradient + Persian title, 27px/800. Variants: `.hero`, `.pod`, `.chal`, `.phero`.
- **Card** (`.card`): white, 1px ring + soft shadow.
- **Buttons** (`.btn`): `.blk` (primary on Home), `.vio`, `.out`, `.sm`. All are capsules and single-line.
- **Unit row** (`.ur`): states `.dn`, `.act`, `.nxt`, `.lk`.
- **Other:** `.sheet` (spring-up, grabber), `.toast` (top pill), `.post`, `.story`, `.utabs`, `.segs`, `.pc` content card, `.heat`.

## Motion
- Push: 420ms ease.
- Sheet: spring `cubic-bezier(.32,1.25,.6,1)`.
- Tab tile: 300ms.
- Ring: 800ms.
- Breathing circle: 4s.

## Rules
- One primary CTA per section.
- Every banner has a real photo and Persian text rendered as live text, never baked into the image.
- No emoji.
- Every list row is tappable and ends with a chevron.