One product, one source per screen, drawn three times. Each frame renders the same markup inside a desktop (1280×800), tablet (834×1112) and phone (390×844) canvas—drawn as a macOS window, an iPad and an iPhone respectively, with the device chrome outside the canvas so the container width stays exact; the layout re-flows per width with container queries, so a tablet or phone frame shows the responsive proposal, not a shrunken desktop. Every frame carries a stable anchor of the form #fx-<screen>-<state>-<width> (desk / tab / ph). Captions under the desktop frame describe the state; captions under the tablet and phone frames describe only what changes at that width.
This document proposes a full visual and interaction redesign of the shipped React app (src/app/**). Every screen keeps the shipped behaviour—the controls, the states, the copy that the glossary already gets right—and redraws it in one visual system. Where an element was confusing it is changed, chipped Redesign NN inside the frame, explained in the screen's legend (citing the current file) and collected in the summary table at the end. Terms follow CONTEXT.md: Administrator, Member, Household, Credit, Refund, Carry-forward, Usage Charge, Service Credit, Review Request (never “dispute” in UI copy), Refund Notice, Charge Notice. The snapshot is Wed Oct 21, 2026; the active year is 2026 · Open. All sample data—people, bills, amounts—is invented and internally consistent.
How to read a frame.
· Chips above a frame name the width and whether the frame is current (mirrors shipped behaviour in the new skin), redesign (one or more interface changes, each chipped inside the frame) or a state (empty / loading / error / variant of a screen).
· Redesign chips Redesign NN sit on the element that changed. The same change can be chipped on several frames with the same number; its rationale lives once, in the legend of the screen where it first appears, and in the summary table.
· Numbered badges 1 point at the annotation with that number in the legend under the screen. The legend is written once per screen and applies to all three widths.
· Dialogs are drawn over their parent screen, dimmed. On the phone every dialog becomes a bottom sheet with a grab handle (Redesign 14).
· Zoom (control below) scales the desktop and tablet canvases; the phone canvas is 1:1 by default. Nothing inside re-flows when you zoom—only the real width does that.
Warm editorial fintech, in the manner of the Refero “warm editorial” style: a Linen canvas, Paper cards with 12 px corners and whisper-light shadows, Ink text, Graphite for muted text, Stone hairlines, and one accent—Ember—used for fills, the brand mark, progress and active states. Display headings are Fraunces at a single light weight (300) with tight tracking; everything else is Inter. Buttons are pills; inputs have 8 px corners. The principles are adopted, not the identity: the name, the wordmark and the receipt-glyph logo stay FFB's (the mark from src/app/components/NavBar.jsx / logo.svg, recoloured to Ember with an Ink glyph).
Contrast is computed, not guessed—the ratios in the table are calculated at page load from the hex values (WCAG 2.x relative luminance). Two consequences shaped the system: Ember on white is 2.87:1, so Ember never carries small text and a filled Ember button uses Ink text (5.66:1) rather than white; small Ember-coloured text uses the darker Ember text variant. And Graphite #777573 fails on Linen (3.90:1), so muted text uses Graphite text #66645f and #777573 is kept for icons and placeholder glyphs only. Billing statuses are five distinct hues, none of them orange, and each pairs its colour with an icon and a label so a status is never carried by hue alone.
| Token | Hex | Usage | Sample | Contrast vs. its background |
|---|
One row per change. “What was confusing” names the current file; “why it's better” is the argument the frame's caption makes. Changes that imply new stored data say so.
| Id | Screen(s) | What was confusing (file) | New treatment | Why it's better |
|---|