diff --git a/.changeset/green-frogs-glow.md b/.changeset/green-frogs-glow.md
new file mode 100644
index 00000000..d0b7c15f
--- /dev/null
+++ b/.changeset/green-frogs-glow.md
@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+feat: Add text-brand semantic color tokens for theme flexibility
diff --git a/packages/app/src/AuthPage.tsx b/packages/app/src/AuthPage.tsx
index 377d8cf1..8b2aca4d 100644
--- a/packages/app/src/AuthPage.tsx
+++ b/packages/app/src/AuthPage.tsx
@@ -138,7 +138,7 @@ export default function AuthPage({ action }: { action: 'register' | 'login' }) {
               : isRegister
                 ? 'Register for '
                 : 'Login to '}
-            <span className="text-success fw-bold">HyperDX</span>
+            <span className="text-brand fw-bold">HyperDX</span>
           </div>
           {action === 'login' && (
             <div className="text-center mb-2 ">Welcome back!</div>
diff --git a/packages/app/src/DBDashboardImportPage.tsx b/packages/app/src/DBDashboardImportPage.tsx
index f8f07772..faaffb50 100644
--- a/packages/app/src/DBDashboardImportPage.tsx
+++ b/packages/app/src/DBDashboardImportPage.tsx
@@ -110,7 +110,7 @@ function FileSelection({
                 <Dropzone.Accept>
                   <IconUpload
                     size={52}
-                    color="var(--color-text-success)"
+                    color="var(--color-text-brand)"
                     stroke={1.5}
                   />
                 </Dropzone.Accept>
diff --git a/packages/app/src/Icon.tsx b/packages/app/src/Icon.tsx
index 36fc35ee..873602b8 100644
--- a/packages/app/src/Icon.tsx
+++ b/packages/app/src/Icon.tsx
@@ -10,7 +10,7 @@ export default function Icon({ size = 16 }: { size?: number }) {
       <g clipPath="url(#clip0_614_1164)">
         <path
           d="M256 0L477.703 128V384L256 512L34.2975 384V128L256 0Z"
-          fill="var(--color-bg-brand)"
+          fill="var(--color-text-brand)"
         />
         <path
           d="M311.365 84.4663C314.818 86.9946 316.431 92.1862 315.256 96.9926L284.313 223.563H341.409C344.836 223.563 347.936 226.127 349.295 230.086C350.655 234.046 350.014 238.644 347.665 241.786L210.211 425.598C207.472 429.26 203.089 430.062 199.635 427.534C196.182 425.005 194.569 419.814 195.744 415.007L226.686 288.437H169.591C166.164 288.437 163.064 285.873 161.705 281.914C160.345 277.954 160.986 273.356 163.335 270.214L300.789 86.4023C303.528 82.7403 307.911 81.938 311.365 84.4663Z"
diff --git a/packages/app/src/OnboardingChecklist.tsx b/packages/app/src/OnboardingChecklist.tsx
index cb7aa813..331d1c35 100644
--- a/packages/app/src/OnboardingChecklist.tsx
+++ b/packages/app/src/OnboardingChecklist.tsx
@@ -193,13 +193,13 @@ const OnboardingChecklist = ({
                     alignItems: 'center',
                     justifyContent: 'center',
                     border: step.isComplete
-                      ? '1px solid var(--color-text-success)'
+                      ? '1px solid var(--color-text-brand)'
                       : '1px solid var(--color-border)',
                     backgroundColor: step.isComplete
                       ? 'transparent'
                       : 'var(--color-bg-muted)',
                     color: step.isComplete
-                      ? 'var(--color-text-success)'
+                      ? 'var(--color-text-brand)'
                       : 'var(--color-text)',
                     flexShrink: 0,
                   }}
diff --git a/packages/app/src/components/DBInfraPanel.tsx b/packages/app/src/components/DBInfraPanel.tsx
index 3fe454e1..485e3380 100644
--- a/packages/app/src/components/DBInfraPanel.tsx
+++ b/packages/app/src/components/DBInfraPanel.tsx
@@ -244,7 +244,7 @@ export default ({
                         add(new Date(timestamp), { days: 1 }),
                       ]}
                       anchorEvent={{
-                        label: <div className="text-success">This Event</div>,
+                        label: <div className="text-brand">This Event</div>,
                         timestamp: new Date(timestamp).toISOString(),
                       }}
                     />
diff --git a/packages/app/src/components/ExpandableRowTable.tsx b/packages/app/src/components/ExpandableRowTable.tsx
index 1fc7808e..6cf9bce4 100644
--- a/packages/app/src/components/ExpandableRowTable.tsx
+++ b/packages/app/src/components/ExpandableRowTable.tsx
@@ -154,7 +154,7 @@ const ExpandButton = memo(
           type="button"
           className={cx(styles.expandButton, {
             [styles.expanded]: isExpanded,
-            'text-success': highlightedLineId === rowId,
+            'text-brand': highlightedLineId === rowId,
             'text-muted': highlightedLineId !== rowId,
           })}
           onClick={e => {
diff --git a/packages/app/src/components/InputLanguageSwitch.tsx b/packages/app/src/components/InputLanguageSwitch.tsx
index b79ced8a..d700a538 100644
--- a/packages/app/src/components/InputLanguageSwitch.tsx
+++ b/packages/app/src/components/InputLanguageSwitch.tsx
@@ -25,7 +25,7 @@ export default function InputLanguageSwitch({
         </Text>
       )}
       <Text
-        c={language === 'sql' ? 'var(--color-text-success)' : 'gray'}
+        c={language === 'sql' ? 'var(--color-text-brand)' : 'gray'}
         onClick={() => onLanguageChange('sql')}
         size="xs"
         role="button"
@@ -37,7 +37,7 @@ export default function InputLanguageSwitch({
         size="xs"
         role="button"
         fw={500}
-        c={language === 'lucene' ? 'var(--color-text-success)' : 'gray'}
+        c={language === 'lucene' ? 'var(--color-text-brand)' : 'gray'}
         onClick={() => onLanguageChange('lucene')}
       >
         Lucene
diff --git a/packages/app/src/components/TimePicker/TimePicker.tsx b/packages/app/src/components/TimePicker/TimePicker.tsx
index 78228e19..eb46596e 100644
--- a/packages/app/src/components/TimePicker/TimePicker.tsx
+++ b/packages/app/src/components/TimePicker/TimePicker.tsx
@@ -223,7 +223,7 @@ const TimePickerComponent = ({
           data-testid="time-picker-input"
           leftSection={
             isLiveMode ? (
-              <IconBolt size={16} className="text-success" />
+              <IconBolt size={16} className="text-brand" />
             ) : (
               <IconCalendarFilled size={16} />
             )
@@ -231,7 +231,7 @@ const TimePickerComponent = ({
           styles={{
             input: {
               color: isLiveMode
-                ? 'var(--color-text-success)'
+                ? 'var(--color-text-brand)'
                 : 'var(--color-text)',
             },
           }}
diff --git a/packages/app/src/components/charts/DisplaySwitcher.tsx b/packages/app/src/components/charts/DisplaySwitcher.tsx
index b75acf8c..7b59e582 100644
--- a/packages/app/src/components/charts/DisplaySwitcher.tsx
+++ b/packages/app/src/components/charts/DisplaySwitcher.tsx
@@ -30,7 +30,7 @@ function DisplaySwitcher<T extends string>({
             size="xs"
             me={2}
             className={cx({
-              'text-success': value === optionValue,
+              'text-brand': value === optionValue,
               'text-muted-hover': value !== optionValue,
             })}
             disabled={disabled}
diff --git a/packages/app/src/theme/semanticColorsGrouped.ts b/packages/app/src/theme/semanticColorsGrouped.ts
index 6885d599..626e5fe9 100644
--- a/packages/app/src/theme/semanticColorsGrouped.ts
+++ b/packages/app/src/theme/semanticColorsGrouped.ts
@@ -14,7 +14,6 @@ export const semanticColorsGrouped = {
     'color-bg-success',
     'color-bg-danger',
     'color-bg-warning',
-    'color-bg-brand',
     'color-bg-modal',
     'color-bg-code',
     'color-bg-kbd',
@@ -30,6 +29,8 @@ export const semanticColorsGrouped = {
     'color-text-muted-hover',
     'color-text-success',
     'color-text-success-hover',
+    'color-text-brand',
+    'color-text-brand-hover',
     'color-text-danger',
   ],
   icons: ['color-icon-primary', 'color-icon-muted'],
diff --git a/packages/app/styles/SessionSubpanelV2.module.scss b/packages/app/styles/SessionSubpanelV2.module.scss
index 513a1ca5..69559e3a 100644
--- a/packages/app/styles/SessionSubpanelV2.module.scss
+++ b/packages/app/styles/SessionSubpanelV2.module.scss
@@ -59,7 +59,7 @@
   }
 
   .eventRowTitle {
-    color: var(--color-text-success);
+    color: var(--color-text-brand);
   }
 }
 
diff --git a/packages/app/styles/SessionsPage.module.scss b/packages/app/styles/SessionsPage.module.scss
index c79d2cf8..27b37010 100644
--- a/packages/app/styles/SessionsPage.module.scss
+++ b/packages/app/styles/SessionsPage.module.scss
@@ -1,7 +1,7 @@
 .sessionCard {
   &:hover {
     .emailText {
-      color: var(--color-text-success);
+      color: var(--color-text-brand);
     }
   }
 }
diff --git a/packages/app/styles/SourceSelectControlled.module.scss b/packages/app/styles/SourceSelectControlled.module.scss
index efc8e37e..ce218646 100644
--- a/packages/app/styles/SourceSelectControlled.module.scss
+++ b/packages/app/styles/SourceSelectControlled.module.scss
@@ -1,12 +1,12 @@
 .sourceSchemaPreviewButton {
   pointer-events: all;
   font-size: var(--mantine-font-size-xxs);
-  color: var(--color-text-success);
+  color: var(--color-text-brand);
   padding-inline: var(--mantine-spacing-xxxs);
   border-radius: var(--mantine-radius-xs);
 
   &:hover {
-    color: var(--color-text-success-hover);
+    color: var(--color-text-brand-hover);
     cursor: pointer;
   }
 }
diff --git a/packages/app/styles/_semantic-colors.scss b/packages/app/styles/_semantic-colors.scss
index 527d2f25..38f7101e 100644
--- a/packages/app/styles/_semantic-colors.scss
+++ b/packages/app/styles/_semantic-colors.scss
@@ -18,7 +18,6 @@
   --color-bg-success: var(--mantine-color-green-5);
   --color-bg-danger: var(--mantine-color-red-4);
   --color-bg-warning: var(--mantine-color-orange-5);
-  --color-bg-brand: #4ffa7a;
 
   /* Borders & Dividers */
   --color-border: var(--mantine-color-dark-5);
@@ -34,6 +33,8 @@
   --color-text-muted-hover: var(--mantine-color-dark-1);
   --color-text-success: var(--mantine-color-green-4);
   --color-text-success-hover: var(--mantine-color-green-3);
+  --color-text-brand: var(--mantine-color-green-4);
+  --color-text-brand-hover: var(--mantine-color-green-3);
   --color-text-danger: var(--mantine-color-red-3);
   --color-text-sidenav-link: var(--mantine-color-dark-0);
   --color-text-sidenav-link-active: var(--color-text-primary);
@@ -117,7 +118,6 @@
   --color-bg-success: var(--mantine-color-green-8);
   --color-bg-danger: var(--mantine-color-red-8);
   --color-bg-warning: var(--mantine-color-orange-8);
-  --color-bg-brand: var(--mantine-color-green-8);
 
   /* Borders & Dividers - inverted */
   --color-border: var(--mantine-color-gray-1);
@@ -133,6 +133,8 @@
   --color-text-muted-hover: var(--mantine-color-dark-9);
   --color-text-success: var(--mantine-color-green-8);
   --color-text-success-hover: var(--mantine-color-green-9);
+  --color-text-brand: var(--mantine-color-green-8);
+  --color-text-brand-hover: var(--mantine-color-green-9);
   --color-text-danger: var(--mantine-color-red-8);
   --color-text-sidenav-link: var(--mantine-color-dark-6);
   --color-text-sidenav-link-active: var(--mantine-color-green-9);
diff --git a/packages/app/styles/_utilities.scss b/packages/app/styles/_utilities.scss
index 65e2e713..df0d4d5f 100644
--- a/packages/app/styles/_utilities.scss
+++ b/packages/app/styles/_utilities.scss
@@ -116,6 +116,19 @@
   }
 }
 
+.text-brand {
+  color: var(--color-text-brand) !important;
+}
+
+.text-brand-hover {
+  color: var(--color-text-brand);
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: var(--color-text-brand-hover);
+  }
+}
+
 .text-link {
   color: var(--color-text-primary) !important;
 }