Design — motir.co's not-found room: what a lost visitor is told, and where the page sends them, drawn inside the public chrome
Proposed by motir run MOTIR-4193 on 2026-09-03, where guard #3 (the design-reference rule) fired. MOTIR-4193 builds app/not-found.tsx for motir.co, and its third acceptance criterion reads "At least one door out of the page, named by the design pass" — a design pass that has no card. This card is that pass, and it stands to 4193 exactly as MOTIR-4005 stood to MOTIR-4009 for /legal, which is the precedent 4193's own body names.
The gap, measured — not assumed
On motir-core origin/main:
design/public-site/holds exactly three files (design-notes.md,public-site.mock.html,public-site.png), and the notes' Surfaces / panels section enumerates nine panels: the landing · the nav states ·/explore·/docs·/legal· narrow 390×844 · the access path · the placeholder treatment · dark theme. None is a not-found room.- The same notes' Out of scope — who owns what section enumerates ownership (the
/exploreand/docsbodies, the/legalroom,/p/[identifier]) and a not-found room appears in neither the owned nor the disowned list — it was never considered. git grep -i -e '404' -e 'not.found' origin/main -- 'design/**/*.md' 'design/**/*.html'returns matches only about API status codes, cross-tenant board not-found states and the peek panel's not-found — no 404 ROOM for any host, anywhere in the repository.- No sibling under epic MOTIR-3875 delivers one (MOTIR-4126 is the interim
/exploreproject-card state, a different surface).
This is a whole ROOM — its heading, its copy, its doors, its states — not an unspecified detail inside a drawn surface, so the design-reference rule's NONE-exists branch is the right one and rung 1 cannot fill it.
The DECISION this card owes
motir.co's 404 is a marketing surface met by a stranger. app.motir.co's is met by somebody already signed in, inside a shell with a rail full of doors; this one has neither. So the question this asset answers, and 4193 deliberately does not, is what motir.co says to a lost visitor and where it sends them — Explore? the landing? a search field? the docs? — and how many doors is the right number. Decide it here, from rung 1 (the mirror products) and the site's own argument, and record the reasoning in the notes. It is a design decision, not an architecture one, so it does not go to the user.
Before drawing — RENDER the shipped chrome first
Design-against-shipped-reality step 0, and it is cheap here because the chrome already ships:
- Render
SiteShellas it actually is —motir-marketing/app/_components/SiteShell.tsxonorigin/main(landed by MOTIR-4169): the skip link,SiteHeader, the<main id="main" tabIndex={-1}>landmark with itscontentClassNamebox,SiteFooter. The room is drawn INSIDE that box — mirror the shipped markup, never a redrawn stand-in. - Read
public-site.mock.html's bar and footer panels and compose from them by citation.public-site.*is FROZEN: this is a new surface, so it gets a NEW asset in the same area, never an amendment in place. - Read the four routes that actually reach it —
app/legal/[slug],app/explore/topic/[slug],app/p/[identifier]and its tabs,app/p/[identifier]/items/[key]·requests/[requestKey]— because the room's copy has to be true for a stale project link as well as for a mistyped URL. It is ONE room for all four; do not draw a per-route variant unless the notes argue for one.
What to draw — a NEW asset set in design/public-site/
design/public-site/not-found.mock.html + design/public-site/not-found.png (same basename) + a new section in design/public-site/design-notes.md.
- Panel 1 — the room, desktop light (1440). The full
SiteShellchrome with the 404 room in the landmark: the heading, the sentence under it, and the doors. Every colour an--el-*element token, every shape an element-semantic shape token, exactly as the sibling asset does. - Panel 2 — the doors, close-up, with the decision above written beside them: which destinations, in what order, and which is primary.
- Panel 3 — narrow (390 × 844). The same room under the
md:hiddenmenu, since a stale link is at least as likely to be opened on a phone. - Panel 4 — dark theme. The same room under
data-theme="dark"— this is one of the three things the stock screen gets wrong (it hard-codes#000on#fffand swaps onprefers-color-schemealone), so the asset has to show the theme being honoured. - Panel 5 — the ACCESS PATH, drawn as the four ways in. Not a nav affordance — a 404 has no entrance anybody clicks deliberately — so draw the four arrivals: a stale
/p/<key>link from outside, an unlisted topic slug, an unknown legal slug, a mistyped URL. The rule still holds in its real form: show the reader HOW somebody gets here, because the copy has to be true for each.
Acceptance criteria
design/public-site/not-found.mock.htmlanddesign/public-site/not-found.pngexist on the branch, anddesign/public-site/design-notes.mdgains a section for this room;public-site.mock.htmlandpublic-site.pngare UNCHANGED in the diff.- The notes NAME the decision — the destinations the room offers, in order, which is primary, and the reasoning (rung 1 evidence) behind the count.
- Panels 1–5 are all present, and Panel 1's chrome is
SiteShell's shipped structure (skip link, header, themainbox, footer) rather than a redrawn approximation; the notes say which file each mirrored element came from. - The notes state the AA contrast readings for the room's ink and its doors in BOTH themes, over the
motirpalette, the way the sibling asset's AA contrast section does. - The notes carry a build note for MOTIR-4193 naming: the copy strings, the destinations as hrefs, and the two traps 4193 already records — that no
loading.tsxmay be introduced above a route that callsnotFound(), and thatapp/not-found.tsxis not apage.tsxsotests/mainLandmark.test.ts's disk enumeration will not cover it and the E2E lane needs its own 404 entry. - No visible string reads "tracker", "issue" or "card" for a work item.
pnpm vitest run --config vitest.design.config.tsis green on the branch, run AFTER any temporary render harness is deleted.- The design result is published onto this card with
publish_design_result(mock + image + this card's notes section) and the returned evidence id is written on the card. - GIVES / TAKES: the notes list what this asset hands MOTIR-4193 (the copy, the destinations, the state set, the panel to build to) and re-check 4193's sizing (3 SP / 60 min) against that list, amending it on the record if the asset outgrew it.
Context refs
motir-core/design/public-site/design-notes.md+public-site.mock.html— the area's asset of record: the one chrome, its nine panels, its Composition, not redrawing and AA contrast conventions. Cite; do not amend.motir-marketing/app/_components/SiteShell.tsx— the shipped chrome and themainlandmark the room is drawn inside (its header comment records the MOTIR-4169 decision and the one declared rung-1 fill).motir-marketing/app/_components/SiteHeader.tsx·SiteFooter.tsx— the bar and footer to mirror.motir-core/design/public-projects/— the sibling public-surface assets, for the register a stranger-facing page uses.- MOTIR-4005 · MOTIR-4009 — the
/legaldesign → render precedent this card follows. - MOTIR-4193 — the card this design unblocks; its body carries the build measurement and the two ordering traps.