From 5a5f1a4f342b058cf5d161513148be33a4d2f7aa Mon Sep 17 00:00:00 2001
From: Lee Jackson <130007945+Imagineer99@users.noreply.github.com>
Date: Thu, 2 Apr 2026 13:04:23 +0100
Subject: [PATCH] studio: fix chat font changes leaking outside chat page
 (#4775)

* fix(frontend): scope sans font overrides to chat thread only

* fix(frontend): use font-sans fallback for heading stack and simplify chat font rules

---------

Co-authored-by: Daniel Han <danielhanchen@gmail.com>
---
 studio/frontend/src/index.css | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/studio/frontend/src/index.css b/studio/frontend/src/index.css
index 45696b2274..a30b4ca287 100644
--- a/studio/frontend/src/index.css
+++ b/studio/frontend/src/index.css
@@ -6,6 +6,7 @@
 @import "shadcn/tailwind.css";
 @import "streamdown/styles.css";
 @import "@fontsource-variable/figtree";
+@import "@fontsource-variable/space-grotesk";
 @import "@fontsource-variable/inter";
 @import "tw-shimmer";
 @plugin "@toolwind/corner-shape";
@@ -13,6 +14,15 @@
 
 @custom-variant dark (&:is(.dark *));
 
+@font-face {
+  font-family: "Hellix";
+  src: url("/fonts/Hellix-SemiBold.woff2") format("woff2"),
+    url("/fonts/Hellix-SemiBold.woff") format("woff");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
 :root {
   /* Animation timing */
   --duration-micro: 100ms;
@@ -57,7 +67,7 @@
   --sidebar-ring: oklch(0.6929 0.1396 166.5513);
   --destructive-foreground: oklch(1 0 0);
   --font-sans: "Inter Variable", ui-sans-serif, sans-serif, system-ui;
-  --font-heading: var(--font-sans);
+  --font-heading: "Hellix", "Space Grotesk Variable", var(--font-sans);
   --font-serif: Source Serif 4, serif;
   --font-mono: JetBrains Mono, monospace;
   --shadow-color: hsl(0 0% 0%);
@@ -149,7 +159,7 @@
 
 @theme inline {
   --font-sans: "Inter Variable", ui-sans-serif, sans-serif, system-ui;
-  --font-heading: var(--font-sans);
+  --font-heading: "Hellix", "Space Grotesk Variable", var(--font-sans);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -364,17 +374,7 @@
 
   /* Chat: use the app sans stack for UI + prose. */
   .aui-thread-root {
-    font-family: var(--font-sans);
-  }
-
-  .aui-thread-root .font-medium,
-  .aui-thread-root .font-semibold,
-  .aui-thread-root .font-bold,
-  .aui-thread-root .font-heading {
-    font-family: var(--font-sans);
-  }
-
-  .aui-thread-root :where(h1, h2, h3, h4, h5, h6) {
+    --font-heading: var(--font-sans);
     font-family: var(--font-sans);
   }