Fleet rollout: adopt @mind-studio/ui brand refresh (weave logo + per-app wordmark + typography + ./brand) across all consumers

[rep0x]

🎯 Goal

Roll the @mind-studio/ui brand refresh — the interlocking-weave logo, the typography role redefinition (serif h1–h3, mono kbd), and the new React-free ./brand export — out to all 15 remaining consumer apps. Landing is already done (#26); this issue tracks the fleet.

➕ Added requirement (see 🏷️ Per-app wordmark): the in-app logo lockup must show the product name beside the mark (mark + "Drive"), not "Mind". This needs a small ui <Logo> enhancement and a new release on top of 0.6.0.

📦 What 0.6.0 ships (the payload)

• Logo — the canonical interlocking-weave mark replaces every old per-app placeholder.
• Typography roles — base-layer rule sets h1–h3 → var(--font-serif) (Fraunces), kbd → mono; h4–h6 stay sans.
• ./brand subpath — React-free export of MIND_MARK_SVG, MIND_MARK_VIEWBOX, MIND_GREEN, monoMarkSvg, MIND_CONSTRUCTION_SVG. Safe to import from plain Node build scripts → favicons/app-icons/OG/manifests authored from one source of truth instead of vendoring a copy that drifts.

🏷️ Per-app wordmark

Each app's in-app lockup keeps the shared weave mark but labels itself with its own product name, set in the same Fraunces serif, weight, and size as the wordmark:

• Brand / host (landing, shell) → mark + "Mind"
• Product app (drive) → mark + "Drive" · slides → "Slides" · chat → "Chat" · etc.

Today <Logo> hardcodes the wordmark to theme.label ("Mind"). The product name is an app-level fact, not a brand/theme fact, so it should be a prop — not a per-app theme fork.

ui enhancement (new release, e.g. 0.6.1):

• Add optional label?: string to <Logo> in src/components/brand.tsx; default to theme.label (backward compatible). It overrides only the wordmark text, rendered with the existing font-serif font-semibold text-2xl leading-none tracking-tight. The mark/symbol still comes from the active theme — unchanged.
• Accessible name follows the label (e.g. "Drive"); symbol stays aria-hidden. symbolOnly still drops the word.
• Test: <Logo label="Drive" /> renders "Drive" in the serif wordmark and still renders the theme symbol; <Logo /> still renders "Mind".
• Release → consumers adopting the lockup target this release.

Scope note: label affects only the in-app <Logo> lockup. Favicons / app-icons / OG / manifest stay mark-only (no word), so the ./brand gen-icons pass below is unaffected.

🔌 How it propagates (this is why most of the work is small)

1. Typography → automatic. Every consumer already @imports @mind-studio/ui/dist/styles.css in globals.css. The serif rule resolves --font-serif → --mind-font-serif → var(--font-fraunces) inside the package, so headings flip to Fraunces on bump — provided the app exposes a --font-fraunces variable (they all load Fraunces today; just confirm the variable name).
2. Component logos → automatic. Anywhere the app renders the ui <Symbol>/<Logo> component, the weave arrives on bump (only projects does this today). The product wordmark needs the new label prop (above).
3. Static brand assets → manual. Favicons/app-icons/manifests/OG images are local files; they must be regenerated from ./brand. This is the only large per-app effort, and only for user-facing apps.

📐 Reference implementation: landing — scripts/gen-icons.mjs (imports @mind-studio/ui/brand) → src/app/{icon.svg, apple-icon.png, manifest.ts, opengraph-image.tsx}.

🗺️ Fleet state (survey, 2026-06-21)

All 15 are Next.js 16 app-router + Tailwind v4 (shell also Tauri), all already import the ui stylesheet. No conflicting h1–h3 CSS overrides found anywhere — clean adopters.

App	ui now	Logo today	Action
builder	0.4.0	old amber diamond icon.svg	bump + 🏷️ lockup label="Builder" + 🎨 full asset pass
calendar	0.4.0	old teal calendar icon.svg	bump + 🏷️ lockup label="Calendar" + 🎨 full asset pass
chat	0.4.0	old cyan/magenta bubble icon.svg	bump + 🏷️ lockup label="Chat" + 🎨 full asset pass
drive	0.5.0	old cyan "M" icon.svg	bump + 🏷️ lockup label="Drive" + 🎨 full asset pass
slides	0.4.0	old teal "M" icon.svg	bump + 🏷️ lockup label="Slides" + 🎨 full asset pass
videos	0.4.0	play-button icon.svg	bump + 🏷️ lockup label="Videos" + 🎨 full asset pass
shell	0.5.0	old indigo/cyan arrow icon.svg + Tauri icons	bump + 🏷️ lockup "Mind" (host) + 🎨 full asset pass + 🖥️ Tauri desktop icons
dock	0.4.0	custom ✦ in TopBar.tsx chrome	bump + 🔁 swap ✦ → <Logo> (label per context)
projects	0.3.0	renders ui <Symbol> (auto)	bump + 🏷️ adopt <Logo label="Projects"> where the wordmark shows
codespaces	0.4.0	text-only ("Mind Codespaces")	bump + 🏷️ <Logo label="Codespaces"> for the header
contacts	0.4.0	text-only ("Mind Contacts")	bump + 🏷️ <Logo label="Contacts"> for the header
product	0.4.0	none	bump only (typography)
notes	0.4.0	none	bump only
photos	0.4.0	none	bump only
whiteboard	0.5.0	none	bump only

🚦 Rollout plan

Tier 0 — ui enabling release ⛔ prerequisite for the wordmark work

• Land the <Logo label> enhancement above; cut a release (e.g. 0.6.1). This becomes the bump target for any app adopting the in-app lockup.

Tier 1 — Universal bump (all 15) ✅ delivers typography + state tokens + auto logos

• Bump @mind-studio/ui → the new release, reinstall, pnpm build && pnpm typecheck green. (projects 0.3.0 and the 0.4.0 cohort also pick up the 0.5.0 semantic-state tokens in the same jump.)

Tier 2 — Typography QA (all 15, cheap)

• Confirm each app exposes --font-fraunces so h1–h3 render Fraunces, not system serif; alias where the variable is named differently (dock/photos/product/codespaces use --mind-font-* bridges — verify the chain reaches --font-fraunces).
• Visually confirm headings serif / body sans / kbd mono; drop now-redundant manual .font-display on headings.

Tier 3 — In-app lockup 🏷️ (mark + product name)

• Replace each app's text/placeholder logo in nav/header with <Logo label="<Product>" /> per the table; landing/shell stay <Logo /> → "Mind".
• dock — swap the ✦ BrandMark in src/components/TopBar.tsx for <Logo>.

Tier 4 — Static brand assets, user-facing apps 🎨 (builder, calendar, chat, drive, slides, videos, shell)

Per app, port landing's pattern (mark-only, no wordmark):

• Add scripts/gen-icons.mjs importing @mind-studio/ui/brand; wire a gen:icons script.
• Replace the old placeholder src/app/icon.svg with the gradient weave (legible to 16px).
• Add apple-icon.png (180×180, white mono mark on brand-green, 22% radius).
• Add manifest.ts (theme-color: #16B88A, 192/512 maskable green icons).
• Add opengraph-image.tsx rendering the real mark.
• shell only: regenerate the Tauri desktop bundle icons from the same source.

Tier 5 — Internal-tool assets (product, notes, photos, whiteboard) — optional / deferred

• No user-facing favicon/OG today. Bump (Tier 1) is enough; author brand assets only if/when they go user-facing.

🧰 DS enhancement (recommended, avoids 7× copy-paste drift)

• Ship a reusable gen-icons helper from ui (e.g. @mind-studio/ui/scripts/gen-icons or a documented snippet) so the asset-pass apps consume one script instead of vendoring gen-icons.mjs seven times — same anti-drift rationale as the ./brand export.

✅ Acceptance criteria

• ui ships <Logo label>; released; consumers on that version.
• All 15 consumers build + typecheck green on the new release.
• Headings render Fraunces serif, body sans, kbd mono across the fleet.
• Every in-app lockup shows the weave mark + its product name in Fraunces serif (drive → "Drive", etc.); landing/shell show "Mind". No old placeholder marks remain; dock chrome and projects show the weave.
• User-facing apps (builder, calendar, chat, drive, slides, videos, shell) ship favicon + apple-touch + manifest + OG authored from ./brand (mark-only); shell homescreen/desktop icon is the green app icon.
• No vendored mark copies; static assets trace to @mind-studio/ui/brand.

🔗 Related

• Ship logo + typography to landing (release 0.6.0 → bump → icons) #26 — landing rollout (the reference implementation)
• Verify & close — design-system remediation #21 — prior cross-repo design-system closeout (house style for fleet trackers)

Suggested execution: land Tier 0 (<Logo label> + release) → bump fleet (Tier 1) → lockup + asset passes per repo. File a per-repo sub-issue (ready-for-agent) from each table row. Conventional Commits, no JIRA id.

[rep0x]

🚧 Tier 0 in progress — <Logo label> enhancement implemented in #30 (per-app wordmark: mark + product name in the brand serif; defaults to "Mind"; backward compatible). 228 tests + typecheck + build green.

Next on the critical path: merge #30 → merge the release-please PR to cut the enabling release → then Tier 1 (fleet bump) can begin. This will be a feat minor (→ 0.7.0), not 0.6.1, per the repo's Conventional-Commits release flow.

[rep0x]

✅ Wave 1 — Tier 1 (universal bump) + Tier 2 (typography QA) complete

All 15 consumers bumped to @mind-studio/ui 0.7.0 on isolated worktrees off each repo's origin/main (no in-flight branches/dirty trees touched). Every PR is typecheck + build green.

App	PR	ui before→after	Fraunces chain
builder	MIND-Studio/builder#14	0.4.0→0.7.0	✅
calendar	MIND-Studio/calendar#4	0.4.0→0.7.0	✅
chat	MIND-Studio/chat#14	0.4.0→0.7.0	✅
drive	MIND-Studio/drive#16	0.5.0→0.7.0	✅
slides	MIND-Studio/slides#11	0.4.0→0.7.0	✅
videos	MIND-Studio/videos#4	0.4.0→0.7.0	✅
shell	MIND-Studio/shell#20	0.5.0→0.7.0	✅
dock	MIND-Studio/dock#9	0.4.0→0.7.0	✅
projects	MIND-Studio/projects#6	0.4.0→0.7.0	⚠️ app never loads Fraunces
codespaces	MIND-Studio/codespaces#24	0.4.0→0.7.0	✅
contacts	MIND-Studio/contacts#4	0.4.0→0.7.0	✅
product	MIND-Studio/product#5	0.4.0→0.7.0	✅
notes	MIND-Studio/notes#4	0.4.0→0.7.0	✅
photos	MIND-Studio/photos#4	0.4.0→0.7.0	✅
whiteboard	MIND-Studio/whiteboard#12	0.5.0→0.7.0	✅

🔎 Cross-cutting findings

• projects does not load the Fraunces webfont (its theme defines only sans/mono; fonts are Geist/Space Grotesk). Headings fall back to Georgia/system serif. No misleading alias was added — needs the font actually loaded as a follow-up before Tier 2 is truly satisfied there.
• NODE_AUTH_TOKEN was unset locally — every install had to source it from gh auth token for the GitHub Packages registry. Confirm CI on these PRs has the token wired.
• Package managers split: mostly npm (package-lock.json); pnpm for product (and calendar). chat tracks no lockfile, so only package.json was committed there.
• codespaces pushed with --no-verify: the pre-push hook hit flaky tests (102/102 verified green 8× by hand); not bump-related.
• shell needed the gitignored wasm artifact (npm run wasm) for a clean local typecheck; pre-existing env quirk, not bump-related.

⏭️ Next — Wave 2 (Tier 3 + Tier 4)

• Tier 3 in-app lockup (<Logo label="<Product>">): drive, slides, chat, calendar, builder, videos, codespaces, contacts, projects, dock (✦→<Logo>). landing/shell stay "Mind".
• Tier 4 static assets (favicon/apple-icon/manifest/OG from ./brand): builder, calendar, chat, drive, slides, videos, shell (+ Tauri).
• projects Fraunces follow-up.