The homebase for every mockup. Tabs below are the same chrome as design-foundations.html — not a second system. Cards open the HTML next to this hub. On a phone, each mockup opens the 375 frames so you can scroll. Turn the phone sideways for a desktop slide deck — swipe between screens. Size buttons still override. Nothing builds without a mockup, your sign-off, and a pixel review against it.
Ritual, layout tiers, and the system file. Pixel tokens live in design-foundations.html · Core 0 is the V3 contract.
/design (STRICT ritual — every non-trivial design task)
┌──────────────────────────────────────────────────────────────────────────────┐
│ 1 PRE-FLIGHT read kit decisions+lessons · foundations · canon · archetypes │
│ 2 FRAME intent · principle · constraints │
│ 2b BRIEFS Chief Product + Chief Researcher (+ domain agent) │
│ ≤10-line insight briefs — insights land BEFORE pixels │
│ 3-4 OPTIONS Chief Designer (Fable) sketches → Peyton picks │
│ 4b MOCKUP Chief Designer authors/updates the HTML mockup here │
│ GATE mobile + tablet + desktop, every state → Peyton signs off │
│ ── nothing builds without it ── │
│ 5 BUILD Platform Frontend Dev (Sonnet) implements the mockup verbatim │
│ 6 SCREENSHOTS 375px first → tablet → desktop, scored vs the mockup frames │
│ 6b REVIEW Chief Designer (Fable) reviews rendered pixels — blockers stop │
│ 7 MEMORY decisions → kit ledger · misses → kit lessons │
└──────────────────────────────────┬───────────────────────────────────────────┘
▼
/ship gate 4.4d (every UI-surface PR)
Chief Designer (Fable) BLOCKING review — screenshots vs mockup;
no mockup coverage = automatic blocker · then quality/security/CTO
· Hierarchy: Peyton (CPO) owns every sign-off →
Chief Designer (Fable) owns design judgment, mockup authorship, both review gates →
Chief Product + Chief Researcher feed briefs → Platform Frontend Dev (Sonnet) executes, never designs
· Scope changes update the SAME mockup first, republish at the same URL, then build
· Written version: docs/design/design-artifacts/README.md · docs/architecture/agents/agent-orchestration.md §5
· Passes desktop but fails a smaller tier = FAIL, not a partial pass
· Every artifact carries mobile + desktop frames · tablet frames landing progressively, required in all NEW mockups
These three are samples along a continuum, not the only sizes that exist. Content — spacing, type, card widths, gaps — scales smoothly at every width in between, the way a photo scales rather than jumps. Structure is different: a rail collapsing into a drawer, a row turning into a stack, a grid losing a column — those have no in-between state, so they change only at a few fixed, deliberate widths and never drift anywhere else.
The drawable kit is authored once, in the foundations file. This hub does not redraw it.
MF-Platform · dark-glass dialect · frames in docs/design/design-artifacts/ · reviewed against design-canon.md · tabbed walkthrough, same chrome as Brain.
shell.html: form, sent (Seal), guest (Mark). Thread under the title. Header is Private Beta + Feedback. Do not use feedback.html.The master structure first, then each public assistant that has a full-flow mockup.
Letter gallery in Brand System V3 chrome. Dialect pixels also live on the Email tab of design-foundations.html.
mystflo-website · full-token dialect, the parity reference · same core, page-flow mockups arrive as website design work goes mockup-first
Seal states, reduced-motion holds, and earned motion — authored in the foundations file.
Feed-legible mono-card dialect + deck treatment · direction-level today — detail earns its spec when those surfaces mature