Wireframes - Stage 04 - July 2026

All screens

The grey clickable prototype of Sift, rendered from the detail IA. Each screen is a real, responsive page: open it, then narrow the window to see it collapse to mobile. Walk the product by flow, or scan the full coverage map. Solid tiles are built; dashed tiles are still in spec. Structure only, no color yet. The contract every screen follows is written out below. Source: wireframes/docs/screens.md and wireframes/docs/conventions.md.

The grey contract

The rules every screen above follows, and the reason each one exists. Full text: wireframes/docs/conventions.md.

Composition has an origin: The blocks of a screen come from the block bank (ia/docs/blocks.md), built per page type. 39 nodes are 12 types. Every screen file opens with a comment naming its type, its blocks row by row, and what is deliberately absent. Absence is a decision and it is the one a reviewer cannot see on the screen.
A block with no trace is not drawn: The trace is a job, a barrier from the As-Is journey, or an SEO requirement. A reference is an input, never an output: a screen that matches one source one to one is a copy.
Text has owners, and no line exists twice: SEO copy belongs to the IA node; interface strings belong to voice/docs/microcopy.md; customer quotes and theme names are user content and are not rewritten. Change a string on a screen and the same step records it in the rewrite log, with was, now, and the rule.
One live screen, checked by narrowing: Not a desktop mock plus a mobile mock. The markup responds to the canvas through container queries, breaking at 600px of canvas width. 360px is a hard gate, checked programmatically. But block order and density are reasoned from the desktop, because a PM does this work at a desk.
A state keeps the blocks of its screen: It fills them with what it can honestly say, including zero, so the reader can see which screen is in this state and what the denominator is. A state drops a block only when that block would have to lie: the filter toolbar is absent from the synthesis empty and loading states because its facets carry counts and the counts do not exist yet.
An empty state is a group, not a screen: Wherever the screen already carries a second group offering the next action, the empty state is that screen with the first group at zero. A full-canvas empty leading to a chooser that holds the same options is a corridor. A failure the size of a row is drawn as a row, for the same reason.
One primary action, and one navigation: Where a screen has an action at rest and an action on selection, the two are mutually exclusive in CSS, not by hope. The prototype chrome is one panel with four blocks and no thin state strip: a top bar repeating the states the tree already lists was two editions of one control.
Grey, and appearance lives in the stylesheet: No color, no brand, no icon art inside a product screen; color appears only in the chrome. A component used by more than one screen belongs in _wf.css with the comment naming its owner. A style attribute is not a home for appearance.
Acceptance is in the browser: Open it, walk every state, narrow to 360, and confirm nothing overflows. Then check the set at once: no em dash, no forbidden word, no broken local link, no inline appearance, no string missing from the microcopy inventory. Fixes come as prompts, because a hand edit does not survive the next clone.

Before and after

Stage 04 was reopened in August. The screens were not thickened, they were rebuilt from a source that did not exist before: the block bank in ia/docs/blocks.md, built per page type from competitors and craft references. What follows is what changed and why. Full record: wireframes/docs/critique.md and docs/decisions.md.

What	Was	Now	Why
Where composition came from	The node template said "content blocks: 1, 2, 3" and named no origin.	12 page types over 39 nodes, each block tracing to a job, a barrier or an SEO requirement, and each screen file naming its type, its blocks and its deliberate absences.	With no origin rule, a screen is the median of every list page a model has seen. That is exactly what the first pass produced.
2.0 Synthesis	Header, three filter chips, six rows, an action bar.	Facet counts, an active-filter state, the scope line stating the denominator, an explicit rank, a representative quote per card, load more with the remainder, and a selection bar that appears only on selection.	A ranked list with no denominator cannot be checked, and a card with no quote is a label rather than evidence.
4.0 Theme	A summary, a flat evidence list, one number.	Denominator split by source, an inline citation on every claim naming its source and count, one line on why the items cluster and what was left out, grouping by source, and load more.	The product's whole claim is that a conclusion can be checked. A summary with no citation asks to be believed.
Empty states	A full canvas, one sentence, one button leading to a chooser that held the same three options.	3.4 and 6.5 are the list screen with an empty first group. The next action is already on the screen.	A corridor is not an empty state. The block that puts available sources beside connected ones removes the corridor for free.
3.5 Sync error	A full-canvas failure page headed "Intercom sync failed".	The sources list, with the failed row carrying its own status, explanation and retry, and the scope line carrying the consequence.	One source failing is not the screen failing. Blanking the list overstates the failure and hides the half that still works.
6.2 Thin-theme warning	A separate screen with a checkbox list and a parallel priority list, interrupting because a thin theme was included.	6.1 with a notice, interrupting because a thin theme has been ranked above themes with several times its evidence, with the badge travelling with the row.	Including a thin theme is not worth an interruption; the product's stance is to label it. Ranking it high is a claim the PM will have to defend.
Prototype chrome	A top bar with the hub button, the node name and a row of state chips, above a rail that listed the same states again.	One stage panel: header with the hub button and the current node, the screen tree, the current node opened onto its states, and cross-links out of the prototype.	Two editions of one control. A reviewer had to learn which one to trust, and the two could disagree the moment one was edited.
Targets	Every interactive control sat under the 44px minimum the contract claimed: buttons 37, tabs 33, chips 27, remove 15.	Controls, tabs, chips, fields, row actions and link lists meet 44. Three exceptions are named rather than averaged.	The rule had been written and never enforced. Only measuring the rendered box found it.
Where appearance lives	Component CSS pasted inline into 4 account, 3 auth and 3 legal screens, plus loose `style` attributes.	Shared components owned by `_wf.css` with the owner named beside each. No `style` attribute anywhere in the stage.	A copied block is where two editions start; the copies were already drifting.

Two contradictions in the canonical data were found by reading screens against each other rather than by looking for defects: theme T5 was "Intercom only" on 2.0 while listing a CSV item on 4.1, and the public brief counted 89 items against the whole corpus instead of the 30-day window it named. Both are fixed and recorded. Two questions the rebuild deliberately did not answer are recorded where they were found: the free-plan monthly limit, which has four different values in the repo, and whether the connect chooser should fold into the sources list.