Design HQ · homebase · kit chrome · 2026-08-20
MystFlo Design HQ — one language, every surface
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.
black & white luxury
white/gray glows only
lantern = needs you
flat hairline rows
single-theme dark
§ Core — how design works here
Ritual, layout tiers, and the system file. Pixel tokens live in
design-foundations.html
· Core 0 is the V3 contract.
How design works here — workflow & hierarchy
/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
Layout tiers — every mockup depicts all three, and everything between them holds too
Mobile · 375px — designed FIRST, scored first
Tablet · ~768px
Desktop · 1280px+ — the authored composition
· 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
3757681280+
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.
Suggested review order
1 · Foundations→
2 · Assistant lifecycle→
3 · App shell→
4 · Overlays→
then pages in any order
Design system file
Tokens · type · rows
$41.20
A1 · System
Design system foundations
The reference sheet every other artifact obeys — color, type, rows, badges, pills, buttons. Mark / Thread / Seal / lantern live here. Platform, Website, and Social dialects share the same core.
§ Mark — Thread, Seal, lantern
The drawable kit is authored once, in the foundations file.
This hub does not redraw it.
Core 0 · Mark
Mark · Thread · Seal
Kit · system
Open Mark in design foundations
Stem in frame. Edge · you vs Edge · double. Lantern is needs-you, never a status, never on the logo.
§ Assistants — lifecycle + per-assistant flows
The master structure first, then each public assistant that has a full-flow mockup.
Assistant lifecycle — master structure
ExploreTeamPersonalizeConnectTryPulseBilling
M1 · Master structure
Assistant lifecycle — every surface, one generic assistant
The path every assistant takes — Explore → Team → Personalize → Connect → Try → live on Pulse → Billing → reactivation. Primary build contract; per-assistant files inherit it. Share from Connect stays inside the Brain pane — stacked, not a nested 40/60.
Assistant flows — per-assistant mockups
card → live → monitored
01 guest DMs → 02 Brain answers → 03 tricky → Slack → ◎ helped in your voice
F1 · Assistant flow
On-Brand Support — full flow
Catalog card → Personalize / Connect / Try → live WhatsApp thread → Slack escalation → Pulse. Founder: Discover → Evaluate → Activate → Monitor. Guest: Trigger → Interact → Outcome.
card → Personalize → guest DM → Pulse
01 required date → 02 booking capture → 03 payment relay (fixed) → 04 confirmation/reminder → ◎ Pulse
F2 · Assistant flow
Workshop Booking — proposed flow Partly built
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).
card → Personalize → Launch now → guest DM
01 3-question setup → 02 make it richer → 03 pre-sale/sold-out → 04 ⚡ Launch now (tier-cap + US-pause aware) → ◎ Pulse
F3 · Assistant flow
Waitlist + Launch — proposed flow Not yet built
TMPL-WAITL1. Three-question setup plus launch channels. Launch Now shows WhatsApp tier cap, US pause, and wallet cost. Founder: Discover → Activate → Monitor. Subscriber: Trigger → Interact → Outcome.
Discover destination deck → Overview → Personalize → Connect → Try → Activated → Pulse 2-col
listing · website · Gmail · Instagram · flyer — copy on the destination, caption block under IG/flyer, then 01 coming-soon card → 02 program facts + destination-deck preview → 03 Brain Check → activation writes v1 → Pulse deck LEFT + accordion RIGHT → Google Doc / copy
F4 · Assistant flow
Program Launch Kit — full journey Partly built
TMPL-WMKT01 / RTLK01 / EVLK01. Catalog → Personalize (write a kit) → Brain Check → activation writes v1 → Pulse to review and rewrite. Workshop / Retreat / Event are separate cards — no founder-facing swap (ADR-035). Discover opens on the destination deck. IG captions and flyer carry a caption block under the graphic (every caption + flyer body, each with Copy). Pulse desktop is two columns (deck left, kit right); 375 stacks. Activity re-home (2026-08-21): a chrome-preview block below the Take-it-with-you stack — its own hairline section, never inside the delivery stack — first five rows open, See all → opens Pulse's Activity tab.
Explore → detail → Personalize → Connect → Try → Pulse → overdue verdict → guest WhatsApp
01 beta card → 02 roster + deposit/balance + relay link + sign-off → 03 read-only bindings → 04 one real test → ◎ Pulse chase feed → Mark paid · Extend · Release
F5 · Assistant flow
Retreat Booking — full journey Beta
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.
Standing placeholder
Catch-all for the next assistant flow.
F6 · Assistant flow
Remaining live assistants Not yet drawn
Every public assistant gets its own full-flow mockup, on the same pattern as On-Brand Support, before further UI work touches it.
Not yet published
Feed-legible mono-card dialect + deck treatment · direction-level today — detail earns its spec when those surfaces mature