From 9caff5ade21414aaf416962a599df9bfb6622c0d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 30 Jan 2026 09:46:38 +0000
Subject: [PATCH 1/2] feat(webapp): add light mode support to dashboard

Add theme switching capability with light, dark, and system modes:
- Enable Tailwind CSS dark mode with class strategy
- Add CSS variables for theme-aware semantic colors
- Create ThemeProvider context for managing theme state
- Add ThemeToggle component in side menu and account settings
- Persist theme preference to user dashboard preferences
- Include ThemeScript to prevent flash of wrong theme on load

Slack thread: https://triggerdotdev.slack.com/archives/C04CR1HUWBV/p1769765128711039

https://claude.ai/code/session_01VDVgh75Xa4LA9YH9aFLnjB
---
 .../app/components/navigation/SideMenu.tsx    |   6 +-
 .../components/primitives/ThemeProvider.tsx   | 122 ++++++++++++++++++
 .../app/components/primitives/ThemeToggle.tsx | 100 ++++++++++++++
 apps/webapp/app/root.tsx                      |  43 +++---
 .../app/routes/account._index/route.tsx       |   9 ++
 .../routes/resources.preferences.theme.tsx    |  27 ++++
 .../services/dashboardPreferences.server.ts   |  35 +++++
 apps/webapp/app/tailwind.css                  |  64 ++++++---
 apps/webapp/tailwind.config.js                |  30 +++--
 9 files changed, 394 insertions(+), 42 deletions(-)
 create mode 100644 apps/webapp/app/components/primitives/ThemeProvider.tsx
 create mode 100644 apps/webapp/app/components/primitives/ThemeToggle.tsx
 create mode 100644 apps/webapp/app/routes/resources.preferences.theme.tsx

diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index 1e7d48cd57..2147b73dfd 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -98,6 +98,7 @@ import { TextLink } from "../primitives/TextLink";
 import { SimpleTooltip, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../primitives/Tooltip";
 import { ShortcutsAutoOpen } from "../Shortcuts";
 import { UserProfilePhoto } from "../UserProfilePhoto";
+import { ThemeToggle } from "../primitives/ThemeToggle";
 import { EnvironmentSelector } from "./EnvironmentSelector";
 import { HelpAndFeedback } from "./HelpAndFeedbackPopover";
 import { SideMenuHeader } from "./SideMenuHeader";
@@ -892,7 +893,10 @@ function HelpAndAI({ isCollapsed }: { isCollapsed: boolean }) {
     <LayoutGroup>
       <div className={cn("flex w-full", isCollapsed ? "flex-col-reverse gap-1" : "items-center justify-between")}>
         <ShortcutsAutoOpen />
-        <HelpAndFeedback isCollapsed={isCollapsed} />
+        <div className={cn("flex", isCollapsed ? "flex-col gap-1" : "items-center gap-0.5")}>
+          <ThemeToggle isCollapsed={isCollapsed} />
+          <HelpAndFeedback isCollapsed={isCollapsed} />
+        </div>
         <AskAI isCollapsed={isCollapsed} />
       </div>
     </LayoutGroup>
diff --git a/apps/webapp/app/components/primitives/ThemeProvider.tsx b/apps/webapp/app/components/primitives/ThemeProvider.tsx
new file mode 100644
index 0000000000..d8a714d062
--- /dev/null
+++ b/apps/webapp/app/components/primitives/ThemeProvider.tsx
@@ -0,0 +1,122 @@
+import { useFetcher } from "@remix-run/react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
+import type { ThemePreference } from "~/services/dashboardPreferences.server";
+
+type Theme = "light" | "dark";
+
+interface ThemeContextValue {
+  theme: Theme;
+  themePreference: ThemePreference;
+  setThemePreference: (preference: ThemePreference) => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+function getSystemTheme(): Theme {
+  if (typeof window === "undefined") {
+    return "dark";
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+function resolveTheme(preference: ThemePreference): Theme {
+  if (preference === "system") {
+    return getSystemTheme();
+  }
+  return preference;
+}
+
+interface ThemeProviderProps {
+  children: ReactNode;
+  initialPreference?: ThemePreference;
+  isLoggedIn?: boolean;
+}
+
+export function ThemeProvider({
+  children,
+  initialPreference = "dark",
+  isLoggedIn = false,
+}: ThemeProviderProps) {
+  const [themePreference, setThemePreferenceState] = useState<ThemePreference>(initialPreference);
+  const [theme, setTheme] = useState<Theme>(() => resolveTheme(initialPreference));
+  const fetcher = useFetcher();
+
+  // Update the HTML class when theme changes
+  useEffect(() => {
+    const root = document.documentElement;
+    root.classList.remove("light", "dark");
+    root.classList.add(theme);
+  }, [theme]);
+
+  // Listen for system theme changes when preference is "system"
+  useEffect(() => {
+    if (themePreference !== "system") {
+      return;
+    }
+
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (e: MediaQueryListEvent) => {
+      setTheme(e.matches ? "dark" : "light");
+    };
+
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [themePreference]);
+
+  const setThemePreference = useCallback(
+    (preference: ThemePreference) => {
+      setThemePreferenceState(preference);
+      setTheme(resolveTheme(preference));
+
+      // Persist to server if logged in
+      if (isLoggedIn) {
+        fetcher.submit(
+          { theme: preference },
+          { method: "POST", action: "/resources/preferences/theme" }
+        );
+      }
+
+      // Also store in localStorage for non-logged-in users and faster hydration
+      localStorage.setItem("theme-preference", preference);
+    },
+    [isLoggedIn, fetcher]
+  );
+
+  return (
+    <ThemeContext.Provider value={{ theme, themePreference, setThemePreference }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+
+// Script to prevent flash of wrong theme on initial load
+// This should be injected into the <head> before any content renders
+export function ThemeScript({ initialPreference }: { initialPreference?: ThemePreference }) {
+  const script = `
+    (function() {
+      var preference = ${JSON.stringify(initialPreference ?? null)} || localStorage.getItem('theme-preference') || 'dark';
+      var theme = preference;
+      if (preference === 'system') {
+        theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+      }
+      document.documentElement.classList.add(theme);
+    })();
+  `;
+
+  return <script dangerouslySetInnerHTML={{ __html: script }} />;
+}
diff --git a/apps/webapp/app/components/primitives/ThemeToggle.tsx b/apps/webapp/app/components/primitives/ThemeToggle.tsx
new file mode 100644
index 0000000000..34a5e92a68
--- /dev/null
+++ b/apps/webapp/app/components/primitives/ThemeToggle.tsx
@@ -0,0 +1,100 @@
+import { ComputerDesktopIcon, MoonIcon, SunIcon } from "@heroicons/react/20/solid";
+import { useTheme } from "./ThemeProvider";
+import { Popover, PopoverContent, PopoverMenuItem, PopoverTrigger } from "./Popover";
+import { Button } from "./Buttons";
+import { SimpleTooltip } from "./Tooltip";
+import { cn } from "~/utils/cn";
+import { useState } from "react";
+import type { ThemePreference } from "~/services/dashboardPreferences.server";
+
+const themeOptions: { value: ThemePreference; label: string; icon: typeof SunIcon }[] = [
+  { value: "light", label: "Light", icon: SunIcon },
+  { value: "dark", label: "Dark", icon: MoonIcon },
+  { value: "system", label: "System", icon: ComputerDesktopIcon },
+];
+
+interface ThemeToggleProps {
+  className?: string;
+  isCollapsed?: boolean;
+}
+
+export function ThemeToggle({ className, isCollapsed = false }: ThemeToggleProps) {
+  const { themePreference, setThemePreference } = useTheme();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const currentOption = themeOptions.find((opt) => opt.value === themePreference) ?? themeOptions[1];
+  const CurrentIcon = currentOption.icon;
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <SimpleTooltip
+        button={
+          <PopoverTrigger asChild>
+            <Button
+              variant="minimal/small"
+              className={cn("aspect-square h-7 p-1", className)}
+              LeadingIcon={CurrentIcon}
+            />
+          </PopoverTrigger>
+        }
+        content={`Theme: ${currentOption.label}`}
+        side={isCollapsed ? "right" : "top"}
+        hidden={isOpen}
+        disableHoverableContent
+      />
+      <PopoverContent
+        className="min-w-[10rem] p-1"
+        side={isCollapsed ? "right" : "top"}
+        align="start"
+        sideOffset={8}
+      >
+        {themeOptions.map((option) => (
+          <PopoverMenuItem
+            key={option.value}
+            icon={option.icon}
+            title={option.label}
+            isSelected={themePreference === option.value}
+            onClick={() => {
+              setThemePreference(option.value);
+              setIsOpen(false);
+            }}
+          />
+        ))}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+interface ThemeToggleButtonsProps {
+  className?: string;
+}
+
+export function ThemeToggleButtons({ className }: ThemeToggleButtonsProps) {
+  const { themePreference, setThemePreference } = useTheme();
+
+  return (
+    <div className={cn("flex items-center gap-1 rounded-md bg-tertiary p-0.5", className)}>
+      {themeOptions.map((option) => {
+        const Icon = option.icon;
+        const isSelected = themePreference === option.value;
+        return (
+          <button
+            key={option.value}
+            type="button"
+            onClick={() => setThemePreference(option.value)}
+            className={cn(
+              "flex items-center gap-1.5 rounded px-2 py-1 text-xs transition-colors",
+              isSelected
+                ? "bg-background-bright text-text-bright shadow-sm"
+                : "text-text-dimmed hover:text-text-bright"
+            )}
+            title={option.label}
+          >
+            <Icon className="size-4" />
+            <span className="hidden sm:inline">{option.label}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/apps/webapp/app/root.tsx b/apps/webapp/app/root.tsx
index fb5fef9c84..bf80b9c1f7 100644
--- a/apps/webapp/app/root.tsx
+++ b/apps/webapp/app/root.tsx
@@ -9,12 +9,14 @@ import tailwindStylesheetUrl from "~/tailwind.css";
 import { RouteErrorDisplay } from "./components/ErrorDisplay";
 import { AppContainer, MainCenteredContainer } from "./components/layout/AppLayout";
 import { ShortcutsProvider } from "./components/primitives/ShortcutsProvider";
+import { ThemeProvider, ThemeScript } from "./components/primitives/ThemeProvider";
 import { Toast } from "./components/primitives/Toast";
 import { env } from "./env.server";
 import { featuresForRequest } from "./features.server";
 import { usePostHog } from "./hooks/usePostHog";
 import { getUser } from "./services/session.server";
 import { appEnvTitleTag } from "./utils";
+import type { ThemePreference } from "./services/dashboardPreferences.server";
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: tailwindStylesheetUrl }];
@@ -55,9 +57,12 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
     websiteId: env.KAPA_AI_WEBSITE_ID,
   };
 
+  const user = await getUser(request);
+  const themePreference: ThemePreference = user?.dashboardPreferences?.theme ?? "dark";
+
   return typedjson(
     {
-      user: await getUser(request),
+      user,
       toastMessage,
       posthogProjectKey,
       features,
@@ -65,6 +70,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
       appOrigin: env.APP_ORIGIN,
       triggerCliTag: env.TRIGGER_CLI_TAG,
       kapa,
+      themePreference,
     },
     { headers: { "Set-Cookie": await commitSession(session) } }
   );
@@ -83,21 +89,23 @@ export const shouldRevalidate: ShouldRevalidateFunction = (options) => {
 export function ErrorBoundary() {
   return (
     <>
-      <html lang="en" className="h-full">
+      <html lang="en" className="h-full dark">
         <head>
           <meta charSet="utf-8" />
-
+          <ThemeScript />
           <Meta />
           <Links />
         </head>
         <body className="h-full overflow-hidden bg-background-dimmed">
-          <ShortcutsProvider>
-            <AppContainer>
-              <MainCenteredContainer>
-                <RouteErrorDisplay />
-              </MainCenteredContainer>
-            </AppContainer>
-          </ShortcutsProvider>
+          <ThemeProvider initialPreference="dark" isLoggedIn={false}>
+            <ShortcutsProvider>
+              <AppContainer>
+                <MainCenteredContainer>
+                  <RouteErrorDisplay />
+                </MainCenteredContainer>
+              </AppContainer>
+            </ShortcutsProvider>
+          </ThemeProvider>
           <Scripts />
         </body>
       </html>
@@ -106,21 +114,24 @@ export function ErrorBoundary() {
 }
 
 export default function App() {
-  const { posthogProjectKey, kapa } = useTypedLoaderData<typeof loader>();
+  const { posthogProjectKey, kapa, themePreference, user } = useTypedLoaderData<typeof loader>();
   usePostHog(posthogProjectKey);
 
   return (
     <>
-      <html lang="en" className="h-full">
+      <html lang="en" className="h-full dark">
         <head>
+          <ThemeScript initialPreference={themePreference} />
           <Meta />
           <Links />
         </head>
         <body className="h-full overflow-hidden bg-background-dimmed">
-          <ShortcutsProvider>
-            <Outlet />
-            <Toast />
-          </ShortcutsProvider>
+          <ThemeProvider initialPreference={themePreference} isLoggedIn={!!user}>
+            <ShortcutsProvider>
+              <Outlet />
+              <Toast />
+            </ShortcutsProvider>
+          </ThemeProvider>
           <ScrollRestoration />
           <ExternalScripts />
           <Scripts />
diff --git a/apps/webapp/app/routes/account._index/route.tsx b/apps/webapp/app/routes/account._index/route.tsx
index e32498a263..219e577900 100644
--- a/apps/webapp/app/routes/account._index/route.tsx
+++ b/apps/webapp/app/routes/account._index/route.tsx
@@ -22,6 +22,7 @@ import { Input } from "~/components/primitives/Input";
 import { InputGroup } from "~/components/primitives/InputGroup";
 import { Label } from "~/components/primitives/Label";
 import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
+import { ThemeToggleButtons } from "~/components/primitives/ThemeToggle";
 import { prisma } from "~/db.server";
 import { useUser } from "~/hooks/useUser";
 import { redirectWithSuccessMessage } from "~/models/message.server";
@@ -196,6 +197,14 @@ export default function Page() {
               />
             </Fieldset>
           </Form>
+          <div className="mt-6 w-full border-t border-grid-dimmed pt-6">
+            <Header2 className="mb-3">Appearance</Header2>
+            <InputGroup>
+              <Label>Theme</Label>
+              <ThemeToggleButtons />
+              <Hint>Choose your preferred color scheme</Hint>
+            </InputGroup>
+          </div>
         </MainHorizontallyCenteredContainer>
       </PageBody>
     </PageContainer>
diff --git a/apps/webapp/app/routes/resources.preferences.theme.tsx b/apps/webapp/app/routes/resources.preferences.theme.tsx
new file mode 100644
index 0000000000..f1f7c8f07f
--- /dev/null
+++ b/apps/webapp/app/routes/resources.preferences.theme.tsx
@@ -0,0 +1,27 @@
+import { json, type ActionFunctionArgs } from "@remix-run/node";
+import { z } from "zod";
+import { ThemePreference, updateThemePreference } from "~/services/dashboardPreferences.server";
+import { requireUser } from "~/services/session.server";
+
+const RequestSchema = z.object({
+  theme: ThemePreference,
+});
+
+export async function action({ request }: ActionFunctionArgs) {
+  const user = await requireUser(request);
+
+  const formData = await request.formData();
+  const rawData = Object.fromEntries(formData);
+
+  const result = RequestSchema.safeParse(rawData);
+  if (!result.success) {
+    return json({ success: false, error: "Invalid request data" }, { status: 400 });
+  }
+
+  await updateThemePreference({
+    user,
+    theme: result.data.theme,
+  });
+
+  return json({ success: true });
+}
diff --git a/apps/webapp/app/services/dashboardPreferences.server.ts b/apps/webapp/app/services/dashboardPreferences.server.ts
index 323b96fa88..d174bb30e3 100644
--- a/apps/webapp/app/services/dashboardPreferences.server.ts
+++ b/apps/webapp/app/services/dashboardPreferences.server.ts
@@ -10,6 +10,9 @@ const SideMenuPreferences = z.object({
 
 export type SideMenuPreferences = z.infer<typeof SideMenuPreferences>;
 
+export const ThemePreference = z.enum(["light", "dark", "system"]).default("dark");
+export type ThemePreference = z.infer<typeof ThemePreference>;
+
 const DashboardPreferences = z.object({
   version: z.literal("1"),
   currentProjectId: z.string().optional(),
@@ -20,6 +23,7 @@ const DashboardPreferences = z.object({
     })
   ),
   sideMenu: SideMenuPreferences.optional(),
+  theme: ThemePreference.optional(),
 });
 
 export type DashboardPreferences = z.infer<typeof DashboardPreferences>;
@@ -151,3 +155,34 @@ export async function updateSideMenuPreferences({
     },
   });
 }
+
+export async function updateThemePreference({
+  user,
+  theme,
+}: {
+  user: UserFromSession;
+  theme: ThemePreference;
+}) {
+  if (user.isImpersonating) {
+    return;
+  }
+
+  // Only update if something changed
+  if (user.dashboardPreferences.theme === theme) {
+    return;
+  }
+
+  const updatedPreferences: DashboardPreferences = {
+    ...user.dashboardPreferences,
+    theme,
+  };
+
+  return prisma.user.update({
+    where: {
+      id: user.id,
+    },
+    data: {
+      dashboardPreferences: updatedPreferences,
+    },
+  });
+}
diff --git a/apps/webapp/app/tailwind.css b/apps/webapp/app/tailwind.css
index 99e73c5985..655d67ddf0 100644
--- a/apps/webapp/app/tailwind.css
+++ b/apps/webapp/app/tailwind.css
@@ -33,17 +33,41 @@
   ::-moz-selection {
     @apply bg-text-bright/30 text-text-bright;
   }
-  
-  /* shadcn charts: https://ui.shadcn.com/docs/components/chart#add-a-grid */
+
+  /* Theme color variables */
+  /* Light mode (default) */
   :root {
+    /* Theme-aware semantic colors */
+    --color-secondary: #D7D9DD; /* charcoal[200] */
+    --color-tertiary: #E8E9EC; /* charcoal[100] */
+    --color-text-dimmed: #5F6570; /* charcoal[500] */
+    --color-text-bright: #272A2E; /* charcoal[700] */
+    --color-background-bright: #E8E9EC; /* charcoal[100] */
+    --color-background-dimmed: #F5F5F7; /* lighter than charcoal[100] */
+    --color-grid-bright: #B5B8C0; /* charcoal[300] */
+    --color-grid-dimmed: #D7D9DD; /* charcoal[200] */
+
+    /* shadcn charts */
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
   }
- 
+
+  /* Dark mode */
   .dark {
+    /* Theme-aware semantic colors */
+    --color-secondary: #2C3034; /* charcoal[650] */
+    --color-tertiary: #272A2E; /* charcoal[700] */
+    --color-text-dimmed: #878C99; /* charcoal[400] */
+    --color-text-bright: #D7D9DD; /* charcoal[200] */
+    --color-background-bright: #1A1B1F; /* charcoal[800] */
+    --color-background-dimmed: #15171A; /* charcoal[850] */
+    --color-grid-bright: #272A2E; /* charcoal[700] */
+    --color-grid-dimmed: #212327; /* charcoal[750] */
+
+    /* shadcn charts */
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
@@ -116,10 +140,10 @@
 /* Streamdown markdown styling */
 .streamdown-container {
   /* Streamdown uses shadcn/ui CSS variables - define them for our theme */
-  --muted: 220 13% 20%;
-  --muted-foreground: 215 14% 60%;
-  --foreground: 210 20% 90%;
-  --border: 217 19% 27%;
+  --muted: 220 13% 91%;
+  --muted-foreground: 215 14% 40%;
+  --foreground: 210 20% 15%;
+  --border: 217 19% 80%;
 
   & p {
     @apply my-1;
@@ -150,13 +174,13 @@
   }
   /* Inline code (not in pre blocks) */
   & code:not(pre code) {
-    @apply bg-charcoal-700 px-1 py-0.5 rounded text-text-bright font-mono;
+    @apply bg-secondary px-1 py-0.5 rounded text-text-bright font-mono;
   }
   & blockquote {
-    @apply border-l-2 border-charcoal-600 pl-3 my-2 italic;
+    @apply border-l-2 border-grid-bright pl-3 my-2 italic;
   }
   & a {
-    @apply text-blue-400 hover:underline;
+    @apply text-blue-500 dark:text-blue-400 hover:underline;
   }
   & strong {
     @apply font-semibold text-text-bright;
@@ -165,24 +189,24 @@
     @apply italic;
   }
   & hr {
-    @apply my-2 border-charcoal-600;
+    @apply my-2 border-grid-bright;
   }
   & table {
     @apply w-full my-2 border-collapse;
   }
   & th, & td {
-    @apply border border-charcoal-600 px-2 py-1 text-left;
+    @apply border border-grid-bright px-2 py-1 text-left;
   }
   & th {
-    @apply bg-charcoal-700 font-semibold;
+    @apply bg-secondary font-semibold;
   }
 
   /* Streamdown code block container */
   & [data-code-block-container] {
-    @apply my-2 border-charcoal-700;
+    @apply my-2 border-grid-bright;
   }
   & [data-code-block-header] {
-    @apply bg-charcoal-800 text-text-dimmed border-b border-charcoal-700;
+    @apply bg-background-bright text-text-dimmed border-b border-grid-bright;
   }
   /* Hide light mode code block, show dark mode */
   & [data-code-block].dark\:hidden {
@@ -194,7 +218,7 @@
   /* Override the bg-muted/40 class to let inline styles work */
   & [data-code-block] pre {
     background-color: inherit !important;
-    @apply scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600;
+    @apply scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-400 dark:scrollbar-thumb-charcoal-600;
   }
   & [data-code-block] pre code {
     @apply bg-transparent;
@@ -203,3 +227,11 @@
     @apply leading-relaxed;
   }
 }
+
+/* Dark mode streamdown overrides */
+.dark .streamdown-container {
+  --muted: 220 13% 20%;
+  --muted-foreground: 215 14% 60%;
+  --foreground: 210 20% 90%;
+  --border: 217 19% 27%;
+}
diff --git a/apps/webapp/tailwind.config.js b/apps/webapp/tailwind.config.js
index d7ee335694..c6d8070692 100644
--- a/apps/webapp/tailwind.config.js
+++ b/apps/webapp/tailwind.config.js
@@ -133,7 +133,7 @@ const lavender = {
 
 /** Trigger.dev custom palette */
 
-/** Text colors */
+/** Text colors - Dark mode values (used as CSS variable fallbacks) */
 const primary = apple[500];
 const secondary = charcoal[650];
 const tertiary = charcoal[700];
@@ -153,6 +153,16 @@ const stagingEnv = colors.orange[400];
 const previewEnv = colors.yellow[400];
 const prodEnv = mint[500];
 
+/** Light mode color values */
+const lightTextDimmed = charcoal[500];
+const lightTextBright = charcoal[800];
+const lightBackgroundBright = charcoal[100];
+const lightBackgroundDimmed = charcoal[200];
+const lightGridBright = charcoal[300];
+const lightGridDimmed = charcoal[200];
+const lightSecondary = charcoal[200];
+const lightTertiary = charcoal[100];
+
 /** Icon colors */
 const tasks = colors.blue[500];
 const runs = colors.indigo[500];
@@ -178,6 +188,7 @@ const radius = "0.5rem";
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: "class",
   content: ["./app/**/*.{ts,jsx,tsx}"],
   theme: {
     container: {
@@ -217,15 +228,16 @@ module.exports = {
         mint,
         sun,
         primary,
-        secondary,
-        tertiary,
+        // Theme-aware colors using CSS variables with fallbacks
+        secondary: "var(--color-secondary)",
+        tertiary: "var(--color-tertiary)",
         "text-link": textLink,
-        "text-dimmed": textDimmed,
-        "text-bright": textBright,
-        "background-bright": backgroundBright,
-        "background-dimmed": backgroundDimmed,
-        "grid-bright": gridBright,
-        "grid-dimmed": gridDimmed,
+        "text-dimmed": "var(--color-text-dimmed)",
+        "text-bright": "var(--color-text-bright)",
+        "background-bright": "var(--color-background-bright)",
+        "background-dimmed": "var(--color-background-dimmed)",
+        "grid-bright": "var(--color-grid-bright)",
+        "grid-dimmed": "var(--color-grid-dimmed)",
         success,
         pending,
         warning,

From b5a1402ed6a0719d0459cfa2f23de21789c03df8 Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Fri, 30 Jan 2026 10:43:51 +0000
Subject: [PATCH 2/2] do some light mode stuff

---
 apps/webapp/app/components/AskAI.tsx          |  2 +-
 .../app/components/BlankStatePanels.tsx       |  2 +-
 .../app/components/code/ChartConfigPanel.tsx  |  8 ++---
 .../webapp/app/components/code/InlineCode.tsx |  2 +-
 .../app/components/code/TSQLResultsTable.tsx  |  6 ++--
 .../app/components/logs/LogsSearchInput.tsx   |  2 +-
 apps/webapp/app/components/logs/LogsTable.tsx |  2 +-
 .../navigation/EnvironmentSelector.tsx        |  4 +--
 .../navigation/HelpAndFeedbackPopover.tsx     |  2 +-
 .../app/components/navigation/SideMenu.tsx    |  6 ++--
 .../components/navigation/SideMenuItem.tsx    |  2 +-
 .../components/navigation/SideMenuSection.tsx |  2 +-
 .../components/primitives/AppliedFilter.tsx   |  4 +--
 .../app/components/primitives/Calendar.tsx    | 10 +++---
 .../app/components/primitives/Callout.tsx     |  2 +-
 .../app/components/primitives/Checkbox.tsx    | 16 ++++-----
 .../components/primitives/ClipboardField.tsx  | 16 ++++-----
 .../app/components/primitives/CopyButton.tsx  |  4 +--
 .../components/primitives/CopyableText.tsx    |  4 +--
 .../app/components/primitives/Dialog.tsx      |  2 +-
 .../app/components/primitives/Input.tsx       | 10 +++---
 .../primitives/InputNumberStepper.tsx         |  2 +-
 .../app/components/primitives/InputOTP.tsx    |  2 +-
 .../app/components/primitives/PageHeader.tsx  |  2 +-
 .../app/components/primitives/Pagination.tsx  |  2 +-
 .../app/components/primitives/Popover.tsx     | 14 ++++----
 .../app/components/primitives/RadioButton.tsx |  4 +--
 .../primitives/SegmentedControl.tsx           |  2 +-
 .../app/components/primitives/Select.tsx      |  6 ++--
 .../app/components/primitives/Sheet.tsx       |  2 +-
 .../app/components/primitives/SheetV3.tsx     |  2 +-
 .../components/primitives/SimpleSelect.tsx    |  2 +-
 .../app/components/primitives/Slider.tsx      |  2 +-
 .../app/components/primitives/Switch.tsx      |  8 ++---
 .../app/components/primitives/Table.tsx       | 34 +++++++++----------
 .../app/components/primitives/TextArea.tsx    |  2 +-
 apps/webapp/app/components/runs/v3/RunTag.tsx | 10 +++---
 .../app/components/runs/v3/SpanTitle.tsx      |  2 +-
 .../app/components/runs/v3/TaskRunsTable.tsx  |  8 ++---
 .../route.tsx                                 |  4 +--
 .../route.tsx                                 |  2 +-
 .../route.tsx                                 |  4 +--
 .../AITabContent.tsx                          |  2 +-
 .../QueryHistoryPopover.tsx                   |  2 +-
 .../TRQLGuideContent.tsx                      |  2 +-
 .../route.tsx                                 |  2 +-
 .../route.tsx                                 |  4 +--
 .../route.tsx                                 |  4 +--
 .../app/routes/account.tokens/route.tsx       |  2 +-
 .../route.tsx                                 |  2 +-
 ...ces.orgs.$organizationSlug.select-plan.tsx |  2 +-
 apps/webapp/app/tailwind.css                  | 20 ++++++++---
 apps/webapp/tailwind.config.js                |  2 ++
 53 files changed, 141 insertions(+), 127 deletions(-)

diff --git a/apps/webapp/app/components/AskAI.tsx b/apps/webapp/app/components/AskAI.tsx
index bc55469b84..fecda77384 100644
--- a/apps/webapp/app/components/AskAI.tsx
+++ b/apps/webapp/app/components/AskAI.tsx
@@ -538,7 +538,7 @@ function GradientSpinnerBackground({
     >
       <div
         className={`flex h-full w-full items-center justify-center rounded-full bg-charcoal-600 ${
-          hoverEffect ? "transition group-hover:bg-charcoal-550" : ""
+          hoverEffect ? "transition group-hover:bg-secondary" : ""
         }`}
       >
         {children}
diff --git a/apps/webapp/app/components/BlankStatePanels.tsx b/apps/webapp/app/components/BlankStatePanels.tsx
index 7423bd61ac..df9d79ded0 100644
--- a/apps/webapp/app/components/BlankStatePanels.tsx
+++ b/apps/webapp/app/components/BlankStatePanels.tsx
@@ -269,7 +269,7 @@ export function DeploymentsNoneDev() {
           organization={organization}
           project={project}
           environment={environment}
-          className="w-fit border border-charcoal-600 bg-secondary hover:border-charcoal-550 hover:bg-charcoal-600"
+          className="w-fit border border-charcoal-600 bg-secondary hover:border-charcoal-550 hover:bg-secondary"
         />
       </StepContentContainer>
     </>
diff --git a/apps/webapp/app/components/code/ChartConfigPanel.tsx b/apps/webapp/app/components/code/ChartConfigPanel.tsx
index 7d563e781d..61b3813a9a 100644
--- a/apps/webapp/app/components/code/ChartConfigPanel.tsx
+++ b/apps/webapp/app/components/code/ChartConfigPanel.tsx
@@ -374,7 +374,7 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
                           const newColumns = config.yAxisColumns.filter((_, i) => i !== index);
                           updateConfig({ yAxisColumns: newColumns });
                         }}
-                        className="rounded p-1 text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright"
+                        className="rounded p-1 text-text-dimmed hover:bg-hover-bright hover:text-text-bright"
                         title="Remove series"
                       >
                         <XIcon className="h-3.5 w-3.5" />
@@ -400,7 +400,7 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
                         });
                       }
                     }}
-                    className="flex items-center gap-1 self-start rounded px-1 py-0.5 text-xs text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright"
+                    className="flex items-center gap-1 self-start rounded px-1 py-0.5 text-xs text-text-dimmed hover:bg-hover-bright hover:text-text-bright"
                   >
                     <Plus className="h-3 w-3" />
                     Add series
@@ -546,7 +546,7 @@ function SortDirectionToggle({
           "rounded px-2 py-1 text-xs transition-colors",
           direction === "asc"
             ? "bg-charcoal-700 text-text-bright"
-            : "text-text-dimmed hover:bg-charcoal-800 hover:text-text-bright"
+            : "text-text-dimmed hover:bg-hover hover:text-text-bright"
         )}
         title="Ascending"
       >
@@ -559,7 +559,7 @@ function SortDirectionToggle({
           "rounded px-2 py-1 text-xs transition-colors",
           direction === "desc"
             ? "bg-charcoal-700 text-text-bright"
-            : "text-text-dimmed hover:bg-charcoal-800 hover:text-text-bright"
+            : "text-text-dimmed hover:bg-hover hover:text-text-bright"
         )}
         title="Descending"
       >
diff --git a/apps/webapp/app/components/code/InlineCode.tsx b/apps/webapp/app/components/code/InlineCode.tsx
index 120e864250..4f901544a9 100644
--- a/apps/webapp/app/components/code/InlineCode.tsx
+++ b/apps/webapp/app/components/code/InlineCode.tsx
@@ -1,7 +1,7 @@
 import { cn } from "~/utils/cn";
 
 const inlineCode =
-  "px-1 py-0.5 rounded border border-charcoal-700 bg-charcoal-800 text-charcoal-200 font-mono text-wrap";
+  "px-1 py-0.5 rounded border border-grid-bright bg-tertiary text-text-bright font-mono text-wrap";
 
 const variants = {
   "extra-extra-small": "text-xxs",
diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index 9b5d9215cc..ef4ca630cd 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -738,7 +738,7 @@ function CopyableCell({
                   "flex size-6 items-center justify-center rounded border border-charcoal-650 bg-charcoal-750",
                   copied
                     ? "text-green-500"
-                    : "text-text-dimmed hover:border-charcoal-600 hover:bg-charcoal-700 hover:text-text-bright"
+                    : "text-text-dimmed hover:border-charcoal-600 hover:bg-hover-bright hover:text-text-bright"
                 )}
               >
                 {copied ? (
@@ -831,7 +831,7 @@ function HeaderCellContent({
             e.stopPropagation();
             onFilterClick();
           }}
-          className="flex-shrink-0 rounded text-text-dimmed transition-colors hover:bg-charcoal-700 hover:text-text-bright"
+          className="flex-shrink-0 rounded text-text-dimmed transition-colors hover:bg-hover-bright hover:text-text-bright"
           title="Toggle column filters"
         >
           <FunnelIcon className="size-3" />
@@ -1147,7 +1147,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
               <tr
                 key={row.id}
                 data-index={virtualRow.index}
-                className="group/row hover:bg-charcoal-800"
+                className="group/row hover:bg-hover"
                 style={{
                   display: "flex",
                   position: "absolute",
diff --git a/apps/webapp/app/components/logs/LogsSearchInput.tsx b/apps/webapp/app/components/logs/LogsSearchInput.tsx
index fd539f66ae..48d0693a0e 100644
--- a/apps/webapp/app/components/logs/LogsSearchInput.tsx
+++ b/apps/webapp/app/components/logs/LogsSearchInput.tsx
@@ -96,7 +96,7 @@ export function LogsSearchInput() {
         <button
           type="button"
           onClick={handleClear}
-          className="flex size-6 items-center justify-center rounded text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright"
+          className="flex size-6 items-center justify-center rounded text-text-dimmed hover:bg-hover-bright hover:text-text-bright"
           title="Clear search"
         >
           <XMarkIcon className="size-4" />
diff --git a/apps/webapp/app/components/logs/LogsTable.tsx b/apps/webapp/app/components/logs/LogsTable.tsx
index e8e785ae79..534de3b5da 100644
--- a/apps/webapp/app/components/logs/LogsTable.tsx
+++ b/apps/webapp/app/components/logs/LogsTable.tsx
@@ -149,7 +149,7 @@ export function LogsTable({
                   key={log.id}
                   className={cn(
                     "cursor-pointer transition-colors",
-                    isSelected ? "bg-charcoal-750" : "hover:bg-charcoal-850"
+                    isSelected ? "bg-hover" : "hover:bg-hover"
                   )}
                   isSelected={isSelected}
                 >
diff --git a/apps/webapp/app/components/navigation/EnvironmentSelector.tsx b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
index ba3cce8232..76ce8f47a8 100644
--- a/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
+++ b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
@@ -57,7 +57,7 @@ export function EnvironmentSelector({
         button={
           <PopoverTrigger
             className={cn(
-              "group flex h-8 items-center rounded pl-[0.4375rem] transition-colors hover:bg-charcoal-750",
+              "group flex h-8 items-center rounded pl-[0.4375rem] transition-colors hover:bg-hover",
               isCollapsed ? "justify-center pr-0.5" : "justify-between pr-1",
               className
             )}
@@ -230,7 +230,7 @@ function Branches({
         <PopoverTrigger className="w-full justify-between overflow-hidden focus-custom">
           <ButtonContent
             variant="small-menu-item"
-            className="hover:bg-charcoal-750"
+            className="hover:bg-hover"
             TrailingIcon={ChevronRightIcon}
             trailingIconClassName="text-text-dimmed"
             textAlignLeft
diff --git a/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx b/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
index 74077eed72..b92b8ba198 100644
--- a/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
+++ b/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
@@ -59,7 +59,7 @@ export function HelpAndFeedback({
         button={
           <PopoverTrigger
             className={cn(
-              "group flex h-8 items-center gap-1.5 rounded pl-[0.4375rem] pr-2 transition-colors hover:bg-charcoal-750",
+              "group flex h-8 items-center gap-1.5 rounded pl-[0.4375rem] pr-2 transition-colors hover:bg-hover",
               isCollapsed ? "w-full" : "w-full justify-between"
             )}
           >
diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index 2147b73dfd..18e448bd83 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -584,7 +584,7 @@ function ProjectSelector({
         button={
           <PopoverTrigger
             className={cn(
-              "group flex h-8 items-center rounded pl-[0.4375rem] transition-colors hover:bg-charcoal-750",
+              "group flex h-8 items-center rounded pl-[0.4375rem] transition-colors hover:bg-hover",
               isCollapsed ? "justify-center pr-0.5" : "w-full justify-between pr-1"
             )}
           >
@@ -780,7 +780,7 @@ function SwitchOrganizations({
         <PopoverTrigger className="w-full justify-between overflow-hidden focus-custom">
           <ButtonContent
             variant="small-menu-item"
-            className="hover:bg-charcoal-750"
+            className="hover:bg-hover"
             LeadingIcon={ArrowPathRoundedSquareIcon}
             leadingIconClassName="text-text-dimmed"
             TrailingIcon={ChevronRightIcon}
@@ -1010,7 +1010,7 @@ function CollapseToggle({
               className={cn(
                 "group flex h-12 w-6 items-center justify-center rounded-md text-text-dimmed transition-all duration-200 focus-custom",
                 isHovering
-                  ? "border border-grid-bright bg-background-bright shadow-md hover:bg-charcoal-750 hover:text-text-bright"
+                  ? "border border-grid-bright bg-background-bright shadow-md hover:bg-hover hover:text-text-bright"
                   : "border border-transparent bg-transparent"
               )}
             >
diff --git a/apps/webapp/app/components/navigation/SideMenuItem.tsx b/apps/webapp/app/components/navigation/SideMenuItem.tsx
index a89765ad44..097d7b282a 100644
--- a/apps/webapp/app/components/navigation/SideMenuItem.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuItem.tsx
@@ -39,7 +39,7 @@ export function SideMenuItem({
           to={to}
           target={target}
           className={cn(
-            "flex h-8 w-full items-center gap-2 overflow-hidden rounded pr-2 pl-[0.4375rem] text-text-bright transition-colors hover:bg-charcoal-750",
+            "flex h-8 w-full items-center gap-2 overflow-hidden rounded pr-2 pl-[0.4375rem] text-text-bright transition-colors hover:bg-hover",
             isActive ? "bg-tertiary" : ""
           )}
         >
diff --git a/apps/webapp/app/components/navigation/SideMenuSection.tsx b/apps/webapp/app/components/navigation/SideMenuSection.tsx
index 1f19ffe487..e6114da0d6 100644
--- a/apps/webapp/app/components/navigation/SideMenuSection.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuSection.tsx
@@ -37,7 +37,7 @@ export function SideMenuSection({
       <div className="relative w-full">
         {/* Header - fades out when sidebar is collapsed */}
         <motion.div
-          className="flex cursor-pointer items-center gap-1 overflow-hidden rounded-sm py-1 pl-1.5 text-text-dimmed transition hover:bg-charcoal-750 hover:text-text-bright"
+          className="flex cursor-pointer items-center gap-1 overflow-hidden rounded-sm py-1 pl-1.5 text-text-dimmed transition hover:bg-hover hover:text-text-bright"
           onClick={isSideMenuCollapsed ? undefined : handleToggle}
           style={{ cursor: isSideMenuCollapsed ? "default" : "pointer" }}
           initial={false}
diff --git a/apps/webapp/app/components/primitives/AppliedFilter.tsx b/apps/webapp/app/components/primitives/AppliedFilter.tsx
index f540c4f35e..0d474b05f9 100644
--- a/apps/webapp/app/components/primitives/AppliedFilter.tsx
+++ b/apps/webapp/app/components/primitives/AppliedFilter.tsx
@@ -4,11 +4,11 @@ import { cn } from "~/utils/cn";
 
 const variants = {
   "secondary/small": {
-    box: "h-6 bg-secondary rounded pl-1.5 gap-1.5 text-xs divide-x divide-black/15 group-hover:bg-charcoal-600 group-hover:border-charcoal-550 text-text-bright border border-charcoal-600",
+    box: "h-6 bg-secondary rounded pl-1.5 gap-1.5 text-xs divide-x divide-black/15 group-hover:bg-secondary group-hover:border-charcoal-550 text-text-bright border border-charcoal-600",
     clear: "size-6 text-text-bright hover:text-text-bright transition-colors",
   },
   "tertiary/small": {
-    box: "h-6 bg-tertiary rounded pl-1.5 gap-1.5 text-xs divide-x divide-black/15 group-hover:bg-charcoal-600",
+    box: "h-6 bg-tertiary rounded pl-1.5 gap-1.5 text-xs divide-x divide-black/15 group-hover:bg-secondary",
     clear: "size-6 text-text-dimmed hover:text-text-bright transition-colors",
   },
   "minimal/medium": {
diff --git a/apps/webapp/app/components/primitives/Calendar.tsx b/apps/webapp/app/components/primitives/Calendar.tsx
index 5b72bd1c97..f823a2aeea 100644
--- a/apps/webapp/app/components/primitives/Calendar.tsx
+++ b/apps/webapp/app/components/primitives/Calendar.tsx
@@ -9,7 +9,7 @@ import { cn } from "~/utils/cn";
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
 const navButtonClass =
-  "size-7 rounded-[3px] bg-secondary border border-charcoal-600 text-text-bright hover:bg-charcoal-600 hover:border-charcoal-550 transition inline-flex items-center justify-center";
+  "size-7 rounded-[3px] bg-secondary border border-charcoal-600 text-text-bright hover:bg-secondary hover:border-charcoal-550 transition inline-flex items-center justify-center";
 
 function CustomMonthCaption({ calendarMonth }: { calendarMonth: { date: Date } }) {
   const { goToMonth, nextMonth, previousMonth } = useDayPicker();
@@ -27,7 +27,7 @@ function CustomMonthCaption({ calendarMonth }: { calendarMonth: { date: Date } }
       </button>
       <div className="flex items-center gap-2">
         <select
-          className="rounded border border-charcoal-600 bg-charcoal-750 px-2 py-1 text-sm text-text-bright focus:border-charcoal-500 focus:outline-none"
+          className="rounded border border-charcoal-600 bg-tertiary px-2 py-1 text-sm text-text-bright focus:border-charcoal-500 focus:outline-none"
           value={calendarMonth.date.getMonth()}
           onChange={(e) => {
             const newDate = new Date(calendarMonth.date);
@@ -42,7 +42,7 @@ function CustomMonthCaption({ calendarMonth }: { calendarMonth: { date: Date } }
           ))}
         </select>
         <select
-          className="rounded border border-charcoal-600 bg-charcoal-750 px-2 py-1 text-sm text-text-bright focus:border-charcoal-500 focus:outline-none"
+          className="rounded border border-charcoal-600 bg-tertiary px-2 py-1 text-sm text-text-bright focus:border-charcoal-500 focus:outline-none"
           value={calendarMonth.date.getFullYear()}
           onChange={(e) => {
             const newDate = new Date(calendarMonth.date);
@@ -97,7 +97,7 @@ export function Calendar({
         day: "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-charcoal-700 [&:has([aria-selected].day-outside)]:bg-charcoal-700/50 [&:has([aria-selected].day-range-end)]:rounded-r-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md",
         day_button: cn(
           "size-8 p-0 font-normal text-text-bright rounded-md",
-          "hover:bg-charcoal-700 hover:text-text-bright",
+          "hover:bg-hover-bright hover:text-text-bright",
           "focus:bg-charcoal-700 focus:text-text-bright focus:outline-none",
           "aria-selected:opacity-100"
         ),
@@ -113,7 +113,7 @@ export function Calendar({
         hidden: "invisible",
         dropdowns: "flex gap-2 items-center justify-center",
         dropdown:
-          "bg-charcoal-750 border border-charcoal-600 rounded px-2 py-1 text-sm text-text-bright focus:outline-none focus:border-charcoal-500",
+          "bg-tertiary border border-charcoal-600 rounded px-2 py-1 text-sm text-text-bright focus:outline-none focus:border-charcoal-500",
         ...classNames,
       }}
       components={{
diff --git a/apps/webapp/app/components/primitives/Callout.tsx b/apps/webapp/app/components/primitives/Callout.tsx
index da2d2ea760..c818bb2d97 100644
--- a/apps/webapp/app/components/primitives/Callout.tsx
+++ b/apps/webapp/app/components/primitives/Callout.tsx
@@ -22,7 +22,7 @@ export const variantClasses = {
     className: "border-charcoal-700 bg-charcoal-800",
     icon: <InformationCircleIcon className="h-5 w-5 shrink-0 text-text-dimmed" />,
     textColor: "text-text-bright",
-    linkClassName: "transition hover:bg-charcoal-750",
+    linkClassName: "transition hover:bg-hover",
   },
   warning: {
     className: "border-warning/20 bg-warning/10",
diff --git a/apps/webapp/app/components/primitives/Checkbox.tsx b/apps/webapp/app/components/primitives/Checkbox.tsx
index 59f12a4048..534659def6 100644
--- a/apps/webapp/app/components/primitives/Checkbox.tsx
+++ b/apps/webapp/app/components/primitives/Checkbox.tsx
@@ -23,28 +23,28 @@ const variants = {
   },
   "button/small": {
     button:
-      "flex items-center w-fit h-8 pl-2 pr-3 rounded border border-charcoal-600 hover:bg-charcoal-850 hover:border-charcoal-500 transition",
+      "flex items-center w-fit h-8 pl-2 pr-3 rounded border border-charcoal-600 hover:bg-hover hover:border-charcoal-500 transition",
     label: "text-sm text-text-bright select-none",
     description: "text-text-dimmed",
     inputPosition: "mt-0",
-    isChecked: "bg-charcoal-850 border-charcoal-750 hover:!bg-charcoal-850",
+    isChecked: "bg-hover border-charcoal-750 hover:!bg-hover",
     isDisabled: "opacity-70 hover:bg-transparent",
   },
   button: {
     button:
-      "w-fit py-2 pl-3 pr-4 rounded border border-charcoal-600 hover:bg-charcoal-850 hover:border-charcoal-500 transition",
+      "w-fit py-2 pl-3 pr-4 rounded border border-charcoal-600 hover:bg-hover hover:border-charcoal-500 transition",
     label: "text-text-bright select-none",
     description: "text-text-dimmed",
     inputPosition: "mt-1",
-    isChecked: "bg-charcoal-850 border-charcoal-750 hover:!bg-charcoal-850",
+    isChecked: "bg-hover border-charcoal-750 hover:!bg-hover",
     isDisabled: "opacity-70 hover:bg-transparent",
   },
   description: {
-    button: "w-full py-2 pl-3 pr-4 checked:hover:bg-charcoal-850 transition",
+    button: "w-full py-2 pl-3 pr-4 checked:hover:bg-hover transition",
     label: "text-text-bright font-semibold",
     description: "text-text-dimmed",
     inputPosition: "mt-1",
-    isChecked: "bg-charcoal-850",
+    isChecked: "bg-hover",
     isDisabled: "opacity-70",
   },
 };
@@ -139,7 +139,7 @@ export const CheckboxWithLabel = React.forwardRef<HTMLInputElement, CheckboxProp
           className={cn(
             inputPositionClasses,
             props.readOnly || disabled ? "cursor-default" : "cursor-pointer",
-            "read-only:border-charcoal-650 disabled:border-charcoal-650 rounded-sm border border-charcoal-600 bg-transparent transition checked:!bg-indigo-500 read-only:!bg-charcoal-700 group-hover:bg-charcoal-900 group-hover:checked:bg-indigo-500 group-focus:ring-1 focus:ring-indigo-500 focus:ring-offset-0 focus:ring-offset-transparent focus-visible:outline-none  focus-visible:ring-indigo-500 disabled:!bg-charcoal-700"
+            "read-only:border-charcoal-650 disabled:border-charcoal-650 rounded-sm border border-charcoal-600 bg-transparent transition checked:!bg-indigo-500 read-only:!bg-charcoal-700 group-hover:bg-hover group-hover:checked:bg-indigo-500 group-focus:ring-1 focus:ring-indigo-500 focus:ring-offset-0 focus:ring-offset-transparent focus-visible:outline-none  focus-visible:ring-indigo-500 disabled:!bg-charcoal-700"
           )}
           id={id}
           ref={ref}
@@ -185,7 +185,7 @@ export const Checkbox = forwardRef<HTMLInputElement, SimpleCheckboxProps>(
         type="checkbox"
         className={cn(
           props.readOnly || props.disabled ? "cursor-default" : "cursor-pointer",
-          "read-only:border-charcoal-650 disabled:border-charcoal-650 rounded-sm border border-charcoal-600 bg-transparent transition checked:!bg-indigo-500 read-only:!bg-charcoal-700 group-hover:bg-charcoal-900 group-hover:checked:bg-indigo-500 group-focus:ring-1 focus:ring-indigo-500 focus:ring-offset-0 focus:ring-offset-transparent focus-visible:outline-none  focus-visible:ring-indigo-500 disabled:!bg-charcoal-700"
+          "read-only:border-charcoal-650 disabled:border-charcoal-650 rounded-sm border border-charcoal-600 bg-transparent transition checked:!bg-indigo-500 read-only:!bg-charcoal-700 group-hover:bg-hover group-hover:checked:bg-indigo-500 group-focus:ring-1 focus:ring-indigo-500 focus:ring-offset-0 focus:ring-offset-transparent focus-visible:outline-none  focus-visible:ring-indigo-500 disabled:!bg-charcoal-700"
         )}
         {...props}
         ref={ref}
diff --git a/apps/webapp/app/components/primitives/ClipboardField.tsx b/apps/webapp/app/components/primitives/ClipboardField.tsx
index 3d4028d926..062ab61869 100644
--- a/apps/webapp/app/components/primitives/ClipboardField.tsx
+++ b/apps/webapp/app/components/primitives/ClipboardField.tsx
@@ -5,7 +5,7 @@ import { CopyButton } from "./CopyButton";
 const variants = {
   "primary/small": {
     container:
-      "flex items-center text-text-dimmed font-mono rounded border bg-charcoal-750 text-xs transition hover:bg-charcoal-700 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-none focus:ring-0 focus:ring-transparent",
+      "flex items-center text-text-dimmed font-mono rounded border bg-tertiary text-xs transition hover:bg-hover-bright focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-none focus:ring-0 focus:ring-transparent",
     input:
       "bg-transparent border-0 text-xs px-2 w-auto rounded-l h-6 leading-6 focus:ring-transparent",
     buttonVariant: "primary" as const,
@@ -14,7 +14,7 @@ const variants = {
   },
   "secondary/small": {
     container:
-      "flex items-center text-text-dimmed font-mono rounded border bg-charcoal-750 text-xs transition hover:bg-charcoal-700 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-none focus:ring-0 focus:ring-transparent",
+      "flex items-center text-text-dimmed font-mono rounded border bg-tertiary text-xs transition hover:bg-hover-bright focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-none focus:ring-0 focus:ring-transparent",
     input:
       "bg-transparent border-0 text-xs px-2 w-auto rounded-l h-6 leading-6 focus:ring-transparent",
     buttonVariant: "tertiary" as const,
@@ -23,17 +23,17 @@ const variants = {
   },
   "tertiary/small": {
     container:
-      "group/clipboard flex items-center text-text-dimmed font-mono rounded bg-transparent border border-transparent text-xs transition duration-150 hover:border-charcoal-700 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-none focus:ring-0 focus:ring-transparent",
+      "group/clipboard flex items-center text-text-dimmed font-mono rounded bg-transparent border border-transparent text-xs transition duration-150 hover:border-grid-bright focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-none focus:ring-0 focus:ring-transparent",
     input:
       "bg-transparent border-0 text-xs px-2 w-auto rounded-l h-6 leading-6 focus:ring-transparent",
     buttonVariant: "minimal" as const,
     size: "small" as const,
     button:
-      "rounded-l-none border-l border-transparent transition group-hover/clipboard:border-charcoal-700",
+      "rounded-l-none border-l border-transparent transition group-hover/clipboard:border-grid-bright",
   },
   "primary/medium": {
     container:
-      "flex items-center text-text-dimmed font-mono rounded border bg-charcoal-750 text-sm transition hover:bg-charcoal-700 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-none focus:ring-0 focus:ring-transparent",
+      "flex items-center text-text-dimmed font-mono rounded border bg-tertiary text-sm transition hover:bg-hover-bright focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-none focus:ring-0 focus:ring-transparent",
     input:
       "bg-transparent border-0 text-sm px-3 w-auto rounded-l h-8 leading-6 focus:ring-transparent",
     buttonVariant: "primary" as const,
@@ -42,7 +42,7 @@ const variants = {
   },
   "secondary/medium": {
     container:
-      "flex items-center text-text-dimmed font-mono rounded bg-charcoal-750 text-sm transition hover:bg-charcoal-700 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-none focus:ring-0 focus:ring-transparent",
+      "flex items-center text-text-dimmed font-mono rounded bg-tertiary text-sm transition hover:bg-hover-bright focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-none focus:ring-0 focus:ring-transparent",
     input:
       "bg-transparent border-0 text-sm px-3 w-auto rounded-l h-8 leading-6 focus:ring-transparent",
     buttonVariant: "tertiary" as const,
@@ -51,12 +51,12 @@ const variants = {
   },
   "tertiary/medium": {
     container:
-      "group flex items-center text-text-dimmed font-mono rounded bg-transparent border border-transparent text-sm transition hover:border-charcoal-700 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-none focus:ring-0 focus:ring-transparent",
+      "group flex items-center text-text-dimmed font-mono rounded bg-transparent border border-transparent text-sm transition hover:border-grid-bright focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-transparent focus:outline-none focus:ring-0 focus:ring-transparent",
     input:
       "bg-transparent border-0 text-sm px-3 w-auto rounded-l h-8 leading-6 focus:ring-transparent",
     buttonVariant: "minimal" as const,
     size: "medium" as const,
-    button: "rounded-l-none border-l border-transparent transition group-hover:border-charcoal-700",
+    button: "rounded-l-none border-l border-transparent transition group-hover:border-grid-bright",
   },
 };
 
diff --git a/apps/webapp/app/components/primitives/CopyButton.tsx b/apps/webapp/app/components/primitives/CopyButton.tsx
index 2a93cb2c79..d7d9dd5af3 100644
--- a/apps/webapp/app/components/primitives/CopyButton.tsx
+++ b/apps/webapp/app/components/primitives/CopyButton.tsx
@@ -50,10 +50,10 @@ export function CopyButton({
         onClick={copy}
         className={cn(
           buttonSize,
-          "flex items-center justify-center rounded border border-charcoal-650 bg-charcoal-750",
+          "flex items-center justify-center rounded border border-grid-bright bg-tertiary",
           copied
             ? "text-green-500"
-            : "text-text-dimmed hover:border-charcoal-600 hover:bg-charcoal-700 hover:text-text-bright",
+            : "text-text-dimmed hover:border-grid-bright hover:bg-hover-bright hover:text-text-bright",
           buttonClassName
         )}
       >
diff --git a/apps/webapp/app/components/primitives/CopyableText.tsx b/apps/webapp/app/components/primitives/CopyableText.tsx
index 9be81d4d64..357fd72afd 100644
--- a/apps/webapp/app/components/primitives/CopyableText.tsx
+++ b/apps/webapp/app/components/primitives/CopyableText.tsx
@@ -42,11 +42,11 @@ export function CopyableText({
             button={
               <span
                 className={cn(
-                  "ml-1 flex size-6 items-center justify-center rounded border border-charcoal-650 bg-charcoal-750",
+                  "ml-1 flex size-6 items-center justify-center rounded border border-grid-bright bg-tertiary",
                   asChild && "p-1",
                   copied
                     ? "text-green-500"
-                    : "text-text-dimmed hover:border-charcoal-600 hover:bg-charcoal-700 hover:text-text-bright"
+                    : "text-text-dimmed hover:border-grid-bright hover:bg-hover-bright hover:text-text-bright"
                 )}
               >
                 {copied ? (
diff --git a/apps/webapp/app/components/primitives/Dialog.tsx b/apps/webapp/app/components/primitives/Dialog.tsx
index 48fc59cfa7..74bb1bbfc3 100644
--- a/apps/webapp/app/components/primitives/Dialog.tsx
+++ b/apps/webapp/app/components/primitives/Dialog.tsx
@@ -57,7 +57,7 @@ const DialogContent = React.forwardRef<
       <hr className="absolute left-0 top-11 w-full" />
       {children}
       {showCloseButton && (
-        <DialogPrimitive.Close className="data-[state=open]:bg-accent data-[state=open]:text-muted-foreground group absolute right-2 top-[0.5625rem] flex items-center gap-1 rounded-sm p-1 py-1 pl-0 pr-1 opacity-70 transition focus-custom hover:bg-charcoal-750 hover:opacity-100 focus-visible:focus-custom disabled:pointer-events-none">
+        <DialogPrimitive.Close className="data-[state=open]:bg-accent data-[state=open]:text-muted-foreground group absolute right-2 top-[0.5625rem] flex items-center gap-1 rounded-sm p-1 py-1 pl-0 pr-1 opacity-70 transition focus-custom hover:bg-hover hover:opacity-100 focus-visible:focus-custom disabled:pointer-events-none">
           <ShortcutKey
             shortcut={{
               key: "esc",
diff --git a/apps/webapp/app/components/primitives/Input.tsx b/apps/webapp/app/components/primitives/Input.tsx
index 3364e48bed..4188bfd1d8 100644
--- a/apps/webapp/app/components/primitives/Input.tsx
+++ b/apps/webapp/app/components/primitives/Input.tsx
@@ -12,34 +12,34 @@ const inputBase =
 const variants = {
   large: {
     container:
-      "px-1 w-full h-10 rounded-[3px] border border-charcoal-800 bg-charcoal-750 hover:border-charcoal-600 hover:bg-charcoal-650",
+      "px-1 w-full h-10 rounded-[3px] border border-grid-dimmed bg-tertiary hover:border-grid-bright hover:bg-secondary",
     input: "px-2 text-sm",
     iconSize: "size-4 ml-1",
     accessory: "pr-1",
   },
   medium: {
     container:
-      "px-1 h-8 w-full rounded border border-charcoal-800 bg-charcoal-750 hover:border-charcoal-600 hover:bg-charcoal-650",
+      "px-1 h-8 w-full rounded border border-grid-dimmed bg-tertiary hover:border-grid-bright hover:bg-secondary",
     input: "px-1.5 rounded text-sm",
     iconSize: "size-4 ml-0.5",
     accessory: "pr-1",
   },
   small: {
     container:
-      "px-1 h-6 w-full rounded border border-charcoal-800 bg-charcoal-750 hover:border-charcoal-600 hover:bg-charcoal-650",
+      "px-1 h-6 w-full rounded border border-grid-dimmed bg-tertiary hover:border-grid-bright hover:bg-secondary",
     input: "px-1 rounded text-xs",
     iconSize: "size-3 ml-0.5",
     accessory: "pr-0.5",
   },
   tertiary: {
-    container: "px-1 h-6 w-full rounded hover:bg-charcoal-750",
+    container: "px-1 h-6 w-full rounded hover:bg-hover",
     input: "px-1 rounded text-xs",
     iconSize: "size-3 ml-0.5",
     accessory: "pr-0.5",
   },
   "secondary-small": {
     container:
-      "px-1 h-6 w-full rounded border border-charcoal-600 hover:border-charcoal-550 bg-grid-dimmed hover:bg-charcoal-650",
+      "px-1 h-6 w-full rounded border border-grid-bright hover:border-grid-bright bg-grid-dimmed hover:bg-secondary",
     input: "px-1 rounded text-xs",
     iconSize: "size-3 ml-0.5",
     accessory: "pr-0.5",
diff --git a/apps/webapp/app/components/primitives/InputNumberStepper.tsx b/apps/webapp/app/components/primitives/InputNumberStepper.tsx
index f4aafd5cae..54829bfeda 100644
--- a/apps/webapp/app/components/primitives/InputNumberStepper.tsx
+++ b/apps/webapp/app/components/primitives/InputNumberStepper.tsx
@@ -128,7 +128,7 @@ export function InputNumberStepper({
   return (
     <div
       className={cn(
-        "flex items-center rounded border border-charcoal-600 bg-tertiary transition hover:border-charcoal-550/80 hover:bg-charcoal-600/80",
+        "flex items-center rounded border border-charcoal-600 bg-tertiary transition hover:border-charcoal-550/80 hover:bg-secondary",
         size.container,
         "has-[:focus-visible]:outline has-[:focus-visible]:outline-1 has-[:focus-visible]:outline-offset-0 has-[:focus-visible]:outline-text-link",
         disabled && "cursor-not-allowed opacity-50",
diff --git a/apps/webapp/app/components/primitives/InputOTP.tsx b/apps/webapp/app/components/primitives/InputOTP.tsx
index 54ca070ac0..a3a8a34a0c 100644
--- a/apps/webapp/app/components/primitives/InputOTP.tsx
+++ b/apps/webapp/app/components/primitives/InputOTP.tsx
@@ -15,7 +15,7 @@ const variants = {
   large: {
     container: "flex items-center gap-3 has-disabled:opacity-50",
     group: "flex items-center gap-1",
-    slot: "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive bg-charcoal-750 border-charcoal-700 hover:border-charcoal-600 hover:bg-charcoal-650 relative flex h-12 w-12 items-center justify-center border text-base outline-none transition-all rounded-md data-[active=true]:z-10 data-[active=true]:ring-[3px] data-[active=true]:border-indigo-500",
+    slot: "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive bg-charcoal-750 border-charcoal-700 hover:border-charcoal-600 hover:bg-secondary relative flex h-12 w-12 items-center justify-center border text-base outline-none transition-all rounded-md data-[active=true]:z-10 data-[active=true]:ring-[3px] data-[active=true]:border-indigo-500",
   },
   minimal: {
     container: "flex items-center gap-2 has-disabled:opacity-50",
diff --git a/apps/webapp/app/components/primitives/PageHeader.tsx b/apps/webapp/app/components/primitives/PageHeader.tsx
index 7855e241e3..0f3820c9a2 100644
--- a/apps/webapp/app/components/primitives/PageHeader.tsx
+++ b/apps/webapp/app/components/primitives/PageHeader.tsx
@@ -45,7 +45,7 @@ export function PageTitle({ title, backButton }: PageTitleProps) {
         <div className="group -ml-1.5 flex items-center gap-0">
           <Link
             to={backButton.to}
-            className="rounded px-1.5 py-1 text-xs text-text-dimmed transition focus-custom group-hover:bg-charcoal-700 group-hover:text-text-bright"
+            className="rounded px-1.5 py-1 text-xs text-text-dimmed transition focus-custom group-hover:bg-hover-bright group-hover:text-text-bright"
           >
             {backButton.text}
           </Link>
diff --git a/apps/webapp/app/components/primitives/Pagination.tsx b/apps/webapp/app/components/primitives/Pagination.tsx
index f465083710..fddb8f8998 100644
--- a/apps/webapp/app/components/primitives/Pagination.tsx
+++ b/apps/webapp/app/components/primitives/Pagination.tsx
@@ -103,7 +103,7 @@ function pageUrl(location: ReturnType<typeof useLocation>, page: number): string
 const baseClass =
   "flex items-center justify-center border border-transparent min-w-6 h-6 px-1 text-xs font-medium transition text-text-dimmed rounded-sm focus-visible:focus-custom";
 const unselectedClass = "hover:bg-tertiary hover:text-text-bright";
-const selectedClass = "border-charcoal-600 bg-tertiary text-text-bright hover:bg-charcoal-600/50";
+const selectedClass = "border-charcoal-600 bg-tertiary text-text-bright hover:bg-secondary";
 
 function PageLinkComponent({
   page,
diff --git a/apps/webapp/app/components/primitives/Popover.tsx b/apps/webapp/app/components/primitives/Popover.tsx
index 864bdce17f..a796cfa6ab 100644
--- a/apps/webapp/app/components/primitives/Popover.tsx
+++ b/apps/webapp/app/components/primitives/Popover.tsx
@@ -47,7 +47,7 @@ function PopoverSectionHeader({
   variant?: ParagraphVariant;
 }) {
   return (
-    <Paragraph variant={variant} className="bg-charcoal-750 px-2.5 py-1.5">
+    <Paragraph variant={variant} className="bg-hover px-2.5 py-1.5">
       {title}
     </Paragraph>
   );
@@ -91,8 +91,8 @@ const PopoverMenuItem = React.forwardRef<
       textAlignLeft: true,
       TrailingIcon: isSelected ? CheckIcon : undefined,
       className: cn(
-        "group-hover:bg-charcoal-700",
-        isSelected ? "bg-charcoal-750 group-hover:bg-charcoal-600/50" : undefined,
+        "group-hover:bg-hover-bright",
+        isSelected ? "bg-hover group-hover:bg-secondary" : undefined,
         className
       ),
     } as const;
@@ -140,7 +140,7 @@ function PopoverCustomTrigger({
     <PopoverTrigger
       {...props}
       className={cn(
-        "group flex items-center justify-end gap-1 rounded text-text-dimmed transition focus-custom hover:bg-charcoal-850 hover:text-text-bright",
+        "group flex items-center justify-end gap-1 rounded text-text-dimmed transition focus-custom hover:bg-hover hover:text-text-bright",
         className
       )}
     >
@@ -178,7 +178,7 @@ function PopoverSideMenuTrigger({
       {...props}
       ref={ref}
       className={cn(
-        "flex h-[1.8rem] shrink-0 select-none items-center rounded-sm bg-transparent pl-[0.4rem] pr-2.5 text-center font-sans text-2sm font-normal text-text-bright transition duration-150 focus-custom hover:bg-charcoal-750",
+        "flex h-[1.8rem] shrink-0 select-none items-center rounded-sm bg-transparent pl-[0.4rem] pr-2.5 text-center font-sans text-2sm font-normal text-text-bright transition duration-150 focus-custom hover:bg-hover",
         shortcut && !hideShortcutKey ? "justify-between gap-x-1.5" : "",
         className
       )}
@@ -193,12 +193,12 @@ function PopoverSideMenuTrigger({
 
 const popoverArrowTriggerVariants = {
   minimal: {
-    trigger: "text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright",
+    trigger: "text-text-dimmed hover:bg-hover-bright hover:text-text-bright",
     text: "group-hover:text-text-bright",
     icon: "text-text-dimmed group-hover:text-text-bright",
   },
   tertiary: {
-    trigger: "bg-tertiary text-text-bright hover:bg-charcoal-600",
+    trigger: "bg-tertiary text-text-bright hover:bg-secondary",
     text: "text-text-bright",
     icon: "text-text-bright",
   },
diff --git a/apps/webapp/app/components/primitives/RadioButton.tsx b/apps/webapp/app/components/primitives/RadioButton.tsx
index 87fb7a59f1..ea822882b0 100644
--- a/apps/webapp/app/components/primitives/RadioButton.tsx
+++ b/apps/webapp/app/components/primitives/RadioButton.tsx
@@ -30,7 +30,7 @@ const variants = {
   },
   button: {
     button:
-      "w-fit py-2 pl-3 pr-4 rounded border border-charcoal-600 hover:bg-charcoal-850 hover:border-charcoal-500 transition data-[state=checked]:bg-charcoal-850 data-[disabled]:opacity-70",
+      "w-fit py-2 pl-3 pr-4 rounded border border-charcoal-600 hover:bg-hover hover:border-charcoal-500 transition data-[state=checked]:bg-hover data-[disabled]:opacity-70",
     label: "text-text-bright select-none",
     description: "text-text-dimmed",
     inputPosition: "mt-1",
@@ -46,7 +46,7 @@ const variants = {
   },
   icon: {
     button:
-      "w-full p-2.5 pb-4 hover:bg-charcoal-850 transition data-[disabled]:opacity-70 data-[state=checked]:bg-charcoal-850 border-charcoal-600 border rounded-sm",
+      "w-full p-2.5 pb-4 hover:bg-hover transition data-[disabled]:opacity-70 data-[state=checked]:bg-hover border-charcoal-600 border rounded-sm",
     label: "text-text-bright font-semibold -mt-1 text-left",
     description: "text-text-dimmed -mt-0 text-left",
     inputPosition: "mt-0",
diff --git a/apps/webapp/app/components/primitives/SegmentedControl.tsx b/apps/webapp/app/components/primitives/SegmentedControl.tsx
index f87863a45b..aca32cbb61 100644
--- a/apps/webapp/app/components/primitives/SegmentedControl.tsx
+++ b/apps/webapp/app/components/primitives/SegmentedControl.tsx
@@ -18,7 +18,7 @@ const sizes = {
 const theme = {
   primary: {
     base: "bg-charcoal-700",
-    active: "text-text-bright hover:bg-charcoal-750/50",
+    active: "text-text-bright hover:bg-hover/50",
     inactive: "text-text-dimmed transition hover:text-text-bright",
     selected: "absolute inset-0 rounded-[2px] outline outline-3 outline-primary",
   },
diff --git a/apps/webapp/app/components/primitives/Select.tsx b/apps/webapp/app/components/primitives/Select.tsx
index 82f750c42e..432cdd679f 100644
--- a/apps/webapp/app/components/primitives/Select.tsx
+++ b/apps/webapp/app/components/primitives/Select.tsx
@@ -30,7 +30,7 @@ const style = {
   },
   secondary: {
     button:
-      "bg-secondary focus-custom border border-charcoal-600 hover:text-text-bright hover:border-charcoal-550 text-text-bright hover:bg-charcoal-600",
+      "bg-secondary focus-custom border border-grid-bright hover:text-text-bright hover:border-grid-bright text-text-bright hover:bg-hover",
   },
 };
 
@@ -591,7 +591,7 @@ export function SelectGroupLabel(props: SelectGroupLabelProps) {
     <Ariakit.SelectGroupLabel
       {...props}
       className={cn(
-        "flex h-[1.375rem] items-center border-b border-charcoal-700 bg-charcoal-750 px-2.5 text-xxs uppercase text-text-bright",
+        "flex h-[1.375rem] items-center border-b border-grid-bright bg-hover px-2.5 text-xxs uppercase text-text-bright",
         props.className
       )}
     />
@@ -601,7 +601,7 @@ export function SelectGroupLabel(props: SelectGroupLabelProps) {
 export interface SelectHeadingProps extends Ariakit.SelectHeadingProps {}
 export function SelectHeading({ render, ...props }: SelectHeadingProps) {
   return (
-    <div className="flex h-[1.375rem] flex-none cursor-default items-center gap-2 border-b border-charcoal-700 bg-charcoal-750 px-2.5 text-xxs uppercase text-text-bright">
+    <div className="flex h-[1.375rem] flex-none cursor-default items-center gap-2 border-b border-grid-bright bg-hover px-2.5 text-xxs uppercase text-text-bright">
       <Ariakit.SelectHeading render={render} />
     </div>
   );
diff --git a/apps/webapp/app/components/primitives/Sheet.tsx b/apps/webapp/app/components/primitives/Sheet.tsx
index 49ad15fe0e..ccfb4e1b1e 100644
--- a/apps/webapp/app/components/primitives/Sheet.tsx
+++ b/apps/webapp/app/components/primitives/Sheet.tsx
@@ -155,7 +155,7 @@ const SheetContent = React.forwardRef<
     >
       <div className="grid max-h-full grid-rows-[2.75rem_1fr] overflow-hidden">
         <div className="flex items-center gap-2 border-b border-grid-bright p-2">
-          <SheetPrimitive.Close className="rounded-sm p-1 transition hover:bg-charcoal-800 disabled:pointer-events-none">
+          <SheetPrimitive.Close className="rounded-sm p-1 transition hover:bg-hover disabled:pointer-events-none">
             <XMarkIcon className="size-4 text-text-dimmed" />
             <span className="sr-only">Close</span>
           </SheetPrimitive.Close>
diff --git a/apps/webapp/app/components/primitives/SheetV3.tsx b/apps/webapp/app/components/primitives/SheetV3.tsx
index bb205f8b42..986db2582b 100644
--- a/apps/webapp/app/components/primitives/SheetV3.tsx
+++ b/apps/webapp/app/components/primitives/SheetV3.tsx
@@ -90,7 +90,7 @@ const SheetTitle = React.forwardRef<
     {...props}
   >
     {children}
-    <SheetPrimitive.Close className="flex items-center gap-1 rounded-sm p-1 pl-0 transition hover:bg-charcoal-750 focus-visible:focus-custom disabled:pointer-events-none">
+    <SheetPrimitive.Close className="flex items-center gap-1 rounded-sm p-1 pl-0 transition hover:bg-hover focus-visible:focus-custom disabled:pointer-events-none">
       <ShortcutKey shortcut={{ key: "esc" }} variant="small" />
       <XMarkIcon className="size-4 text-text-dimmed" />
       <span className="sr-only">Close</span>
diff --git a/apps/webapp/app/components/primitives/SimpleSelect.tsx b/apps/webapp/app/components/primitives/SimpleSelect.tsx
index d7b9e4cccb..fe55a9590f 100644
--- a/apps/webapp/app/components/primitives/SimpleSelect.tsx
+++ b/apps/webapp/app/components/primitives/SimpleSelect.tsx
@@ -102,7 +102,7 @@ const SelectItem = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Item
     <SelectPrimitive.Item
       ref={ref}
       className={cn(
-        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-12 text-sm outline-none transition data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-charcoal-750 focus:bg-charcoal-750/50",
+        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-12 text-sm outline-none transition data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-hover focus:bg-hover/50",
         className
       )}
       {...props}
diff --git a/apps/webapp/app/components/primitives/Slider.tsx b/apps/webapp/app/components/primitives/Slider.tsx
index 928ada018a..697fa36be9 100644
--- a/apps/webapp/app/components/primitives/Slider.tsx
+++ b/apps/webapp/app/components/primitives/Slider.tsx
@@ -5,7 +5,7 @@ import { Icon, RenderIcon } from "./Icon";
 
 const variants = {
   tertiary: {
-    container: "h-6 gap-1 rounded-sm hover:bg-charcoal-700 px-1",
+    container: "h-6 gap-1 rounded-sm hover:bg-hover-bright px-1",
     icons: "h-4 w-4 text-text-bright",
     root: "h-4",
     track: "h-1 bg-grid-bright group-hover:bg-background-dimmed",
diff --git a/apps/webapp/app/components/primitives/Switch.tsx b/apps/webapp/app/components/primitives/Switch.tsx
index 10fb0bf297..1e9310b1d4 100644
--- a/apps/webapp/app/components/primitives/Switch.tsx
+++ b/apps/webapp/app/components/primitives/Switch.tsx
@@ -25,7 +25,7 @@ const variations = {
     container: small.container,
     root: cn(
       small.root,
-      "group-data-[state=unchecked]:bg-charcoal-600 group-data-[state=unchecked]:group-hover:bg-charcoal-500/50"
+      "group-data-[state=unchecked]:bg-charcoal-600 group-data-[state=unchecked]:group-hover:bg-hover"
     ),
     thumb: small.thumb,
     text: cn(
@@ -36,11 +36,11 @@ const variations = {
   "secondary/small": {
     container: cn(
       small.container,
-      "border border-charcoal-600 hover:border-charcoal-550 bg-secondary hover:bg-charcoal-600"
+      "border border-charcoal-600 hover:border-charcoal-550 bg-secondary hover:bg-secondary"
     ),
     root: cn(
       small.root,
-      "group-data-[state=unchecked]:bg-charcoal-550 group-data-[state=unchecked]:group-hover:bg-charcoal-500"
+      "group-data-[state=unchecked]:bg-charcoal-550 group-data-[state=unchecked]:group-hover:bg-hover"
     ),
     thumb: small.thumb,
     text: cn(small.text, "transition text-text-bright group-disabled:group-hover:text-text-dimmed"),
@@ -91,7 +91,7 @@ export const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.
     const switchElement = (
       <div
         className={cn(
-          "inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors group-disabled:cursor-not-allowed group-disabled:opacity-50 group-data-[state=checked]:bg-blue-500 group-data-[state=unchecked]:bg-charcoal-700 group-data-[state=unchecked]:group-hover:bg-charcoal-500/50",
+          "inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors group-disabled:cursor-not-allowed group-disabled:opacity-50 group-data-[state=checked]:bg-blue-500 group-data-[state=unchecked]:bg-charcoal-700 group-data-[state=unchecked]:group-hover:bg-hover",
           root
         )}
       >
diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
index 4db8179c5a..f815209bdb 100644
--- a/apps/webapp/app/components/primitives/Table.tsx
+++ b/apps/webapp/app/components/primitives/Table.tsx
@@ -11,14 +11,14 @@ const variants = {
   bright: {
     header: "bg-background-bright",
     headerCell: "px-3 py-2.5 pb-3 text-sm",
-    cell: "group-hover/table-row:bg-charcoal-750 group-has-[[tabindex='0']:focus]/table-row:bg-charcoal-750",
+    cell: "group-hover/table-row:bg-hover group-has-[[tabindex='0']:focus]/table-row:bg-hover",
     cellSize: "px-3 py-3",
     cellText: "text-xs group-hover/table-row:text-text-bright",
-    stickyCell: "bg-background-bright group-hover/table-row:bg-charcoal-750",
+    stickyCell: "bg-background-bright group-hover/table-row:bg-hover",
     menuButton:
-      "bg-background-bright group-hover/table-row:bg-charcoal-750 group-hover/table-row:ring-charcoal-600/70 group-has-[[tabindex='0']:focus]/table-row:bg-charcoal-750",
-    menuButtonDivider: "group-hover/table-row:border-charcoal-600/70",
-    rowSelected: "bg-charcoal-750 group-hover/table-row:bg-charcoal-750",
+      "bg-background-bright group-hover/table-row:bg-hover group-hover/table-row:ring-grid-bright group-has-[[tabindex='0']:focus]/table-row:bg-hover",
+    menuButtonDivider: "group-hover/table-row:border-grid-bright",
+    rowSelected: "bg-hover group-hover/table-row:bg-hover",
   },
   "bright/no-hover": {
     header: "bg-transparent",
@@ -29,31 +29,31 @@ const variants = {
     stickyCell: "bg-background-bright",
     menuButton: "bg-background-bright",
     menuButtonDivider: "",
-    rowSelected: "bg-charcoal-750",
+    rowSelected: "bg-hover",
   },
   dimmed: {
     header: "bg-background-dimmed",
     headerCell: "px-3 py-2.5 pb-3 text-sm",
-    cell: "group-hover/table-row:bg-charcoal-800 group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
+    cell: "group-hover/table-row:bg-hover group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
     cellSize: "px-3 py-3",
     cellText: "text-xs group-hover/table-row:text-text-bright",
-    stickyCell: "group-hover/table-row:bg-charcoal-800",
+    stickyCell: "group-hover/table-row:bg-hover",
     menuButton:
-      "bg-background-dimmed group-hover/table-row:bg-charcoal-800 group-hover/table-row:ring-grid-bright group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
+      "bg-background-dimmed group-hover/table-row:bg-hover group-hover/table-row:ring-grid-bright group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
     menuButtonDivider: "group-hover/table-row:border-grid-bright",
-    rowSelected: "bg-charcoal-750 group-hover/table-row:bg-charcoal-750",
+    rowSelected: "bg-hover group-hover/table-row:bg-hover",
   },
   "compact/mono": {
     header: "bg-background-dimmed",
     headerCell: "px-2 py-1.5 text-sm",
-    cell: "group-hover/table-row:bg-charcoal-800 group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
+    cell: "group-hover/table-row:bg-hover group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
     cellSize: "px-2 py-1.5",
     cellText: "text-xs font-mono group-hover/table-row:text-text-bright",
-    stickyCell: "group-hover/table-row:bg-charcoal-800",
+    stickyCell: "group-hover/table-row:bg-hover",
     menuButton:
-      "bg-background-dimmed group-hover/table-row:bg-charcoal-800 group-hover/table-row:ring-grid-bright group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
+      "bg-background-dimmed group-hover/table-row:bg-hover group-hover/table-row:ring-grid-bright group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
     menuButtonDivider: "group-hover/table-row:border-grid-bright",
-    rowSelected: "bg-charcoal-750 group-hover/table-row:bg-charcoal-750",
+    rowSelected: "bg-hover group-hover/table-row:bg-hover",
   },
 } as const;
 
@@ -301,7 +301,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
           isSticky && variants[variant].stickyCell,
           isSelected && variants[variant].rowSelected,
           !isSelected &&
-            "group-hover/table-row:before:absolute group-hover/table-row:before:left-0 group-hover/table-row:before:top-[-1px] group-hover/table-row:before:h-px group-hover/table-row:before:w-3 group-hover/table-row:before:bg-charcoal-750 group-hover/table-row:after:absolute group-hover/table-row:after:bottom-0 group-hover/table-row:after:left-0 group-hover/table-row:after:h-px group-hover/table-row:after:w-3 group-hover/table-row:after:bg-charcoal-750 group-focus-visible/table-row:bg-background-bright",
+            "group-hover/table-row:before:absolute group-hover/table-row:before:left-0 group-hover/table-row:before:top-[-1px] group-hover/table-row:before:h-px group-hover/table-row:before:w-3 group-hover/table-row:before:bg-hover group-hover/table-row:after:absolute group-hover/table-row:after:bottom-0 group-hover/table-row:after:left-0 group-hover/table-row:after:h-px group-hover/table-row:after:w-3 group-hover/table-row:after:bg-hover group-focus-visible/table-row:bg-background-bright",
           className
         )}
         colSpan={colSpan}
@@ -361,10 +361,10 @@ export const CopyableTableCell = forwardRef<HTMLTableCellElement, CopyableTableC
                 button={
                   <span
                     className={cn(
-                      "flex size-6 items-center justify-center rounded border border-charcoal-650 bg-charcoal-750",
+                      "flex size-6 items-center justify-center rounded border border-grid-bright bg-hover",
                       copied
                         ? "text-green-500"
-                        : "text-text-dimmed hover:border-charcoal-600 hover:bg-charcoal-700 hover:text-text-bright"
+                        : "text-text-dimmed hover:border-grid-bright hover:bg-hover-bright hover:text-text-bright"
                     )}
                   >
                     {copied ? (
diff --git a/apps/webapp/app/components/primitives/TextArea.tsx b/apps/webapp/app/components/primitives/TextArea.tsx
index f5350a510b..b03b78bb41 100644
--- a/apps/webapp/app/components/primitives/TextArea.tsx
+++ b/apps/webapp/app/components/primitives/TextArea.tsx
@@ -8,7 +8,7 @@ export function TextArea({ className, rows, ...props }: TextAreaProps) {
       {...props}
       rows={rows ?? 6}
       className={cn(
-        "placeholder:text-muted-foreground w-full rounded border border-charcoal-800 bg-charcoal-750 px-3 text-sm text-text-bright transition focus-custom focus-custom file:border-0 file:bg-transparent file:text-base file:font-medium hover:border-charcoal-600 hover:bg-charcoal-650 disabled:cursor-not-allowed disabled:opacity-50",
+        "placeholder:text-muted-foreground w-full rounded border border-charcoal-800 bg-charcoal-750 px-3 text-sm text-text-bright transition focus-custom focus-custom file:border-0 file:bg-transparent file:text-base file:font-medium hover:border-charcoal-600 hover:bg-secondary disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
     />
diff --git a/apps/webapp/app/components/runs/v3/RunTag.tsx b/apps/webapp/app/components/runs/v3/RunTag.tsx
index 14baeca1a3..6eb017d2e3 100644
--- a/apps/webapp/app/components/runs/v3/RunTag.tsx
+++ b/apps/webapp/app/components/runs/v3/RunTag.tsx
@@ -39,7 +39,7 @@ export function RunTag({
           <span className="flex items-center border-y border-r border-charcoal-700 bg-charcoal-800 pr-1.5 text-text-dimmed group-has-[[href]]:group-hover:border-charcoal-650 group-has-[[href]]:group-hover:text-charcoal-300">
             {tagResult.key}
           </span>
-          <span className="flex items-center whitespace-nowrap rounded-r-sm border-y border-r border-charcoal-700 bg-charcoal-750 px-1.5 text-text-dimmed group-hover:rounded-r-none group-has-[[href]]:group-hover:border-charcoal-650 group-has-[[href]]:group-hover:bg-charcoal-700 group-has-[[href]]:group-hover:text-charcoal-300">
+          <span className="flex items-center whitespace-nowrap rounded-r-sm border-y border-r border-charcoal-700 bg-tertiary px-1.5 text-text-dimmed group-hover:rounded-r-none group-has-[[href]]:group-hover:border-charcoal-650 group-has-[[href]]:group-hover:bg-hover-bright group-has-[[href]]:group-hover:text-charcoal-300">
             {tagResult.value}
           </span>
         </>
@@ -99,11 +99,11 @@ function CopyButton({ textToCopy, isHovered }: { textToCopy: string; isHovered:
           onClick={copy}
           onMouseDown={(e) => e.stopPropagation()}
           className={cn(
-            "absolute -right-6 top-0 z-10 size-6 items-center justify-center rounded-r-sm border-y border-r border-charcoal-650 bg-charcoal-750",
+            "absolute -right-6 top-0 z-10 size-6 items-center justify-center rounded-r-sm border-y border-r border-charcoal-650 bg-tertiary",
             isHovered ? "flex" : "hidden",
             copied
               ? "text-green-500"
-              : "text-text-dimmed hover:border-charcoal-600 hover:bg-charcoal-700 hover:text-text-bright"
+              : "text-text-dimmed hover:border-charcoal-600 hover:bg-hover-bright hover:text-text-bright"
           )}
         >
           {copied ? (
@@ -144,9 +144,9 @@ function DeleteButton({
           onClick={handleDelete}
           onMouseDown={(e) => e.stopPropagation()}
           className={cn(
-            "absolute -right-6 top-0 z-10 size-6 items-center justify-center rounded-r-sm border-y border-r border-charcoal-650 bg-charcoal-750",
+            "absolute -right-6 top-0 z-10 size-6 items-center justify-center rounded-r-sm border-y border-r border-charcoal-650 bg-tertiary",
             isHovered ? "flex" : "hidden",
-            "text-text-dimmed hover:border-charcoal-600 hover:bg-charcoal-700 hover:text-rose-400"
+            "text-text-dimmed hover:border-charcoal-600 hover:bg-hover-bright hover:text-rose-400"
           )}
         >
           <XIcon className="size-3.5" />
diff --git a/apps/webapp/app/components/runs/v3/SpanTitle.tsx b/apps/webapp/app/components/runs/v3/SpanTitle.tsx
index fb0105c45d..80e8d87f29 100644
--- a/apps/webapp/app/components/runs/v3/SpanTitle.tsx
+++ b/apps/webapp/app/components/runs/v3/SpanTitle.tsx
@@ -69,7 +69,7 @@ export function SpanCodePathAccessory({
   return (
     <code
       className={cn(
-        "inline-flex items-center gap-0.5 truncate rounded border border-charcoal-700 bg-charcoal-800 px-1.5 py-0.5 font-mono text-text-dimmed",
+        "inline-flex items-center gap-0.5 truncate rounded border border-grid-bright bg-tertiary px-1.5 py-0.5 font-mono text-text-dimmed",
         className
       )}
     >
diff --git a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
index 14cdf5a67b..f3c122c4be 100644
--- a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
+++ b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
@@ -469,7 +469,7 @@ function RunActionsCell({ run, path }: { run: NextRunListItem; path: string }) {
             <Dialog>
               <DialogTrigger
                 asChild
-                className="size-6 rounded-sm p-1 text-text-dimmed transition hover:bg-charcoal-700 hover:text-text-bright"
+                className="size-6 rounded-sm p-1 text-text-dimmed transition hover:bg-hover-bright hover:text-text-bright"
               >
                 <Button
                   variant="small-menu-item"
@@ -492,7 +492,7 @@ function RunActionsCell({ run, path }: { run: NextRunListItem; path: string }) {
             <Dialog>
               <DialogTrigger
                 asChild
-                className="h-6 w-6 rounded-sm p-1 text-text-dimmed transition hover:bg-charcoal-700 hover:text-text-bright"
+                className="h-6 w-6 rounded-sm p-1 text-text-dimmed transition hover:bg-hover-bright hover:text-text-bright"
               >
                 <Button
                   variant="small-menu-item"
@@ -521,7 +521,7 @@ function RunActionsCell({ run, path }: { run: NextRunListItem; path: string }) {
                 <Dialog>
                   <DialogTrigger
                     asChild
-                    className="size-6 rounded-sm p-1 text-text-bright transition hover:bg-charcoal-700"
+                    className="size-6 rounded-sm p-1 text-text-bright transition hover:bg-hover-bright"
                   >
                     <NoSymbolIcon className="size-3" />
                   </DialogTrigger>
@@ -545,7 +545,7 @@ function RunActionsCell({ run, path }: { run: NextRunListItem; path: string }) {
                 <Dialog>
                   <DialogTrigger
                     asChild
-                    className="h-6 w-6 rounded-sm p-1 text-text-bright transition hover:bg-charcoal-700"
+                    className="h-6 w-6 rounded-sm p-1 text-text-bright transition hover:bg-hover-bright"
                   >
                     <ArrowPathIcon className="size-3" />
                   </DialogTrigger>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx
index 5d6a947a42..eace0c316e 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx
@@ -632,7 +632,7 @@ function HelpfulInfoHasTasks({ onClose }: { onClose: () => void }) {
           role="button"
           onClick={() => setIsVideoDialogOpen(true)}
           className={cn(
-            "group flex w-full items-center justify-between gap-2 rounded-md p-1 pr-3 transition hover:bg-charcoal-750",
+            "group flex w-full items-center justify-between gap-2 rounded-md p-1 pr-3 transition hover:bg-hover",
             variants["withIcon"].container
           )}
         >
@@ -827,7 +827,7 @@ function LinkWithIcon({
       target={isExternal ? "_blank" : undefined}
       rel={isExternal ? "noreferrer" : undefined}
       className={cn(
-        "group flex w-full items-center justify-between gap-2 rounded-md p-1 pr-3 transition hover:bg-charcoal-750",
+        "group flex w-full items-center justify-between gap-2 rounded-md p-1 pr-3 transition hover:bg-hover",
         variation.container
       )}
     >
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx
index aebc934ba3..cb4ea846ea 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx
@@ -600,7 +600,7 @@ function LogsDisplay({
                     "flex w-full gap-x-2.5 border-l-2 px-2.5 py-1",
                     log.level === "error" && "border-error/60 bg-error/15 hover:bg-error/25",
                     log.level === "warn" && "border-warning/60 bg-warning/20 hover:bg-warning/30",
-                    log.level === "info" && "border-transparent hover:bg-charcoal-750"
+                    log.level === "info" && "border-transparent hover:bg-hover"
                   )}
                 >
                   <span
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables.new/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables.new/route.tsx
index c52942a8ac..d53548b6b5 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables.new/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.environment-variables.new/route.tsx
@@ -300,7 +300,7 @@ export default function Page() {
                         <TooltipTrigger>
                           <TextLink
                             to={v3BillingPath(organization)}
-                            className="flex w-fit cursor-pointer items-center gap-2 rounded border border-dashed border-charcoal-600 py-2.5 pl-3 pr-4 transition hover:border-charcoal-500 hover:bg-charcoal-850"
+                            className="flex w-fit cursor-pointer items-center gap-2 rounded border border-dashed border-charcoal-600 py-2.5 pl-3 pr-4 transition hover:border-charcoal-500 hover:bg-hover"
                           >
                             <LockClosedIcon className="size-4 text-charcoal-500" />
                             <EnvironmentLabel
@@ -320,7 +320,7 @@ export default function Page() {
                         <TooltipTrigger>
                           <TextLink
                             to={v3BillingPath(organization)}
-                            className="flex w-fit cursor-pointer items-center gap-2 rounded border border-dashed border-charcoal-600 py-2.5 pl-3 pr-4 transition hover:border-charcoal-500 hover:bg-charcoal-850"
+                            className="flex w-fit cursor-pointer items-center gap-2 rounded border border-dashed border-charcoal-600 py-2.5 pl-3 pr-4 transition hover:border-charcoal-500 hover:bg-hover"
                           >
                             <LockClosedIcon className="size-4 text-charcoal-500" />
                             <EnvironmentLabel
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/AITabContent.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/AITabContent.tsx
index b66c66841c..d796f937fa 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/AITabContent.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/AITabContent.tsx
@@ -53,7 +53,7 @@ export function AITabContent({
                   key: (prev?.key ?? 0) + 1,
                 }));
               }}
-              className="block w-full rounded-md border border-grid-dimmed bg-charcoal-800 px-3 py-2 text-left text-sm text-text-dimmed transition-colors hover:border-grid-bright hover:bg-charcoal-750 hover:text-text-bright"
+              className="block w-full rounded-md border border-grid-dimmed bg-charcoal-800 px-3 py-2 text-left text-sm text-text-dimmed transition-colors hover:border-grid-bright hover:bg-hover hover:text-text-bright"
             >
               {example}
             </button>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHistoryPopover.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHistoryPopover.tsx
index 66492ca944..212c5658f8 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHistoryPopover.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/QueryHistoryPopover.tsx
@@ -117,7 +117,7 @@ export function QueryHistoryPopover({
                     onQuerySelected(item);
                     setIsOpen(false);
                   }}
-                  className="flex w-full items-center gap-2 rounded-sm px-2 py-2 outline-none transition-colors focus-custom hover:bg-charcoal-900"
+                  className="flex w-full items-center gap-2 rounded-sm px-2 py-2 outline-none transition-colors focus-custom hover:bg-hover"
                 >
                   <div className="flex flex-1 flex-col items-start gap-0.5 overflow-hidden">
                     {item.title ? (
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/TRQLGuideContent.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/TRQLGuideContent.tsx
index 49cbe26bc1..4c26049552 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/TRQLGuideContent.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/TRQLGuideContent.tsx
@@ -49,7 +49,7 @@ function FunctionCategory({ title, functions }: { title: string; functions: Func
           <SimpleTooltip
             key={fn.name}
             button={
-              <code className="cursor-help rounded bg-charcoal-750 px-1.5 py-0.5 font-mono text-xxs text-indigo-400 transition-colors hover:bg-charcoal-700 hover:text-indigo-300">
+              <code className="cursor-help rounded bg-tertiary px-1.5 py-0.5 font-mono text-xxs text-indigo-400 transition-colors hover:bg-hover-bright hover:text-indigo-300">
                 {fn.name}
               </code>
             }
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
index 1ffd128b30..34e1df61ce 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
@@ -843,7 +843,7 @@ function TasksTreeView({
                       <div
                         className={cn(
                           "flex h-8 w-4 items-center",
-                          node.hasChildren && "hover:bg-charcoal-600"
+                          node.hasChildren && "hover:bg-secondary"
                         )}
                         onClick={(e) => {
                           e.stopPropagation();
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx
index d452a75713..ad5db19134 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx
@@ -1345,7 +1345,7 @@ function RecentRunsPopover<T extends StandardRun | ScheduledRun>({
                   onRunSelected(run);
                   setIsRecentRunsPopoverOpen(false);
                 }}
-                className="flex w-full items-center gap-2 rounded-sm px-2 py-2 outline-none transition-colors focus-custom hover:bg-charcoal-900	"
+                className="flex w-full items-center gap-2 rounded-sm px-2 py-2 outline-none transition-colors focus-custom hover:bg-hover	"
               >
                 <div className="flex flex-col items-start">
                   <Paragraph variant="small/bright">
@@ -1421,7 +1421,7 @@ function RunTemplatesPopover({
               {templates.map((template) => (
                 <div
                   key={template.id}
-                  className="group flex w-full items-center gap-2 rounded-sm px-2 py-2 outline-none transition-colors hover:bg-charcoal-900"
+                  className="group flex w-full items-center gap-2 rounded-sm px-2 py-2 outline-none transition-colors hover:bg-hover"
                 >
                   <button
                     type="button"
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings._index/route.tsx
index e4c3967a36..0df4634740 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings._index/route.tsx
@@ -498,8 +498,8 @@ function HexPopover({ avatar, hex }: { avatar: Avatar; hex: string }) {
               fullWidth
               textAlignLeft
               className={cn(
-                "group-hover:bg-charcoal-700",
-                hex === color.hex ? "bg-charcoal-750 group-hover:bg-charcoal-600/50" : undefined
+                "group-hover:bg-hover-bright",
+                hex === color.hex ? "bg-hover group-hover:bg-secondary" : undefined
               )}
             >
               {color.name}
diff --git a/apps/webapp/app/routes/account.tokens/route.tsx b/apps/webapp/app/routes/account.tokens/route.tsx
index 4ad62d7edc..78326c93c6 100644
--- a/apps/webapp/app/routes/account.tokens/route.tsx
+++ b/apps/webapp/app/routes/account.tokens/route.tsx
@@ -302,7 +302,7 @@ function RevokePersonalAccessToken({ token }: { token: ObfuscatedPersonalAccessT
         <Dialog>
           <DialogTrigger
             asChild
-            className="size-6 rounded-sm p-1 text-error transition hover:bg-charcoal-700"
+            className="size-6 rounded-sm p-1 text-error transition hover:bg-hover-bright"
           >
             <TrashIcon className="size-3" />
           </DialogTrigger>
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.streams.$streamKey/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.streams.$streamKey/route.tsx
index a1d9415970..72518e055a 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.streams.$streamKey/route.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.streams.$streamKey/route.tsx
@@ -455,7 +455,7 @@ function StreamChunkLine({
 
   return (
     <div
-      className="group flex gap-3 py-1 hover:bg-charcoal-800"
+      className="group flex gap-3 py-1 hover:bg-hover"
       style={{
         position: "absolute",
         top: 0,
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
index 4e1c5ce40d..8f0adca0b3 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.select-plan.tsx
@@ -827,7 +827,7 @@ export function TierEnterprise() {
           <Feedback
             defaultValue="enterprise"
             button={
-              <div className="flex h-10 w-full cursor-pointer items-center justify-center rounded border border-charcoal-600 bg-tertiary px-8 text-base font-medium transition hover:border-charcoal-550 hover:bg-charcoal-600">
+              <div className="flex h-10 w-full cursor-pointer items-center justify-center rounded border border-charcoal-600 bg-tertiary px-8 text-base font-medium transition hover:border-charcoal-550 hover:bg-secondary">
                 <span className="text-center text-text-bright">Contact us</span>
               </div>
             }
diff --git a/apps/webapp/app/tailwind.css b/apps/webapp/app/tailwind.css
index 655d67ddf0..306c125480 100644
--- a/apps/webapp/app/tailwind.css
+++ b/apps/webapp/app/tailwind.css
@@ -28,10 +28,12 @@
 
   /* Text selection styles */
   ::selection {
-    @apply bg-text-bright/30 text-text-bright;
+    background-color: color-mix(in srgb, var(--color-text-bright) 30%, transparent);
+    @apply text-text-bright;
   }
   ::-moz-selection {
-    @apply bg-text-bright/30 text-text-bright;
+    background-color: color-mix(in srgb, var(--color-text-bright) 30%, transparent);
+    @apply text-text-bright;
   }
 
   /* Theme color variables */
@@ -46,6 +48,8 @@
     --color-background-dimmed: #F5F5F7; /* lighter than charcoal[100] */
     --color-grid-bright: #B5B8C0; /* charcoal[300] */
     --color-grid-dimmed: #D7D9DD; /* charcoal[200] */
+    --color-hover: #D7D9DD; /* charcoal[200] - hover backgrounds */
+    --color-hover-bright: #E8E9EC; /* charcoal[100] - brighter hover */
 
     /* shadcn charts */
     --chart-1: 12 76% 61%;
@@ -66,6 +70,8 @@
     --color-background-dimmed: #15171A; /* charcoal[850] */
     --color-grid-bright: #272A2E; /* charcoal[700] */
     --color-grid-dimmed: #212327; /* charcoal[750] */
+    --color-hover: #212327; /* charcoal[750] - hover backgrounds */
+    --color-hover-bright: #272A2E; /* charcoal[700] - brighter hover */
 
     /* shadcn charts */
     --chart-1: 220 70% 50%;
@@ -180,7 +186,10 @@
     @apply border-l-2 border-grid-bright pl-3 my-2 italic;
   }
   & a {
-    @apply text-blue-500 dark:text-blue-400 hover:underline;
+    @apply text-blue-500 hover:underline;
+  }
+  .dark & a {
+    @apply text-blue-400;
   }
   & strong {
     @apply font-semibold text-text-bright;
@@ -218,7 +227,10 @@
   /* Override the bg-muted/40 class to let inline styles work */
   & [data-code-block] pre {
     background-color: inherit !important;
-    @apply scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-400 dark:scrollbar-thumb-charcoal-600;
+    @apply scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-400;
+  }
+  .dark & [data-code-block] pre {
+    @apply scrollbar-thumb-charcoal-600;
   }
   & [data-code-block] pre code {
     @apply bg-transparent;
diff --git a/apps/webapp/tailwind.config.js b/apps/webapp/tailwind.config.js
index c6d8070692..82a3d1e409 100644
--- a/apps/webapp/tailwind.config.js
+++ b/apps/webapp/tailwind.config.js
@@ -238,6 +238,8 @@ module.exports = {
         "background-dimmed": "var(--color-background-dimmed)",
         "grid-bright": "var(--color-grid-bright)",
         "grid-dimmed": "var(--color-grid-dimmed)",
+        hover: "var(--color-hover)",
+        "hover-bright": "var(--color-hover-bright)",
         success,
         pending,
         warning,