diff --git a/.changeset/orange-charts-glow.md b/.changeset/orange-charts-glow.md
new file mode 100644
index 0000000000..e9b31b359e
--- /dev/null
+++ b/.changeset/orange-charts-glow.md
@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+feat(charts): switch to Observable categorical color palette for better accessibility and theme support
diff --git a/packages/app/src/HDXMultiSeriesTimeChart.tsx b/packages/app/src/HDXMultiSeriesTimeChart.tsx
index 9dc769782a..f2d1110538 100644
--- a/packages/app/src/HDXMultiSeriesTimeChart.tsx
+++ b/packages/app/src/HDXMultiSeriesTimeChart.tsx
@@ -453,7 +453,7 @@ export const MemoChart = memo(function MemoChart({
         return !hasSelection || selectedSeriesNames.has(seriesName);
       });
 
-    return limitedGroupKeys.map((key, i) => {
+    return limitedGroupKeys.map(key => {
       const lineDataIndex = lineData.findIndex(ld => ld.dataKey === key);
       const color = lineData[lineDataIndex]?.color;
       const strokeDasharray = lineData[lineDataIndex]?.isDashed ? '4 3' : '0';
@@ -495,7 +495,7 @@ export const MemoChart = memo(function MemoChart({
           {...(isHovered
             ? { fill: 'none', strokeDasharray }
             : {
-                fill: `url(#time-chart-lin-grad-${id}-${color.replace('#', '').toLowerCase()})`,
+                fill: `url(#time-chart-lin-grad-${id}-${color?.replace('#', '').toLowerCase()})`,
                 strokeDasharray,
               })}
           name={seriesName}
diff --git a/packages/app/src/__tests__/ChartUtils.test.ts b/packages/app/src/__tests__/ChartUtils.test.ts
index 72b263545b..53301f621d 100644
--- a/packages/app/src/__tests__/ChartUtils.test.ts
+++ b/packages/app/src/__tests__/ChartUtils.test.ts
@@ -10,6 +10,7 @@ import {
   convertToTimeChartConfig,
   formatResponseForTimeChart,
 } from '@/ChartUtils';
+import { CHART_COLOR_ERROR, COLORS } from '@/utils';
 
 describe('ChartUtils', () => {
   describe('formatResponseForTimeChart', () => {
@@ -122,7 +123,7 @@ describe('ChartUtils', () => {
       });
       expect(actual.lineData).toEqual([
         {
-          color: '#20c997',
+          color: COLORS[0],
           dataKey: 'AVG(toFloat64OrDefault(toString(Duration)))',
           currentPeriodKey: 'AVG(toFloat64OrDefault(toString(Duration)))',
           previousPeriodKey:
@@ -211,7 +212,7 @@ describe('ChartUtils', () => {
       });
       expect(actual.lineData).toEqual([
         {
-          color: '#20c997',
+          color: COLORS[0],
           dataKey: 'AVG(toFloat64OrDefault(toString(Duration))) · checkout',
           currentPeriodKey:
             'AVG(toFloat64OrDefault(toString(Duration))) · checkout',
@@ -221,7 +222,7 @@ describe('ChartUtils', () => {
           isDashed: false,
         },
         {
-          color: '#8250dc',
+          color: COLORS[1],
           dataKey: 'max · checkout',
           currentPeriodKey: 'max · checkout',
           previousPeriodKey: 'max · checkout (previous)',
@@ -229,7 +230,7 @@ describe('ChartUtils', () => {
           isDashed: false,
         },
         {
-          color: '#cdad7a',
+          color: COLORS[2],
           dataKey: 'AVG(toFloat64OrDefault(toString(Duration))) · shipping',
           currentPeriodKey:
             'AVG(toFloat64OrDefault(toString(Duration))) · shipping',
@@ -239,7 +240,7 @@ describe('ChartUtils', () => {
           isDashed: false,
         },
         {
-          color: '#0d6efd',
+          color: COLORS[3],
           dataKey: 'max · shipping',
           currentPeriodKey: 'max · shipping',
           previousPeriodKey: 'max · shipping (previous)',
@@ -299,7 +300,7 @@ describe('ChartUtils', () => {
 
       expect(actual.lineData).toEqual([
         {
-          color: '#20c997',
+          color: COLORS[0],
           dataKey: 'info',
           currentPeriodKey: 'info',
           previousPeriodKey: 'info (previous)',
@@ -307,7 +308,7 @@ describe('ChartUtils', () => {
           isDashed: false,
         },
         {
-          color: '#20c997',
+          color: COLORS[0],
           dataKey: 'debug',
           currentPeriodKey: 'debug',
           previousPeriodKey: 'debug (previous)',
@@ -315,7 +316,7 @@ describe('ChartUtils', () => {
           isDashed: false,
         },
         {
-          color: '#F81358',
+          color: CHART_COLOR_ERROR,
           dataKey: 'error',
           currentPeriodKey: 'error',
           previousPeriodKey: 'error (previous)',
@@ -403,7 +404,7 @@ describe('ChartUtils', () => {
       });
       expect(actual.lineData).toEqual([
         {
-          color: '#20c997',
+          color: COLORS[0],
           dataKey: 'AVG(toFloat64OrDefault(toString(Duration))) · checkout',
           currentPeriodKey:
             'AVG(toFloat64OrDefault(toString(Duration))) · checkout',
@@ -413,7 +414,7 @@ describe('ChartUtils', () => {
           isDashed: false,
         },
         {
-          color: '#8250dc',
+          color: COLORS[1],
           dataKey: 'max · checkout',
           currentPeriodKey: 'max · checkout',
           previousPeriodKey: 'max · checkout (previous)',
@@ -421,7 +422,7 @@ describe('ChartUtils', () => {
           isDashed: false,
         },
         {
-          color: '#cdad7a',
+          color: COLORS[2],
           dataKey: 'AVG(toFloat64OrDefault(toString(Duration))) · shipping',
           currentPeriodKey:
             'AVG(toFloat64OrDefault(toString(Duration))) · shipping',
@@ -431,7 +432,7 @@ describe('ChartUtils', () => {
           isDashed: false,
         },
         {
-          color: '#0d6efd',
+          color: COLORS[3],
           dataKey: 'max · shipping',
           currentPeriodKey: 'max · shipping',
           previousPeriodKey: 'max · shipping (previous)',
@@ -519,7 +520,7 @@ describe('ChartUtils', () => {
       });
       expect(actual.lineData).toEqual([
         {
-          color: '#20c997',
+          color: COLORS[0],
           currentPeriodKey: 'AVG(toFloat64OrDefault(toString(Duration)))',
           previousPeriodKey:
             'AVG(toFloat64OrDefault(toString(Duration))) (previous)',
@@ -528,7 +529,7 @@ describe('ChartUtils', () => {
           isDashed: false,
         },
         {
-          color: '#20c997',
+          color: COLORS[0],
           currentPeriodKey: 'AVG(toFloat64OrDefault(toString(Duration)))',
           previousPeriodKey:
             'AVG(toFloat64OrDefault(toString(Duration))) (previous)',
diff --git a/packages/app/src/components/DBDeltaChart.tsx b/packages/app/src/components/DBDeltaChart.tsx
index 262f970ea3..c4961f91f9 100644
--- a/packages/app/src/components/DBDeltaChart.tsx
+++ b/packages/app/src/components/DBDeltaChart.tsx
@@ -27,7 +27,11 @@ import {
 import { isAggregateFunction } from '@/ChartUtils';
 import { useQueriedChartConfig } from '@/hooks/useChartConfig';
 import { getFirstTimestampValueExpression } from '@/source';
-import { truncateMiddle } from '@/utils';
+import {
+  CHART_COLOR_ERROR,
+  CHART_COLOR_SUCCESS,
+  truncateMiddle,
+} from '@/utils';
 
 import { SQLPreview } from './ChartSQLPreview';
 
@@ -246,13 +250,13 @@ function PropertyComparisonChart({
           <Bar
             dataKey="outlierCount"
             name="Outliers"
-            fill="#F81358"
+            fill={CHART_COLOR_ERROR}
             isAnimationActive={false}
           />
           <Bar
             dataKey="inlierCount"
             name="Inliers"
-            fill="#09D99C"
+            fill={CHART_COLOR_SUCCESS}
             isAnimationActive={false}
           />
         </BarChart>
diff --git a/packages/app/src/components/DBRowTable.tsx b/packages/app/src/components/DBRowTable.tsx
index 626d4c95eb..d95073f14c 100644
--- a/packages/app/src/components/DBRowTable.tsx
+++ b/packages/app/src/components/DBRowTable.tsx
@@ -84,6 +84,7 @@ import { UNDEFINED_WIDTH } from '@/tableUtils';
 import { FormatTime } from '@/useFormatTime';
 import { useUserPreferences } from '@/useUserPreferences';
 import {
+  COLORS,
   getLogLevelClass,
   logLevelColor,
   useLocalStorage,
@@ -232,14 +233,14 @@ export const PatternTrendChart = ({
               isAnimationActive={false}
               dataKey="count"
               stackId="a"
-              fill={color || '#20c997'}
+              fill={color || COLORS[0]}
               maxBarSize={24}
             />
             {/* <Line
               key={'count'}
               type="monotone"
               dataKey={'count'}
-              stroke={'#20c997'}
+              stroke={COLORS[0]}
               dot={false}
             /> */}
             <Tooltip content={<PatternTrendChartTooltip />} />
diff --git a/packages/app/src/components/DBTimeChart.tsx b/packages/app/src/components/DBTimeChart.tsx
index e800f18c40..fb9098514f 100644
--- a/packages/app/src/components/DBTimeChart.tsx
+++ b/packages/app/src/components/DBTimeChart.tsx
@@ -685,8 +685,7 @@ function DBTimeChartComponent({
           </Text>
           <Button
             className="mx-auto"
-            variant="subtle"
-            color="red"
+            variant="danger"
             onClick={() => errorExpansion.open()}
           >
             <Group gap="xxs">
diff --git a/packages/app/src/components/DBTraceWaterfallChart.tsx b/packages/app/src/components/DBTraceWaterfallChart.tsx
index ebaa4ddb56..d4e3b92414 100644
--- a/packages/app/src/components/DBTraceWaterfallChart.tsx
+++ b/packages/app/src/components/DBTraceWaterfallChart.tsx
@@ -39,6 +39,12 @@ import {
 } from '@/source';
 import TimelineChart from '@/TimelineChart';
 import { useFormatTime } from '@/useFormatTime';
+import {
+  CHART_COLOR_ERROR,
+  CHART_COLOR_ERROR_HIGHLIGHT,
+  CHART_COLOR_WARNING,
+  CHART_COLOR_WARNING_HIGHLIGHT,
+} from '@/utils';
 import {
   getHighlightedAttributesFromData,
   getSelectExpressionsForHighlightedAttributes,
@@ -82,8 +88,10 @@ function barColor(condition: {
   isHighlighted: boolean;
 }) {
   const { isError, isWarn, isHighlighted } = condition;
-  if (isError) return isHighlighted ? '#FF6E6E' : '#F53749';
-  if (isWarn) return isHighlighted ? '#FFE38A' : '#FFC107';
+  if (isError)
+    return isHighlighted ? CHART_COLOR_ERROR_HIGHLIGHT : CHART_COLOR_ERROR;
+  if (isWarn)
+    return isHighlighted ? CHART_COLOR_WARNING_HIGHLIGHT : CHART_COLOR_WARNING;
   return isHighlighted ? '#A9AFB7' : '#6A7077';
 }
 
diff --git a/packages/app/src/theme/ChartColors.stories.tsx b/packages/app/src/theme/ChartColors.stories.tsx
new file mode 100644
index 0000000000..132e55960d
--- /dev/null
+++ b/packages/app/src/theme/ChartColors.stories.tsx
@@ -0,0 +1,375 @@
+import React from 'react';
+
+import {
+  CHART_COLOR_ERROR,
+  CHART_COLOR_SUCCESS,
+  CHART_COLOR_WARNING,
+  COLORS,
+} from '@/utils';
+
+// Labels for chart colors - brand green first, then Observable palette
+const COLOR_LABELS = [
+  'Green (Brand)',
+  'Blue',
+  'Orange',
+  'Red',
+  'Cyan',
+  'Pink',
+  'Purple',
+  'Light Blue',
+  'Brown',
+  'Gray',
+];
+
+// Derive chart colors from the single source of truth in utils.ts
+const CHART_COLORS = COLORS.map((hex, i) => ({
+  name: `color-chart-${i + 1}`,
+  hex,
+  label: COLOR_LABELS[i] || `Color ${i + 1}`,
+}));
+
+const SEMANTIC_CHART_COLORS = [
+  {
+    name: 'color-chart-success',
+    hex: CHART_COLOR_SUCCESS,
+    label: 'Success (Green)',
+  },
+  {
+    name: 'color-chart-warning',
+    hex: CHART_COLOR_WARNING,
+    label: 'Warning (Orange)',
+  },
+  { name: 'color-chart-error', hex: CHART_COLOR_ERROR, label: 'Error (Red)' },
+];
+
+const story = {
+  title: 'Design Tokens/Chart Colors',
+};
+export default story;
+
+// Color swatch component
+const ColorSwatch = ({
+  name,
+  hex,
+  label,
+}: {
+  name: string;
+  hex: string;
+  label: string;
+}) => (
+  <div
+    style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}
+  >
+    <div
+      style={{
+        background: hex,
+        width: 40,
+        height: 40,
+        borderRadius: 6,
+        border: '1px solid var(--color-border)',
+        flexShrink: 0,
+      }}
+    />
+    <div>
+      <div style={{ fontSize: 13, fontWeight: 500 }}>{label}</div>
+      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+        <code style={{ fontSize: 11, color: 'var(--color-text-muted)' }}>
+          {hex}
+        </code>
+        <span style={{ fontSize: 11, color: 'var(--color-text-muted)' }}>
+          •
+        </span>
+        <code style={{ fontSize: 11, color: 'var(--color-text-muted)' }}>
+          var(--{name})
+        </code>
+      </div>
+    </div>
+  </div>
+);
+
+export const AllChartColors = () => (
+  <div style={{ padding: 24 }}>
+    <h2 style={{ marginBottom: 24 }}>Chart Color Palette</h2>
+    <p style={{ marginBottom: 24, color: 'var(--color-text-muted)' }}>
+      Observable categorical color palette - designed to work well on both light
+      and dark backgrounds with good contrast and accessibility.
+    </p>
+    <p
+      style={{
+        marginBottom: 24,
+        fontSize: 12,
+        color: 'var(--color-text-muted)',
+      }}
+    >
+      Source:{' '}
+      <a
+        href="https://observablehq.com/@d3/color-schemes"
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{ color: 'var(--color-text-primary)' }}
+      >
+        Observable D3 Color Schemes
+      </a>
+    </p>
+
+    <h3 style={{ fontSize: 16, marginBottom: 16 }}>Data Series Colors</h3>
+    <div style={{ marginBottom: 32 }}>
+      {CHART_COLORS.map(({ name, hex, label }) => (
+        <ColorSwatch key={name} name={name} hex={hex} label={label} />
+      ))}
+    </div>
+
+    <h3 style={{ fontSize: 16, marginBottom: 16 }}>Semantic Chart Colors</h3>
+    <div style={{ marginBottom: 32 }}>
+      {SEMANTIC_CHART_COLORS.map(({ name, hex, label }) => (
+        <ColorSwatch key={name} name={name} hex={hex} label={label} />
+      ))}
+    </div>
+  </div>
+);
+
+export const BarChartPreview = () => {
+  const data = [
+    { label: 'Jan', values: [65, 45, 30] },
+    { label: 'Feb', values: [80, 55, 40] },
+    { label: 'Mar', values: [70, 60, 50] },
+    { label: 'Apr', values: [90, 70, 45] },
+    { label: 'May', values: [85, 65, 55] },
+  ];
+
+  return (
+    <div style={{ padding: 24 }}>
+      <h2 style={{ marginBottom: 24 }}>Bar Chart Preview</h2>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'flex-end',
+          gap: 16,
+          height: 200,
+          padding: 16,
+          background: 'var(--color-bg-surface)',
+          borderRadius: 8,
+          border: '1px solid var(--color-border)',
+        }}
+      >
+        {data.map(({ label, values }) => (
+          <div
+            key={label}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: 4,
+            }}
+          >
+            <div style={{ display: 'flex', gap: 2, alignItems: 'flex-end' }}>
+              {values.map((value, i) => (
+                <div
+                  key={i}
+                  style={{
+                    width: 16,
+                    height: value * 1.5,
+                    background: CHART_COLORS[i].hex,
+                    borderRadius: '2px 2px 0 0',
+                  }}
+                />
+              ))}
+            </div>
+            <span style={{ fontSize: 11, color: 'var(--color-text-muted)' }}>
+              {label}
+            </span>
+          </div>
+        ))}
+      </div>
+      <div style={{ display: 'flex', gap: 16, marginTop: 16 }}>
+        {['Series A', 'Series B', 'Series C'].map((name, i) => (
+          <div
+            key={name}
+            style={{ display: 'flex', alignItems: 'center', gap: 6 }}
+          >
+            <div
+              style={{
+                width: 12,
+                height: 12,
+                borderRadius: 2,
+                background: CHART_COLORS[i].hex,
+              }}
+            />
+            <span style={{ fontSize: 12 }}>{name}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const LineChartPreview = () => {
+  return (
+    <div style={{ padding: 24 }}>
+      <h2 style={{ marginBottom: 24 }}>Line Chart Preview</h2>
+      <div
+        style={{
+          position: 'relative',
+          height: 200,
+          padding: 16,
+          background: 'var(--color-bg-surface)',
+          borderRadius: 8,
+          border: '1px solid var(--color-border)',
+        }}
+      >
+        <svg
+          width="100%"
+          height="100%"
+          viewBox="0 0 400 150"
+          preserveAspectRatio="none"
+        >
+          {/* Grid lines */}
+          {[0, 1, 2, 3, 4].map(i => (
+            <line
+              key={i}
+              x1="0"
+              y1={i * 37.5}
+              x2="400"
+              y2={i * 37.5}
+              stroke="var(--color-border)"
+              strokeWidth="1"
+            />
+          ))}
+          {/* Series 1 - Blue */}
+          <polyline
+            points="0,100 80,80 160,90 240,50 320,60 400,30"
+            fill="none"
+            stroke={CHART_COLORS[0].hex}
+            strokeWidth="2"
+          />
+          {/* Series 2 - Orange */}
+          <polyline
+            points="0,120 80,110 160,100 240,90 320,95 400,70"
+            fill="none"
+            stroke={CHART_COLORS[1].hex}
+            strokeWidth="2"
+          />
+          {/* Series 3 - Cyan */}
+          <polyline
+            points="0,140 80,130 160,135 240,120 320,110 400,100"
+            fill="none"
+            stroke={CHART_COLORS[3].hex}
+            strokeWidth="2"
+          />
+        </svg>
+      </div>
+      <div style={{ display: 'flex', gap: 16, marginTop: 16 }}>
+        {[
+          { name: 'Requests', colorIndex: 0 },
+          { name: 'Warnings', colorIndex: 1 },
+          { name: 'Latency', colorIndex: 3 },
+        ].map(({ name, colorIndex }) => (
+          <div
+            key={name}
+            style={{ display: 'flex', alignItems: 'center', gap: 6 }}
+          >
+            <div
+              style={{
+                width: 16,
+                height: 3,
+                borderRadius: 1,
+                background: CHART_COLORS[colorIndex].hex,
+              }}
+            />
+            <span style={{ fontSize: 12 }}>{name}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const SemanticColorsPreview = () => (
+  <div style={{ padding: 24 }}>
+    <h2 style={{ marginBottom: 24 }}>Semantic Chart Colors</h2>
+    <p style={{ marginBottom: 24, color: 'var(--color-text-muted)' }}>
+      Use these colors to indicate status in charts (e.g., success rate, error
+      count).
+    </p>
+    <div
+      style={{
+        display: 'flex',
+        gap: 24,
+        padding: 16,
+        background: 'var(--color-bg-surface)',
+        borderRadius: 8,
+        border: '1px solid var(--color-border)',
+      }}
+    >
+      {SEMANTIC_CHART_COLORS.map(({ hex, label }, i) => (
+        <div key={label} style={{ flex: 1, textAlign: 'center' }}>
+          <div
+            style={{
+              height: 80,
+              background: hex,
+              borderRadius: 4,
+              marginBottom: 8,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: '#fff',
+              fontWeight: 600,
+              fontSize: 24,
+            }}
+          >
+            {i === 0 ? '98%' : i === 1 ? '15' : '3'}
+          </div>
+          <div style={{ fontSize: 13, fontWeight: 500 }}>{label}</div>
+          <code style={{ fontSize: 10, color: 'var(--color-text-muted)' }}>
+            {hex}
+          </code>
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+export const AccessibilityCheck = () => (
+  <div style={{ padding: 24 }}>
+    <h2 style={{ marginBottom: 24 }}>Color Accessibility</h2>
+    <p style={{ marginBottom: 24, color: 'var(--color-text-muted)' }}>
+      The Observable palette is designed to be distinguishable for users with
+      color vision deficiencies. Toggle between dark and light mode to verify
+      contrast.
+    </p>
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(5, 1fr)',
+        gap: 8,
+        padding: 16,
+        background: 'var(--color-bg-surface)',
+        borderRadius: 8,
+        border: '1px solid var(--color-border)',
+      }}
+    >
+      {CHART_COLORS.map(({ hex, label }, i) => (
+        <div
+          key={label}
+          style={{
+            height: 60,
+            background: hex,
+            borderRadius: 4,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: '#fff',
+            fontWeight: 600,
+            fontSize: 12,
+            textShadow: '0 1px 2px rgba(0,0,0,0.3)',
+            gap: 2,
+          }}
+        >
+          <span>{i + 1}</span>
+          <span style={{ fontSize: 9, fontWeight: 400 }}>{label}</span>
+        </div>
+      ))}
+    </div>
+  </div>
+);
diff --git a/packages/app/src/theme/semanticColorsGrouped.ts b/packages/app/src/theme/semanticColorsGrouped.ts
index 2439e04156..c7360b6e89 100644
--- a/packages/app/src/theme/semanticColorsGrouped.ts
+++ b/packages/app/src/theme/semanticColorsGrouped.ts
@@ -44,4 +44,21 @@ export const semanticColorsGrouped = {
     'color-json-array',
     'color-json-punctuation',
   ],
+  charts: [
+    'color-chart-1',
+    'color-chart-2',
+    'color-chart-3',
+    'color-chart-4',
+    'color-chart-5',
+    'color-chart-6',
+    'color-chart-7',
+    'color-chart-8',
+    'color-chart-9',
+    'color-chart-10',
+    'color-chart-success',
+    'color-chart-warning',
+    'color-chart-error',
+    'color-chart-error-highlight',
+    'color-chart-warning-highlight',
+  ],
 };
diff --git a/packages/app/src/utils.ts b/packages/app/src/utils.ts
index 6144c56898..be98a679d2 100644
--- a/packages/app/src/utils.ts
+++ b/packages/app/src/utils.ts
@@ -405,19 +405,38 @@ export const getLogLevelClass = (lvl: string | undefined) => {
         : undefined;
 };
 
-// Accessible chart colors
+// Chart color palette - single source of truth
+// Colors from Observable categorical palette, with custom brand green
+// https://observablehq.com/@d3/color-schemes
+export const CHART_PALETTE = {
+  green: '#00c28a', // Brand green (Mantine green.5) - used as primary chart color
+  blue: '#4269d0',
+  orange: '#efb118',
+  red: '#ff725c',
+  cyan: '#6cc5b0',
+  pink: '#ff8ab7',
+  purple: '#a463f2',
+  lightBlue: '#97bbf5',
+  brown: '#9c6b4e',
+  gray: '#9498a0',
+  // Highlighted variants (lighter shades for hover/selection states)
+  redHighlight: '#ffa090',
+  orangeHighlight: '#f5c94d',
+} as const;
+
+// Ordered array for chart series - green first for brand consistency
+// Maps to CSS variables: COLORS[0] -> --color-chart-1, COLORS[1] -> --color-chart-2, etc.
 export const COLORS = [
-  '#20c997', // Green
-  // '#F81358', // Red
-  '#8250dc', // Light Purple
-  '#cdad7a', // Tan
-  '#0d6efd', // Blue
-  '#fd7e14', // Orange
-  '#0dcaf0', // Turqoise
-  '#828c95', // Grey
-  '#ff9382', // Coral
-  '#39b5ab', // Olive-tealish?
-  '#ffa600', // Yellow
+  CHART_PALETTE.green, // 1 - Brand green (primary)
+  CHART_PALETTE.blue, // 2
+  CHART_PALETTE.orange, // 3
+  CHART_PALETTE.red, // 4
+  CHART_PALETTE.cyan, // 5
+  CHART_PALETTE.pink, // 6
+  CHART_PALETTE.purple, // 7
+  CHART_PALETTE.lightBlue, // 8
+  CHART_PALETTE.brown, // 9
+  CHART_PALETTE.gray, // 10
 ];
 
 export function hashCode(str: string) {
@@ -433,6 +452,15 @@ export function hashCode(str: string) {
   return hash;
 }
 
+// Semantic colors for log levels (derived from palette)
+export const CHART_COLOR_SUCCESS = CHART_PALETTE.green;
+export const CHART_COLOR_WARNING = CHART_PALETTE.orange;
+export const CHART_COLOR_ERROR = CHART_PALETTE.red;
+
+// Highlighted variants (derived from palette)
+export const CHART_COLOR_ERROR_HIGHLIGHT = CHART_PALETTE.redHighlight;
+export const CHART_COLOR_WARNING_HIGHLIGHT = CHART_PALETTE.orangeHighlight;
+
 // Try to match log levels to colors
 export const semanticKeyedColor = (
   key: string | number | undefined,
@@ -441,10 +469,10 @@ export const semanticKeyedColor = (
   const logLevel = getLogLevelClass(`${key}`);
   if (logLevel != null) {
     return logLevel === 'error'
-      ? '#d63384' // magenta
+      ? CHART_COLOR_ERROR
       : logLevel === 'warn'
-        ? '#ffc107' // yellow
-        : '#20c997'; // green;
+        ? CHART_COLOR_WARNING
+        : CHART_COLOR_SUCCESS;
   }
 
   return COLORS[index % COLORS.length];
@@ -453,10 +481,10 @@ export const semanticKeyedColor = (
 export const logLevelColor = (key: string | number | undefined) => {
   const logLevel = getLogLevelClass(`${key}`);
   return logLevel === 'error'
-    ? '#F81358' // red
+    ? CHART_COLOR_ERROR
     : logLevel === 'warn'
-      ? '#ffc107' // yellow
-      : '#20c997'; // green;
+      ? CHART_COLOR_WARNING
+      : CHART_COLOR_SUCCESS;
 };
 
 // order of colors for sorting. green on bottom, then yellow, then red
@@ -471,10 +499,10 @@ const getLevelColor = (logLevel?: string) => {
     return;
   }
   return logLevel === 'error'
-    ? '#d63384' // magenta
+    ? CHART_COLOR_ERROR
     : logLevel === 'warn'
-      ? '#ffc107' // yellow
-      : '#20c997'; // green;
+      ? CHART_COLOR_WARNING
+      : CHART_COLOR_SUCCESS;
 };
 
 export const getColorProps = (index: number, level: string): string => {
diff --git a/packages/app/styles/_semantic-colors.scss b/packages/app/styles/_semantic-colors.scss
index 74903b489d..603fff5bab 100644
--- a/packages/app/styles/_semantic-colors.scss
+++ b/packages/app/styles/_semantic-colors.scss
@@ -65,6 +65,29 @@
   --color-json-array: var(--mantine-color-green-3);
   --color-json-punctuation: var(--mantine-color-dark-4);
 
+  /* Chart Colors - Brand green first, then Observable palette
+     Note: 1-indexed CSS vars map to 0-indexed COLORS array in utils.ts
+     e.g., --color-chart-1 corresponds to COLORS[0] */
+  --color-chart-1: #00c28a; /* Green - Brand (primary) */
+  --color-chart-2: #4269d0; /* Blue */
+  --color-chart-3: #efb118; /* Orange */
+  --color-chart-4: #ff725c; /* Red */
+  --color-chart-5: #6cc5b0; /* Cyan */
+  --color-chart-6: #ff8ab7; /* Pink */
+  --color-chart-7: #a463f2; /* Purple */
+  --color-chart-8: #97bbf5; /* Light Blue */
+  --color-chart-9: #9c6b4e; /* Brown */
+  --color-chart-10: #9498a0; /* Gray */
+
+  /* Chart Semantic Colors */
+  --color-chart-success: #00c28a; /* Green - Brand */
+  --color-chart-warning: #efb118; /* Orange */
+  --color-chart-error: #ff725c; /* Red */
+
+  /* Chart Semantic Colors - Highlighted (for hover/selection states) */
+  --color-chart-error-highlight: #ffa090;
+  --color-chart-warning-highlight: #f5c94d;
+
   /* Mantine Overrides */
   --mantine-color-body: var(--color-bg-body) !important;
 }
@@ -139,4 +162,25 @@
   --color-json-object: var(--mantine-color-green-7);
   --color-json-array: var(--mantine-color-green-7);
   --color-json-punctuation: var(--mantine-color-dark-5);
+
+  /* Chart Colors - Brand green first, then Observable palette (same for light mode) */
+  --color-chart-1: #00c28a; /* Green - Brand (primary) */
+  --color-chart-2: #4269d0; /* Blue */
+  --color-chart-3: #efb118; /* Orange */
+  --color-chart-4: #ff725c; /* Red */
+  --color-chart-5: #6cc5b0; /* Cyan */
+  --color-chart-6: #ff8ab7; /* Pink */
+  --color-chart-7: #a463f2; /* Purple */
+  --color-chart-8: #97bbf5; /* Light Blue */
+  --color-chart-9: #9c6b4e; /* Brown */
+  --color-chart-10: #9498a0; /* Gray */
+
+  /* Chart Semantic Colors */
+  --color-chart-success: #00c28a; /* Green - Brand */
+  --color-chart-warning: #efb118; /* Orange */
+  --color-chart-error: #ff725c; /* Red */
+
+  /* Chart Semantic Colors - Highlighted (for hover/selection states) */
+  --color-chart-error-highlight: #ffa090;
+  --color-chart-warning-highlight: #f5c94d;
 }