Repository navigation
Ship logo + typography to landing (release 0.6.0 → bump → icons) #26
Description
🎯 Goal
Apply the new interlocking-weave logo and the typography role redefinition (serif headlines, sans body, mono technical labels) consistently to the landing site (mindpods.org) — every logo, the favicon, and a homescreen/app icon — sourced from the design system, not vendored copies.
🔍 Background / why this is blocked today
- Landing depends on
@mind-studio/ui@^0.4.0; the installeddisthas none of the improvements. - The weave mark (
src/themes/mind-mark.ts) + typography commits are not onmain(now 0.5.0) — they're stranded on a stale[gone]branch as two unmerged commits, andMIND_MARK_SVGis not publicly exported. - Decision (locked): release
uifirst, then bump landing; recolor the landing hero animation cyan→green.
| Asset | Source | Status today |
|---|---|---|
Nav/footer logo (<Symbol>) |
the npm package | old "M" rounded-square — needs release + bump |
Favicon (src/app/icon.svg) |
landing-local static file | old cyan placeholder |
| Apple touch / homescreen icon | landing-local static file | does not exist |
| Web manifest (Android homescreen) | landing-local | does not exist |
OG image (opengraph-image.tsx) |
landing-local | generic dot, no mark |
| Typography | landing globals.css |
~95% conformant already |
📦 Phase 1 — Release @mind-studio/ui with the improvements (this repo)
- New branch off
main; cherry-pick the two stranded commits:9ff81db— real Mind logo (mind-mark.ts,brand.tsxserif wordmark, Foundations/Logo docs)3391e8b— typography roles (h1–h3 → serifbase rule ingen-styles.ts, monokbd, docs)
- Resolve expected conflicts in
aliases.ts/mind.ts(0.5.0 semantic-state-tokens touched them) — keep both the state tokens and the logo/typography - Export the mark publicly so apps reach the canonical artwork without vendoring: re-export
MIND_MARK_SVG,monoMarkSvg,MIND_GREEN,MIND_MARK_VIEWBOX(new./brandsubpath or via the main barrel) -
pnpm gen:css && pnpm build && pnpm typecheck && pnpm test(contrast AA + axe gate green) - PR → merge → release-please cuts 0.6.0 → merge release PR → CI publishes to npm
- 🔸 Human-in-the-loop: the two PR merges; npm publish is CI-driven
🔗 Phase 2 — Landing adopts the released package
- Bump
landing@mind-studio/ui→^0.6.0, reinstall → nav/footer<Symbol>renders the weave automatically;h1–h3 → serifbase rule + monokbdarrive
🎨 Phase 3 — Landing static brand assets (authored locally from the canonical SVG)
Generated by a small scripts/gen-icons.mjs that imports the mark from the package (no drift):
- Favicon — replace cyan
src/app/icon.svgwith the gradient weave (legible to 16px) - App / homescreen icon —
src/app/apple-icon.png(180×180): white mono mark on brand-green backplate, 22% radius - Web manifest —
src/app/manifest.ts(name,theme-color: #16B88A, 192/512 maskable green icons) - OG image —
opengraph-image.tsxuses the real weave mark
✍️ Phase 4 — Typography conformance pass (landing)
- Fix 2 stray
<h3>s inhow-it-works/page.tsx(lines ~230, ~258) that lack serif - Recolor animated hero
MindMarkinglobals.css(.mind-mark): cyan#67e8f9→ brand green#29CE9F/#16B88A - (Optional) note where manual
.font-displayis now redundant given the base rule
✅ Phase 5 — Verify
-
pnpm build+ typecheck in landing; visually confirm favicon / app-icon / nav mark / headings - Conventional Commits in both repos (no JIRA id)
Acceptance criteria
-
ui0.6.0 published with the weave mark, public mark export,h1–h3 → serifrule, monokbd - Landing on
^0.6.0; nav/footer show the weave - Favicon, apple-touch icon, and web manifest icons all render the weave; homescreen add shows the green app icon
- OG image shows the mark
- Landing headings serif (h1–h3), body sans, technical labels mono; hero animation is green
Related
- Cross-repo closeout tracked in Verify & close — design-system remediation #21 (landing#7 aurora/starfield tokenization still pending)
Activity
rep0x commentedon Jun 21, 2026
✅ Implemented — all five phases done
📦 Phase 1 —
@mind-studio/uireleased (this repo)main(clean — no conflicts; they were authored on the state-token commit that's now in main)../brandexport (React-free, 0 imports indist/brand.js):MIND_MARK_SVG,MIND_MARK_VIEWBOX,MIND_GREEN,monoMarkSvg,MIND_CONSTRUCTION_SVG.gen:css·build·typecheck·test(225 passed — contrast AA + axe).v0.6.0published to GitHub Packages ✅🔗 Phase 2–5 — landing → MIND-Studio/landing#13
@mind-studio/ui→^0.6.0; nav/footer<Symbol>render the weave;h1–h3 → serif+ monokbdarrive via package CSS (the twohow-it-works<h3>s pick up Fraunces with no markup change — verified in build).scripts/gen-icons.mjsimports@mind-studio/ui/brandand generates: favicon (icon.svg, gradient weave), apple-touch (apple-icon.png180², white mark on green / 22% radius), maskablepublic/icon-{192,512}.png,manifest.ts(theme_color #16B88A), and the OG image now carries the real mark + "Mind" lockup.MindMarkrecolored cyan → Mind Green#29CE9F.tsc✅ ·next build✅; all icon/manifest/OG routes serve 200 and render the weave (OG verified visually).Left to you: review + merge MIND-Studio/landing#13 (it deploys to production mindpods.org, so I didn't auto-merge).
Out of scope, still tracked in #21: aurora/starfield literal-color tokenization (landing#7).
rep0x commentedon Jun 21, 2026
✅ Closing — fully shipped across both repos
Landing PR #13 merged to
main(commit7ebd61d), and landing cut release 0.5.0 (#14). All five phases and every acceptance criterion are met:@mind-studio/ui@0.6.0published — weave mark, public./brandexport (MIND_MARK_SVG/monoMarkSvg/MIND_GREEN/MIND_MARK_VIEWBOX),h1–h3 → serifbase rule, monokbd.^0.6.0— nav/footer render the weave; favicon, apple-touch, and maskable 192/512 manifest icons all show the weave on Mind Green; OG image carries the real mark; headings serif / body sans / labels mono; hero animation recolored to Mind Green.🔭 Optional follow-ups (not in scope here)
.font-displayclasses on landing headings are now redundant given the package base rule — a cleanup candidate.Out-of-scope aurora/starfield literal-color tokenization remains tracked in #21.