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.
#f34 / #f34-in / #f34-walk / #f1 1b / Share J2). On the long researching page the books sit above the playbook edit rows. Our read tab is her two books (or the deck) once they exist — examples demote to the hairline. The founder’s knowledge page: import → recognize → customer-ready → teach the inside → live. Share anything and Teach your Brain more use the same AttachmentChip rows and one Save to my Brain (brain.html #f15 · #f15-lots · #f1f · #f28 · #f28-share). Playbook is her words as a book; Our read is ours as a full-page deck. Review tabs are Import · Playbook · Our read · More (Ready and Live retired 2026-08-24 — those frames ride Playbook; Share loop folded under Playbook 2026-08-24 — it is part of building the playbook). The Playbook tab's review chrome splits into five sub-tabs — Your book · Share loop · Examples · Customer Q&A · Shelf & doors (review chrome only, not a product split). How you look (2.11 / 2.11a) reviews on Your book with the generated playbook — not on Shelf & doors, and not as a fifth sub-tab. Share splits only on the full /brain stage; inside a Brain pane it stacks. Playbook field lock (2026-08-21): Your business carries about + website + Instagram, Your story is a quiet optional row, Direction shows Coming soon, Where to find you adds a Maps fact, and Customer Q&A merges FAQs with a read-only policies tail. f32 Customer Q&A approved to build (2026-08-22, simplification S1, AC-BRAIN-108) — builder kill list: both duplicate suggested-question chip rows, the floating “N to answer →” counter, and the icon empty-state all retire. Activity re-home (2026-08-21, Peyton lock): Activity is outside generated content — the object is art only with a quiet vN chip, Save to Google Doc lives under it (playbook + Our read: no Copy all), and a ≤5-row Activity preview with See all → opens Pulse's Activity tab. 2026-08-23: the book is 10 chapters ending at Direction (How you show up lives in Our Read). Share from a form row docks that row left — Option B Pick at #f28-share, sign-off before any remount. Share anything as gap guidance (specified-not-built, AC-BRAIN-109..118): after the first dump the left pane is the missing brief — frames #f15-guide / #f15-guide-m. Full Option 1 journey (Peyton pick 1, siblings): Playbook → **Share loop** (`#phase-share`) walks empty → researching → playbook + missing → share open → two-step apply → after confirm → Add → type → form-door contrast → missing = 0. Work rail (2026-08-23): Teach, resume, confirm, missing, and the share-next hint live in one right column (`#f15-loop-j3` · `#f15-loop-j3c` · `#f15-loop-j3r` · `#f15-loop-j9`); left is the playbook to read. At 375, Example playbooks · 5 → sits under the two-book shelf, then the work stack. Brain doors never scare on charges (2026-08-23): ✦ is the paid mark; no wallet line on the door; header balance and empty-wallet honesty stay. Playbook drafts-land (#f4 / 2.1) keeps the same example shelf as 9a / Import / Share J2 — playbooks slide, Our read stands; no founder books until she confirms (9b). 2026-08-24: Branding book-edit (#f33e-voice) paints How you look under How you sound on this page — Signature · Page · Ink · Support, Together, type, feel. No Open How you look door. Preview Size remaps #f36-m ↔ #f36 so Desktop 1180 on a mobile hash opens the How you look sheet, not the nearest book slide. Playbook How you look doors go to #f36 (2.11a), not superseded #f24. How you look is on the /brain preview (Playbook → Your book → 2.11a), not a separate design-review path.#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.
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