The homebase for all MystFlo design — every surface's mockup as a card (artifact = rendered flow · GitHub HTML = the source of truth it republishes from) · nothing builds without a mockup, your sign-off, and a pixel review against it.
/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.
MF-Platform · dark-glass dialect · frames live in docs/design/design-artifacts/ · reviewed against design-canon.md
MystfloStorageRow wears the real status menu with the signed internal-only reason, matching Connects-page built-in rows. 2026-08-14: StorageRoleRow Disconnect greys and points at the destination badge by its live name (#3315). Pass 4 (2026-08-10, #3327) adds F4 — Personalize FIELD TYPES: money, dates and duration stop being blank text boxes. A price is a shape (one price · tiers · range · free) with ONE ISO-4217 currency per offering and named tiers stored intact, because “from $1,890” is a founder summarising several prices — “from” is a rendering composed once at save, never a stored field. Dates are a LIST of occurrences (an offering recurs; “Apr 12–19 & Oct 4–11” is two), and duration stays its own separate field — how long it lasts is not when it runs. Every control arrives pre-filled from the read, and each keeps a verbatim escape for “every Tuesday” / “pay what you want”. Specified-not-built. 2026-08-16 (AC-BRAINGATE-11): sec-5 Brain Check card now splits blocker vs attention rows — a row the gate itself flags as blocking (the payload's per-row `blocking`, the same value `blockers` is counted from) renders loud (⚠ amber, summary says "<Field> needs you before it can <verb>"), while any other row — recommended bucket, or a required field the gate marks satisfied regardless of its display status (incl. a drifted source showing `unverified`) — renders muted (⚠ white/40, folded into "N to review"); rendering reads the gate flag, never re-derives blocking from status. sec-5c brought into line the same pass (its Optional row's amber "Add in Brain →" muted to match). 2026-08-18: Funds-first Connect doorway (#3598) — sec-5's Wallet row is now the tap ($xx →), opening a PageSlideOver Top-up pane (sec-14/14c); the card chip inside it slides to Billing · Card, peek returns to Top-up. No Billing link on Connect anymore..bd-table (V3 Mark once + Thread + tip row + totals at 0). Door is the row link “Browse assistants →”, not a boxed invite or a centered empty. Guests see the same Overview. Frame 2. 2026-08-16: Health locked to the Attention inbox (Needs you / N failed — never a % or All good while inbox > 0). Band A then Band B. Empty Attention tile is a green check only. Visual lock: lifecycle #sec-8c. 2026-08-15: Empty Pulse keeps real chrome at zero on every tab — PulseGetStarted retired. Active = “No assistant activated yet”. Past = “No previous assistants”. Runs = always the run table (“No runs yet”). Frames 2 + 2b. 2026-08-12: Status legend 1:1 with rows. 2026-08-11: Overview empty zeros; Breakdown vs Runs; issue sheet 4b; setup-only modal Overview; Export + Customers = Future.edit → stays on /brain/book and raises the existing sheet. PRD rematch v4.67 / v4.68 · AC-PLAYBOOK-20..23 (main already owns v4.65–4.66 / AC-PLAYBOOK-19 index row). Family: 33e-all / 33e / 33e-b′. 2026-08-19 (V3 · main Brain page): 9-preview chapter list uses the approved hairline on every editable chapter. 2026-08-19 (docs sync): brain.html header cites kit design-foundations.html § “Platform · Proposed — Playbook (Brain)”. 375 twins 9a-m / 9b-m / 9c-m redrawn to the collapsed .pbk row — two-column example shelf on empty only; populated uses the Example playbooks · 5 → hairline (AC-PLAYBOOK-16). PRD v4.65 + AC-PLAYBOOK-19 (collapsed-row lock; AC-PLAYBOOK-18 stays the empty-route normalize). Jump-nav stays the v4.63 TOC / Jump trigger. 2026-08-19 (PR #3660): Ink & Air book + templates share V3 Thread + Seal · idle. Contract: f33 / 33-dense / 33b / f35 (+ 375 twins). Bloom / Clay Room / Lamp Light open the same chrome; Ember / Stitch stay · soon. Event-host example is Lamp Light Club. 2026-08-18 (V3 · Brain sheets): Depth editors (What you sell / FAQs / revenue / look) and Share anything are de-boxed hairlines — PlaybookRow + Node, SealSpinner, no green “Confirmed”. Coverage dots are Node you/graft/double. Jump chips lose the pill box; active = Edge · you. One lantern per view. 2026-08-18 (V3 · Brain first): Playbook chapters are a de-boxed hairline list — Edge · you (solid 2px) vs Edge · double (dotted), Node on the left, titles white / body --fg-70, doors at --fg-55. Thread under “Your playbook”. One lantern moment: confirm-draft or the first “Where you stand” row — never both, never gold on AI/playbook body. Active jump chip = Edge · you (no leaf per nav item). Layout 40/60 unchanged. 2026-08-18 (V3): Thread under “Your playbook”; lantern “Your call” on confirm-draft; determinate % is Seal riding the Thread. Layout 40/60 unchanged. 2026-08-18 (PR #3653): Entity-scope confirm (Peyton SIGNED) — when a free identity peek finds more than one operable business face on the same host (parent + chapter, franchise + local), the identity gate opens a same-sheet fork (brain.html · 1.5-scope / 1.5-scope-m) — hairline radio rows, That's me — run ✦ stays dark until she picks. Class rule, never a one-host hard-block; never pre-selects the parent as a default. our-read-v2-preview.html. 2026-08-17 (PR #3606): Reputation left the playbook. "How the web talks about you" is a display-time finding-card slide on the current note only (18·v2-d) — presence dots, mention count, consistency, crawled reviews, named highlights, channel names. No links, no inputs. Last-slide CTAs (18·v2-e): Read again · Look again / Make me findable / refine · Add reviews · Review drafts. Come-across / walls / peers / trends live only in the labeled Future frame (18·v2-f). Playbook I5 / chapter / jump chip / promise row retired. ADR-036 untouched. 2026-08-16 (PR #3576): 9-preview re-graded NOT BUILT → SHIPPED — the post-playbook demotion row is live: the "Preview template" rail block and mobile persona-chip rack are deleted from every populated frame, replaced by one Example playbooks · 5 → hairline row (PlaybookPage.tsx) that opens the f34 carousel as a content-hugging sheet (ExamplePlaybookRack.tsx removed). Post-playbook "Build mine" is a plain back-to-Brain door with no tagging side effect (that path is intake-only, AC-BRAIN-85). 2026-08-17 (PR #3575): f34 (start-screen example shelf) and f35 (template book) re-graded NOT BUILT → SHIPPED — ExampleCoverShelf.tsx (one scroll-snap carousel, both tiers) and ExampleTemplateBook.tsx (persona example rendered through the f33 .ink-* book system) are live; BrainPromiseList deleted. f20's presentation note superseded (template stops using the 640px text panel). "Build mine" tags an unset persona_slug server-side, set-if-unset (AC-BRAIN-85). 2026-08-17 (PR #3562): Our read is a click-through slide briefing — start at brain.html · 18·v2 (full-size walk-through: our-read-v2-preview.html). Desktop ≥1024: playbook digest LEFT 40% · deck RIGHT 60%, rail covered. Below 1024 the left pane drops. Spine this ship: cover + thesis · what stands out · what changed (pass 2+ / non-empty only) · how the web talks about you (found, current note) · what we still can't see · this read + last-slide CTAs. Playbook f33 stays a book — do not copy the pager. The four-block note is live; the older "f18 specified-not-built" line is retired. 2026-08-17 (PR #3557, #3145): frame 15j — the interim pre-save-first empty-outcome split ("Read it — nothing to confirm" vs. "unsorted") for the offerings-bucket share sheet, shipped as a sanctioned stepping stone toward the eventual saved-state panel; nothing is saved in either interim state. 2026-08-17 (PR #3505): Review home is brain.html · Playbook · Ink & Air — one section, desktop first then 375. Start at 9-preview (shelf) · 33 Little · 33-dense Lots · 33-over · 33b. 375 twins: 9-preview-m · 33-m · 33-dense-m. The 375-only brain-playbook-final.html is a stub to those anchors. Sketch: brain-playbook-ink.html. Combo: Stark playbook cover + glass objects + her Look only on Branding. Tap the playbook cover → /brain/book. Our read already has its place on the same shelf (designed interior later). Chapter rows stay the D4 edit doors. Empty Brain has no books. Agent export unchanged. (sound)/(look) stay edit sheets. Shelf is live — CT-SHELF click-test 7/8 PASS, 1 SKIP (guest-mode, no incognito capability); shipped index now renders the shelf, not the 2026-08-14 white button. 2026-08-16: chip v4 frames added — 375 first-run chip stacked as a progress band (tone-step background colour + lit determinate line); three passes: initial chip stack, band treatment with tone-step zone, and final contract mockup with n-of-5 kicker beside the step label. 2026-08-16 (PR #3547): How-You-Look sheet's "feeds your product listings" line was factually wrong (listings read from `services[].listing`, not Look/`visual_tone`) — corrected in code and synced into f22 (both instances). Copy-only, not a design-direction change. 2026-08-16: How-you-run roster is hosts-first (Retreat host → Workshop host → Event host); Drop maker sits in the Coming soon group. Not a new mockup. Also: first-run Teach chip after the playbook lives on this same page — 9a (step 4) and 9c (step 5 → f15); 9b stays the default after Teach opens once. 2026-08-15: LOOK #3459 + #3484 are on live Pages — the shipped index matches f9b/f9b-m row grammar v2 (the twins are no longer the reference for the index chrome); sibling full-page twins f1/f4/f11/f12/f16/f17/f31 + 375 gallery copies synced to f9b in the artifact this pass, and the stale spec-vs-code note corrected; f18's four-block Our-read copy stays specified-not-built (research-mint engine). 2026-08-15: f32 / 32a-multi SIGNED (Peyton option 1) — each selected persona has its own FAQ help, not mixed, not Main-only. Slice 1 ships the thin "FAQ for: Retreat host · Event host" control; drawn coverage-count rows stay slice 2. 2026-08-14: populated-index door hugs its label (not a full-bleed bar); f33 Save a copy must paint above the book overlay (z-10300). 2026-08-13/14: row grammar v2 on f9 (title · her words · one detail →; provenance once on the zone head); f33 the whole-playbook book (read-only, Save a copy, Close returns to the index); Option B — playbook = her words, Our read = our words in four blocks, never playbook chapter names; per-assistant capability cards folded off /brain (rows survive only in the activation gate). LOOK ships the index + book chrome this pass; f18 four-block copy stays specified-not-built until research-mint synthesis. The founder's single knowledge page, across five phases — import → recognize → customer-ready → teach the inside → live. Covers the identity-gate confirm sheet, the "Teach your Brain" share door (anything shared saves to the corpus first; playbook proposals are a second, optional step), the playbook's two zones (customer-facing / private), and per-section research, ask, and version-history flows. Unmatched knowledge gets its own home — the "Other things your Brain knows" section — rather than being dropped. Part I draws every journey state as the whole page; Part II is the parts library at full size; Part III is deferred ideas, never a build target. The playbook, ask sheet, and research pipeline are built — including the FAQ coverage journey (coverage dots, corpus-backed peer answers with fill-in fact-blanks and a fabrication guard; retreat-host and workshop-host peer corpora seeded); the one-share-sheet door, the couldn't-read registry, the versioned "Our read," the voice/look split, the offering-depth sheet with "How you describe it" (f28 — SHIPPED 2026-08-10 in #3028, except the two staleness flags (#3320) and the tappable gap-chip ask loop (#3321), which stay drawn-not-built; the listing layer lives INSIDE each offering, never a sibling playbook row; the free assembled default is the example and the paid draft is an invitation, with what's still open shown beside what already exists), the categorized FAQ surface (f32 — grouped coverage heads, the auto-rewrite editor, the peer set card, multi-persona rows), and the price/dates correction editors (28g — pickers instead of blank text boxes, currency as an ISO code, so a value change is unambiguous; #3327) are drawn but not yet built — f28 is the exception in that list, now built.Connected ▾ control as real apps — greyed Disconnect (and AI Switch account) with a signed reason, never a static chip (Peyton 2026-08-11). Includes the WhatsApp duplicate-number error state — field-scoped red border + an inline AI-assisted error card.shell.html: form, sent (Seal), guest (Mark). Thread under the title. Header is Private Beta + Feedback. Do not use feedback.html.emails.html — every active Resend template, filled with sample copy, in Brand System V3 chrome (light dialect: paper, Double Leaf, Thread, one bronze CTA). Open it from Design HQ or from the design-artifacts list. Compact header so a letter fits on one screen.wa.me link, not the bare number (#3722); new sec-8b draws the post-activation detail sheet — the tabbed Pulse/Overview/Personalize/Connect twin.mystflo-website · full-token dialect, the parity reference · same core, page-flow mockups arrive as website design work goes mockup-first
Feed-legible mono-card dialect + deck treatment · direction-level today — detail earns its spec when those surfaces mature