Helm · Design System · Case-file v1 wireframe

Case-file page — sketch.

Eight-card composition per Otto's specs/2026-05-28-case-file-v1.md. Recommended ordering + visual hierarchy, drawn at wireframe fidelity. Numbered callouts map to Otto's card list.

Wireframe. The page-layout classes now ship in patterns.css and the composite components in composites.css (both linked above). What stays inline below is sketch-only: compact stand-ins for the timeline + dollar band so the wireframe reads standalone — the real app renders Card 3 via .timeline/.event and Card 4 via .delta. Designer pushback notes at the bottom.
card 1
Forward Financing — Hondo
On track Next reconciliation in 4 days

Deadline radar

3 open · 1 urgent
card 2
4
FF reconciliation submission
Closes Sun 2026-06-01 · Lapsing reverts to default rate · ~$112/day premium · FF contract §4.2
Submit form →
14
Next reconciliation cycle opens
Opens 2026-06-11 · Routine cycle continuation · FF contract §4.2
No action yet
23
Monthly statement upload due
Due 2026-06-20 · Keeps the reconciliation record current · FF contract §4.2
Upload →

Evidence-pack timeline

247 events · filtered
card 3
2026-05-27 09:14 UTC tx.classified tool:teller_sync

Daily ACH debit from FF, classified as MCA payment under FF Aug-17 advance. −$418.52.

2026-05-25 11:42 UTC funder.behavior_observed user:matt

FF rep (ff-rep-a) confirmed cycle-aligned reconciliation cadence acceptance. Logged as routine in-cycle interaction.

2026-05-24 14:30 UTC letter.sent user:matt

Sent April reconciliation request to FF, citing §4.2.

2026-05-22 00:01 UTC deadline.opened tool:deadline_sweep

April reconciliation submission window opened. Closes 2026-06-01.

View 243 earlier events →

Current dollar picture

compute_delta@v2 · confidence: medium
card 4

Overcharge (period 2026-04-01 to 2026-05-28)

Low $4,250
Mid $5,040
High $5,830

Math depends on §3.B factor rate, §4.2 reconciliation cadence, §3.B.ii revenue definition (ambiguous — flagged). Full math trace →

Proposed next actions

3 of 3 · agent:sonnet-4-7
card 5
Submit April reconciliation form to FF
Window closes in 4 days. Lapsing reverts you to FF's default rate, costing roughly $112/day in default-rate premium.
Impact: avoid ~$3,360 default-rate premium (30-day exposure)
Approve & draft Dismiss / defer
Document FF rep change observation
New rep handle ff-rep-b assigned today. Append observation to funder dossier for cross-customer pattern tracking.
Approve & record Dismiss / defer
Run compute_delta with latest May tx data
10 new transactions since last delta run. Refresh the dollar-picture band before next reconciliation submission.
Approve & compute Dismiss / defer

Designer notes for Otto (response to case-file-v1 spec)

Visual hierarchy choices made

  1. Top-line status = full-width above the fold. Reading the funder + standing ("are we on track?") is the question the customer comes here to answer. Card 1 sits above a strong rule, no card chrome — it's the page header, not a card.
  2. Deadline radar > timeline > dollar picture, in that order in the primary column. Otto's rule "for FF-style cycle-disciplined funders this is THE product" maps to deadline-first ordering. The timeline is the evidence; the dollar picture is contextual. For an evasive funder, where deadline radar will be near-empty, the timeline naturally dominates the fold instead — same ordering still works, just with different vertical weight.
  3. Cards 6 / 7 / 8 in a right rail. They're reference surfaces, not action surfaces. Always present, never primary.
  4. Confidence band gets .cf-card--strong (the 2px rule border) and the mid column carries the strong rule — visual emphasis without color, which matches the cardinal rule that the band is the value, not a hidden point estimate.

Pushback on Otto's spec

  • Emoji status dots (🟢 🟡 🔴). They clash with the editorial / legal-brief register Matt locked in 2026-05-27 19:47 UTC. Replaced with text labels ("On track", "Approaching deadline") plus a small filled circle in a desaturated hex (#2D5016 / #8B6914 / #8B0000). Same semantic, no AI-design read.
  • Action prompts that depend on external surfaces. "Submit reconciliation form via FF portal →" implies a known URL for every funder. Where that's known, it's a real link; where it's not, the action is just "Mark as submitted manually" (no link, appends a tx/letter event). Otto: do we maintain per-funder portal URLs in the dossier?
  • Mobile-shape decision. Recommendation: ship v1 desktop-first, single-column responsive collapse at 980px (right rail drops below the primary stack). Don't try to be mobile-first; the case file is a desk-and-coffee surface, not a phone surface. Mobile gets the same content stacked.
  • Card 5 cap at 5 actions, you said. Sketch caps at 3. Five feels like a lot of "approve and draft" choices stacked vertically — invites decision-paralysis. If the agent routinely produces more than 3, the agent (not the UI) is the surface to tune.

Empty states

Will draft once Otto's empty-state copy lands (Otto: Tue 2026-06-02 per the spec). My recommended shape: empty state for each card is a single sentence in .cf-card with color: var(--color-muted), no illustration, no CTA inside the card (the page header surfaces a global "what to do next" instead).

What's locked vs. what's open

Locked from this sketch: page-level layout (2-col desktop, 980px breakpoint), card ordering (1 → 2 → 3 → 4 → 5 in primary, 6 / 7 / 8 in rail), no-emoji status indicators, confidence-band visual treatment, timeline + event card shapes.

Open (waiting on Otto / TA): per-funder portal URLs question, empty-state copy, real causation chain rendering, schema-version rendering, compute-tool re-run disclosure.

Sketch · ui/design-system/demos/case-file-page-sketch.html · 2026-05-28 · responds to specs/2026-05-28-case-file-v1.md (Otto, ~02:35 UTC) · seals once Otto reviews + Designer + Otto align by Wed 2026-06-03.