diff --git a/packages/app/src/components/settings-general.tsx b/packages/app/src/components/settings-general.tsx
index 9b94d2850d0b..0c737e08b8ad 100644
--- a/packages/app/src/components/settings-general.tsx
+++ b/packages/app/src/components/settings-general.tsx
@@ -1,6 +1,7 @@
 import { Component, Show, createMemo, createResource, onMount, type JSX } from "solid-js"
 import { Button } from "@opencode-ai/ui/button"
 import { Icon } from "@opencode-ai/ui/icon"
+import { NumberStepper } from "@opencode-ai/ui/number-stepper"
 import { Select } from "@opencode-ai/ui/select"
 import { Switch } from "@opencode-ai/ui/switch"
 import { TextField } from "@opencode-ai/ui/text-field"
@@ -562,6 +563,38 @@ export const SettingsGeneral: Component = () => {
             />
           </div>
         </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.fontSize.title")}
+          description={language.t("settings.general.row.fontSize.description")}
+        >
+          <div data-action="settings-font-size">
+            <NumberStepper
+              value={settings.appearance.fontSize()}
+              onChange={settings.appearance.setFontSize}
+              min={10}
+              max={24}
+              step={1}
+              format={(value) => value.toFixed(0)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.lineHeight.title")}
+          description={language.t("settings.general.row.lineHeight.description")}
+        >
+          <div data-action="settings-line-height">
+            <NumberStepper
+              value={settings.appearance.lineHeight()}
+              onChange={settings.appearance.setLineHeight}
+              min={1.2}
+              max={4}
+              step={0.1}
+              format={(value) => value.toFixed(1)}
+            />
+          </div>
+        </SettingsRow>
       </SettingsList>
     </div>
   )
diff --git a/packages/app/src/context/settings.tsx b/packages/app/src/context/settings.tsx
index 73f84d08e0bb..2d98dddbd23a 100644
--- a/packages/app/src/context/settings.tsx
+++ b/packages/app/src/context/settings.tsx
@@ -37,6 +37,7 @@ export interface Settings {
   }
   appearance: {
     fontSize: number
+    lineHeight: number
     mono: string
     sans: string
     terminal: string
@@ -121,6 +122,7 @@ const defaultSettings: Settings = {
   },
   appearance: {
     fontSize: 14,
+    lineHeight: 1.6,
     mono: "",
     sans: "",
     terminal: "",
@@ -157,8 +159,22 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
     createEffect(() => {
       if (typeof document === "undefined") return
       const root = document.documentElement
+      const fontSize = store.appearance?.fontSize ?? defaultSettings.appearance.fontSize
+      const lineHeight = store.appearance?.lineHeight ?? defaultSettings.appearance.lineHeight
       root.style.setProperty("--font-family-mono", monoFontFamily(store.appearance?.mono))
       root.style.setProperty("--font-family-sans", sansFontFamily(store.appearance?.sans))
+      root.style.setProperty("--font-size-base", `${fontSize}px`)
+      root.style.setProperty("--font-size-x-small", `calc(${fontSize}px * 0.85)`)
+      root.style.setProperty("--font-size-small", `calc(${fontSize}px * 0.9)`)
+      root.style.setProperty("--font-size-large", `calc(${fontSize}px * 1.2)`)
+      root.style.setProperty("--font-size-x-large", `calc(${fontSize}px * 1.4)`)
+      root.style.setProperty("--font-size-mono", `${fontSize}px`)
+      root.style.setProperty("--line-height-normal", `${lineHeight * 0.8125}`)
+      root.style.setProperty("--line-height-large", `${lineHeight * 0.9375}`)
+      root.style.setProperty("--line-height-x-large", `${lineHeight * 1.125}`)
+      root.style.setProperty("--line-height-2x-large", `${lineHeight * 1.25}`)
+      root.style.setProperty("--line-height-mono", `${lineHeight}`)
+      root.style.setProperty("--line-height-mono-px", `${fontSize * lineHeight}px`)
     })
 
     createEffect(() => {
@@ -249,6 +265,10 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
         setFontSize(value: number) {
           setStore("appearance", "fontSize", value)
         },
+        lineHeight: withFallback(() => store.appearance?.lineHeight, defaultSettings.appearance.lineHeight),
+        setLineHeight(value: number) {
+          setStore("appearance", "lineHeight", value)
+        },
         font: withFallback(() => store.appearance?.mono, defaultSettings.appearance.mono),
         setFont(value: string) {
           setStore("appearance", "mono", value.trim() ? value : "")
diff --git a/packages/app/src/i18n/ar.ts b/packages/app/src/i18n/ar.ts
index 5d124024a3b2..646444bd62af 100644
--- a/packages/app/src/i18n/ar.ts
+++ b/packages/app/src/i18n/ar.ts
@@ -573,6 +573,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "خط الواجهة",
   "settings.general.row.uiFont.description": "خصّص الخط المستخدم في الواجهة بأكملها",
+  "settings.general.row.fontSize.title": "حجم الخط",
+  "settings.general.row.fontSize.description": "خصّص حجم الخط الأساسي المستخدم في التطبيق بأكمله",
+  "settings.general.row.lineHeight.title": "ارتفاع السطر",
+  "settings.general.row.lineHeight.description": "خصّص ارتفاع السطر لنص وبرمجيات أكثر قابلية للقراءة",
   "settings.general.row.followup.title": "سلوك المتابعة",
   "settings.general.row.followup.description": "اختر ما إذا كانت طلبات المتابعة توجه فورًا أو تنتظر في قائمة انتظار",
   "settings.general.row.followup.option.queue": "قائمة انتظار",
diff --git a/packages/app/src/i18n/br.ts b/packages/app/src/i18n/br.ts
index 7c6965e330c3..f5304cb71dd1 100644
--- a/packages/app/src/i18n/br.ts
+++ b/packages/app/src/i18n/br.ts
@@ -580,6 +580,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "Fonte da interface",
   "settings.general.row.uiFont.description": "Personalize a fonte usada em toda a interface",
+  "settings.general.row.fontSize.title": "Tamanho da fonte",
+  "settings.general.row.fontSize.description": "Personalize o tamanho de fonte base usado em todo o app",
+  "settings.general.row.lineHeight.title": "Altura da linha",
+  "settings.general.row.lineHeight.description": "Personalize a altura da linha para texto e código legíveis",
   "settings.general.row.followup.title": "Comportamento de acompanhamento",
   "settings.general.row.followup.description":
     "Escolha se os prompts de acompanhamento orientam imediatamente ou esperam na fila",
diff --git a/packages/app/src/i18n/bs.ts b/packages/app/src/i18n/bs.ts
index 201b6ed81c12..6593fda87016 100644
--- a/packages/app/src/i18n/bs.ts
+++ b/packages/app/src/i18n/bs.ts
@@ -645,6 +645,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "UI font",
   "settings.general.row.uiFont.description": "Prilagodi font koji se koristi u cijelom interfejsu",
+  "settings.general.row.fontSize.title": "Veličina fonta",
+  "settings.general.row.fontSize.description": "Prilagodi osnovnu veličinu fonta koja se koristi u cijeloj aplikaciji",
+  "settings.general.row.lineHeight.title": "Visina reda",
+  "settings.general.row.lineHeight.description": "Prilagodi visinu reda za čitljiv tekst i kod",
   "settings.general.row.followup.title": "Ponašanje nadovezivanja",
   "settings.general.row.followup.description": "Odaberi da li upiti nadovezivanja usmjeravaju odmah ili čekaju u redu",
   "settings.general.row.followup.option.queue": "Red čekanja",
diff --git a/packages/app/src/i18n/da.ts b/packages/app/src/i18n/da.ts
index d52aca823eea..2efc6d64a6c9 100644
--- a/packages/app/src/i18n/da.ts
+++ b/packages/app/src/i18n/da.ts
@@ -640,6 +640,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "UI-skrifttype",
   "settings.general.row.uiFont.description": "Tilpas skrifttypen, der bruges i hele brugerfladen",
+  "settings.general.row.fontSize.title": "Skriftstørrelse",
+  "settings.general.row.fontSize.description": "Tilpas den grundlæggende skriftstørrelse i hele appen",
+  "settings.general.row.lineHeight.title": "Linjehøjde",
+  "settings.general.row.lineHeight.description": "Tilpas linjehøjden for læsbar tekst og kode",
   "settings.general.row.followup.title": "Opfølgningsadfærd",
   "settings.general.row.followup.description": "Vælg om opfølgende forespørgsler skal styre straks eller vente i kø",
   "settings.general.row.followup.option.queue": "Kø",
diff --git a/packages/app/src/i18n/de.ts b/packages/app/src/i18n/de.ts
index 4d5a64990287..185ceea49193 100644
--- a/packages/app/src/i18n/de.ts
+++ b/packages/app/src/i18n/de.ts
@@ -590,6 +590,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "UI-Schriftart",
   "settings.general.row.uiFont.description": "Die im gesamten Interface verwendete Schriftart anpassen",
+  "settings.general.row.fontSize.title": "Schriftgröße",
+  "settings.general.row.fontSize.description": "Die im gesamten App verwendete Basisschriftgröße anpassen",
+  "settings.general.row.lineHeight.title": "Zeilenhöhe",
+  "settings.general.row.lineHeight.description": "Die Zeilenhöhe für gut lesbaren Text und Code anpassen",
   "settings.general.row.followup.title": "Verhalten bei Folgefragen",
   "settings.general.row.followup.description":
     "Wählen Sie, ob Folgefragen sofort steuern oder in einer Warteschlange warten",
diff --git a/packages/app/src/i18n/en.ts b/packages/app/src/i18n/en.ts
index eef4d80bfc53..b2085c2a88b9 100644
--- a/packages/app/src/i18n/en.ts
+++ b/packages/app/src/i18n/en.ts
@@ -820,6 +820,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "UI Font",
   "settings.general.row.uiFont.description": "Customise the font used throughout the interface",
+  "settings.general.row.fontSize.title": "Font Size",
+  "settings.general.row.fontSize.description": "Customise the base font size used throughout the app",
+  "settings.general.row.lineHeight.title": "Line Height",
+  "settings.general.row.lineHeight.description": "Customise line height for readable text and code",
   "settings.general.row.followup.title": "Follow-up behavior",
   "settings.general.row.followup.description": "Choose whether follow-up prompts steer immediately or wait in a queue",
   "settings.general.row.followup.option.queue": "Queue",
diff --git a/packages/app/src/i18n/es.ts b/packages/app/src/i18n/es.ts
index b71fe03e8787..c3dc8b7ed464 100644
--- a/packages/app/src/i18n/es.ts
+++ b/packages/app/src/i18n/es.ts
@@ -648,6 +648,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "Fuente de la interfaz",
   "settings.general.row.uiFont.description": "Personaliza la fuente usada en toda la interfaz",
+  "settings.general.row.fontSize.title": "Tamaño de fuente",
+  "settings.general.row.fontSize.description": "Personaliza el tamaño de fuente base usado en toda la app",
+  "settings.general.row.lineHeight.title": "Altura de línea",
+  "settings.general.row.lineHeight.description": "Personaliza la altura de línea para texto y código legibles",
   "settings.general.row.followup.title": "Comportamiento de seguimiento",
   "settings.general.row.followup.description":
     "Elige si los prompts de seguimiento se dirigen inmediatamente o esperan en una cola",
diff --git a/packages/app/src/i18n/fr.ts b/packages/app/src/i18n/fr.ts
index 385dbdddefcb..061f6e7ff167 100644
--- a/packages/app/src/i18n/fr.ts
+++ b/packages/app/src/i18n/fr.ts
@@ -587,6 +587,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "Police de l'interface",
   "settings.general.row.uiFont.description": "Personnaliser la police utilisée dans toute l'interface",
+  "settings.general.row.fontSize.title": "Taille de police",
+  "settings.general.row.fontSize.description": "Personnaliser la taille de police de base utilisée dans toute l'app",
+  "settings.general.row.lineHeight.title": "Hauteur de ligne",
+  "settings.general.row.lineHeight.description": "Personnaliser la hauteur de ligne pour un texte et du code lisibles",
   "settings.general.row.followup.title": "Comportement de suivi",
   "settings.general.row.followup.description":
     "Choisissez si les messages de suivi dirigent immédiatement ou attendent dans une file d'attente",
diff --git a/packages/app/src/i18n/ja.ts b/packages/app/src/i18n/ja.ts
index 34ac398bd5e8..127a0baac8bf 100644
--- a/packages/app/src/i18n/ja.ts
+++ b/packages/app/src/i18n/ja.ts
@@ -577,6 +577,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "UIフォント",
   "settings.general.row.uiFont.description": "インターフェース全体で使用するフォントをカスタマイズします",
+  "settings.general.row.fontSize.title": "フォントサイズ",
+  "settings.general.row.fontSize.description": "アプリ全体で使用する基本フォントサイズをカスタマイズします",
+  "settings.general.row.lineHeight.title": "行の高さ",
+  "settings.general.row.lineHeight.description": "読みやすいテキストとコードの行の高さをカスタマイズします",
   "settings.general.row.followup.title": "フォローアップの動作",
   "settings.general.row.followup.description":
     "フォローアッププロンプトを即座に実行するか、キューで待機させるかを選択します",
diff --git a/packages/app/src/i18n/ko.ts b/packages/app/src/i18n/ko.ts
index f1926f3dd28d..6dcd9ad24b15 100644
--- a/packages/app/src/i18n/ko.ts
+++ b/packages/app/src/i18n/ko.ts
@@ -574,6 +574,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "UI 글꼴",
   "settings.general.row.uiFont.description": "인터페이스 전반에 사용되는 글꼴을 사용자 지정",
+  "settings.general.row.fontSize.title": "글꼴 크기",
+  "settings.general.row.fontSize.description": "앱 전체에서 사용하는 기본 글꼴 크기를 사용자 지정",
+  "settings.general.row.lineHeight.title": "줄 높이",
+  "settings.general.row.lineHeight.description": "읽기 쉬운 텍스트와 코드의 줄 높이를 사용자 지정",
   "settings.general.row.followup.title": "후속 조치 동작",
   "settings.general.row.followup.description": "후속 프롬프트를 즉시 실행할지 대기열에 넣을지 선택하세요",
   "settings.general.row.followup.option.queue": "대기열",
diff --git a/packages/app/src/i18n/no.ts b/packages/app/src/i18n/no.ts
index b4adebdb7ce7..23fd677cf032 100644
--- a/packages/app/src/i18n/no.ts
+++ b/packages/app/src/i18n/no.ts
@@ -648,6 +648,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "UI-skrift",
   "settings.general.row.uiFont.description": "Tilpass skrifttypen som brukes i hele grensesnittet",
+  "settings.general.row.fontSize.title": "Skriftstørrelse",
+  "settings.general.row.fontSize.description": "Tilpass den grunnleggende skriftstørrelsen som brukes i hele appen",
+  "settings.general.row.lineHeight.title": "Linjehøyde",
+  "settings.general.row.lineHeight.description": "Tilpass linjehøyden for lesbar tekst og kode",
   "settings.general.row.followup.title": "Oppfølgingsadferd",
   "settings.general.row.followup.description": "Velg om oppfølgingsspørsmål skal kjøres umiddelbart eller vente i kø",
   "settings.general.row.followup.option.queue": "Kø",
diff --git a/packages/app/src/i18n/pl.ts b/packages/app/src/i18n/pl.ts
index 02637e574f11..3f0d19c078ed 100644
--- a/packages/app/src/i18n/pl.ts
+++ b/packages/app/src/i18n/pl.ts
@@ -579,6 +579,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "Czcionka interfejsu",
   "settings.general.row.uiFont.description": "Dostosuj czcionkę używaną w całym interfejsie",
+  "settings.general.row.fontSize.title": "Rozmiar czcionki",
+  "settings.general.row.fontSize.description": "Dostosuj bazowy rozmiar czcionki używany w całej aplikacji",
+  "settings.general.row.lineHeight.title": "Wysokość wiersza",
+  "settings.general.row.lineHeight.description": "Dostosuj wysokość wiersza dla czytelnego tekstu i kodu",
   "settings.general.row.followup.title": "Zachowanie kontynuacji",
   "settings.general.row.followup.description": "Wybierz, czy kontynuacja ma być natychmiastowa, czy czekać w kolejce",
   "settings.general.row.followup.option.queue": "Kolejka",
diff --git a/packages/app/src/i18n/ru.ts b/packages/app/src/i18n/ru.ts
index a965acf278de..e021fb24b0f4 100644
--- a/packages/app/src/i18n/ru.ts
+++ b/packages/app/src/i18n/ru.ts
@@ -645,6 +645,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "Шрифт интерфейса",
   "settings.general.row.uiFont.description": "Настройте шрифт, используемый во всем интерфейсе",
+  "settings.general.row.fontSize.title": "Размер шрифта",
+  "settings.general.row.fontSize.description": "Настройте базовый размер шрифта во всем приложении",
+  "settings.general.row.lineHeight.title": "Высота строки",
+  "settings.general.row.lineHeight.description": "Настройте высоту строки для читаемого текста и кода",
   "settings.general.row.followup.title": "Поведение уточняющих вопросов",
   "settings.general.row.followup.description":
     "Выберите, отправлять ли уточняющие вопросы сразу или помещать их в очередь",
diff --git a/packages/app/src/i18n/th.ts b/packages/app/src/i18n/th.ts
index 00df86a34d09..9a8536584bb4 100644
--- a/packages/app/src/i18n/th.ts
+++ b/packages/app/src/i18n/th.ts
@@ -639,6 +639,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "ฟอนต์ UI",
   "settings.general.row.uiFont.description": "ปรับแต่งฟอนต์ที่ใช้ทั่วทั้งอินเทอร์เฟซ",
+  "settings.general.row.fontSize.title": "ขนาดฟอนต์",
+  "settings.general.row.fontSize.description": "ปรับแต่งขนาดฟอนต์พื้นฐานที่ใช้ทั่วทั้งแอป",
+  "settings.general.row.lineHeight.title": "ความสูงบรรทัด",
+  "settings.general.row.lineHeight.description": "ปรับแต่งความสูงบรรทัดเพื่อให้อ่านข้อความและโค้ดได้ง่าย",
   "settings.general.row.followup.title": "พฤติกรรมการติดตามผล",
   "settings.general.row.followup.description": "เลือกว่าจะให้พร้อมท์ติดตามผลทำงานทันทีหรือรอในคิว",
   "settings.general.row.followup.option.queue": "คิว",
diff --git a/packages/app/src/i18n/tr.ts b/packages/app/src/i18n/tr.ts
index 27a6e03e367c..8e9f1acd0117 100644
--- a/packages/app/src/i18n/tr.ts
+++ b/packages/app/src/i18n/tr.ts
@@ -652,6 +652,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "Arayüz Yazı Tipi",
   "settings.general.row.uiFont.description": "Arayüz genelinde kullanılan yazı tipini özelleştirin",
+  "settings.general.row.fontSize.title": "Yazı tipi boyutu",
+  "settings.general.row.fontSize.description": "Uygulama genelinde kullanılan temel yazı tipi boyutunu özelleştirin",
+  "settings.general.row.lineHeight.title": "Satır yüksekliği",
+  "settings.general.row.lineHeight.description": "Okunabilir metin ve kod için satır yüksekliğini özelleştirin",
   "settings.general.row.followup.title": "Takip davranışı",
   "settings.general.row.followup.description":
     "Takip komutlarının hemen yönlendirilmesini mi yoksa sırada beklemesini mi istediğinizi seçin",
diff --git a/packages/app/src/i18n/zh.ts b/packages/app/src/i18n/zh.ts
index 663f2ccf768f..d4e6255e5d89 100644
--- a/packages/app/src/i18n/zh.ts
+++ b/packages/app/src/i18n/zh.ts
@@ -649,6 +649,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "界面字体",
   "settings.general.row.uiFont.description": "自定义整个界面使用的字体",
+  "settings.general.row.fontSize.title": "字体大小",
+  "settings.general.row.fontSize.description": "自定义整个应用使用的基础字体大小",
+  "settings.general.row.lineHeight.title": "行高",
+  "settings.general.row.lineHeight.description": "自定义文本和代码的行高以提高可读性",
   "settings.general.row.followup.title": "跟进消息行为",
   "settings.general.row.followup.description": "选择跟进提示是立即引导还是在队列中等待",
   "settings.general.row.followup.option.queue": "排队",
diff --git a/packages/app/src/i18n/zht.ts b/packages/app/src/i18n/zht.ts
index edd6f7bc0647..b74032181c45 100644
--- a/packages/app/src/i18n/zht.ts
+++ b/packages/app/src/i18n/zht.ts
@@ -634,6 +634,10 @@ export const dict = {
   "settings.general.row.terminalFont.description": "Customise the font used in the terminal",
   "settings.general.row.uiFont.title": "介面字型",
   "settings.general.row.uiFont.description": "自訂整個介面使用的字型",
+  "settings.general.row.fontSize.title": "字型大小",
+  "settings.general.row.fontSize.description": "自訂整個應用程式使用的基礎字型大小",
+  "settings.general.row.lineHeight.title": "行高",
+  "settings.general.row.lineHeight.description": "自訂文字和程式碼的行高以提高可讀性",
   "settings.general.row.followup.title": "後續追問行為",
   "settings.general.row.followup.description": "選擇後續追問提示是立即引導還是進入佇列等待",
   "settings.general.row.followup.option.queue": "佇列",
diff --git a/packages/console/app/src/routes/workspace/[id]/billing/payment-section.module.css b/packages/console/app/src/routes/workspace/[id]/billing/payment-section.module.css
index 6452484ed38a..3c95a953c100 100644
--- a/packages/console/app/src/routes/workspace/[id]/billing/payment-section.module.css
+++ b/packages/console/app/src/routes/workspace/[id]/billing/payment-section.module.css
@@ -70,7 +70,7 @@
       th,
       td {
         padding: var(--space-2) var(--space-3);
-        font-size: var(--font-size-xs);
+        font-size: var(--font-size-x-small);
       }
 
       th {
diff --git a/packages/console/app/src/routes/workspace/[id]/keys/key-section.module.css b/packages/console/app/src/routes/workspace/[id]/keys/key-section.module.css
index 5705549e3273..d80bd984ce28 100644
--- a/packages/console/app/src/routes/workspace/[id]/keys/key-section.module.css
+++ b/packages/console/app/src/routes/workspace/[id]/keys/key-section.module.css
@@ -174,7 +174,7 @@
       th,
       td {
         padding: var(--space-2) var(--space-3);
-        font-size: var(--font-size-xs);
+        font-size: var(--font-size-x-small);
       }
 
       th {
diff --git a/packages/console/app/src/routes/workspace/[id]/members/member-section.module.css b/packages/console/app/src/routes/workspace/[id]/members/member-section.module.css
index a3ff0c2d55e2..37e2a0b110eb 100644
--- a/packages/console/app/src/routes/workspace/[id]/members/member-section.module.css
+++ b/packages/console/app/src/routes/workspace/[id]/members/member-section.module.css
@@ -226,7 +226,7 @@
       th,
       td {
         padding: var(--space-2) var(--space-3);
-        font-size: var(--font-size-xs);
+        font-size: var(--font-size-x-small);
       }
 
       th {
diff --git a/packages/console/app/src/routes/workspace/[id]/members/role-dropdown.css b/packages/console/app/src/routes/workspace/[id]/members/role-dropdown.css
index 7a64fd9c7459..fc715f5fe81f 100644
--- a/packages/console/app/src/routes/workspace/[id]/members/role-dropdown.css
+++ b/packages/console/app/src/routes/workspace/[id]/members/role-dropdown.css
@@ -63,7 +63,7 @@
       }
 
       p {
-        font-size: var(--font-size-xs);
+        font-size: var(--font-size-x-small);
         color: var(--color-text-muted);
         margin: 0;
       }
diff --git a/packages/console/app/src/routes/workspace/[id]/model-section.module.css b/packages/console/app/src/routes/workspace/[id]/model-section.module.css
index fa768488818b..9a87e250be6f 100644
--- a/packages/console/app/src/routes/workspace/[id]/model-section.module.css
+++ b/packages/console/app/src/routes/workspace/[id]/model-section.module.css
@@ -151,7 +151,7 @@
     th,
     td {
       padding: var(--space-2) var(--space-3);
-      font-size: var(--font-size-xs);
+      font-size: var(--font-size-x-small);
     }
 
     th {
diff --git a/packages/console/app/src/routes/workspace/[id]/new-user-section.module.css b/packages/console/app/src/routes/workspace/[id]/new-user-section.module.css
index bb58df79b1b3..5ae18ffe560d 100644
--- a/packages/console/app/src/routes/workspace/[id]/new-user-section.module.css
+++ b/packages/console/app/src/routes/workspace/[id]/new-user-section.module.css
@@ -85,7 +85,7 @@
           line-height: 1.4;
 
           @media (max-width: 40rem) {
-            font-size: var(--font-size-xs);
+            font-size: var(--font-size-x-small);
             padding: var(--space-2-5);
           }
         }
@@ -103,7 +103,7 @@
           @media (max-width: 40rem) {
             justify-content: center;
             padding: var(--space-2-5) var(--space-3);
-            font-size: var(--font-size-xs);
+            font-size: var(--font-size-x-small);
             min-width: 96px;
           }
         }
diff --git a/packages/console/app/src/routes/workspace/[id]/provider-section.module.css b/packages/console/app/src/routes/workspace/[id]/provider-section.module.css
index 1dc7085b7148..96b3215c57ca 100644
--- a/packages/console/app/src/routes/workspace/[id]/provider-section.module.css
+++ b/packages/console/app/src/routes/workspace/[id]/provider-section.module.css
@@ -131,7 +131,7 @@
       th,
       td {
         padding: var(--space-2) var(--space-3);
-        font-size: var(--font-size-xs);
+        font-size: var(--font-size-x-small);
       }
     }
   }
diff --git a/packages/console/app/src/routes/workspace/[id]/usage/usage-section.module.css b/packages/console/app/src/routes/workspace/[id]/usage/usage-section.module.css
index 866ed9ab5c1e..f00b1b57074c 100644
--- a/packages/console/app/src/routes/workspace/[id]/usage/usage-section.module.css
+++ b/packages/console/app/src/routes/workspace/[id]/usage/usage-section.module.css
@@ -98,7 +98,7 @@
         z-index: 10;
         min-width: 180px;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        font-size: var(--font-size-xs);
+        font-size: var(--font-size-x-small);
 
         @media (prefers-color-scheme: dark) {
           box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
@@ -154,7 +154,7 @@
       th,
       td {
         padding: var(--space-2) var(--space-3);
-        font-size: var(--font-size-xs);
+        font-size: var(--font-size-x-small);
       }
 
       /* Hide Model column on mobile */
@@ -176,12 +176,12 @@
 
   [data-slot="breakdown-label"] {
     color: var(--color-text-muted);
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-x-small);
   }
 
   [data-slot="breakdown-value"] {
     color: var(--color-text);
     font-weight: 500;
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-x-small);
   }
 }
diff --git a/packages/console/app/src/style/token/font.css b/packages/console/app/src/style/token/font.css
index 844677b5fa85..334bfd6c2bd8 100644
--- a/packages/console/app/src/style/token/font.css
+++ b/packages/console/app/src/style/token/font.css
@@ -1,6 +1,6 @@
 body {
   --font-size-2xs: 0.6875rem;
-  --font-size-xs: 0.75rem;
+  --font-size-x-small: 0.75rem;
   --font-size-sm: 0.8125rem;
   --font-size-md: 0.9375rem;
   --font-size-lg: 1.125rem;
diff --git a/packages/ui/src/components/basic-tool.css b/packages/ui/src/components/basic-tool.css
index c2e50c4b97df..bfb015eb29e1 100644
--- a/packages/ui/src/components/basic-tool.css
+++ b/packages/ui/src/components/basic-tool.css
@@ -59,7 +59,7 @@
     flex: 0 1 auto;
     min-width: 0;
     max-width: 100%;
-    font-size: 14px;
+    font-size: var(--font-size-base);
   }
 
   [data-slot="basic-tool-tool-info-structured"] {
@@ -84,7 +84,7 @@
   [data-slot="basic-tool-tool-title"] {
     flex-shrink: 0;
     font-family: var(--font-family-sans);
-    font-size: 14px;
+    font-size: var(--font-size-base);
     font-style: normal;
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-large);
@@ -109,7 +109,7 @@
     white-space: nowrap;
     font-family: var(--font-family-sans);
     font-variant-numeric: tabular-nums;
-    font-size: 14px;
+    font-size: var(--font-size-base);
     font-style: normal;
     font-weight: var(--font-weight-regular);
     line-height: var(--line-height-large);
@@ -155,7 +155,7 @@
     white-space: nowrap;
     font-family: var(--font-family-sans);
     font-variant-numeric: tabular-nums;
-    font-size: 14px;
+    font-size: var(--font-size-base);
     font-style: normal;
     font-weight: var(--font-weight-regular);
     line-height: var(--line-height-large);
@@ -224,7 +224,7 @@
   [data-component="task-tool-title"] {
     flex-shrink: 0;
     font-family: var(--font-family-sans);
-    font-size: 14px;
+    font-size: var(--font-size-base);
     font-style: normal;
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-large);
diff --git a/packages/ui/src/components/button.css b/packages/ui/src/components/button.css
index 923b2bab374b..5171236b136f 100644
--- a/packages/ui/src/components/button.css
+++ b/packages/ui/src/components/button.css
@@ -157,7 +157,7 @@
 
     /* text-14-medium */
     font-family: var(--font-family-sans);
-    font-size: 14px;
+    font-size: var(--font-size-base);
     font-style: normal;
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-large); /* 142.857% */
diff --git a/packages/ui/src/components/checkbox.css b/packages/ui/src/components/checkbox.css
index 304179965916..a79ff8a3d99f 100644
--- a/packages/ui/src/components/checkbox.css
+++ b/packages/ui/src/components/checkbox.css
@@ -68,7 +68,7 @@
   [data-slot="checkbox-checkbox-description"] {
     color: var(--text-base);
     font-family: var(--font-family-sans);
-    font-size: 12px;
+    font-size: var(--font-size-x-small);
     font-weight: var(--font-weight-regular);
     line-height: var(--line-height-normal);
     letter-spacing: var(--letter-spacing-normal);
@@ -77,7 +77,7 @@
   [data-slot="checkbox-checkbox-error"] {
     color: var(--text-error);
     font-family: var(--font-family-sans);
-    font-size: 12px;
+    font-size: var(--font-size-x-small);
     font-weight: var(--font-weight-regular);
     line-height: var(--line-height-normal);
     letter-spacing: var(--letter-spacing-normal);
diff --git a/packages/ui/src/components/dialog.css b/packages/ui/src/components/dialog.css
index 1e74763ae2d8..f298c25496a6 100644
--- a/packages/ui/src/components/dialog.css
+++ b/packages/ui/src/components/dialog.css
@@ -89,7 +89,7 @@
 
         /* text-14-regular */
         font-family: var(--font-family-sans);
-        font-size: 14px;
+        font-size: var(--font-size-base);
         font-style: normal;
         font-weight: var(--font-weight-regular);
         line-height: var(--line-height-large); /* 142.857% */
diff --git a/packages/ui/src/components/diff-changes.css b/packages/ui/src/components/diff-changes.css
index 1d1ed8c9d46c..9d36788ed55a 100644
--- a/packages/ui/src/components/diff-changes.css
+++ b/packages/ui/src/components/diff-changes.css
@@ -7,7 +7,7 @@
   [data-slot="diff-changes-additions"] {
     font-family: var(--font-family-mono);
     font-feature-settings: var(--font-family-mono--font-feature-settings);
-    font-size: 14px;
+    font-size: var(--font-size-base);
     font-style: normal;
     font-weight: var(--font-weight-regular);
     line-height: var(--line-height-large);
@@ -19,7 +19,7 @@
   [data-slot="diff-changes-deletions"] {
     font-family: var(--font-family-mono);
     font-feature-settings: var(--font-family-mono--font-feature-settings);
-    font-size: 14px;
+    font-size: var(--font-size-base);
     font-style: normal;
     font-weight: var(--font-weight-regular);
     line-height: var(--line-height-large);
diff --git a/packages/ui/src/components/keybind.css b/packages/ui/src/components/keybind.css
index 420619ae4af7..d414359eaaa2 100644
--- a/packages/ui/src/components/keybind.css
+++ b/packages/ui/src/components/keybind.css
@@ -11,7 +11,7 @@
 
   /* text-12-regular */
   font-family: var(--font-family-sans);
-  font-size: 12px;
+  font-size: var(--font-size-x-small);
   font-weight: var(--font-weight-regular);
   line-height: 1;
   color: var(--text-weak);
diff --git a/packages/ui/src/components/list.css b/packages/ui/src/components/list.css
index a10df733030a..7bb7c18e1789 100644
--- a/packages/ui/src/components/list.css
+++ b/packages/ui/src/components/list.css
@@ -161,7 +161,7 @@
 
         /* text-14-regular */
         font-family: var(--font-family-sans);
-        font-size: 14px;
+        font-size: var(--font-size-base);
         font-style: normal;
         font-weight: var(--font-weight-regular);
         line-height: var(--line-height-large); /* 142.857% */
@@ -199,7 +199,7 @@
 
         /* text-14-medium */
         font-family: var(--font-family-sans);
-        font-size: 14px;
+        font-size: var(--font-size-base);
         font-style: normal;
         font-weight: var(--font-weight-medium);
         line-height: var(--line-height-large); /* 142.857% */
@@ -240,7 +240,7 @@
 
           /* text-14-medium */
           font-family: var(--font-family-sans);
-          font-size: 14px;
+          font-size: var(--font-size-base);
           font-style: normal;
           font-weight: var(--font-weight-medium);
           line-height: var(--line-height-large); /* 142.857% */
@@ -315,7 +315,7 @@
 
           /* text-14-medium */
           font-family: var(--font-family-sans);
-          font-size: 14px;
+          font-size: var(--font-size-base);
           font-style: normal;
           font-weight: var(--font-weight-medium);
           line-height: var(--line-height-large); /* 142.857% */
diff --git a/packages/ui/src/components/markdown.css b/packages/ui/src/components/markdown.css
index 26c9efd475ef..777238327725 100644
--- a/packages/ui/src/components/markdown.css
+++ b/packages/ui/src/components/markdown.css
@@ -23,7 +23,7 @@
   h4,
   h5,
   h6 {
-    font-size: 14px;
+    font-size: var(--font-size-base);
     color: var(--text-strong);
     font-weight: var(--font-weight-medium);
     margin-top: 0px;
@@ -121,7 +121,8 @@
   }
 
   .shiki {
-    font-size: 13px;
+    font-size: var(--font-size-mono);
+    line-height: var(--line-height-mono);
     padding: 12px;
     border-radius: 6px;
     border: 0.5px solid var(--border-weak-base);
@@ -214,9 +215,10 @@
   :not(pre) > code {
     font-family: var(--font-family-mono);
     font-feature-settings: var(--font-family-mono--font-feature-settings);
+    font-size: var(--font-size-mono);
     color: var(--syntax-string);
     font-weight: var(--font-weight-medium);
-    /* font-size: 13px; */
+    /* font-size: var(--font-size-small); */
 
     /* padding: 2px 2px; */
     /* margin: 0 1.5px; */
diff --git a/packages/ui/src/components/message-nav.css b/packages/ui/src/components/message-nav.css
index a08ee69897bc..1f762879fbab 100644
--- a/packages/ui/src/components/message-nav.css
+++ b/packages/ui/src/components/message-nav.css
@@ -72,7 +72,7 @@
 }
 
 [data-slot="message-nav-title-preview"] {
-  font-size: 14px; /* text-14-regular */
+  font-size: var(--font-size-base); /* text-14-regular */
   color: var(--text-base);
   white-space: nowrap;
   overflow: hidden;
diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css
index 78d574d8a135..a143b9f99256 100644
--- a/packages/ui/src/components/message-part.css
+++ b/packages/ui/src/components/message-part.css
@@ -285,7 +285,7 @@
   [data-component="markdown"] {
     margin-top: 16px;
     font-style: normal;
-    font-size: 13px;
+    font-size: var(--font-size-small);
     color: var(--text-weak);
 
     strong,
@@ -407,7 +407,7 @@
   [data-slot="bash-pre"] code {
     font-family: var(--font-family-mono);
     font-feature-settings: var(--font-family-mono--font-feature-settings);
-    font-size: 13px;
+    font-size: var(--font-size-small);
     line-height: var(--line-height-large);
     white-space: pre-wrap;
     overflow-wrap: anywhere;
@@ -437,7 +437,7 @@
     gap: 8px;
     min-width: 0;
     font-family: var(--font-family-sans);
-    font-size: 14px;
+    font-size: var(--font-size-base);
     font-style: normal;
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-large);
@@ -758,7 +758,7 @@
 
   [data-slot="permission-header-title"] {
     font-family: var(--font-family-sans);
-    font-size: 14px;
+    font-size: var(--font-size-base);
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-large);
     color: var(--text-strong);
@@ -775,7 +775,7 @@
 
   [data-slot="permission-hint"] {
     font-family: var(--font-family-sans);
-    font-size: 14px;
+    font-size: var(--font-size-base);
     font-weight: var(--font-weight-regular);
     line-height: var(--line-height-large);
     color: var(--text-weak);
@@ -800,7 +800,7 @@
     }
 
     code {
-      font-size: 14px;
+      font-size: var(--font-size-base);
       line-height: var(--line-height-large);
     }
   }
@@ -853,7 +853,7 @@
 
   [data-slot="question-header-title"] {
     font-family: var(--font-family-sans);
-    font-size: 14px;
+    font-size: var(--font-size-base);
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-large);
     color: var(--text-strong);
@@ -913,7 +913,7 @@
 
   [data-slot="question-text"] {
     font-family: var(--font-family-sans);
-    font-size: 14px;
+    font-size: var(--font-size-base);
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-large);
     color: var(--text-strong);
@@ -922,7 +922,7 @@
 
   [data-slot="question-hint"] {
     font-family: var(--font-family-sans);
-    font-size: 13px;
+    font-size: var(--font-size-small);
     font-weight: var(--font-weight-regular);
     line-height: var(--line-height-large);
     color: var(--text-weak);
@@ -1047,7 +1047,7 @@
 
   [data-slot="option-label"] {
     font-family: var(--font-family-sans);
-    font-size: 14px;
+    font-size: var(--font-size-base);
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-large);
     color: var(--text-strong);
@@ -1055,7 +1055,7 @@
 
   [data-slot="option-description"] {
     font-family: var(--font-family-sans);
-    font-size: 14px;
+    font-size: var(--font-size-base);
     font-weight: var(--font-weight-regular);
     line-height: var(--line-height-large);
     color: var(--text-base);
@@ -1083,7 +1083,7 @@
     box-shadow: none;
     outline: none;
     font-family: var(--font-family-sans);
-    font-size: 14px;
+    font-size: var(--font-size-base);
     font-weight: var(--font-weight-regular);
     line-height: var(--line-height-large);
     color: var(--text-base);
@@ -1134,7 +1134,7 @@
     display: flex;
     flex-direction: column;
     gap: 2px;
-    font-size: 13px;
+    font-size: var(--font-size-small);
 
     [data-slot="question-text"] {
       color: var(--text-weak);
diff --git a/packages/ui/src/components/number-stepper.tsx b/packages/ui/src/components/number-stepper.tsx
new file mode 100644
index 000000000000..197cde84a200
--- /dev/null
+++ b/packages/ui/src/components/number-stepper.tsx
@@ -0,0 +1,54 @@
+import type { Component } from "solid-js"
+import { Icon } from "./icon"
+
+export interface NumberStepperProps {
+  value: number
+  onChange: (value: number) => void
+  min: number
+  max: number
+  step: number
+  format: (value: number) => string
+}
+
+const round = (value: number) => Math.round(value * 10) / 10
+
+const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value))
+
+export const NumberStepper: Component<NumberStepperProps> = (props) => {
+  const change = (value: number) => props.onChange(round(clamp(value, props.min, props.max)))
+
+  const handleBlur = (event: FocusEvent) => {
+    const target = event.currentTarget as HTMLInputElement
+    const parsed = Number.parseFloat(target.value)
+    if (Number.isFinite(parsed)) change(parsed)
+    target.value = props.format(props.value)
+  }
+
+  return (
+    <div class="flex h-8 items-center overflow-hidden rounded-md border border-border-weak-base">
+      <button
+        type="button"
+        class="flex size-8 items-center justify-center text-icon-weak transition-colors hover:bg-surface-raised-weak hover:text-icon-base disabled:cursor-not-allowed disabled:opacity-40"
+        onClick={() => change(props.value - props.step)}
+        disabled={props.value <= props.min}
+      >
+        <Icon name="dash" size="small" />
+      </button>
+      <input
+        type="text"
+        inputMode="decimal"
+        class="h-8 w-14 border-x border-border-weak-base bg-transparent text-center text-14-mono text-text-base outline-none"
+        value={props.format(props.value)}
+        onBlur={handleBlur}
+      />
+      <button
+        type="button"
+        class="flex size-8 items-center justify-center text-icon-weak transition-colors hover:bg-surface-raised-weak hover:text-icon-base disabled:cursor-not-allowed disabled:opacity-40"
+        onClick={() => change(props.value + props.step)}
+        disabled={props.value >= props.max}
+      >
+        <Icon name="plus-small" size="small" />
+      </button>
+    </div>
+  )
+}
diff --git a/packages/ui/src/components/radio-group.css b/packages/ui/src/components/radio-group.css
index e9cc71184633..9546fc1ff1fd 100644
--- a/packages/ui/src/components/radio-group.css
+++ b/packages/ui/src/components/radio-group.css
@@ -167,7 +167,7 @@
     --radio-group-padding: 2px;
 
     [data-slot="radio-group-item-label"] {
-      font-size: 12px;
+      font-size: var(--font-size-x-small);
     }
 
     [data-slot="radio-group-item-control"] {
diff --git a/packages/ui/src/components/switch.css b/packages/ui/src/components/switch.css
index 579930f554bc..8bdb13e908d8 100644
--- a/packages/ui/src/components/switch.css
+++ b/packages/ui/src/components/switch.css
@@ -66,7 +66,7 @@
   [data-slot="switch-description"] {
     color: var(--text-base);
     font-family: var(--font-family-sans);
-    font-size: 12px;
+    font-size: var(--font-size-x-small);
     font-weight: var(--font-weight-regular);
     line-height: var(--line-height-normal);
     letter-spacing: var(--letter-spacing-normal);
@@ -75,7 +75,7 @@
   [data-slot="switch-error"] {
     color: var(--text-error);
     font-family: var(--font-family-sans);
-    font-size: 12px;
+    font-size: var(--font-size-x-small);
     font-weight: var(--font-weight-regular);
     line-height: var(--line-height-normal);
     letter-spacing: var(--letter-spacing-normal);
diff --git a/packages/ui/src/components/tabs.css b/packages/ui/src/components/tabs.css
index 036533c10fb8..007c4c003cb7 100644
--- a/packages/ui/src/components/tabs.css
+++ b/packages/ui/src/components/tabs.css
@@ -51,7 +51,7 @@
 
     /* text-14-medium */
     font-family: var(--font-family-sans);
-    font-size: 14px;
+    font-size: var(--font-size-base);
     font-style: normal;
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-large); /* 142.857% */
diff --git a/packages/ui/src/components/tag.css b/packages/ui/src/components/tag.css
index 0e8b7b9f1047..12c8ad60be74 100644
--- a/packages/ui/src/components/tag.css
+++ b/packages/ui/src/components/tag.css
@@ -28,7 +28,7 @@
 
     /* text-14-medium */
     font-family: var(--font-family-sans);
-    font-size: 14px;
+    font-size: var(--font-size-base);
     font-style: normal;
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-large); /* 142.857% */
diff --git a/packages/ui/src/components/text-field.css b/packages/ui/src/components/text-field.css
index c94376be742c..adec2ebbfe7a 100644
--- a/packages/ui/src/components/text-field.css
+++ b/packages/ui/src/components/text-field.css
@@ -7,7 +7,7 @@
 
     /* text-14-regular */
     font-family: var(--font-family-sans);
-    font-size: 14px;
+    font-size: var(--font-size-base);
     font-style: normal;
     font-weight: var(--font-weight-regular);
     line-height: var(--line-height-large); /* 142.857% */
@@ -36,7 +36,7 @@
       font-size: var(--font-size-small);
       font-style: normal;
       font-weight: var(--font-weight-medium);
-      line-height: 18px; /* 150% */
+      line-height: var(--line-height-large); /* 150% */
       letter-spacing: var(--letter-spacing-normal);
     }
 
@@ -87,7 +87,7 @@
 
       /* text-14-regular */
       font-family: var(--font-family-sans);
-      font-size: 14px;
+      font-size: var(--font-size-base);
       font-style: normal;
       font-weight: var(--font-weight-regular);
       line-height: var(--line-height-large); /* 142.857% */
@@ -127,7 +127,7 @@
       font-size: var(--font-size-small);
       font-style: normal;
       font-weight: var(--font-weight-medium);
-      line-height: 18px; /* 150% */
+      line-height: var(--line-height-large); /* 150% */
       letter-spacing: var(--letter-spacing-normal);
     }
   }
diff --git a/packages/ui/src/components/toast.css b/packages/ui/src/components/toast.css
index 4e6504d061f0..2fa4c559e360 100644
--- a/packages/ui/src/components/toast.css
+++ b/packages/ui/src/components/toast.css
@@ -121,7 +121,7 @@
 
     /* text-14-medium */
     font-family: var(--font-family-sans);
-    font-size: 14px;
+    font-size: var(--font-size-base);
     font-style: normal;
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-large); /* 142.857% */
diff --git a/packages/ui/src/pierre/index.ts b/packages/ui/src/pierre/index.ts
index 22586f0f5838..326e58aca28e 100644
--- a/packages/ui/src/pierre/index.ts
+++ b/packages/ui/src/pierre/index.ts
@@ -181,8 +181,8 @@ export function createDefaultOptions<T>(style: FileDiffOptions<T>["diffStyle"])
 
 export const styleVariables = {
   "--diffs-font-family": "var(--font-family-mono)",
-  "--diffs-font-size": "var(--font-size-small)",
-  "--diffs-line-height": "24px",
+  "--diffs-font-size": "var(--font-size-mono)",
+  "--diffs-line-height": "var(--line-height-mono-px)",
   "--diffs-tab-size": 2,
   "--diffs-font-features": "var(--font-family-mono--font-feature-settings)",
   "--diffs-header-font-family": "var(--font-family-sans)",
diff --git a/packages/ui/src/styles/base.css b/packages/ui/src/styles/base.css
index a032f9ea2db4..3f57d5cff941 100644
--- a/packages/ui/src/styles/base.css
+++ b/packages/ui/src/styles/base.css
@@ -399,6 +399,6 @@ input:where([type="button"], [type="reset"], [type="submit"]),
   select,
   textarea,
   [contenteditable="true"] {
-    font-size: 16px !important;
+    font-size: max(16px, var(--font-size-base)) !important;
   }
 }
diff --git a/packages/ui/src/styles/tailwind/index.css b/packages/ui/src/styles/tailwind/index.css
index d8b0b2a1a0c4..3a7493cf9f74 100644
--- a/packages/ui/src/styles/tailwind/index.css
+++ b/packages/ui/src/styles/tailwind/index.css
@@ -40,6 +40,7 @@
   --font-mono: var(--font-family-mono);
   --font-mono--font-feature-settings: var(--font-family-mono--font-feature-settings);
 
+  --text-xs: var(--font-size-x-small);
   --text-sm: var(--font-size-small);
   --text-base: var(--font-size-base);
   --text-lg: var(--font-size-large);
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
index 751036598d4e..1fb86592c899 100644
--- a/packages/ui/src/styles/theme.css
+++ b/packages/ui/src/styles/theme.css
@@ -4,17 +4,20 @@
   --font-family-mono:
     ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --font-family-mono--font-feature-settings: normal;
-
-  --font-size-small: 13px;
   --font-size-base: 14px;
-  --font-size-large: 16px;
-  --font-size-x-large: 20px;
+  --font-size-x-small: calc(var(--font-size-base) * 0.85);
+  --font-size-small: calc(var(--font-size-base) * 0.9);
+  --font-size-large: calc(var(--font-size-base) * 1.2);
+  --font-size-x-large: calc(var(--font-size-base) * 1.4);
+  --font-size-mono: var(--font-size-base);
   --font-weight-regular: 400;
   --font-weight-medium: 500;
-  --line-height-normal: 130%;
-  --line-height-large: 150%;
-  --line-height-x-large: 180%;
-  --line-height-2x-large: 200%;
+  --line-height-mono: 1.6;
+  --line-height-mono-px: 22.4px;
+  --line-height-normal: calc(var(--line-height-mono) * 0.8125);
+  --line-height-large: calc(var(--line-height-mono) * 0.9375);
+  --line-height-x-large: calc(var(--line-height-mono) * 1.125);
+  --line-height-2x-large: calc(var(--line-height-mono) * 1.25);
   --letter-spacing-normal: 0;
   --letter-spacing-tight: -0.1599999964237213;
   --letter-spacing-tightest: -0.3199999928474426;
diff --git a/packages/ui/src/styles/utilities.css b/packages/ui/src/styles/utilities.css
index 3a05a9515fa0..cd557cfeb9ae 100644
--- a/packages/ui/src/styles/utilities.css
+++ b/packages/ui/src/styles/utilities.css
@@ -45,7 +45,7 @@
 
 .text-12-regular {
   font-family: var(--font-family-sans);
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-x-small);
   font-style: normal;
   font-weight: var(--font-weight-regular);
   line-height: var(--line-height-large); /* 166.667% */
@@ -54,7 +54,7 @@
 
 .text-12-medium {
   font-family: var(--font-family-sans);
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-x-small);
   font-style: normal;
   font-weight: var(--font-weight-medium);
   line-height: var(--line-height-large); /* 166.667% */
@@ -64,13 +64,31 @@
 .text-12-mono {
   font-family: var(--font-family-mono);
   font-feature-settings: var(--font-feature-settings-mono);
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-x-small);
   font-style: normal;
   font-weight: var(--font-weight-regular);
   line-height: var(--line-height-large); /* 166.667% */
   letter-spacing: var(--letter-spacing-normal);
 }
 
+.text-13-regular {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-small);
+  font-style: normal;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-large);
+  letter-spacing: var(--letter-spacing-normal);
+}
+
+.text-13-medium {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-small);
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-large);
+  letter-spacing: var(--letter-spacing-normal);
+}
+
 .text-14-regular {
   font-family: var(--font-family-sans);
   font-size: var(--font-size-base);