Design — motir.co's not-found room: what a lost visitor is told, and where the page sends them, drawn inside the public chrome
Opened by Zhu Yue ·
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.
Discussion
No comments yet.
Adding to this discussion signs you in on app.motir.co and brings you back to this request.