# Basiri · Design System V2 ("Clear Glass")

Persian-first RTL transformation app. Built on **App 4** (iOS 26 Liquid Glass): tab-bar metrics, capsule buttons, sliding glass lens, spring curve and accessibility flags. Visual board: `Design System V2.html`. Tokens: `tokens.json`.

## 1. Direction
Three directions were explored:
1. **Clear Glass** (chosen): white canvas, light editorial photography plus minimal 3D, glass only where it adds hierarchy.
2. **Ink Editorial:** type only, magazine-like. Too cold for an action-oriented product.
3. **Deep Field:** dark green/gold hero. Premium, but it breaks the brief's "white dominant" rule.

## 2. Colour roles
| Token | Hex | Role |
|---|---|---|
| `--bg` | #FFFFFF | Canvas (never beige) |
| `--bg-2` | #F3F4F3 | Grouped fills |
| `--ink` | #0B0D0C | Text and hierarchy |
| `--graphite` | #2A2E2C | Dark surfaces |
| `--green` | #0E5A3D | Action, selection, progress |
| `--green-t` | #E7F1EB | Completion state |
| `--gold` | #A87C2A | Commitment and recovery only |
| `--gold-t` | #F6F0E3 | Commitment preview |

## 3. Type
- **Estedad 800/700** for Display (38), Large Title (34), Title 1 (28) and Title 2 (22).
- **Vazirmatn** for everything else: Title 3 20/700, Headline 17/600, Body 17/1.75, Subhead 15, Footnote 13, Caption 12, Kicker 12/700 (green).
- Persian line-height runs 1.6–1.8. Digits are Persian (the `fa()` helper); the status-bar clock stays LTR.

## 4. Shape and space
- **Radii:** card 28, inner 18, group 26, sheet 40, capsule for all controls, phone 55.
- **Spacing:** 4pt grid, page inset 20, section gap 28.
- **Shadows:** long and soft (`0 18px 40px -22px`) with a 0.5px hairline.

## 5. Liquid Glass (App 4 recipe, light tone)
`.glass` = white 58% + `blur(20) saturate(1.8)` + top specular + 135° gradient rim + soft shadow. `.glass.dark` is used over photos.
- **Use on:** tab bar, floating controls on the hero, the sheet, the toast and the inline nav bar.
- **Never on:** content cards.
- **Accessibility:** `.rt` turns glass opaque (Reduce Transparency); `.rm` or `prefers-reduced-motion` zeroes all motion.

## 6. Navigation
- **Tab bar:** a 62pt glass capsule, inset 16/16/22, pad 4, with a sliding lens (`--i`). It has **5 equal items and no centre FAB**.
  - Physical order **left→right: من | هم‌مسیر | راهنما | مسیر من | امروز**. The DOM is in RTL order, so امروز sits at the far right.
- **Large Title:** collapses into an inline glass bar once scrolled past 44px.
- **Sheets:** bottom sheet with an 8px inset, radius 40, a grabber, and Esc to close.

## 7. Loop components
| Component | Loop stage | Notes |
|---|---|---|
| `LoopRail` | all | 7 segments: filled, half (current) or empty |
| `NextMove` (`.nm`) | Today | ONE card; content changes by `phase` |
| `LearnSheet` | Learn | 3 pages, progress bar, then leads into Commit |
| `CommitSheet` | Commit | What / when / how small / done-means, plus a sentence and hold-to-commit |
| `FocusTimer` | Act | Ring and a "تمام کردم" (I'm done) button |
| `EvidenceSheet` | Evidence | Photo / sentence / number / confirm; private |
| `ReflectSheet` | Reflect | 3 structured chip questions |
| `WeekTrace` | Progress | Acted = filled green, comeback = gold ring, pause = hatched. No streak counter |
| Return mode | Recovery | Gold button, last reflection shown, a 10-minute comeback |
| `GuidePanel` | all | Shows its context first, then 3 thinking moves, then input (optional LLM call) |
| Circle | Accountability | 4-person circle, moments, a support hand, a shared pact. No feed |
| Me | Memory | Pattern hero, human stats, timeline, settings last |

## 8. States
Buttons have default, pressed (0.96 scale + brightness), loading (spinner), disabled (38% opacity), recovery (gold) and secondary. The Today phases run 0 → 6 in morning or evening mode, plus a `return` mode.

## 9. Imagery
Generated for this app (`assets/`). Each image carries meaning: morning desk, dusk desk, shallow steps (comeback), sphere in ring (commitment), glass slabs (lesson), disc arc (path), two panes (guide), four hands (circle), woman at window (me), hand ticking a card (evidence).
- **Banned:** mountains, roads, trees, AI orbs, sparkles.

## 10. Motion
| Moment | Motion |
|---|---|
| Tab change | Lens slides (.46s spring); the icon scales to 1.06 |
| Hero change | Cross-fade with a slight zoom (.9s) |
| Commit | 850ms hold fill, a 12ms haptic, then a toast |
| Completion | Tick pops in; the rail advances |
| Day closed | Ring draws in 1s, then the tick draws |
| Sheet | `cubic-bezier(.32,.72,0,1)` .5s |

## 11. Responsive
- **320:** hero 420 high, display type 32, evidence options in 2 columns, stats in 2 columns, tab labels 9.5.
- **390:** primary target.
- **430:** same layout, with more air.