Document 03 · Hi-Fi Design Spec
The build guide,
for Figma.
Everything a designer needs to move into hi-fi: the MVP screen flow, the result-screen anatomy, the comparison flow, the screen inventory, and a suggested Figma page structure. It executes the frozen decisions — foundations live in the Design System.
01Design system & logo
The Threadwise visual language is final and locked — hi-fi builds against it directly. This page carries only the logo; the full system is its own document.
Logo — the adaptive jharokha arch
02Component inventory
The components this product assembles in Figma, drawn from the design system. The Verdict Card is the hero; everything else is calm by default. (Full component specs and states → Design System.)
Verdict badges — word + icon + color, never color alone
03MVP screen flow
The happy path is three surfaces: Home, the result peek, and the expanded card. The scan path and the state set branch off the same spine.
Peek → expand is a tap, not a drag · degrades to a full page on desktop
Secondary paths (same spine)
States that interrupt before the verdict: partial · unknown fiber · unrecognized · low-confidence · offline · error — each names the gap and offers a fix, never a dead end.
04Result screen anatomy
The expanded verdict card, labeled zone by zone. The peek is zones 1–3 only; everything below waits for the tap (progressive disclosure).
- 1Verdict + score — Rozha display serif, the hero. Word + icon + color together.
- 2Honesty cue — “illustrative, meant to guide,” sits right next to the score.
- 3Reason line — one plain sentence. It explains; it never suggests a purchase. (Peek ends here.)
- 4Fiber breakdown — receipt-style rows; grouped shell/lining for multi-component.
- 5End of life + microplastic flag — “breaks down” language; plastic-shed noted plainly.
- 6Durability & care + skin note — qualitative, practical, not folded into the score.
- 7“Why this score” disclosure — inline accordion; opens the five dimensions, never a second sheet.
- 8Primary action — one per screen, calm label. Leaving is the closure moment.
05Comparison flow · item 1 → max 5
The opt-in Phase 2 path. It stays invisible until the user adds a first item, so the single-item flow is untouched.
Two columns fit on screen; 3–5 scroll horizontally while the dimension rail stays pinned.
Compare view (2 shown of up to 5)
Best value marked per row (●). A gentle “best of the set” line names a winner without shaming the others. The tray is session-only — a comparison cannot be resumed after the app closes, which preserves the no-accounts stance.
06Screen inventory & build checklist
Every screen and state to bring into hi-fi. The unhappy paths are the strongest-specified area; the happy-path verdict card is the one to settle under the real palette.
| Screen | Key content | Hi-fi for MVP? |
|---|---|---|
| Home (empty, typing, invalid) | Value line, input with example, scan | Yes |
| Result peek | Verdict, score, reason | Yes |
| Result expanded | Breakdown, decomposition, flags, durability & care, skin, why-accordion | Yes |
| Verdict variants (Good, Okay, Skip) | Emerald Good, calm Skip under the real palette | Yes |
| Multi-component (lined) | Grouped shell & lining rows, honest-limit note | Yes |
| Unhappy paths | Partial, unknown, unrecognized — name the gap, offer a fix | Yes |
| Scan path | Capture, reading, confirm-the-read, permission & low-light, fail | Yes |
| About, offline, error | Honesty & privacy cues; offline chip; recoverable error (distinct from Skip) | Yes |
| Compare (2–5) | Pinned rail, columns, best-of-set | Phase 2 |
07Figma page structure
A suggested page order for the working file, organizing the existing artifacts — nothing new is added to scope. Phase 2 lives in its own page so the MVP stays clean.
- 00CoverProduct name, version (v0.1), the working tagline, last-updated.
- 01Design SystemColor tokens, type scale, spacing (4/8), radii, elevation, the jharokha motif.
- 02ComponentsVerdict Card, Verdict Badge, Fiber Breakdown Row, Impact Bar, Why Disclosure, Buttons, State set.
- 03MVP ScreensHome, Result peek, Result expanded, verdict variants, multi-component.
- 04Scan & StatesScan capture / reading / confirm; partial, unknown, low-confidence, offline, error; About.
- 05Phase 2 · CompareSession tray, compare full-page, pinned rail + columns. Parked for v2.
- 06HandoffToken export, redlines, motion notes — portfolio-polish stage.
08Before you build
The remaining blockers before hi-fi. The design system is ready; these are about content and one screen.