Use Inter for app typography (#899)

desktop/package.json

@@ -27,6 +27,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
+    "@fontsource-variable/inter": "^5.2.8",
     "@mediapipe/tasks-vision": "^0.10.35",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-avatar": "^1.1.11",

desktop/src/features/messages/lib/useRichTextEditor.ts

@@ -357,7 +357,7 @@ export function useRichTextEditor({
         attributes: {
           autocapitalize: "none",
           autocorrect: "off",
-          class: `${MESSAGE_MARKDOWN_CLASS} min-h-0 resize-none overflow-y-hidden border-0 bg-transparent px-0 py-0 text-sm leading-relaxed text-foreground shadow-none focus-visible:ring-0 caret-foreground outline-hidden max-w-none`,
+          class: `${MESSAGE_MARKDOWN_CLASS} min-h-0 resize-none overflow-y-hidden border-0 bg-transparent px-0 py-0 text-sm leading-5 text-foreground shadow-none focus-visible:ring-0 caret-foreground outline-hidden max-w-none`,
           "data-testid": "message-input",
           spellcheck: "false",
         },

desktop/src/main.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { App } from "@/app/App";
+import "@fontsource-variable/inter/wght.css";
 import "@/shared/styles/globals.css";
 import { UpdaterProvider } from "@/features/settings/hooks/UpdaterProvider";
 import { migrateLegacyWorkspaceStorageBeforeRender } from "@/features/workspaces/legacyWorkspaceStorage";

desktop/src/shared/styles/globals.css

@@ -764,9 +764,9 @@
 /* ── Tiptap rich-text composer ──────────────────────────────────────── */
 .rich-text-composer .tiptap {
   outline: none;
-  min-height: calc(var(--text-sm) * var(--leading-relaxed));
+  min-height: 1lh;
   font-size: var(--text-sm);
-  line-height: var(--leading-relaxed);
+  line-height: var(--text-sm--line-height);
 }
 
 .rich-text-composer .tiptap p {
@@ -871,7 +871,6 @@
   --inline-code-font-size: var(--text-xs);
   --agent-icon-size: 0.95em;
   --agent-icon-gap: 0.125rem;
-  --agent-icon-top: 0.125rem;
 }
 
 .message-markdown .mention-chip,
@@ -954,12 +953,13 @@
 .message-markdown .agent-mention-highlight::before {
   content: "";
   position: absolute;
-  top: var(--agent-icon-top);
+  top: 50%;
   left: var(--inline-chip-padding-inline);
   width: var(--agent-icon-size);
   height: var(--agent-icon-size);
   background: currentColor;
   pointer-events: none;
+  transform: translateY(-50%);
   -webkit-mask:
     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8V4H8'/%3E%3Crect width='16' height='12' x='4' y='8' rx='2'/%3E%3Cpath d='M2 14h2'/%3E%3Cpath d='M20 14h2'/%3E%3Cpath d='M15 13v2'/%3E%3Cpath d='M9 13v2'/%3E%3C/svg%3E")
     center / contain no-repeat;
@@ -1140,7 +1140,7 @@
 
   body {
     @apply bg-background text-foreground antialiased;
-    font-family: "Geist", "Avenir Next", "Segoe UI", sans-serif;
+    font-family: "Inter Variable", Inter, "Avenir Next", "Segoe UI", sans-serif;
   }
 
   /*

desktop/src/shared/ui/markdown.tsx

@@ -954,7 +954,7 @@ function createMarkdownComponents(
   runtimeRef: React.RefObject<MarkdownRuntime>,
   interactive = true,
 ): Components {
-  const paragraphClassName = "leading-relaxed";
+  const paragraphClassName = "leading-[inherit]";
   const listItemClassName = "my-1 [&_p]:inline";
   const listClassName = "space-y-1 pl-6 marker:text-muted-foreground";
 
@@ -1432,7 +1432,7 @@ function MarkdownInner({
       className={cn(
         MESSAGE_MARKDOWN_CLASS,
         [
-          "max-w-none [overflow-wrap:anywhere] text-sm leading-relaxed text-foreground",
+          "max-w-none [overflow-wrap:anywhere] text-sm leading-5 text-foreground",
           "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
           "[&>*+*]:mt-3",
           "[&>p+p]:mt-1.5",

desktop/tailwind.config.js

@@ -16,6 +16,15 @@ export default {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
+      fontFamily: {
+        sans: [
+          '"Inter Variable"',
+          "Inter",
+          '"Avenir Next"',
+          '"Segoe UI"',
+          "sans-serif",
+        ],
+      },
       colors: {
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",

pnpm-lock.yaml

@@ -36,6 +36,9 @@ importers:
       '@emoji-mart/react':
         specifier: ^1.1.1
         version: 1.1.1(emoji-mart@5.6.0)(react@19.2.7)
+      '@fontsource-variable/inter':
+        specifier: ^5.2.8
+        version: 5.2.8
       '@mediapipe/tasks-vision':
         specifier: ^0.10.35
         version: 0.10.35
@@ -229,6 +232,9 @@ importers:
 
   web:
     dependencies:
+      '@fontsource-variable/inter':
+        specifier: ^5.2.8
+        version: 5.2.8
       '@isomorphic-git/lightning-fs':
         specifier: ^4.6.2
         version: 4.6.2
@@ -522,6 +528,9 @@ packages:
   '@floating-ui/utils@0.2.11':
     resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
 
+  '@fontsource-variable/inter@5.2.8':
+    resolution: {integrity: sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==}
+
   '@isomorphic-git/idb-keyval@3.3.2':
     resolution: {integrity: sha512-r8/AdpiS0/WJCNR/t/gsgL+M8NMVj/ek7s60uz3LmpCaTF2mEVlZJlB01ZzalgYzRLXwSPC92o+pdzjM7PN/pA==}
 
@@ -3274,6 +3283,8 @@ snapshots:
 
   '@floating-ui/utils@0.2.11': {}
 
+  '@fontsource-variable/inter@5.2.8': {}
+
   '@isomorphic-git/idb-keyval@3.3.2': {}
 
   '@isomorphic-git/lightning-fs@4.6.2':

web/package.json

@@ -16,6 +16,7 @@
     "test:e2e:smoke": "pnpm build && playwright test --project=smoke"
   },
   "dependencies": {
+    "@fontsource-variable/inter": "^5.2.8",
     "@isomorphic-git/lightning-fs": "^4.6.2",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tooltip": "^1.2.8",
@@ -37,12 +38,12 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.58.2",
+    "@tailwindcss/postcss": "^4.3.0",
     "@tanstack/router-plugin": "^1.167.12",
     "@tanstack/virtual-file-routes": "^1.161.7",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@vitejs/plugin-react": "^6.0.0",
-    "@tailwindcss/postcss": "^4.3.0",
     "postcss": "^8.5.8",
     "tailwindcss": "^4.3.0",
     "tw-animate-css": "^1.4.0",

web/src/main.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { App } from "@/app/App";
+import "@fontsource-variable/inter/wght.css";
 import "@/shared/styles/globals.css";
 import { ThemeProvider } from "@/shared/theme/ThemeProvider";
 import { Toaster } from "@/shared/ui/sonner";

web/src/shared/styles/globals.css

@@ -95,6 +95,6 @@
 
   body {
     @apply bg-background text-foreground antialiased;
-    font-family: "Geist", "Avenir Next", "Segoe UI", sans-serif;
+    font-family: "Inter Variable", Inter, "Avenir Next", "Segoe UI", sans-serif;
   }
 }

web/tailwind.config.js

@@ -7,6 +7,15 @@ export default {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
+      fontFamily: {
+        sans: [
+          '"Inter Variable"',
+          "Inter",
+          '"Avenir Next"',
+          '"Segoe UI"',
+          "sans-serif",
+        ],
+      },
       colors: {
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",