From 81139b1938eb18740029a1d59a4866ac86703bf4 Mon Sep 17 00:00:00 2001 From: Lily Shen <115414357+lilyshen0722@users.noreply.github.com> Date: Fri, 30 Oct 2026 23:48:24 -0700 Subject: [PATCH 1/4] docs(design-system): name the shipped faces in the README (TASK-652) The README's stack line and Caveats disagreed with each other and with the app. The app ships IBM Plex Sans (body and controls), Bricolage Grotesque (display) and IBM Plex Mono (meta): frontend/package.json, frontend/src/App.tsx and frontend/src/v2/V2App.tsx. Inter is not a dependency. Docs only. Co-Authored-By: Claude Haiku 5.5 Co-authored-by: wisp Agent-Model: claude/claude-haiku-5-5/default --- frontend/design-system/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/design-system/README.md b/frontend/design-system/README.md index 691c006954..ac4d9f118a 100644 --- a/frontend/design-system/README.md +++ b/frontend/design-system/README.md @@ -96,7 +96,7 @@ 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; display uses Bricolage Grotesque, not a second weight of the body face. 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`. - **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. @@ -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. From dda4d71bce8aa73f8eb5851231de46007eabb7f3 Mon Sep 17 00:00:00 2001 From: Lily Shen <115414357+lilyshen0722@users.noreply.github.com> Date: Sat, 31 Oct 2026 00:05:46 -0700 Subject: [PATCH 2/4] docs(design-system): name Bricolage Grotesque in the weights bullet (TASK-652) The weights bullet still said feature titles use 700 in Inter. Display is Bricolage Grotesque on main. Docs only. Co-Authored-By: Claude Haiku 5.5 Co-authored-by: wisp Agent-Model: claude/claude-haiku-5-5/default --- frontend/design-system/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/design-system/README.md b/frontend/design-system/README.md index ac4d9f118a..0fbbfa89ef 100644 --- a/frontend/design-system/README.md +++ b/frontend/design-system/README.md @@ -98,7 +98,7 @@ Reply/Open/Mark handled controls are bordered secondary controls. - **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; display uses Bricolage Grotesque, not a second weight of the body face. 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 `700` in Bricolage Grotesque (`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 From cc7d5cfa22febc7ecc9746d1e1ba665471f39520 Mon Sep 17 00:00:00 2001 From: Lily Shen <115414357+lilyshen0722@users.noreply.github.com> Date: Sat, 31 Oct 2026 00:18:44 -0700 Subject: [PATCH 3/4] docs(design-system): match README and tokens.css comments to the shipped faces (TASK-652) - README: feature titles are 850 in IBM Plex Sans (.v2-feature__title inherits it), not 700 in Bricolage. Bricolage is used only where a surface sets --v2-font-display (14 selectors in v2.css). - tokens.css: the typography comment named Inter as the sans face. It is IBM Plex Sans, and display is Bricolage. The h1 comment no longer cites Inter. Comments and docs only. No CSS value changed. Co-Authored-By: Claude Haiku 5.5 Co-authored-by: wisp Agent-Model: claude/claude-haiku-5-5/default --- frontend/design-system/README.md | 4 ++-- frontend/design-system/tokens.css | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/design-system/README.md b/frontend/design-system/README.md index 0fbbfa89ef..202bae4ef7 100644 --- a/frontend/design-system/README.md +++ b/frontend/design-system/README.md @@ -96,9 +96,9 @@ Reply/Open/Mark handled controls are bordered secondary controls. ### Type -- **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; display uses Bricolage Grotesque, not a second weight of the body face. Mono is `"IBM Plex Mono"` first (`@fontsource/ibm-plex-mono`). +- **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 Bricolage Grotesque (`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; `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 diff --git a/frontend/design-system/tokens.css b/frontend/design-system/tokens.css index 93751e5d80..ff52fc18ac 100644 --- a/frontend/design-system/tokens.css +++ b/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; /* 850 was tuned for SF Pro Display */ line-height: var(--c-lh-tight); letter-spacing: -0.03em; margin: 0; From 36c9900102e2fd876e7480f2f7dabc024725b165 Mon Sep 17 00:00:00 2001 From: Lily Shen <115414357+lilyshen0722@users.noreply.github.com> Date: Sat, 31 Oct 2026 00:27:08 -0700 Subject: [PATCH 4/4] docs(design-system): say the 850 feature title is synthesized bold (TASK-652) - tokens.css: the 850 note moves off the h1, which declares 700. - README: only the 400, 500 and 600 IBM Plex Sans faces ship (V2App.tsx), so the 850 feature title renders as browser-synthesized bold. Loading a heavier face is a separate code change. Comments and docs only. Co-Authored-By: Claude Haiku 5.5 Co-authored-by: wisp Agent-Model: claude/claude-haiku-5-5/default --- frontend/design-system/README.md | 2 +- frontend/design-system/tokens.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/design-system/README.md b/frontend/design-system/README.md index 202bae4ef7..1bc8ac49e4 100644 --- a/frontend/design-system/README.md +++ b/frontend/design-system/README.md @@ -98,7 +98,7 @@ Reply/Open/Mark handled controls are bordered secondary controls. - **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 `850` (`.v2-feature__title`, inheriting IBM Plex Sans; `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 diff --git a/frontend/design-system/tokens.css b/frontend/design-system/tokens.css index ff52fc18ac..81453b0a83 100644 --- a/frontend/design-system/tokens.css +++ b/frontend/design-system/tokens.css @@ -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 */ + font-weight: 700; line-height: var(--c-lh-tight); letter-spacing: -0.03em; margin: 0;