# DESIGN SYSTEM · Basiri v2 (App 33)

White and native, with one accent. Every value obeys `RULES.md`, and every pattern is traced to a reference in `RESEARCH.md`.

## Tokens
| Group | Values |
|---|---|
| Surface | `--bg #FFF` · `--grouped #F2F2F7` · `--fill rgba(120,120,128,.12)` |
| Label | `#000` · `rgba(60,60,67,.6)` · `rgba(60,60,67,.3)` · separator `rgba(60,60,67,.18)` @0.5px |
| Accent | `#007AFF` · bg `rgba(0,122,255,.1)` |
| Semantic | Comeback `#FF9500` (dots only) · Destructive `#FF3B30` |
| Radius | capsule · 26 · circle |
| Spacing | 4-pt grid · page inset 16/20 · section gap 22 |
| Motion | Press `.1s cubic-bezier(.23,1,.32,1)` · push `.42s cubic-bezier(.32,.72,0,1)` · pop `.32s` |

## Type
| Style | Size / line-height / weight |
|---|---|
| Large Title | Estedad 34/1.3/800, one per screen |
| Title 2 | 22/700 |
| Headline | 17/600 |
| Body | 17/1.75 |
| Callout | 16 |
| Subhead | 15 |
| Footnote | 13 |
| Caption | 12/500 |

Numbers use Persian digits with `tabular-nums`.

## Components → reference
| Component | Class | Reference | Notes |
|---|---|---|---|
| Week strip | `.week .wd .dot` | Structured | Day dots: green = acted, gold = comeback, outline = pause |
| Loop timeline | `.tl .tl-i(.cur/.done/.next) .tl-node .tl-line(.dash)` | Structured | The current node is filled green and holds the only primary button |
| Interval note | `.tl-note(.soft)` | Structured "well-spent interval" | Encouragement and recovery copy lives here |
| Evening section | `.tl-sec` | Things "This Evening" | Moon icon plus a hairline |
| Lesson reader | `.lesson .ls-h .ls-cta` | Stoic | Heavy title, body 17/1.75, one sticky CTA |
| Inset-grouped list | `.sec .sec-t .list .row .sec-f` | iOS Settings | The only container type in the app |
| Progress header | `.path-h .ph-bar .ph-stats` | Apple Fitness | Stat pairs, 21 capsule days |
| Chapter row | `.row .ring(.done/.now)` | Things | Drills into a push |
| Guide ask bar | `.ask .ask-s` | Messages | Sticky above the tab bar; send enables on text |
| Circle ring | `.circle-h .cm(.done/.back)` | Apple Fitness sharing | Ring colour = state |
| Cheer | `.cheer(.on)` | — | A 44pt hit target; no counts |
| Buttons | `.btn.pri/.sec/.plain/.sm` | iOS | Pri = green capsule 50 · press 0.97 · disabled 0.3 |
| Bar button | `.bbtn(.b)` · `.bk` | UINavigationBar | Accent text; press opacity 0.4 |
| Segmented | `.seg` | UISegmentedControl | 32 high |
| Switch | `.sw` | UISwitch | 51×31 |
| Page sheet | `.modal` + `.app-body.shrunk` | iOS page sheet | «لغو» / «ثبت», background scales to 0.93 |
| Form sheet | `.modal.form .grab` | iOS form sheet | Short tasks (evidence) |
| HUD | `.hud` | iOS system HUD | 1.6s, with one haptic |
| Tab bar | `.tabbar .tab(.on)` | iOS 26 | Glass capsule, 5 equal tabs, labels on, filled icon when active |

## Screen inventory
| Tab | Root | Pushes / modals |
|---|---|---|
| امروز | Timeline: morning / acting / done / evening / closed / return | Lesson (push) · Commit (page sheet) · Evidence (form sheet) · Reflect (page sheet) |
| مسیر من | Progress header, segmented control, chapters / commitments | Chapter (push) |
| راهنما | Context list, thinking moves, ask bar | Answer (push; LLM with fallback) |
| هم‌مسیر | Circle rings, today list with cheers, weekly pact | — |
| من | Pattern, timeline, settings (Reduce Motion / Transparency) | — |