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 · Roadmap

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

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 /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.

Discussion

No comments yet.

Adding to this discussion signs you in on app.motir.co and brings you back to this request.

Add a comment