feat(web): adopt Modular Mind brand tokens and icons - #11
Merged
Conversation
Port the design system export into the Next app: --mm-* tokens for colour, type, spacing, radius, elevation and motion, plus the branded favicon/icon set and wordmark. - Load Archivo / IBM Plex Sans / IBM Plex Mono via next/font instead of the export's Google Fonts @import, so fonts self-host (no external request, no layout shift). Plex Mono has no variable cut on Google Fonts, so its weights are listed explicitly — including 700, which --mm-text-readout needs and the export's @import omitted. - Keep base rules in @layer base. Unlayered rules outrank every Tailwind utility regardless of specificity, so the export's bare `a` rule was overriding text-colour classes and flattening the nav's active state. - Install the branded favicon at src/app/favicon.ico; the export shipped the untouched Next scaffold default there, which takes precedence over public/ and would have kept serving the old icon. - Migrate SiteNav off zinc utilities onto the tokens.
dommango
force-pushed
the
feat/brand-tokens
branch
from
July 17, 2026 16:11
f09d63a to
32952c4
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Ports the Claude Design "Modular Mind Design System" export into the Next app (
web/) — the S2 milestone of the web-frontend roadmap.web/src/app/brand-tokens.css,--mm-*namespace): a full system for colour, typography, spacing, radius, elevation and motion. Direction "Rack Panel" — warm graphite anthracite surfaces with a single amber signal accent (#f2a63c), plus a verdict set (amber good /#f2c14ecaution /#e8664efault) that maps ontoanalyze_audio's flags.src/app/favicon.ico,icon.svg,apple-icon.png(App Router auto-generates the<head>tags), pluslogo.svgand a 512px PNG.next/font(Archivo / IBM Plex Sans / IBM Plex Mono) instead of the export's Google Fonts@import, so fonts self-host — no external request, no layout shift.SiteNavmigrated offzinc-*utilities onto the tokens.Three export traps fixed (each compiles clean; only rendering catches them)
a { color: var(--mm-link) }was unlayered and overrode everytext-*class regardless of specificity, flattening the nav's active state. Moved base rules into@layer base.src/app/favicon.icowas the untouched Next default; the branded icon (frompublic/) now sits insrc/app/, where App Router gives it precedence.@importomitted 700, which--mm-text-readoutneeds — weights are now listed explicitly.Page bodies remain placeholder stubs from the S1 scaffold; S3–S6 fill them in. This PR establishes the design system on the shell.
Test plan
npx tsc --noEmit— cleannpm run lint— cleannpm test— 5/5 passnpm run build— compiles successfully; icon routes present/and/listenunder headless Chromium againstnext start— tokens applied (graphite ground, amber links, bone text), nav shows correct active/inactive distinction, zero external font requests in served HTML