[eric] design: Inter (bundled variable font) is the app-wide UI face; the serif-leaning stack read bookish, Inter is the Linear/Figma/GitHub-proven professional standard

This commit is contained in:
ciregenz
2026-07-28 18:47:47 -07:00
parent f5908610d6
commit 5d0bbb553c
5 changed files with 14 additions and 6 deletions
+10
View File
@@ -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",
+1
View File
@@ -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",
@@ -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' },
},
}}
>
+1
View File
@@ -1,3 +1,4 @@
import '@fontsource-variable/inter';
import React from 'react';
import { createRoot } from 'react-dom/client';
import Main from './app/Main';
+2 -2
View File
@@ -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,
},