# Tide — a quiet instrument

## Build target and reference lock

Designing a Persian-first Telegram subscription utility for an account holder who wants to check allowance, recover access, or copy a connection link in seconds. Direct build is authorized by the user's request for five independently executed concepts.

Refero MCP is unavailable. Research uses the supplied subscription, wallet and purchase screenshots plus Refero's bundled `typography.md`, `color.md`, `craft-details.md` and `visual-workflow.md`. No live Refero screens or styles are claimed.

Primary direction: an ice-white instrument with deep teal ink and one richly colored active-subscription surface. Preserve the mobile application scale, a useful 48 px remaining-data numeral, a segmented usage dial, fine dividers, and generous gaps between different tasks. Keep the information inside each task compact. Borrow from the supplied screenshots only the practical expectation that subscriptions are the default screen and that every subscription has independent status and renewal context.

Role rules: teal owns active-subscription emphasis and primary actions; warm amber indicates attention; dark red is reserved for failure and destructive action. A bright mint dial is data ink within the teal surface, not a second action color. Large numerals report actual quantities. The dial reports real fetched usage and is neutral until usage loads. No connected/online claim is made.

Media strategy: code-native segmented SVG gauge, because the source is a numeric quantity, not an illustrative story. No photography or generated decoration is needed for this compact utility.

Reject: marketing hero sections, a fake phone frame, purple gradients, charts with invented data, decorative display typography, and repeating eight equal-weight action icons on every card.

Token commitments: canvas `#F2F6F5`, surface `#FFFFFF`, ink `#163E3B`, muted `#677B77`, accent `#11665D`, featured surface `#124B45`, mint data `#ADE9D0`; 24 px subscription radius, 16 px controls, one Vazirmatn family, Latin tabular numerals for technical values. Bottom navigation floats above the safe area and always exposes subscriptions, shop and wallet.

## Decision ledger

| Decision | Source | Rule / role | Why |
| --- | --- | --- | --- |
| One localized sans-serif family | Refero typography, §0 and §3 | Neutral scanning; weight and scale carry hierarchy | Persian and English feel equally native |
| 48 px remaining-data number | Brief §1 and §7.5; Refero type scale | Prominent quantity is a real account fact | Answers the most urgent question at first glance |
| Dark teal active card, pale canvas | Refero color §0–2; authorized Tide direction | Strict accent and neutral roles | Separates the usable account without applying brand color everywhere |
| Segmented usage dial | Brief §7.5 and authorized concept | A numeric data graphic must follow fetched percentage | Memorable shape with honest loading, failure and unlimited cases |
| Copy link on active; renew on expired; support for not found | Brief §4 and §7.5 | Context determines the obvious action | Avoids equally weighted shortcuts that can mislead |
| Small count / title / search group | User screenshots; brief §7.5 | Show set context while making filtering reversible | Works with one subscription or 140 |
| Floating three-item tab bar | User miniapp constraint; supplied screenshots | Primary navigation stays within thumb reach | Behaves as an application, independent of page length |
| 44 px touch targets, visible focus, reduced-motion support | Refero craft-details | Accessibility belongs to the control itself | Supports actual handheld and keyboard use |
| Shared API and all consequential flows | User request; shared contract | Visual variants consume one world | No divergent balances, purchases or mock behavior |

## State decisions

No first-load numbers are invented. Empty and filtered-empty states are delegated to the shared engine. Usage loading shows a neutral dial and a localized loading phrase; Error and N/A remain distinct. Unlimited plans use an infinity quantity and a non-percentage dial. Expired and not-found cards use their server status, never a locally inferred replacement. Financial and destructive confirmations belong to the shared controller.

## Validation

Passed `node --check 01-tide/app.js` and real Chromium QA through Playwright CLI session `tideqa`, served from `http://127.0.0.1:8765/01-tide/`.

Rendered checks covered Persian and English subscription views at 390×844 and 360×800, light and dark themes, wallet and shop in both languages at phone width, and subscription details in Persian light and dark. Screenshots were opened with `view_image` and compared against this lock. Document width matched viewport width; checks found no overflowing headings or buttons in the tested home, wallet and shop views, and no overflowing detail facts or buttons at 360 px.

Fixed the inherited logical-inset collision that initially positioned the floating navigation off-screen. All three tabs now fit inside a 354 px navigation surface at 390 px (x=18…372). Tightened control spacing, increased small metadata text, preserved one decimal in the usage percentage, and incorporated the Telegram host safe-area inset into header/navigation positioning.

Two shared runtime issues were reported to the root agent and fixed there: language switching to an identical hash URL left its transition overlay open; a shared navigation busy key could swallow a quick wallet→shop tap. Both fixes were retested successfully after reloading with the browser cache disabled.

Final primary screenshot: `../output/playwright/tide.png`. Additional evidence includes `tide-fa360.png`, `tide-en360.png`, `tide-dark-en390.png`, `tide-dark-fa390.png`, `tide-wallet.png`, `tide-shop.png`, `tide-detail.png`, `tide-dark-detail360.png`, `tide-dark-wallet360.png`, `tide-dark-shop360.png`, `tide-en-wallet360.png`, and `tide-en-shop360.png`. Browser console contained only Telegram host-capability warnings outside Telegram; no application errors were observed.