Design — motir.co/p/*: the project page, its five tabs and its two detail pages inside the public chrome
Draw the whole /p/* surface as it will exist on motir.co, inside that site's public chrome, as a three-file design asset in motir-marketing/design/public-projects/.
Nothing draws this surface on this host. motir-core/design/public-projects/ draws it as it was on app.motir.co — inside the application's own chrome, with an account menu and a sign-in modal that assume a session on the same origin. motir-core/design/public-site/ (MOTIR-3880) draws motir.co's chrome and names /explore, /docs and /legal among its nav states. A chrome asset naming a surface is a DOOR, not the room — the same reasoning design/legal/design-notes.md records for /legal. This asset is the room.
Draw the WHOLE surface, every screen this story ships:
| screen | what it holds |
|---|---|
/p/<identifier> — the Overview | the hero (name, org, tagline, tags, stats), the authored README rendered as Markdown, the tab bar, and whatever the amendment made of in-place editing |
| Board · Items · Tree · Roadmap · Changelog | the five tabs, each with its own list/board shape, its pager, and its empty state |
/p/<identifier>/items/<key> | one work item as the public sees it |
/p/<identifier>/requests/<key> | one feature request: body, public comment thread, vote control |
| the request intake | the submit form and its duplicate-suggestion step |
And draw the states, per screen, not once: empty · loading · error · anonymous · signed-in-elsewhere. The error state is not decorative here — public-surface-hosts.md §8 cost 1 says so in terms: "a network hop replaces a Prisma read … the API can be slow, or down, and the renderer is in a different application with a different deploy." A /p/* page with an unreachable API is a REAL state of this surface, and motir-marketing/app/explore/ already ships one to build from.
The act affordances are drawn as the amendment decided them, per row of its table — follow, subscribe, roadmap vote, request upvote, request comment, submit request, in-place overview editing, and the top bar's account/sign-in treatment. Where the amendment sends a visitor to app.motir.co and back, DRAW that hand-off: the control, the destination, and what the visitor sees on return. Do not invent a row the amendment does not carry, and do not soften one it does.
Three files, one per the convention (design/marketing/design-notes.md's ⚠️ note): design-notes.md — the area's note, that exact basename, because classifyDesignPath matches the note on exact basename and a differently-named note is silently never published — plus the *.mock.html source, standalone and re-stating the shipped --el-* values, and a same-basename .png re-exported with pnpm design:render. If the surface needs more than one board, each extra board is another *.mock.html + .png pair under the same area note.
The area rule applies from the first commit: design/marketing/design-notes.md § "A design board's CHROME owes AA" is area-wide in this repository and this asset is held to it; pnpm test:design is the lane that measures it, and jsdom cannot — run the real chromium.
Any deferral in the notes is a card. "the real X lands later", "placeholder", "stays for now" — file it and cite the key in the sentence.
Acceptance criteria
motir-marketing/design/public-projects/holdsdesign-notes.md(that exact basename) plus at least one*.mock.htmland its same-basename.png, exported withpnpm design:renderatdeviceScaleFactor: 2.- The notes open with a surface table covering all nine screens above, and each row names the route and the endpoint that feeds it.
- Every screen is drawn in its empty, loading and error states, and the error state is the unreachable-public-API case, not a generic one.
- Every affordance in the amendment's table appears with the treatment that amendment chose, and the notes cite the amendment's row for each — including, where the mechanism is a hand-off to
app.motir.co, the return path drawn. - The asset names the access path: how a visitor reaches this surface (from
/explore's cards, from a shared link, from a changelog feed item). - The chrome is
motir.co's — header, nav and footer asmotir-core/design/public-site/draws them — with the/p/*state of the nav made explicit. pnpm test:designpasses on the new asset with no exemption added.- The notes carry a
## ⚠️ Planning flagssection, and every deferral in the file cites a work-item key that exists. - No file outside
motir-marketingis touched. (motir-core/design/public-projects/,design/public-site/and the deleted page tree are EVIDENCE — prior art read while drawing — not deliverables.)
Context refs
motir-core/design/public-projects/—design-notes.md,public-projects.mock.html,public-changelog.mock.html,public-item-detail.mock.html,public-signin-modal.mock.html: the surface as it was, on the application hostmotir-core/design/public-site/—MOTIR-3880's chrome formotir.comotir-marketing/design/legal/design-notes.md— the closest precedent: a room drawn inside that chromemotir-marketing/design/marketing/design-notes.md— the area-wide AA rule and thedesign-notes.mdbasename mechanismmotir-marketing/app/explore/— the shipped error/empty treatment for an unreachable public APImotir-marketing/scripts/design/render-design-mock.ts·vitest.design.config.mts- the amendment this draws · the page · the tabs · the detail pages · the act affordances