diff --git a/frontend/src/components/features/controls/agent-status-bar.tsx b/frontend/src/components/features/controls/agent-status-bar.tsx
index 614c491fa3a7..715db9a1b750 100644
--- a/frontend/src/components/features/controls/agent-status-bar.tsx
+++ b/frontend/src/components/features/controls/agent-status-bar.tsx
@@ -55,7 +55,7 @@ export function AgentStatusBar() {
 
   return (
     <div className="flex flex-col items-center">
-      <div className="flex items-center bg-sub px-2 py-1 text-gray-400 rounded-[100px] text-sm gap-[6px]">
+      <div className="flex items-center bg-base-secondary px-2 py-1 text-gray-400 rounded-[100px] text-sm gap-[6px]">
         <div
           className={`w-2 h-2 rounded-full animate-pulse ${AGENT_STATUS_MAP[curAgentState].indicator}`}
         />
diff --git a/frontend/src/components/features/conversation-panel/conversation-panel.tsx b/frontend/src/components/features/conversation-panel/conversation-panel.tsx
index 440af5cfe0cc..5aeb69d7d318 100644
--- a/frontend/src/components/features/conversation-panel/conversation-panel.tsx
+++ b/frontend/src/components/features/conversation-panel/conversation-panel.tsx
@@ -73,7 +73,7 @@ export function ConversationPanel({ onClose }: ConversationPanelProps) {
     <div
       ref={ref}
       data-testid="conversation-panel"
-      className="w-[350px] h-full border border-neutral-700 bg-sub rounded-xl overflow-y-auto"
+      className="w-[350px] h-full border border-neutral-700 bg-base-secondary rounded-xl overflow-y-auto"
     >
       <div className="pt-4 px-4 flex items-center justify-between">
         {isFetching && <LoadingSpinner size="small" />}
diff --git a/frontend/src/components/features/file-explorer/file-explorer-header.tsx b/frontend/src/components/features/file-explorer/file-explorer-header.tsx
index fc323f65d115..d28059514601 100644
--- a/frontend/src/components/features/file-explorer/file-explorer-header.tsx
+++ b/frontend/src/components/features/file-explorer/file-explorer-header.tsx
@@ -19,7 +19,7 @@ export function FileExplorerHeader({
   return (
     <div
       className={cn(
-        "sticky top-0 bg-sub",
+        "sticky top-0 bg-base-secondary",
         "flex items-center",
         !isOpen ? "justify-center" : "justify-between",
       )}
diff --git a/frontend/src/components/features/file-explorer/file-explorer.tsx b/frontend/src/components/features/file-explorer/file-explorer.tsx
index 24329452b76f..c654ba35d95a 100644
--- a/frontend/src/components/features/file-explorer/file-explorer.tsx
+++ b/frontend/src/components/features/file-explorer/file-explorer.tsx
@@ -54,7 +54,7 @@ export function FileExplorer({ isOpen, onToggle }: FileExplorerProps) {
     <div data-testid="file-explorer" className="relative h-full">
       <div
         className={cn(
-          "bg-sub h-full border-r-1 border-r-neutral-600 flex flex-col",
+          "bg-base-secondary h-full border-r-1 border-r-neutral-600 flex flex-col",
           !isOpen ? "w-12" : "w-60",
         )}
       >
diff --git a/frontend/src/components/features/settings/optional-tag.tsx b/frontend/src/components/features/settings/optional-tag.tsx
index 0e6352bd8a1f..64c9cc913a99 100644
--- a/frontend/src/components/features/settings/optional-tag.tsx
+++ b/frontend/src/components/features/settings/optional-tag.tsx
@@ -1,3 +1,3 @@
 export function OptionalTag() {
-  return <span className="text-xs text-subtle-alt">(Optional)</span>;
+  return <span className="text-xs text-tertiary-alt">(Optional)</span>;
 }
diff --git a/frontend/src/components/features/settings/settings-dropdown-input.tsx b/frontend/src/components/features/settings/settings-dropdown-input.tsx
index 83e59b6a8997..5bd89d7cd4d1 100644
--- a/frontend/src/components/features/settings/settings-dropdown-input.tsx
+++ b/frontend/src/components/features/settings/settings-dropdown-input.tsx
@@ -38,12 +38,12 @@ export function SettingsDropdownInput({
         isDisabled={isDisabled}
         className="w-full"
         classNames={{
-          popoverContent: "bg-subtle rounded-xl border border-[#717888]",
+          popoverContent: "bg-tertiary rounded-xl border border-[#717888]",
         }}
         inputProps={{
           classNames: {
             inputWrapper:
-              "bg-subtle border border-[#717888] h-10 w-full rounded p-2 placeholder:italic",
+              "bg-tertiary border border-[#717888] h-10 w-full rounded p-2 placeholder:italic",
           },
         }}
       >
diff --git a/frontend/src/components/features/settings/settings-input.tsx b/frontend/src/components/features/settings/settings-input.tsx
index ee50c27ac3fc..a9ba98911a50 100644
--- a/frontend/src/components/features/settings/settings-input.tsx
+++ b/frontend/src/components/features/settings/settings-input.tsx
@@ -44,7 +44,7 @@ export function SettingsInput({
         defaultValue={defaultValue}
         placeholder={placeholder}
         className={cn(
-          "bg-subtle border border-[#717888] h-10 w-full rounded p-2 placeholder:italic placeholder:text-subtle-alt",
+          "bg-tertiary border border-[#717888] h-10 w-full rounded p-2 placeholder:italic placeholder:text-tertiary-alt",
           "disabled:bg-[#2D2F36] disabled:border-[#2D2F36] disabled:cursor-not-allowed",
         )}
       />
diff --git a/frontend/src/components/features/settings/styled-switch-component.tsx b/frontend/src/components/features/settings/styled-switch-component.tsx
index 3e44cab262a3..c00a55d18ce5 100644
--- a/frontend/src/components/features/settings/styled-switch-component.tsx
+++ b/frontend/src/components/features/settings/styled-switch-component.tsx
@@ -12,13 +12,13 @@ export function StyledSwitchComponent({
       className={cn(
         "w-12 h-6 rounded-xl flex items-center p-1.5 cursor-pointer",
         isToggled && "justify-end bg-primary",
-        !isToggled && "justify-start bg-[#1F2228] border border-subtle-alt",
+        !isToggled && "justify-start bg-[#1F2228] border border-tertiary-alt",
       )}
     >
       <div
         className={cn(
           "bg-[#1F2228] w-3 h-3 rounded-xl",
-          isToggled ? "bg-[#1F2228]" : "bg-subtle-alt",
+          isToggled ? "bg-[#1F2228]" : "bg-tertiary-alt",
         )}
       />
     </div>
diff --git a/frontend/src/components/layout/beta-badge.tsx b/frontend/src/components/layout/beta-badge.tsx
index 943a2f32ac1b..0ef82837eed3 100644
--- a/frontend/src/components/layout/beta-badge.tsx
+++ b/frontend/src/components/layout/beta-badge.tsx
@@ -4,7 +4,7 @@ import { I18nKey } from "#/i18n/declaration";
 export function BetaBadge() {
   const { t } = useTranslation();
   return (
-    <span className="text-[11px] leading-5 text-root bg-neutral-400 px-1 rounded-xl">
+    <span className="text-[11px] leading-5 text-base bg-neutral-400 px-1 rounded-xl">
       {t(I18nKey.BADGE$BETA)}
     </span>
   );
diff --git a/frontend/src/components/layout/container.tsx b/frontend/src/components/layout/container.tsx
index fa187f075f9b..490b9a37a226 100644
--- a/frontend/src/components/layout/container.tsx
+++ b/frontend/src/components/layout/container.tsx
@@ -23,7 +23,7 @@ export function Container({
   return (
     <div
       className={clsx(
-        "bg-sub border border-neutral-600 rounded-xl flex flex-col",
+        "bg-base-secondary border border-neutral-600 rounded-xl flex flex-col",
         className,
       )}
     >
diff --git a/frontend/src/components/layout/count-badge.tsx b/frontend/src/components/layout/count-badge.tsx
index ad32e19b9976..96f0cf9639a9 100644
--- a/frontend/src/components/layout/count-badge.tsx
+++ b/frontend/src/components/layout/count-badge.tsx
@@ -1,6 +1,6 @@
 export function CountBadge({ count }: { count: number }) {
   return (
-    <span className="text-[11px] leading-5 text-root bg-neutral-400 px-1 rounded-xl">
+    <span className="text-[11px] leading-5 text-base bg-neutral-400 px-1 rounded-xl">
       {count}
     </span>
   );
diff --git a/frontend/src/components/layout/nav-tab.tsx b/frontend/src/components/layout/nav-tab.tsx
index ac486d1c433d..678dfb327215 100644
--- a/frontend/src/components/layout/nav-tab.tsx
+++ b/frontend/src/components/layout/nav-tab.tsx
@@ -17,10 +17,10 @@ export function NavTab({ to, label, icon, isBeta }: NavTabProps) {
       to={to}
       className={({ isActive }) =>
         cn(
-          "px-2 border-b border-r border-neutral-600 bg-root flex-1",
+          "px-2 border-b border-r border-neutral-600 bg-base flex-1",
           "first-of-type:rounded-tl-xl last-of-type:rounded-tr-xl last-of-type:border-r-0",
           "flex items-center gap-2",
-          isActive && "bg-sub",
+          isActive && "bg-base-secondary",
         )
       }
     >
diff --git a/frontend/src/components/shared/action-tooltip.tsx b/frontend/src/components/shared/action-tooltip.tsx
index 402e744f24ca..e287aa916d31 100644
--- a/frontend/src/components/shared/action-tooltip.tsx
+++ b/frontend/src/components/shared/action-tooltip.tsx
@@ -27,7 +27,7 @@ export function ActionTooltip({ type, onClick }: ActionTooltipProps) {
             ? t(I18nKey.ACTION$CONFIRM)
             : t(I18nKey.ACTION$REJECT)
         }
-        className="bg-neutral-700 rounded-full p-1 hover:bg-sub"
+        className="bg-neutral-700 rounded-full p-1 hover:bg-base-secondary"
         onClick={onClick}
       >
         {type === "confirm" ? <ConfirmIcon /> : <RejectIcon />}
diff --git a/frontend/src/components/shared/modals/base-modal/base-modal.tsx b/frontend/src/components/shared/modals/base-modal/base-modal.tsx
index 2dacd927e4fd..6d16ce450d51 100644
--- a/frontend/src/components/shared/modals/base-modal/base-modal.tsx
+++ b/frontend/src/components/shared/modals/base-modal/base-modal.tsx
@@ -43,7 +43,7 @@ export function BaseModal({
       backdrop="blur"
       hideCloseButton
       size="sm"
-      className="bg-root rounded-lg"
+      className="bg-base rounded-lg"
     >
       <ModalContent className={contentClassName}>
         {(closeModal) => (
diff --git a/frontend/src/components/shared/modals/modal-body.tsx b/frontend/src/components/shared/modals/modal-body.tsx
index abefc1b27f9d..9ed510b093ba 100644
--- a/frontend/src/components/shared/modals/modal-body.tsx
+++ b/frontend/src/components/shared/modals/modal-body.tsx
@@ -12,7 +12,7 @@ export function ModalBody({ testID, children, className }: ModalBodyProps) {
     <div
       data-testid={testID}
       className={cn(
-        "bg-root flex flex-col gap-6 items-center w-[384px] p-6 rounded-xl",
+        "bg-base flex flex-col gap-6 items-center w-[384px] p-6 rounded-xl",
         className,
       )}
     >
diff --git a/frontend/src/components/shared/modals/security/invariant/invariant.tsx b/frontend/src/components/shared/modals/security/invariant/invariant.tsx
index f71e0fb6f91a..ea03e8e159bf 100644
--- a/frontend/src/components/shared/modals/security/invariant/invariant.tsx
+++ b/frontend/src/components/shared/modals/security/invariant/invariant.tsx
@@ -247,7 +247,7 @@ function SecurityInvariant() {
 
   return (
     <div className="flex flex-1 w-full h-full">
-      <div className="w-60 bg-sub border-r border-r-neutral-600 p-4 flex-shrink-0">
+      <div className="w-60 bg-base-secondary border-r border-r-neutral-600 p-4 flex-shrink-0">
         <div className="text-center mb-2">
           <InvariantLogoIcon className="mx-auto mb-1" />
           <b>{t(I18nKey.INVARIANT$INVARIANT_ANALYZER_LABEL)}</b>
@@ -285,7 +285,7 @@ function SecurityInvariant() {
           </div>
         </ul>
       </div>
-      <div className="flex flex-col min-h-0 w-full overflow-y-auto bg-root">
+      <div className="flex flex-col min-h-0 w-full overflow-y-auto bg-base">
         {sections[activeSection as SectionType]}
       </div>
     </div>
diff --git a/frontend/src/components/shared/modals/settings/model-selector.tsx b/frontend/src/components/shared/modals/settings/model-selector.tsx
index 8a21317864ef..a316bb7c9fdf 100644
--- a/frontend/src/components/shared/modals/settings/model-selector.tsx
+++ b/frontend/src/components/shared/modals/settings/model-selector.tsx
@@ -84,12 +84,12 @@ export function ModelSelector({
           defaultSelectedKey={selectedProvider ?? undefined}
           selectedKey={selectedProvider}
           classNames={{
-            popoverContent: "bg-subtle rounded-xl border border-[#717888]",
+            popoverContent: "bg-tertiary rounded-xl border border-[#717888]",
           }}
           inputProps={{
             classNames: {
               inputWrapper:
-                "bg-subtle border border-[#717888] h-10 w-full rounded p-2 placeholder:italic",
+                "bg-tertiary border border-[#717888] h-10 w-full rounded p-2 placeholder:italic",
             },
           }}
         >
@@ -135,12 +135,12 @@ export function ModelSelector({
           selectedKey={selectedModel}
           defaultSelectedKey={selectedModel ?? undefined}
           classNames={{
-            popoverContent: "bg-subtle rounded-xl border border-[#717888]",
+            popoverContent: "bg-tertiary rounded-xl border border-[#717888]",
           }}
           inputProps={{
             classNames: {
               inputWrapper:
-                "bg-subtle border border-[#717888] h-10 w-full rounded p-2 placeholder:italic",
+                "bg-tertiary border border-[#717888] h-10 w-full rounded p-2 placeholder:italic",
             },
           }}
         >
diff --git a/frontend/src/components/shared/modals/settings/settings-modal.tsx b/frontend/src/components/shared/modals/settings/settings-modal.tsx
index 51b5dac327f0..62257d8d2763 100644
--- a/frontend/src/components/shared/modals/settings/settings-modal.tsx
+++ b/frontend/src/components/shared/modals/settings/settings-modal.tsx
@@ -21,7 +21,7 @@ export function SettingsModal({ onClose, settings }: SettingsModalProps) {
     <ModalBackdrop>
       <div
         data-testid="ai-config-modal"
-        className="bg-root min-w-[384px] p-6 rounded-xl flex flex-col gap-2"
+        className="bg-base min-w-[384px] p-6 rounded-xl flex flex-col gap-2"
       >
         {aiConfigOptions.error && (
           <p className="text-danger text-xs">{aiConfigOptions.error.message}</p>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index d585d9ce0192..00a234baa46c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -9,7 +9,7 @@
   --bg-editor-sidebar: #24272e;
   --bg-editor-active: #31343d;
   --border-editor-sidebar: #3c3c4a;
-  background-color: var(--root) !important;
+  background-color: var(--base) !important;
   --bg-neutral-muted: #afb8c133;
 }
 
diff --git a/frontend/src/routes/_oh._index/route.tsx b/frontend/src/routes/_oh._index/route.tsx
index d5e517a17476..15d16e02d6d8 100644
--- a/frontend/src/routes/_oh._index/route.tsx
+++ b/frontend/src/routes/_oh._index/route.tsx
@@ -29,7 +29,7 @@ function Home() {
   const latestConversation = localStorage.getItem("latest_conversation_id");
 
   return (
-    <div className="bg-sub h-full rounded-xl flex flex-col items-center justify-center relative overflow-y-auto px-2">
+    <div className="bg-base-secondary h-full rounded-xl flex flex-col items-center justify-center relative overflow-y-auto px-2">
       <HeroHeading />
       <div className="flex flex-col gap-8 w-full md:w-[600px] items-center">
         <div className="flex flex-col gap-2 w-full">
diff --git a/frontend/src/routes/_oh.app._index/route.tsx b/frontend/src/routes/_oh.app._index/route.tsx
index b67b61b13841..521a3f6d927b 100644
--- a/frontend/src/routes/_oh.app._index/route.tsx
+++ b/frontend/src/routes/_oh.app._index/route.tsx
@@ -75,7 +75,7 @@ function FileViewer() {
   };
 
   return (
-    <div className="flex h-full bg-root relative">
+    <div className="flex h-full bg-base relative">
       <FileExplorer isOpen={fileExplorerIsOpen} onToggle={toggleFileExplorer} />
       <div className="w-full h-full flex flex-col">
         {selectedPath && (
diff --git a/frontend/src/routes/_oh.app/route.tsx b/frontend/src/routes/_oh.app/route.tsx
index 600240ad43d7..a52e63825fd1 100644
--- a/frontend/src/routes/_oh.app/route.tsx
+++ b/frontend/src/routes/_oh.app/route.tsx
@@ -127,7 +127,7 @@ function AppContent() {
         orientation={Orientation.HORIZONTAL}
         className="grow h-full min-h-0 min-w-0"
         initialSize={500}
-        firstClassName="rounded-xl overflow-hidden border border-neutral-600 bg-sub"
+        firstClassName="rounded-xl overflow-hidden border border-neutral-600 bg-base-secondary"
         secondClassName="flex flex-col overflow-hidden"
         firstChild={<ChatInterface />}
         secondChild={
diff --git a/frontend/src/routes/_oh/route.tsx b/frontend/src/routes/_oh/route.tsx
index 117449d0db84..55ec6b783836 100644
--- a/frontend/src/routes/_oh/route.tsx
+++ b/frontend/src/routes/_oh/route.tsx
@@ -91,7 +91,7 @@ export default function MainApp() {
   return (
     <div
       data-testid="root-layout"
-      className="bg-root p-3 h-screen md:min-w-[1024px] overflow-x-hidden flex flex-col md:flex-row gap-3"
+      className="bg-base p-3 h-screen md:min-w-[1024px] overflow-x-hidden flex flex-col md:flex-row gap-3"
     >
       <Sidebar />
 
diff --git a/frontend/src/routes/account-settings.tsx b/frontend/src/routes/account-settings.tsx
index dc6b1a1b4127..05116104e304 100644
--- a/frontend/src/routes/account-settings.tsx
+++ b/frontend/src/routes/account-settings.tsx
@@ -388,7 +388,7 @@ function AccountSettings() {
         </div>
       </form>
 
-      <footer className="flex gap-6 p-6 justify-end border-t border-t-subtle">
+      <footer className="flex gap-6 p-6 justify-end border-t border-t-tertiary">
         <BrandButton
           type="button"
           variant="secondary"
@@ -411,7 +411,7 @@ function AccountSettings() {
         <ModalBackdrop>
           <div
             data-testid="reset-modal"
-            className="bg-root p-4 rounded-xl flex flex-col gap-4"
+            className="bg-base p-4 rounded-xl flex flex-col gap-4"
           >
             <p>Are you sure you want to reset all settings?</p>
             <div className="w-full flex gap-2">
diff --git a/frontend/src/routes/settings.tsx b/frontend/src/routes/settings.tsx
index 652980a84031..ea66c296ffe8 100644
--- a/frontend/src/routes/settings.tsx
+++ b/frontend/src/routes/settings.tsx
@@ -11,9 +11,9 @@ function SettingsScreen() {
   return (
     <main
       data-testid="settings-screen"
-      className="bg-sub border border-subtle h-full rounded-xl flex flex-col"
+      className="bg-base-secondary border border-tertiary h-full rounded-xl flex flex-col"
     >
-      <header className="px-3 py-1.5 border-b border-b-subtle flex items-center gap-2">
+      <header className="px-3 py-1.5 border-b border-b-tertiary flex items-center gap-2">
         <SettingsIcon width={16} height={16} />
         <h1 className="text-sm leading-6">Settings</h1>
       </header>
@@ -21,7 +21,7 @@ function SettingsScreen() {
       {isSaas && BILLING_SETTINGS() && (
         <nav
           data-testid="settings-navbar"
-          className="flex items-end gap-12 px-11 border-b border-subtle"
+          className="flex items-end gap-12 px-11 border-b border-tertiary"
         >
           {[
             { to: "/settings", text: "Account" },
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 08f1a18d547d..5299c995da16 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -10,12 +10,12 @@ export default {
     extend: {
       colors: {
         primary: "#C9B974",
-        root: "#171717",
-        sub: "#262626",
+        base: "#171717",
+        "base-secondary": "#262626",
         danger: "#E76A5E",
         success: "#A5E75E",
-        subtle: "#454545",
-        "subtle-alt": "#B7BDC2",
+        tertiary: "#454545",
+        "tertiary-light": "#B7BDC2",
       },
     },
   },