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, Desktop 1180 shrinks to fit the screen as a slide deck — swipe between whole screens. On a computer it stays full size. Portrait still opens the 375 frames so you can scroll. 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.
#f1p — the booking row in the inbox gains a lantern “Says they paid” badge + “Told the assistant” line (slice 1), a quiet “Not received” verdict (slice 2), and a “says they paid” roster status.prd-pl-brain-agent.md (R1–R32) + prd-pl-brain.md; ledger: parity-brain.md.#XYZ chips (last 3 of display_id — never the full ASST-… dump); 375 chip-omit retired; frames 1c / 3-t are drawn 768 shells (collapsed 64px rail, 2×2 KPI).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. Filter the flow cards by what the assistant does (type) and who it serves (persona) — chips combine, and the untagged placeholder card always stays visible.
#sec-5d / #sec-14d carry SUPERSEDED chips; the Brain-destination redraw on #sec-5 / #sec-5c / #sec-14 is owed (chipped Redraw owed · R27). The 09-12 note below is the superseded takeover.#sec-5d / #sec-14 (1) redrawn — the Book (with the Teach bar) covers the whole viewport when opened from a Brain Check row, landed on the specific chapter the row names; the assistant sheet stays mounted underneath, unseen, and reappears with the row already re-read on Close. #sec-14 (2)/(3) Connects/funds stay genuine 60/40. Ledger: parity-assistant-lifecycle.md addendum 2026-09-12. The path every assistant takes — Explore → Team → Personalize → Connect → Try → live on Pulse → Billing → reactivation. Primary build contract; per-assistant files inherit it. Personalize opens with How you sound (#sec-4a). Share from Connect stays inside the Brain pane — stacked, not a nested 40/60. The Pulse tab is one template, typed right-slot content (#sec-9b · #sec-9b-x · #sec-9b-r · #sec-9b-k); Records (Attendees / Orders / Signups) are a slot in the Pulse card, the FIRST item of that right slot, and a nested scrollable sheet (#sec-8d · #sec-9b-r · #sec-9e) — never a full-width band, a page, or a fifth tab. A separate nested sheet (#sec-9f) carries the tab's fuller activity history. Post-activation header is the four-line contract (#sec-9g / #sec-13g-m) — subject, type + id, status + price + live-since, activity — drawn once here and inherited by every per-assistant file. Post Personalize is the locked mirror (#sec-9c / #sec-13c-m): the pre-activation layout at rest, form column locked, preview column unchanged. Wallet-empty grace window on chat assistants (#sec-8e · #sec-8e-t · #sec-8e-d, locked 2026-09-06, target behaviour pending #4522): the issue sheet names the days left while messages still reach her on Slack, then reads differently once relaying stops on day 16 — status line, badge and amber stay D-3 verbatim in both states.pulse.html frame 3 redrawn to match). Post Personalize (9d / 9d-m) redrawn as “pre at rest” — saved topics as chip groups, no history sections. Founder: Discover → Evaluate → Activate → Monitor. Guest: Trigger → Interact → Outcome. Post Personalize (#sec-9d) is read-only — chips carry no remove control, no add-topic, and the Slack notify renders as state text, not a switch. Personalize frames carry the read-only WhatsApp connected · This assistant's follow-ups · … · Edit → row (per-assistant status, not the account list) and the two message badges (Instant · any language / Meta pre-approved).#sec-3s / #sec-3s-t / #sec-3s-m frames A–E: Personalize heads-up only when Support isn't live; Connect ends with a locked "Add-on: On-Brand Support" row (reads Active when Support is live); Try reads back both and offers the one Activate button, same as when Support is live (Paused / Stopped / Brain-short variants). Copy provisional until Peyton signs off the frames. Support pause blocked under a live booking: assistant-lifecycle.html. Catalog card → Personalize → guest DM → activation → Pulse. Booking share rail is full wa.me + Copy, short wa.me/{digits} + Copy short, and QR + Download QR — never hidden while WhatsApp is unconnected. Guest thread: invite names the program + date, paid submit thanks first then Pay now, free RSVP confirms in chat, and two live cards on one number get a name+date list (sec-9 Mode D). WhatsApp reminders required; email optional. Post-activation detail sheet lives in the artifact (sec-8b). Attendees: a slot in the Pulse card, a block in the Pulse tab, and a nested scrollable sheet with every state (sec-13) — no standalone page. Personalize now draws Start time (required) beside End time (optional) on one row — stacked at 375 — with the "before your start time" hint that #4616 ships, now placed inside the End cell itself with End cleared to a placeholder while stale (sec-3 / sec-3b). Category 01 order matches the live schema: name → date → price/seats → time pair → Timezone (new) → Location (required, new) → Google Maps link (optional, new); Photo stays in 04a. Guest invite bubble now shows date · time · location before the tap line, with a photo-header alt-state when Photo is set (#4570). Try/success now also draws the honest state for a workshop/event row that failed to seed — "Your workshop details didn't save," retry, bookings/reminders paused until it saves, plus a Pulse "Needs your attention" revisit row if dismissed (sec-try-seed-failed, desktop + 375-in-tier-m) — NOT BUILT, filed as #4634. Payment vehicles redrawn INSIDE 02 · How guests pay (Peyton ruling 2026-09-10): a two-vehicle checkbox group — link, QR, or both — under the Pay-in-full / Free-RSVP radio, both inputs required when both are ticked, Free RSVP folds the group away; 04a Messages is now one numbered flow in guest order (invite → form → Payment ask "Scan the QR to pay, or use the link below." → confirmation → reminder), rail beats tied to rows; both sent = one QR-image bubble with the link on its own caption line (sec-3 / sec-3b) — SPEC-CHANGED · #4703 · not built, supersedes the single-choice radio + separate 04b block still live in prod.#sec-4s / #sec-4s-m: when Support isn't live, the Retreat box keeps booking rows only, then the "Switching on with it" Support box (Greeting + Routes, no Name row), then ONE Brain + Wallet box, then the same single Activate button. TMPL-RTBK01. Deposit and balance, T-30/14/7 chase, overdue verdict (Mark paid · Extend · Release). Payments relay through the founder’s own link. Shares the booking link rail (full + short + QR, noun “spot”) on its Pulse tab. Sibling of Workshop Booking. Attendees follow the engine shape — Pulse-card slot, Pulse-tab block, nested sheet — drawn on the master and Workshop Booking, referenced here.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