8.3.14 Design — the public design showcase at motir.co (`/design`): the composed specimen, the three axis pickers + theme toggle, and the site's first current-page nav entry (motir-marketing)

Draw motir.co/design — the public page where a visitor switches Motir's three design axes and watches the whole site restyle. It is a marketing / credibility surface, not a token reference: the argument it makes is "the design system Motir gives you is the one Motir wears."

The surface composes into the shipped motir.co chrome (SiteHeader / SiteFooter) and renders entirely from @motir/design-system@0.1.0, which the repository already installs. The mock therefore restates the real --el-* values exactly as landing.mock.html does, so it paints standalone without a Tailwind build.

Scope BOUNDARY

This card produces three files and no code. It does not add a route, a component or a font loader — MOTIR-1043 builds to it — and it does not write the page's words, which are the copy card's. Treat every string in the mock as placeholder at the specified register, exactly as design/marketing/design-notes.md says of the landing.

It also does not redraw the landing. The only landing change it specifies is the nav entry below.

What the asset must settle

1 · The composed specimen. The page IS the example — whole-self styling. Draw the sections and their order: the axis rail, then a composed UI built from the package's own primitives (Card, Button, Pill, Input, FormField, Segmented, Switch, Tooltip, Popover, Combobox, EmptyState, ErrorState, Modal, Toast, SectionLabel) plus a --el-* swatch grid. Reuse StyleVignette for the per-style previews — it is exported and is the pattern motir-core's own galleries use. Do not draw a component the package does not export: Sidebar, CommandPalette, the charts and IssueTypeIcon live only in motir-core and are not reachable here.

2 · The axis rail — three pickers + the theme toggle. StylePicker (9 styles), PalettePicker (10 palettes), TypePicker (6 pairings) and ThemeSegmentedControl (light / dark / system) are all exported by the package. Draw the rail's layout, its behaviour on scroll, and its narrow-viewport form. MEASURE the fold: the rail and at least one composed section must be visible at 1440×900 and at 390×844 without scrolling.

3 · The nav ENTRY, and the current-page treatment it forces. app/_components/SiteHeader.tsx carries a load-bearing comment: "motir.co is the root, so no nav item here is ever the current page and there is nothing to mark: the nav is --el-text-secondary and the CTA is a filled Button. Do not reintroduce the pattern by marking an item current." The reason is MOTIR-3745 — --el-accent-on-surface as TEXT on --el-surface-soft measures 4.41:1 in dark, under AA. This page is the site's first second internal route, so that premise no longer holds. Draw the current-item treatment and prove it: weight, an underline, or --el-text — never accent-coloured text. Draw it in the desktop bar AND in the md:hidden menu panel, both themes.

4 · What a visitor's choice does to the rest of the site — DECIDE it, do not leave it open. ThemeProvider writes data-theme / -style / -palette / -type onto document.documentElement and persists each to localStorage; themeInitScript re-applies them on every motir.co page load. So a visitor who picks Neo-Brutalism here sees the LANDING in Neo-Brutalism afterwards. Draw it as KEPT — it is the strongest form of the argument the page is making, and reverting it would contradict the page's own claim — and draw the affordance that makes it legible and reversible: a Reset to default control in the rail, present whenever any axis is off its default.

5 · The matrix, honestly. 9 × 10 × 6 × 2 is not drawable. Draw the grammar: the default state in light and dark, one deliberately distant style (Neo-Brutalism or Glassmorphism), one deliberately distant palette (Graphite or Candy), and one type pairing that re-types the whole UI (mono-technical). State in the notes that the remaining cells are generated by the same three attributes and are asserted by the build card's AA criterion, not by more panels.

6 · The states the page actually has. It fetches nothing, so there is no loading or error state — say so rather than leaving it unasked. Do draw: the default arrival, an axis mid-change, and the narrow-viewport rail.

Acceptance criteria

• Three files land, following this repository's stated convention (design/marketing/design-notes.md, "ONE design-notes.md per AREA"): a new section in design/marketing/design-notes.md, plus design/marketing/design-showcase.mock.html and a same-basename design/marketing/design-showcase.png (full-page Playwright chromium export, deviceScaleFactor: 2). The note keeps its exact basename — a design-showcase.design-notes.md classifies as null and is never published (classifyDesignPath in motir-core/scripts/upload-design-assets.mjs; MOTIR-3750).
• The mock draws the axis rail with StylePicker · PalettePicker · TypePicker · ThemeSegmentedControl and a Reset to default control, and the composed specimen below it, in light and dark.
• The mock draws the nav entry in SiteHeader's desktop bar and its md:hidden panel, with an explicit current-page treatment that uses no accent-coloured text; the notes state the measured contrast of whatever treatment is chosen, against --el-surface-soft, in dark.
• The notes carry a decision section recording that the visitor's axis choice PERSISTS across motir.co, and the Reset affordance that discharges it.
• The notes name, per element drawn, the @motir/design-system export it maps to, and name no component that package does not export. Check against @motir/design-system@0.1.0's own barrel as installed in this repository (node_modules/@motir/design-system/dist/index.js), never against motir-core's packages/design-system/ source.
• The notes carry the measured fold at 1440×900 and 390×844: what is above it in each.
• The notes carry a ## Planning flags section if anything is surfaced, and an explicit out-of-scope line naming the copy card as the owner of the words and MOTIR-1043 as the owner of the build.

Advisory dispositions

validate_work_item, projected over this plan, raised four advisories against this proposal. One was real and is fixed; three do not apply, and the reason is recorded rather than the agreement. The verdicts below were re-checked by re-running the projection after the edits, so they say what the detector actually reports now, not what the edits were meant to achieve.

• likely-ordering-violation — phrase "the published", criterion 5. ACTED ON, AND IT CLEARED. The phrase is gone; criterion 5 now names the installed node_modules path, and the re-run no longer raises it. It was never a post-merge read — the barrel it checks is @motir/design-system@0.1.0, on public npm since 2026-07-02 and pullable anonymously today — but a criterion whose wording makes a detector and a reader ask the same question is worth rewording rather than defending.
• likely-self-blocking-design — design criterion 1 vs surface criterion 5. REWORDED, STILL FIRES, AND IT DOES NOT APPLY. Criterion 5 originally said "which package export renders it"; renders is a surface verb, so it was reworded to "maps to". The re-run still raises it — the detector is now almost certainly matching the node_modules/@motir/design-system/dist/index.js path as a non-design/ surface. That path is deliberate and stays: it is what stops the notes being checked against motir-core's workspace copy, which is a different tree from the one this repository installs. No further rewording — contorting a criterion until a matcher goes quiet makes the card worse for its reader, and the matcher is non-blocking by design. What the advisory exists to protect is satisfied structurally, not verbally: every criterion on this card produces a file under design/marketing/, the Scope BOUNDARY says the card ships no code, and the surface built to this design is MOTIR-1043 — a separate card, a separate pull request, blocked_by this one. A design and its surface cannot arrive in one review here.
• likely-missing-edge — this card references MOTIR-1043 (todo). DOES NOT APPLY, and acting on it would be a defect. The edge runs the other way: MOTIR-1043 is blocked_by this card. Drawing the edge the advisory suggests would make a cycle. The reference is an out-of-scope OWNER pointer — the shape the design-asset out-of-scope rule requires — and the detector cannot tell a hand-off pointer from a consumption.
• likely-missing-edge — this card references the copy card (todo). DOES NOT APPLY. Same shape, and the two are deliberately PARALLEL rather than ordered: layout and words are independent here, exactly as MOTIR-1143 and MOTIR-1144 were for the landing. Both block the build card; neither blocks the other.
• advisory — this card references MOTIR-3799 (blocked). DOES NOT APPLY. It is cited as context about the publish lane's future, and this card's criteria are deliberately the three FILES and the guards, never the lane — so nothing here consumes 3799's output in either direction.

(Sibling cards are cited by CHIP rather than by their 8.3.x number throughout this card: this plan re-numbered all three when it moved them from story 8.8 to story 8.3, and a number in prose is exactly what does not survive that.)

Context refs

• motir-marketing design/marketing/design-notes.md + landing.mock.html + landing.png — the AREA this joins; the landing's vocabulary, its standalone-mock convention, and its footer's deliberate omissions
• motir-marketing app/_components/SiteHeader.tsx — the bar this gains an entry in, and the ⚠️ comment about never marking an item current · app/_components/SiteFooter.tsx · app/globals.css — the two package @imports and the two @source lines
• @motir/design-system@0.1.0's barrel — ThemeProvider, useTheme, AxisField / AxisNote / AxisRadioGroup / StylePicker / PalettePicker / TypePicker / ThemeSegmentedControl, StyleVignette, TokensSpecimen, and the STYLES / PALETTES / TYPOGRAPHY registries. Already installed here; to read it outside the repository, npm pack @motir/design-system@0.1.0 → shasum ed10ed8db66eb09d34d062b0b4bad878c8509fed
• @motir/design-system/theme.css — the [data-palette] (35) / [data-style] (109) / [data-type] (9) blocks the axes drive
• MOTIR-3745 — the 4.41:1 measurement behind the no-accent-text rule in the bar · MOTIR-1143 — the landing design whose conventions this follows
• MOTIR-3799 — retires this repository's own design-result publish job as part of centralising the publisher. This card's criteria are the three FILES and the guards, deliberately not the lane, so it is unaffected whichever lands first.