Skip to content

moooon

Motir

Vibe your whole project. Bring an idea — Motir's three AI layers plan it, track it, and ship it, end to end. You're looking at Motir, built in Motir.

  • Vibe Project
  • Open Source
  • AI Agent
  • AI Loop
1
requests
0
upvotes
145
planned
1,361
shipped

Motir · Work items

MOTIR-4245Done

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 /explore and /docs bodies, the /legal room, /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 /explore project-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:

  1. Render SiteShell as it actually ismotir-marketing/app/_components/SiteShell.tsx on origin/main (landed by MOTIR-4169): the skip link, SiteHeader, the <main id="main" tabIndex={-1}> landmark with its contentClassName box, SiteFooter. The room is drawn INSIDE that box — mirror the shipped markup, never a redrawn stand-in.
  2. 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.
  3. Read the four routes that actually reach itapp/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 SiteShell chrome 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:hidden menu, 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 #000 on #fff and swaps on prefers-color-scheme alone), 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.html and design/public-site/not-found.png exist on the branch, and design/public-site/design-notes.md gains a section for this room; public-site.mock.html and public-site.png are 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, the main box, 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 motir palette, 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.tsx may be introduced above a route that calls notFound(), and that app/not-found.tsx is not a page.tsx so tests/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.ts is 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 the main landmark 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 /legal design → render precedent this card follows.
  • MOTIR-4193 — the card this design unblocks; its body carries the build measurement and the two ordering traps.