docs(design-system): name the shipped faces in the README (TASK-652)

frontend/design-system/README.md

@@ -96,9 +96,9 @@ Reply/Open/Mark handled controls are bordered secondary controls.
 
 ### Type
 
-- **Inter first, self-hosted**: `"Inter Variable", "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif` via `@fontsource-variable/inter` (OFL, bundled, `font-display: swap`, no Google Fonts request). SF Pro is the fallback only while the woff2 loads or if it fails. One face: display weight comes from `font-weight`, not a second family. Mono keeps `"SF Mono"` first.
+- **IBM Plex Sans first, self-hosted**: `"IBM Plex Sans", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif` via `@fontsource/ibm-plex-sans` (OFL, bundled, no Google Fonts request). SF Pro is the fallback only while the woff2 loads or if it fails. Body and controls use this one face. Bricolage Grotesque is used only where a surface sets `--v2-font-display` (14 selectors in `v2.css`, such as settings labels and connector names); feature titles and everything else use IBM Plex Sans. Mono is `"IBM Plex Mono"` first (`@fontsource/ibm-plex-mono`).
 - **Tight letter-spacing on big text**: feature titles `-0.03em`, h2 `-0.025em`, h3 `-0.02em`. Body stays at 0.
-- **Heavy weights at large sizes**: feature titles use `700` in Inter (`850` was tuned for SF Pro Display), headers `700`, section titles `650`. Body is `400`/`500`. Buttons are `600`.
+- **Heavy weights at large sizes**: feature titles use `850` (`.v2-feature__title`, inheriting IBM Plex Sans), which renders as browser-synthesized bold: only the 400, 500 and 600 IBM Plex Sans faces ship (`V2App.tsx`). `850` was tuned for SF Pro Display. Headers `700`, section titles `650`. Body is `400`/`500`. Buttons are `600`.
 - **Sizes hover small**: body `14/20`, meta `12/16`, labels `11/14`. Secondary copy keeps body size and carries hierarchy by colour. The biggest type in normal product UI is the 24px feature title.
 
 ### Spacing, radii, layout
@@ -220,7 +220,7 @@ entrance and scroll-reveal animation is allowed within these limits:
 
 ## Caveats
 
-- **One webfont shipped.** Inter Variable is bundled from `@fontsource-variable/inter` (OFL); everything else is system. Do not add a second family, and never load a face from Google Fonts.
+- **Three faces shipped, all self-hosted.** IBM Plex Sans (body and controls, `@fontsource/ibm-plex-sans`), Bricolage Grotesque (display, `@fontsource-variable/bricolage-grotesque`) and IBM Plex Mono (meta, `@fontsource/ibm-plex-mono`), all OFL. Everything else is system. Do not add a fourth family, and never load a face from Google Fonts.
 - **No Figma file** is committed. All visual decisions trace back to `tokens.css` and `frontend/src/v2/v2.css`.
 - **Marketing site styling lives elsewhere.** Only the in-app experience is documented here.
 

frontend/design-system/tokens.css

@@ -118,9 +118,9 @@
   --motion-ease-linear: linear;
 
   /* ---------- Typography ---------- */
-  /* Inter (variable, self-hosted from the bundle via @fontsource-variable/inter);
-     SF Pro is the fallback only while the woff2 loads or if it fails. One face:
-     display weight comes from font-weight, not a second family. (TASK-122) */
+  /* IBM Plex Sans (self-hosted from the bundle via @fontsource/ibm-plex-sans);
+     SF Pro is the fallback only while the woff2 loads or if it fails. Display
+     is Bricolage Grotesque (--c-font-display). (TASK-122) */
   --c-font-sans:   "IBM Plex Sans", "SF Pro Text", -apple-system, BlinkMacSystemFont,
                    "Segoe UI", Roboto, sans-serif;
   --c-font-display: "Bricolage Grotesque Variable", "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
@@ -190,7 +190,7 @@ html, body {
 h1, .c-h1 {
   font-family: var(--c-font-sans);
   font-size: var(--c-fs-3xl);
-  font-weight: 700;            /* 850 was tuned for SF Pro Display; Inter reads right at 700 */
+  font-weight: 700;
   line-height: var(--c-lh-tight);
   letter-spacing: -0.03em;
   margin: 0;