# Atelier — digital membership passes

## September 12 refinement: reference lock

The user's Atelier screenshots remain the primary target: charcoal passes, apricot main actions, large remaining-data values and the existing navigation. Signal's supplied screenshot owns two narrow changes: 8px subscription corners and a red leading border for expired accounts. The supplied wallet example owns the relationship pattern: separate payment and cashback records within a shared visual group. Refero's bundled color and craft references guide semantic colors, clear metadata and individual keyboard/touch targets; live Refero tools remain unavailable. This is an authorized direct edit with code-native assets.

| Change | Reference | Implementation decision |
| --- | --- | --- |
| Details becomes the frequent action | User's stated repeat-use behavior | Main active-card button opens details; copy becomes a small labeled icon, QR remains, renewal retains priority on expired cards |
| Expired cards are easy to scan | Signal screenshot and its existing stylesheet | 3px red leading border, mirrored in RTL/LTR; subscription radius becomes 8px |
| Attention count beside active count | User's annotated third screenshot | Use the shared runtime's attention count so it agrees with the existing filter |
| Categories do not assume configurable artwork | User's main-app constraint | Remove category identity symbols; keep functional navigation affordances |
| Cashback is distinct but visibly related | User's fourth screenshot | One restrained group with separate clickable ledger rows, their own amounts, IDs, times and statuses; no merged balance or invented relation |

The API, persisted world and financial behavior remain shared. The wallet renderer reuses the existing filtered history and its explicit pair identity; correction records remain separate.

September 12 validation: `atelier-update-checks.js` passes at 360px Persian/dark and 390px English/light. Main details and renewal actions, 8px corners, mirrored 3px expired stripe, attention/filter agreement, category selection without identity icons, separate transaction dialogs and focus return all pass. Search and cashback filters preserve the relationship. The complete normal history renders all 35 records exactly once, including multiple cashback entries linked to one deposit; balances remain unchanged. Partner wallet20 corrections stay separate and payment-filtered. Newcomer count is zero. Signal retains its original wallet presentation. No page/dialog overflow or JavaScript errors. Final visual captures use the `output/playwright/atelier-updated-*` prefix.

Designing a Persian-first Telegram miniapp for subscription holders and resellers. The default task is checking subscription details and remaining data, or renewing an expiring subscription. Money and status must remain exact. This is a direct build, expressly authorized by the user.

## Research and reference lock

Refero live tools are unavailable. Research uses the skill's documented fallback: the supplied subscription, wallet, and purchase screenshots plus `references/typography.md`, `references/color.md`, `references/craft-details.md`, and `references/visual-workflow.md` from the installed Refero skill.

Primary direction: ink-black digital membership passes with quiet apricot actions. Preserve the supplied product's immediate visibility of usage and expiry, while replacing its uniformly weighted action row with a clear first action and a detail sheet.

Preserve: near-black canvas, neutral sans-serif typography, large data values, tightly aligned horizontal dividers, outlined secondary controls, compact bottom navigation. Apricot belongs to the primary action and selected navigation state. Semantic green, amber, and red exclusively describe actual subscription state or usage severity.

Borrow only: the screenshot's direct copy/QR affordances; Refero craft's explicit metadata/value contrast and 44 px touch controls. The provided screenshots are substance references, not layout templates.

Media strategy: code-native UI. No photography, illustration, fake connection claims, phone frame, or ornamental scene; these would compete with the financial and service facts.

Reject: soft dashboard tiles, decorative gradients, serif headline swaps, blue-purple action clusters, promotional hero copy, all-actions-at-once toolbars, made-up aggregate usage, duplicated data or business logic.

Tokens: background `#101110`, pass surface `#1a1b19`, raised surface `#242521`, primary text `#f5f3ed`, secondary text `#a9aaa2`, divider `#383a33`, action `#ffb78c` with `#24180f` ink; 13/15/18/28/34 px type; 8/12/16/24 px spacing; 8 px pass corners (refined from the original 18 px), 10 px controls. Light theme retains ink typography and adjusts semantic text colors for contrast.

## Decision ledger

| Decision | Source | Role preserved | Reason |
| --- | --- | --- | --- |
| One local Vazirmatn family and tabular data figures | Refero typography §0–3; Persian-first brief | Neutral work UI, values visually aligned | Fast scanning in both languages |
| Dark passes with fine dividers and apricot action | User's creative delegation; Refero color §0–3 | Neutral majority, bounded action accent | Distinct visual identity with calm financial behavior |
| Remaining data most prominent; exact status and time alongside | Brief §1, §4, §7.5; provided subscription screen | Frequently checked service facts | Answers whether this subscription needs attention |
| Details first on active passes, copy/QR secondary; renew on expired; support on missing | September 12 user adjustment and brief §7.5 action legality | Priority follows frequency and actual account state | Frequent detail checks take one tap; recovery remains prominent |
| Details opens complete controls and exact technical strings | Brief §4, §7.5 | Technical values preserved; dangerous actions require shared confirmation | Reduces card clutter without removing capabilities |
| Search, filter, sort, and progressive list loading | Brief §7.5 | Local whole-set discovery, 10-at-a-time rendering | Works for one subscription and 140 subscriptions |
| Three fixed bottom tabs, safe-area spacing, 44 px controls | Telegram miniapp brief; Refero craft §4/6 | Thumb-reachable navigation, labeled focusable controls | Behaves like a mobile app |
| Usage skeleton, error and unavailable text | Brief §7.5, §10 | Unknown values remain unknown | Never pretends zero usage or a live connection |

## Implementation boundary

`app.js` only supplies view functions to `../shared/app.js`. All state, validation, mutations, settings, confirmations, financial behavior, and demo controls use the one shared controller and API.

## QA target

Rendered QA completed using the Playwright CLI session `atelierqa`: 390 × 844 and 360 × 800, Persian and English, dark and light. Subscriptions, wallet, category selection, plan offers, and subscription detail sheets were captured and visually inspected. The viewport and document widths match at both phone sizes. No application console errors occurred; Telegram host warnings are expected in the standalone browser.

The final pass corrected shared dark-token specificity, gave apricot text a darker light-theme counterpart, shortened redundant remaining-time wording, refined detail-row padding, honored Telegram content safe areas, and replaced internal subscription IDs with a harmless visible list position. English singular copy is handled. The shared language-switch defect found during QA was fixed by the main agent and its completed navigation was verified.

Reference-lock comparison: passed. The ink canvas, warm actions, crisp value hierarchy, understated status semantics, and precise pass divisions remain intact. No unresolved P0/P1/P2 visual findings. `node --check 02-atelier/app.js` passes.

Primary evidence: `output/playwright/atelier.png`. Additional captures include `atelier-detail.png`, `atelier-wallet.png`, `atelier-shop.png`, `atelier-plans.png`, `atelier-en-light-detail.png`, `atelier-en-light-wallet.png`, `atelier-en-light-shop.png`, and the phone-width light-theme home captures.