diff --git a/bun.lock b/bun.lock index d7f64b1..7406989 100644 --- a/bun.lock +++ b/bun.lock @@ -5,7 +5,7 @@ "": { "name": "thuki", "dependencies": { - "@fontsource/source-serif-4": "^5.2.9", + "@fontsource/nunito": "^5.2.7", "@tauri-apps/api": "^2.11.0", "framer-motion": "^12.38.0", "katex": "^0.16.0", @@ -134,7 +134,7 @@ "@exodus/bytes": ["@exodus/bytes@1.15.0", "", { "peerDependencies": { "@noble/hashes": "^1.8.0 || ^2.0.0" }, "optionalPeers": ["@noble/hashes"] }, "sha512-UY0nlA+feH81UGSHv92sLEPLCeZFjXOuHhrIo0HQydScuQc8s0A7kL/UdgwgDq8g8ilksmuoF35YVTNphV2aBQ=="], - "@fontsource/source-serif-4": ["@fontsource/source-serif-4@5.2.9", "", {}, "sha512-er/Pym9emsEVJNf947umJ4kXarXfsiN6CN7kTYinefKRaHLwiquiiHOZvKvxWgkV8JMCf3pV3g0NcsPFpVCH9w=="], + "@fontsource/nunito": ["@fontsource/nunito@5.2.7", "", {}, "sha512-pmtBq0H9ex9nk+RtJYEJOD9pag393iHETnl/PVKleF4i06cd0ttngK5ZCTgYb5eOqR3Xdlrjtev8m7bmgYprew=="], "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="], diff --git a/docs/design-system.md b/docs/design-system.md index 2cb5563..eb19e5b 100644 --- a/docs/design-system.md +++ b/docs/design-system.md @@ -78,15 +78,16 @@ Use these exact values. No substitution. ## 3. Typography -**Primary font:** Inter (Google Fonts). Fall back to system-ui, -apple-system. - -| Use | Weight | Approx size | -| ------------------- | ------- | ----------- | -| Input text | 400 | 15px | -| Chat response body | 400 | 14px | -| UI labels, buttons | 500 | 13px | -| Section headers | 600-700 | 24-36px | -| Hero / display text | 700-800 | 48-72px | +**Sole typeface:** Nunito (loaded via `@fontsource/nunito`). Used for all UI chrome and AI prose. The `--font-sans` CSS variable in `@theme` is the single source of truth; every surface inherits from it. Weights 400, 500, 600, and 700 are loaded. Fall back to `-apple-system, BlinkMacSystemFont, sans-serif`. + +There is no secondary reading face. Nunito handles both the compact bar UI and the expanded chat bubbles. + +| Use | Weight | Approx size | +| ------------------- | ------ | ----------- | +| Input / chat body | 400 | 14-16px | +| UI labels, buttons | 500 | 13px | +| Section headers | 600 | 24-36px | +| Hero / display text | 700 | 48-72px | --- diff --git a/package.json b/package.json index a3b8a44..1901e56 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "validate-build": "bun run lint && bun run format:check && bun run typecheck && bun run build:all" }, "dependencies": { - "@fontsource/source-serif-4": "^5.2.9", + "@fontsource/nunito": "^5.2.7", "@tauri-apps/api": "^2.11.0", "framer-motion": "^12.38.0", "katex": "^0.16.0", diff --git a/src/App.css b/src/App.css index e2dbf5d..b00d3de 100644 --- a/src/App.css +++ b/src/App.css @@ -3,13 +3,15 @@ @import 'streamdown/styles.css'; @import 'katex/dist/katex.min.css'; -/* Source Serif 4 reading face for AI prose. Chrome stays Inter. */ -@import '@fontsource/source-serif-4/400.css'; -@import '@fontsource/source-serif-4/400-italic.css'; +/* Nunito: single typeface for both UI chrome and AI prose. */ +@import '@fontsource/nunito/400.css'; +@import '@fontsource/nunito/500.css'; +@import '@fontsource/nunito/600.css'; +@import '@fontsource/nunito/700.css'; @theme { --font-sans: - 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, + 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; /* Brand palette - single source of truth for all color decisions */ @@ -190,16 +192,14 @@ body { display: none; } -/* AI prose reading face: serif body, warm cream, looser leading. Scoped to - * .markdown-body so UI chrome (labels, buttons, search trace) stays Inter. - * User bubble renders via renderUserContent, not MarkdownRenderer. - */ +/* AI prose: warm cream, looser leading. Scoped to .markdown-body so UI chrome stays separate. */ .markdown-body { - font-family: 'Source Serif 4', Charter, 'Iowan Old Style', Georgia, serif; - color: #efe3cc; - font-size: 15.5px; - line-height: 1.65; + font-family: var(--font-sans); + color: #fbe8c6; + font-size: 16.5px; + line-height: 1.6; letter-spacing: 0.3px; + font-weight: 600; } /* ─── Markdown Body: Prose Defaults ─── diff --git a/src/components/ChatBubble.tsx b/src/components/ChatBubble.tsx index dace946..f66fc82 100644 --- a/src/components/ChatBubble.tsx +++ b/src/components/ChatBubble.tsx @@ -430,7 +430,7 @@ export function ChatBubble({ )} {content && ( - + {renderUserContent(content)} )} diff --git a/src/view/onboarding/IntroStep.tsx b/src/view/onboarding/IntroStep.tsx index 47673e2..de80628 100644 --- a/src/view/onboarding/IntroStep.tsx +++ b/src/view/onboarding/IntroStep.tsx @@ -20,7 +20,7 @@ export function IntroStep({ onComplete }: Props) { alignItems: 'center', justifyContent: 'center', background: 'transparent', - fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif', + fontFamily: 'inherit', }} > ( color: 'rgba(255,255,255,0.75)', verticalAlign: 'middle', margin: '0 1px', - fontFamily: 'system-ui, -apple-system, sans-serif', + fontFamily: 'inherit', }} > {label} @@ -316,7 +316,7 @@ export function PermissionsStep() { alignItems: 'center', justifyContent: 'center', background: 'transparent', - fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif', + fontFamily: 'inherit', }} >