diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f5f40034..83b1a80e 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -17,6 +17,7 @@
         "@codemirror/view": "^6.39.16",
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
+        "@fontsource-variable/inter": "^5.3.0",
         "@mui/icons-material": "^7.3.9",
         "@mui/material": "^7.3.9",
         "@pierre/diffs": "^1.0.11",
@@ -2566,6 +2567,15 @@
       "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==",
       "license": "MIT"
     },
+    "node_modules/@fontsource-variable/inter": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.3.0.tgz",
+      "integrity": "sha512-OupL48va4JNofb97w6NYeF9S7W/kHNKM0Er8Dem5nqi4jeOLrVJDoE8tZEpnMJmtkvNbB1EIPPwHcdkF6b1oUA==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index e115efb0..4e7c16ba 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,6 +18,7 @@
     "@codemirror/view": "^6.39.16",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
+    "@fontsource-variable/inter": "^5.3.0",
     "@mui/icons-material": "^7.3.9",
     "@mui/material": "^7.3.9",
     "@pierre/diffs": "^1.0.11",
diff --git a/frontend/src/app/pages/Settings/Settings.tsx b/frontend/src/app/pages/Settings/Settings.tsx
index 7f0243fd..cd6f3951 100644
--- a/frontend/src/app/pages/Settings/Settings.tsx
+++ b/frontend/src/app/pages/Settings/Settings.tsx
@@ -259,10 +259,6 @@ const Settings: React.FC = () => {
           boxShadow: c.shadow.md,
           transition: 'none',
           overflow: 'hidden',
-          // The serif brand face reads bookish inside dense settings panes; system sans here is
-          // what makes Claude/Linear-grade settings feel engineered. Mono labels keep their own
-          // stack (their per-component sx classes land later in the sheet and win).
-          '& .MuiTypography-root, & .MuiButton-root, & .MuiToggleButton-root, & .MuiChip-label, & .MuiInputBase-root': { fontFamily: 'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif' },
         },
       }}
     >
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 865b4540..67731757 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -1,3 +1,4 @@
+import '@fontsource-variable/inter';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import Main from './app/Main';
diff --git a/frontend/src/shared/styles/claudeTokens.ts b/frontend/src/shared/styles/claudeTokens.ts
index 3e1c7bba..8a42ede7 100644
--- a/frontend/src/shared/styles/claudeTokens.ts
+++ b/frontend/src/shared/styles/claudeTokens.ts
@@ -83,7 +83,7 @@ export const lightTokens: ClaudeTokens = {
   },
   user: { bubble: '#DDD9CE' },
   font: {
-    sans: '"Anthropic Sans", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+    sans: '"Inter Variable", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif',
     mono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
     size: fontSize,
   },
@@ -135,7 +135,7 @@ export const darkTokens: ClaudeTokens = {
   },
   user: { bubble: '#393937' },
   font: {
-    sans: '"Anthropic Sans", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+    sans: '"Inter Variable", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif',
     mono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
     size: fontSize,
   },