Wireframes

A grey clickable prototype of the whole product, built from the IA Detail Layer. Enter by flow to click a path through, or read the coverage map below. Nothing is invented here: text, components, and states come from the IA. This hub is the single coverage tracker; each screen lights up as its wireframe lands.

Enter by flow

The four product flows from ia/docs/flows.md. Flow 1 is assembled first; the rest roll out at Step 8. Base state plus every real state, each its own page.

Full coverage map

Every product screen by IA cluster. Solid = wireframe built (with its state-page count); dashed and tagged IA = still specification only (links to the IA spec).

built (state pages) in spec (IA)

The grey contract

The rules every screen in this folder is built against. Full text with examples: wireframes/docs/conventions.md. This folder is frozen after Voice: stages 06 and later work on coloured copies in design/, never here.

Grey onlyNo colour, type, brand, icon or shadow. The only palette a screen body may use is the greyscale scale in _wf.css.

One responsive pageNot a device mockup and not two frames. Every screen reflows from 360px up with real media queries.

One main action per screenEverything else is secondary. Stage 09 turns this into a rule of the system in the terms of its own classes.

Nothing is invented hereText from the node SEO block, components from IA nodes, states from the node States section, links from flows.md. A hole found while building is fixed in the IA first, then rendered.

Every state is its own pageSo the prototype can navigate between states. 47 screens, 99 state pages.

One navigator, one sourceA screen carries an empty panel mount and one render call; the tree, the accordion and the cross-links come from _nav.js. Adding a screen is a row in the registry, not new markup.

Was to now

What the critique of this stage caught and what happened to it. The full defect log is wireframes/docs/critique.md; the retrofit rows are in docs/retrofit-audit.md. Every row carries a status, so the next stage does not start fixing what is already fixed.

Navigator, not a stripWas: a sticky top strip with the node, the state and chips for the sibling states. It could not show where a screen sat in a product of 47 screens. Now: a left rail with the IA cluster tree, an accordion on the current node, and a cross-link to the IA spec. Who found it: Claude, on screen. Status: fixed, decision D-05.

Home was called by its old nameWas: the state matrix and the naming rule pointed at home.html, a file that no longer exists. Now: index.html, the product home, node 0.0. Who found it: Codex, in a class the rename script missed systematically: a filename inside markdown backticks. Status: fixed.

The naming rule read as a contradictionWas: the rule lists home.html among the IA basenames while the folder rule says index.html is the home page. Verdict: withdrawn at verification, the sentence is about IA basenames and ia/home.html does exist. A clarifying line was added instead of changing a correct fact. Who found it: Codex. Status: withdrawn, clarified.

The hub lost two sections without an errorWas: a scripted edit removed the closing line of the wrapping function on this page; the counter and the coverage map stopped rendering and nothing threw. Now: restored, and a brace-balance check over every inline script is the rule after any scripted surgery. Who found it: Claude, script. Status: fixed.

Conventions had no visible placeWas: conventions.md was read by the model and by nobody else. Now: the grey contract section above. Who found it: Claude. Status: fixed.

Stale destination folderWas: the stylesheet and the conventions both said colour copies grow in ui-visual/. Now: design/. Who found it: Claude, script. Status: fixed.

The pair that shows it

Node 4.0 Dashboard with the old sticky top strip — **Was.** A sticky top strip: the node, the current state, chips for the sibling states. It answered "which state am I in" and nothing else, so in a product of 47 screens the reader could not tell where this screen sat.

Node 4.0 Dashboard with the wireframe navigator rail — **Now.** A left rail: the IA cluster tree, the screen with its muted node number, an accordion open only on the current node, and a cross-link to the IA specification. On mobile the same panel is a top bar that opens downward.