MystFlo design foundations — one core, per-surface dialects

Sign-off gate: the kit above as the only drawn family · the Mark (whole plant) as the icon and favicon · Double Law as binding rule · Lantern as the product's third color (“needs you” only) · Mist Law as rendering rule · signal orange #FF4A2D stays marketing-only. Until signed, do not ship these tokens into designSystem.ts or the playbook.

Sidebar variant B (LOCKED 2026-07-20): grouped rail eyebrows (9.5px caps 0.16em fg-30) · active item = white text + faint .06 tint + 2px lit left-edge gradient thread. The old solid-white active pill is RETIRED. Header: 72px, far-left collapse-toggle slot, serif-italic wordmark over the tracked PLATFORM suffix, Member + Preview badges, wallet pill right, hairline-subtle bottom border. Collapsed rail icons show a hover tooltip badge (nobody guesses icons).

Tap-intent rule (LOCKED): do something (complete-and-dismiss task) → bottom SHEET over the dimmed content region — the header stays fully visible. Go somewhere (destination with its own URL) → LEFT slide-over as the real page with a 64px "tap to return" peek edge. Short confirm (1 message + 1–2 buttons) → small centered dialog. Mobile: everything full-width, sheets stay sheets. The sheet band is the platform-wide standard: full-width sticky glass band, full-width hairline, 44×44 ✕ at the real gutter corner, title 14px mobile / 16px desktop semibold + optional one-line subtitle. Spec: playbook §3 Modal Patterns.

Detail-sheet-as-split (LOCKED 2026-07-26): a detail/edit sheet renders as this 40/60 split at ≥1024px instead of a floating dialog — same geometry as every "go somewhere" destination. LEFT 40% is always the page pane (--split-page, the surface you're already on) — RIGHT 60% is always the work pane (--split-work, the destination / active content) — one axis, never mirrored per-surface. Seam: one --split-seam hairline on the page pane's right edge, --split-shadow cast rightward onto the work pane. Both panes are opaque, self-defining colors (page is the darker of the pair) — never an additive wash, which is how two different hosts once rendered the same declaration as two different greys and inverted which pane read as nearer. Chrome: no grab handle (a split can't be dragged down), panes rise flush with no radius and no reveal gap (a docked workspace, not a floating card). Below 1024px: full-screen stacked, no split.

Proposed: no gray glass cards. Hairline-divided list on black. The Seal’s half-arc means a double is running. Lantern still means needs you. Green on the word “Active” stays — the circle is how far, not a second status color.

Pulse placement: the Mark in the masthead (every page) — the whole plant, stem included. Thread under the page title — not a hairline. Feed rows use Node · you / Node · double. One lantern node, one gold wash. Thinking sits on the thread while a double drafts. Empty Pulse gets the Mark once, then never again. Green status stays on the word “Active,” not on a second colored dot.

Playbook placement: the Mark in the masthead — same plant as Pulse, stem included. Thread under the title, same as Pulse — one language. Zone labels stay eyebrows, not cards. Solid Edge + Seal = you confirmed. Dotted Edge = the double drafted. Lantern only on the confirm action. This is how the book gets beautiful without becoming a second brand.

What we will not do: leaf icons on every nav item, a Thread under every row, a Seal on every success toast, gold on the wordmark, or a second illustration language inside a sheet. The kit is small on purpose. Design HQ stays the 1:1 contract — this tab is the placement map for when Peyton signs the kit off.

What stays: gradient-mesh + grain, pill CTA, clamped hero type. What changes: the Mark in the nav (whole plant), Thread under the claim instead of a hairline or the old curve. Material recipe is still verbatim from globals.css — the kit sits on top of it, it does not replace it.

Dialect difference: marketing display sizes are viewport-clamped and the body register drops to weight 300 — lighter and airier than the app's 400. The type DISCIPLINE (one focal owns the display scale, siblings step down, sentence case) is § Core and unchanged.

Locked-scale marketing visuals (BINDING): hi-fi product mockups and infographic diagrams (.mk-* mockups, the .ce-* connect loop) are ONE locked composition that scales as a whole via container-query units — never per-element responsive reflow. Full mechanism + rationale: playbook §3 "Marketing Visuals — Locked-Scale". This is why the website never drops wires/animation on mobile — the composition carries them at every size, just smaller.

Boundary: feed scale may crop and enlarge. It may not invent. Signal orange stays marketing-only and is not on these frames. When a real grid ships, these four compositions are the starting templates — not a new style.

On white: Lantern deepens to --lantern-ink #8A6B33 (4.6:1). The mark, Thread, Edge, and Seal stay ink — never gold. Production Resend cannot ship inline SVG (Outlook); this page is the look. Live chrome uses a hosted leaf PNG + an #e8e8e8 hairline stand-in for the Thread, and CSS left-rules for Edge.

Law: nodes = who. Seal = how far. Lantern = needs you. Do not paint the halfway arc gold. prefers-reduced-motion holds the static frame of whatever state the run is in — never an empty spinner.