# DESIGN SYSTEM — App 34 · Basiri v3

This is the product-grade version. Its architecture follows NewHuman (newhuman-app.pages.dev) and its visual grammar follows native iOS 26 on white.

## Architecture (5 tabs, RTL; order starts at the right edge)
| Tab | Content |
|---|---|
| امروز (Today) | Header (avatar, greeting, search, notifications) → **day hero banner** (photo, Estedad headline, CTA, progress meter, % chip) → 6-step progress → **daily unit** of 6 sections, each opened in a sheet → **episode banner** → guide tip → events carousel → **challenge banner (ink)** → weekly leaderboard |
| مسیر من (My Path) | Circuit map banner → 5-node circuit → stats → pillar grid with photos and progress (push → pillar detail) → badges |
| راهنما (Guide) | Hero banner → quick chips → weekly summary → recent chats. Once a chat starts it becomes a message thread with a sticky composer |
| هم‌مسیر (Circle) | Circle banner → segmented control (inspiring / Q&A / challenges) → posts with a role badge, photo and like / comment / save |
| من (Me) | Profile → stats → growth calendar heatmap → subscription and courses → accessibility → reset |

## Banners
- **Image rule:** real photo (`img/`, `../app-33/img/`) + dark scrim (90° or 180°) + text typeset in HTML. Text is never baked into an image.
- **Headline:** Estedad 800, 25px; 30px on hero banners. Kicker: Vazirmatn 600, 12px, with an icon. Body: 14px at .9 opacity.
- **Radius and CTA:** radius 28px. CTA is a white pill (38px) or a glass pill.
- **Variants:**
  - `.bn` — side scrim
  - `.bn.bottom` — bottom scrim
  - `.bn.ink` — dark #1C1C1E with the photo masked on the left
- **Ornament:** `.orn` (line, diamond, line). It replaces NewHuman's lotus divider without copying it.

## Colour: iOS system (Apple Health / Fitness / Reminders)
| Role | Value |
|---|---|
| Accent (actions, current step) | #007AFF |
| Done | #34C759 |
| Comeback day / challenge | #FF9500 |
| Destructive | #FF3B30 |
| Section icons | teal #30B0C7 · purple #AF52DE |
| Grouped background | #F2F2F7 |
| Ink | #1C1C1E |

## Type
- Vazirmatn 400–700 for UI, Estedad 700–800 for display.
- Large title 34px. Section header 20px/700. Row 16px/600 plus a 13px secondary line.

## Components
`bn` · `pill` · `chip` · `meter` · `steps` · `srow` + `sico` (48px, radius 15, coloured) · `gcard` / `card` · `ev` (event card 236px) · `tip` · `lbr` (leaderboard row) · `stats` · `pil` (pillar card) · `circ-map` · `chp` · `msg` · `composer` · `post` · `chl` (challenge card) · `heat` · `bdg`

## Motion
- Push: 420ms, cubic-bezier(.32,.72,0,1).
- Modal sheet: slides up while the app body scales to .93.
- Banner press: scale .985.
- Breathing circle: 8s loop. It stops under Reduce Motion (`.rm`).