fix(ui): replace Inter and Source Serif 4 with Nunito as sole typeface (#167)

* feat(ui): replace Inter + Source Serif 4 with Nunito as sole typeface

Signed-off-by: Logan Nguyen <lg.131.dev@gmail.com>

* chore(ui): remove Inter and Source Serif 4 remnants

Signed-off-by: Logan Nguyen <lg.131.dev@gmail.com>

* docs(design-system): update typography to Nunito

Signed-off-by: Logan Nguyen <lg.131.dev@gmail.com>

---------

Signed-off-by: Logan Nguyen <lg.131.dev@gmail.com>

Author: quiet-node

bun.lock

@@ -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     |
 
 ---
 

docs/design-system.md

@@ -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",

package.json

@@ -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 ───

src/App.css

@@ -430,7 +430,7 @@ export function ChatBubble({
               </div>
             )}
             {content && (
-              <span className="text-white/95 font-medium whitespace-pre-wrap">
+              <span className="text-base text-white/95 font-medium whitespace-pre-wrap">
                 {renderUserContent(content)}
               </span>
             )}

src/components/ChatBubble.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',
       }}
     >
       <motion.div

src/view/onboarding/IntroStep.tsx

@@ -172,7 +172,7 @@ export function ModelCheckStep() {
         alignItems: 'center',
         justifyContent: 'center',
         background: 'transparent',
-        fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, sans-serif',
+        fontFamily: 'inherit',
       }}
     >
       <motion.div

src/view/onboarding/ModelCheckStep.tsx

@@ -28,7 +28,7 @@ const KeyChip = ({ label }: { label: string }) => (
       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',
       }}
     >
       <motion.div