From 32c79b33a2cf25076a3dce93e5565200006cc2f7 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 20 Jan 2026 15:35:28 +0000
Subject: [PATCH 1/8] feat(theme): Introduce observable categorical color
 palette and semantic colors for charts

- Updated color definitions in _semantic-colors.scss for better accessibility.
- Added new chart colors and semantic colors for success, warning, and error states.
- Created a new ChartColors story to showcase the color palette and its usage in charts.
- Refactored color usage in utils and components to utilize the new color definitions.
---
 packages/app/src/HDXMultiSeriesTimeChart.tsx  |   4 +-
 packages/app/src/components/DBTimeChart.tsx   |   3 +-
 .../app/src/theme/ChartColors.stories.tsx     | 354 ++++++++++++++++++
 .../app/src/theme/semanticColorsGrouped.ts    |  15 +
 packages/app/src/utils.ts                     |  47 +--
 packages/app/styles/_semantic-colors.scss     |  34 ++
 6 files changed, 432 insertions(+), 25 deletions(-)
 create mode 100644 packages/app/src/theme/ChartColors.stories.tsx

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/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/theme/ChartColors.stories.tsx b/packages/app/src/theme/ChartColors.stories.tsx
new file mode 100644
index 0000000000..afdf00f39c
--- /dev/null
+++ b/packages/app/src/theme/ChartColors.stories.tsx
@@ -0,0 +1,354 @@
+import React from 'react';
+
+// Observable categorical color palette
+// https://observablehq.com/@d3/color-schemes
+const CHART_COLORS = [
+  { name: 'color-chart-1', hex: '#4269d0', label: 'Blue' },
+  { name: 'color-chart-2', hex: '#efb118', label: 'Orange' },
+  { name: 'color-chart-3', hex: '#ff725c', label: 'Red' },
+  { name: 'color-chart-4', hex: '#6cc5b0', label: 'Cyan' },
+  { name: 'color-chart-5', hex: '#3ca951', label: 'Green' },
+  { name: 'color-chart-6', hex: '#ff8ab7', label: 'Pink' },
+  { name: 'color-chart-7', hex: '#a463f2', label: 'Purple' },
+  { name: 'color-chart-8', hex: '#97bbf5', label: 'Light Blue' },
+  { name: 'color-chart-9', hex: '#9c6b4e', label: 'Brown' },
+  { name: 'color-chart-10', hex: '#9498a0', label: 'Gray' },
+];
+
+const SEMANTIC_CHART_COLORS = [
+  { name: 'color-chart-success', hex: '#3ca951', label: 'Success (Green)' },
+  { name: 'color-chart-warning', hex: '#efb118', label: 'Warning (Orange)' },
+  { name: 'color-chart-error', hex: '#ff725c', 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..241f244bb0 100644
--- a/packages/app/src/theme/semanticColorsGrouped.ts
+++ b/packages/app/src/theme/semanticColorsGrouped.ts
@@ -44,4 +44,19 @@ 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',
+  ],
 };
diff --git a/packages/app/src/utils.ts b/packages/app/src/utils.ts
index 32ef764949..70af5afa2e 100644
--- a/packages/app/src/utils.ts
+++ b/packages/app/src/utils.ts
@@ -405,19 +405,19 @@ export const getLogLevelClass = (lvl: string | undefined) => {
         : undefined;
 };
 
-// Accessible chart colors
+// Observable categorical color palette - works well on both light and dark backgrounds
+// https://observablehq.com/@d3/color-schemes
 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
+  '#4269d0', // Blue
+  '#efb118', // Orange
+  '#ff725c', // Red
+  '#6cc5b0', // Cyan
+  '#3ca951', // Green
+  '#ff8ab7', // Pink
+  '#a463f2', // Purple
+  '#97bbf5', // Light Blue
+  '#9c6b4e', // Brown
+  '#9498a0', // Gray
 ];
 
 export function hashCode(str: string) {
@@ -433,6 +433,11 @@ export function hashCode(str: string) {
   return hash;
 }
 
+// Semantic colors for log levels (from Observable palette)
+export const CHART_COLOR_SUCCESS = '#3ca951'; // Green
+export const CHART_COLOR_WARNING = '#efb118'; // Orange
+export const CHART_COLOR_ERROR = '#ff725c'; // Red
+
 // Try to match log levels to colors
 export const semanticKeyedColor = (
   key: string | number | undefined,
@@ -441,10 +446,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 +458,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 +476,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..4dca660e41 100644
--- a/packages/app/styles/_semantic-colors.scss
+++ b/packages/app/styles/_semantic-colors.scss
@@ -65,6 +65,23 @@
   --color-json-array: var(--mantine-color-green-3);
   --color-json-punctuation: var(--mantine-color-dark-4);
 
+  /* Chart Colors - Observable categorical palette (works on light & dark) */
+  --color-chart-1: #4269d0; /* Blue */
+  --color-chart-2: #efb118; /* Orange */
+  --color-chart-3: #ff725c; /* Red */
+  --color-chart-4: #6cc5b0; /* Cyan */
+  --color-chart-5: #3ca951; /* Green */
+  --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: #3ca951; /* Green */
+  --color-chart-warning: #efb118; /* Orange */
+  --color-chart-error: #ff725c; /* Red */
+
   /* Mantine Overrides */
   --mantine-color-body: var(--color-bg-body) !important;
 }
@@ -139,4 +156,21 @@
   --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 - Observable categorical palette (same for light mode) */
+  --color-chart-1: #4269d0; /* Blue */
+  --color-chart-2: #efb118; /* Orange */
+  --color-chart-3: #ff725c; /* Red */
+  --color-chart-4: #6cc5b0; /* Cyan */
+  --color-chart-5: #3ca951; /* Green */
+  --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: #3ca951; /* Green */
+  --color-chart-warning: #efb118; /* Orange */
+  --color-chart-error: #ff725c; /* Red */
 }

From d0e7c8c992b2b5b829c8eb53a3ca80bc49f416c2 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 20 Jan 2026 15:51:49 +0000
Subject: [PATCH 2/8] Add changeset

---
 .changeset/orange-charts-glow.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/orange-charts-glow.md

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

From dd7a50abeb03d532b9b6a4252937cd5cf0f64ef9 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 20 Jan 2026 16:00:06 +0000
Subject: [PATCH 3/8] refactor(theme): Update ChartColors to use centralized
 color definitions

- Refactored chart color definitions to derive from a single source of truth in utils.
- Introduced COLOR_LABELS for better organization of color names.
- Updated semantic chart colors to utilize constants for error, success, and warning states.
---
 .../app/src/theme/ChartColors.stories.tsx     | 52 +++++++++++++------
 1 file changed, 37 insertions(+), 15 deletions(-)

diff --git a/packages/app/src/theme/ChartColors.stories.tsx b/packages/app/src/theme/ChartColors.stories.tsx
index afdf00f39c..7107bdde32 100644
--- a/packages/app/src/theme/ChartColors.stories.tsx
+++ b/packages/app/src/theme/ChartColors.stories.tsx
@@ -1,24 +1,46 @@
 import React from 'react';
 
-// Observable categorical color palette
+import {
+  CHART_COLOR_ERROR,
+  CHART_COLOR_SUCCESS,
+  CHART_COLOR_WARNING,
+  COLORS,
+} from '@/utils';
+
+// Labels for the Observable categorical color palette
 // https://observablehq.com/@d3/color-schemes
-const CHART_COLORS = [
-  { name: 'color-chart-1', hex: '#4269d0', label: 'Blue' },
-  { name: 'color-chart-2', hex: '#efb118', label: 'Orange' },
-  { name: 'color-chart-3', hex: '#ff725c', label: 'Red' },
-  { name: 'color-chart-4', hex: '#6cc5b0', label: 'Cyan' },
-  { name: 'color-chart-5', hex: '#3ca951', label: 'Green' },
-  { name: 'color-chart-6', hex: '#ff8ab7', label: 'Pink' },
-  { name: 'color-chart-7', hex: '#a463f2', label: 'Purple' },
-  { name: 'color-chart-8', hex: '#97bbf5', label: 'Light Blue' },
-  { name: 'color-chart-9', hex: '#9c6b4e', label: 'Brown' },
-  { name: 'color-chart-10', hex: '#9498a0', label: 'Gray' },
+const COLOR_LABELS = [
+  'Blue',
+  'Orange',
+  'Red',
+  'Cyan',
+  'Green',
+  '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: '#3ca951', label: 'Success (Green)' },
-  { name: 'color-chart-warning', hex: '#efb118', label: 'Warning (Orange)' },
-  { name: 'color-chart-error', hex: '#ff725c', label: 'Error (Red)' },
+  {
+    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 = {

From fb493e12f8648d33524bb6121d397e658471c8ce Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 20 Jan 2026 16:26:16 +0000
Subject: [PATCH 4/8] refactor(chart): Update color usage in ChartUtils and
 components to utilize centralized color definitions

- Replaced hardcoded color values with constants from the utils for consistency.
- Updated line colors in ChartUtils tests and various chart components to use the new color definitions for error, success, and default states.
---
 packages/app/src/__tests__/ChartUtils.test.ts   | 17 +++++++++--------
 packages/app/src/components/DBDeltaChart.tsx    | 10 +++++++---
 packages/app/src/components/DBRowTable.tsx      |  5 +++--
 .../src/components/DBTraceWaterfallChart.tsx    |  6 ++++--
 4 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/packages/app/src/__tests__/ChartUtils.test.ts b/packages/app/src/__tests__/ChartUtils.test.ts
index 72b263545b..e809a5ea43 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',
@@ -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',
@@ -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/DBTraceWaterfallChart.tsx b/packages/app/src/components/DBTraceWaterfallChart.tsx
index ebaa4ddb56..5724e9dda4 100644
--- a/packages/app/src/components/DBTraceWaterfallChart.tsx
+++ b/packages/app/src/components/DBTraceWaterfallChart.tsx
@@ -39,6 +39,7 @@ import {
 } from '@/source';
 import TimelineChart from '@/TimelineChart';
 import { useFormatTime } from '@/useFormatTime';
+import { CHART_COLOR_ERROR, CHART_COLOR_WARNING } from '@/utils';
 import {
   getHighlightedAttributesFromData,
   getSelectExpressionsForHighlightedAttributes,
@@ -82,8 +83,9 @@ function barColor(condition: {
   isHighlighted: boolean;
 }) {
   const { isError, isWarn, isHighlighted } = condition;
-  if (isError) return isHighlighted ? '#FF6E6E' : '#F53749';
-  if (isWarn) return isHighlighted ? '#FFE38A' : '#FFC107';
+  // Use semantic chart colors from Observable palette
+  if (isError) return isHighlighted ? '#ffa090' : CHART_COLOR_ERROR; // #ff725c
+  if (isWarn) return isHighlighted ? '#f5c94d' : CHART_COLOR_WARNING; // #efb118
   return isHighlighted ? '#A9AFB7' : '#6A7077';
 }
 

From 2e35de5aaf2f116b1e6557c71c55b6a30686d311 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 20 Jan 2026 19:04:44 +0000
Subject: [PATCH 5/8] refactor(colors): Centralize chart color definitions and
 introduce highlighted variants

- Updated color usage in utils to derive chart colors from a single source of truth.
- Added highlighted variants for error and warning colors to enhance visual feedback in charts.
- Adjusted components and styles to utilize the new color definitions for consistency across the application.
---
 .../src/components/DBTraceWaterfallChart.tsx  | 14 +++--
 .../app/src/theme/semanticColorsGrouped.ts    |  2 +
 packages/app/src/utils.ts                     | 51 +++++++++++++------
 packages/app/styles/_semantic-colors.scss     |  8 +++
 4 files changed, 56 insertions(+), 19 deletions(-)

diff --git a/packages/app/src/components/DBTraceWaterfallChart.tsx b/packages/app/src/components/DBTraceWaterfallChart.tsx
index 5724e9dda4..d4e3b92414 100644
--- a/packages/app/src/components/DBTraceWaterfallChart.tsx
+++ b/packages/app/src/components/DBTraceWaterfallChart.tsx
@@ -39,7 +39,12 @@ import {
 } from '@/source';
 import TimelineChart from '@/TimelineChart';
 import { useFormatTime } from '@/useFormatTime';
-import { CHART_COLOR_ERROR, CHART_COLOR_WARNING } from '@/utils';
+import {
+  CHART_COLOR_ERROR,
+  CHART_COLOR_ERROR_HIGHLIGHT,
+  CHART_COLOR_WARNING,
+  CHART_COLOR_WARNING_HIGHLIGHT,
+} from '@/utils';
 import {
   getHighlightedAttributesFromData,
   getSelectExpressionsForHighlightedAttributes,
@@ -83,9 +88,10 @@ function barColor(condition: {
   isHighlighted: boolean;
 }) {
   const { isError, isWarn, isHighlighted } = condition;
-  // Use semantic chart colors from Observable palette
-  if (isError) return isHighlighted ? '#ffa090' : CHART_COLOR_ERROR; // #ff725c
-  if (isWarn) return isHighlighted ? '#f5c94d' : CHART_COLOR_WARNING; // #efb118
+  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/semanticColorsGrouped.ts b/packages/app/src/theme/semanticColorsGrouped.ts
index 241f244bb0..c7360b6e89 100644
--- a/packages/app/src/theme/semanticColorsGrouped.ts
+++ b/packages/app/src/theme/semanticColorsGrouped.ts
@@ -58,5 +58,7 @@ export const semanticColorsGrouped = {
     '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 70af5afa2e..7b68b2c1e7 100644
--- a/packages/app/src/utils.ts
+++ b/packages/app/src/utils.ts
@@ -405,19 +405,36 @@ export const getLogLevelClass = (lvl: string | undefined) => {
         : undefined;
 };
 
-// Observable categorical color palette - works well on both light and dark backgrounds
+// Observable categorical color palette - single source of truth
 // https://observablehq.com/@d3/color-schemes
+export const CHART_PALETTE = {
+  blue: '#4269d0',
+  orange: '#efb118',
+  red: '#ff725c',
+  cyan: '#6cc5b0',
+  green: '#3ca951',
+  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 (derived from palette)
 export const COLORS = [
-  '#4269d0', // Blue
-  '#efb118', // Orange
-  '#ff725c', // Red
-  '#6cc5b0', // Cyan
-  '#3ca951', // Green
-  '#ff8ab7', // Pink
-  '#a463f2', // Purple
-  '#97bbf5', // Light Blue
-  '#9c6b4e', // Brown
-  '#9498a0', // Gray
+  CHART_PALETTE.blue,
+  CHART_PALETTE.orange,
+  CHART_PALETTE.red,
+  CHART_PALETTE.cyan,
+  CHART_PALETTE.green,
+  CHART_PALETTE.pink,
+  CHART_PALETTE.purple,
+  CHART_PALETTE.lightBlue,
+  CHART_PALETTE.brown,
+  CHART_PALETTE.gray,
 ];
 
 export function hashCode(str: string) {
@@ -433,10 +450,14 @@ export function hashCode(str: string) {
   return hash;
 }
 
-// Semantic colors for log levels (from Observable palette)
-export const CHART_COLOR_SUCCESS = '#3ca951'; // Green
-export const CHART_COLOR_WARNING = '#efb118'; // Orange
-export const CHART_COLOR_ERROR = '#ff725c'; // Red
+// 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 = (
diff --git a/packages/app/styles/_semantic-colors.scss b/packages/app/styles/_semantic-colors.scss
index 4dca660e41..a41df50405 100644
--- a/packages/app/styles/_semantic-colors.scss
+++ b/packages/app/styles/_semantic-colors.scss
@@ -82,6 +82,10 @@
   --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;
 }
@@ -173,4 +177,8 @@
   --color-chart-success: #3ca951; /* Green */
   --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;
 }

From 5688555977497f9380e0dd1d6766a22b6476bfa9 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 20 Jan 2026 20:03:28 +0000
Subject: [PATCH 6/8] refactor(colors): Update chart color palette to use
 custom green

- Replaced the existing green color in the chart palette with a custom green that is compatible with Mantine's theme.
- Updated corresponding semantic color definitions in the SCSS files to reflect the new custom green for consistency across the application.
---
 packages/app/src/utils.ts                 | 8 ++++----
 packages/app/styles/_semantic-colors.scss | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/app/src/utils.ts b/packages/app/src/utils.ts
index 7b68b2c1e7..a717848878 100644
--- a/packages/app/src/utils.ts
+++ b/packages/app/src/utils.ts
@@ -405,14 +405,14 @@ export const getLogLevelClass = (lvl: string | undefined) => {
         : undefined;
 };
 
-// Observable categorical color palette - single source of truth
-// https://observablehq.com/@d3/color-schemes
+// Chart color palette - single source of truth
+// Based on Observable categorical palette with Mantine-compatible green
 export const CHART_PALETTE = {
+  green: '#00c28a', // Custom green.5 from mantineTheme - works well in light & dark modes
   blue: '#4269d0',
   orange: '#efb118',
   red: '#ff725c',
   cyan: '#6cc5b0',
-  green: '#3ca951',
   pink: '#ff8ab7',
   purple: '#a463f2',
   lightBlue: '#97bbf5',
@@ -425,11 +425,11 @@ export const CHART_PALETTE = {
 
 // Ordered array for chart series (derived from palette)
 export const COLORS = [
+  CHART_PALETTE.green,
   CHART_PALETTE.blue,
   CHART_PALETTE.orange,
   CHART_PALETTE.red,
   CHART_PALETTE.cyan,
-  CHART_PALETTE.green,
   CHART_PALETTE.pink,
   CHART_PALETTE.purple,
   CHART_PALETTE.lightBlue,
diff --git a/packages/app/styles/_semantic-colors.scss b/packages/app/styles/_semantic-colors.scss
index a41df50405..76460df08b 100644
--- a/packages/app/styles/_semantic-colors.scss
+++ b/packages/app/styles/_semantic-colors.scss
@@ -70,7 +70,7 @@
   --color-chart-2: #efb118; /* Orange */
   --color-chart-3: #ff725c; /* Red */
   --color-chart-4: #6cc5b0; /* Cyan */
-  --color-chart-5: #3ca951; /* Green */
+  --color-chart-5: #00c28a; /* Green - custom green.5 */
   --color-chart-6: #ff8ab7; /* Pink */
   --color-chart-7: #a463f2; /* Purple */
   --color-chart-8: #97bbf5; /* Light Blue */
@@ -78,7 +78,7 @@
   --color-chart-10: #9498a0; /* Gray */
 
   /* Chart Semantic Colors */
-  --color-chart-success: #3ca951; /* Green */
+  --color-chart-success: #00c28a; /* Green - custom green.5 */
   --color-chart-warning: #efb118; /* Orange */
   --color-chart-error: #ff725c; /* Red */
 
@@ -166,7 +166,7 @@
   --color-chart-2: #efb118; /* Orange */
   --color-chart-3: #ff725c; /* Red */
   --color-chart-4: #6cc5b0; /* Cyan */
-  --color-chart-5: #3ca951; /* Green */
+  --color-chart-5: #00c28a; /* Green - custom green.5 */
   --color-chart-6: #ff8ab7; /* Pink */
   --color-chart-7: #a463f2; /* Purple */
   --color-chart-8: #97bbf5; /* Light Blue */
@@ -174,7 +174,7 @@
   --color-chart-10: #9498a0; /* Gray */
 
   /* Chart Semantic Colors */
-  --color-chart-success: #3ca951; /* Green */
+  --color-chart-success: #00c28a; /* Green - custom green.5 */
   --color-chart-warning: #efb118; /* Orange */
   --color-chart-error: #ff725c; /* Red */
 

From 49b6ccf06b4b04630ae814d47391ffa7e0c5f8f0 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Tue, 20 Jan 2026 20:15:49 +0000
Subject: [PATCH 7/8] refactor(chart): Update ChartUtils tests to use
 centralized color constants

- Replaced hardcoded color values in ChartUtils tests with constants from the COLORS array for consistency.
- Ensured that all color references align with the centralized color definitions established in previous commits.
---
 packages/app/src/__tests__/ChartUtils.test.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/app/src/__tests__/ChartUtils.test.ts b/packages/app/src/__tests__/ChartUtils.test.ts
index e809a5ea43..53301f621d 100644
--- a/packages/app/src/__tests__/ChartUtils.test.ts
+++ b/packages/app/src/__tests__/ChartUtils.test.ts
@@ -222,7 +222,7 @@ describe('ChartUtils', () => {
           isDashed: false,
         },
         {
-          color: '#8250dc',
+          color: COLORS[1],
           dataKey: 'max · checkout',
           currentPeriodKey: 'max · checkout',
           previousPeriodKey: 'max · checkout (previous)',
@@ -230,7 +230,7 @@ describe('ChartUtils', () => {
           isDashed: false,
         },
         {
-          color: '#cdad7a',
+          color: COLORS[2],
           dataKey: 'AVG(toFloat64OrDefault(toString(Duration))) · shipping',
           currentPeriodKey:
             'AVG(toFloat64OrDefault(toString(Duration))) · shipping',
@@ -240,7 +240,7 @@ describe('ChartUtils', () => {
           isDashed: false,
         },
         {
-          color: '#0d6efd',
+          color: COLORS[3],
           dataKey: 'max · shipping',
           currentPeriodKey: 'max · shipping',
           previousPeriodKey: 'max · shipping (previous)',
@@ -414,7 +414,7 @@ describe('ChartUtils', () => {
           isDashed: false,
         },
         {
-          color: '#8250dc',
+          color: COLORS[1],
           dataKey: 'max · checkout',
           currentPeriodKey: 'max · checkout',
           previousPeriodKey: 'max · checkout (previous)',
@@ -422,7 +422,7 @@ describe('ChartUtils', () => {
           isDashed: false,
         },
         {
-          color: '#cdad7a',
+          color: COLORS[2],
           dataKey: 'AVG(toFloat64OrDefault(toString(Duration))) · shipping',
           currentPeriodKey:
             'AVG(toFloat64OrDefault(toString(Duration))) · shipping',
@@ -432,7 +432,7 @@ describe('ChartUtils', () => {
           isDashed: false,
         },
         {
-          color: '#0d6efd',
+          color: COLORS[3],
           dataKey: 'max · shipping',
           currentPeriodKey: 'max · shipping',
           previousPeriodKey: 'max · shipping (previous)',

From b8d708751fff4e2c6ead56af0d3703b928d470ac Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Wed, 21 Jan 2026 12:42:34 +0000
Subject: [PATCH 8/8] refactor(colors): Enhance chart color definitions for
 brand consistency

- Updated the chart color palette to prioritize brand green as the primary color.
- Adjusted the COLORS array and corresponding CSS variables to reflect the new order.
- Improved comments for clarity on color usage and mapping to CSS variables.
---
 .../app/src/theme/ChartColors.stories.tsx     |  5 ++--
 packages/app/src/utils.ts                     | 28 +++++++++--------
 packages/app/styles/_semantic-colors.scss     | 30 ++++++++++---------
 3 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/packages/app/src/theme/ChartColors.stories.tsx b/packages/app/src/theme/ChartColors.stories.tsx
index 7107bdde32..132e55960d 100644
--- a/packages/app/src/theme/ChartColors.stories.tsx
+++ b/packages/app/src/theme/ChartColors.stories.tsx
@@ -7,14 +7,13 @@ import {
   COLORS,
 } from '@/utils';
 
-// Labels for the Observable categorical color palette
-// https://observablehq.com/@d3/color-schemes
+// Labels for chart colors - brand green first, then Observable palette
 const COLOR_LABELS = [
+  'Green (Brand)',
   'Blue',
   'Orange',
   'Red',
   'Cyan',
-  'Green',
   'Pink',
   'Purple',
   'Light Blue',
diff --git a/packages/app/src/utils.ts b/packages/app/src/utils.ts
index a717848878..b49dea8c4c 100644
--- a/packages/app/src/utils.ts
+++ b/packages/app/src/utils.ts
@@ -406,9 +406,10 @@ export const getLogLevelClass = (lvl: string | undefined) => {
 };
 
 // Chart color palette - single source of truth
-// Based on Observable categorical palette with Mantine-compatible green
+// Colors from Observable categorical palette, with custom brand green
+// https://observablehq.com/@d3/color-schemes
 export const CHART_PALETTE = {
-  green: '#00c28a', // Custom green.5 from mantineTheme - works well in light & dark modes
+  green: '#00c28a', // Brand green (Mantine green.5) - used as primary chart color
   blue: '#4269d0',
   orange: '#efb118',
   red: '#ff725c',
@@ -423,18 +424,19 @@ export const CHART_PALETTE = {
   orangeHighlight: '#f5c94d',
 } as const;
 
-// Ordered array for chart series (derived from palette)
+// 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 = [
-  CHART_PALETTE.green,
-  CHART_PALETTE.blue,
-  CHART_PALETTE.orange,
-  CHART_PALETTE.red,
-  CHART_PALETTE.cyan,
-  CHART_PALETTE.pink,
-  CHART_PALETTE.purple,
-  CHART_PALETTE.lightBlue,
-  CHART_PALETTE.brown,
-  CHART_PALETTE.gray,
+  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) {
diff --git a/packages/app/styles/_semantic-colors.scss b/packages/app/styles/_semantic-colors.scss
index 76460df08b..603fff5bab 100644
--- a/packages/app/styles/_semantic-colors.scss
+++ b/packages/app/styles/_semantic-colors.scss
@@ -65,12 +65,14 @@
   --color-json-array: var(--mantine-color-green-3);
   --color-json-punctuation: var(--mantine-color-dark-4);
 
-  /* Chart Colors - Observable categorical palette (works on light & dark) */
-  --color-chart-1: #4269d0; /* Blue */
-  --color-chart-2: #efb118; /* Orange */
-  --color-chart-3: #ff725c; /* Red */
-  --color-chart-4: #6cc5b0; /* Cyan */
-  --color-chart-5: #00c28a; /* Green - custom green.5 */
+  /* 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 */
@@ -78,7 +80,7 @@
   --color-chart-10: #9498a0; /* Gray */
 
   /* Chart Semantic Colors */
-  --color-chart-success: #00c28a; /* Green - custom green.5 */
+  --color-chart-success: #00c28a; /* Green - Brand */
   --color-chart-warning: #efb118; /* Orange */
   --color-chart-error: #ff725c; /* Red */
 
@@ -161,12 +163,12 @@
   --color-json-array: var(--mantine-color-green-7);
   --color-json-punctuation: var(--mantine-color-dark-5);
 
-  /* Chart Colors - Observable categorical palette (same for light mode) */
-  --color-chart-1: #4269d0; /* Blue */
-  --color-chart-2: #efb118; /* Orange */
-  --color-chart-3: #ff725c; /* Red */
-  --color-chart-4: #6cc5b0; /* Cyan */
-  --color-chart-5: #00c28a; /* Green - custom green.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 */
@@ -174,7 +176,7 @@
   --color-chart-10: #9498a0; /* Gray */
 
   /* Chart Semantic Colors */
-  --color-chart-success: #00c28a; /* Green - custom green.5 */
+  --color-chart-success: #00c28a; /* Green - Brand */
   --color-chart-warning: #efb118; /* Orange */
   --color-chart-error: #ff725c; /* Red */