diff --git a/.changeset/unify-and-name-chart-colors.md b/.changeset/unify-and-name-chart-colors.md
new file mode 100644
index 0000000000..9db9e02240
--- /dev/null
+++ b/.changeset/unify-and-name-chart-colors.md
@@ -0,0 +1,20 @@
+---
+'@hyperdx/app': patch
+---
+
+refactor(theme): unify chart palette across HyperDX and ClickStack and address categorical slots by name
+
+The categorical and semantic chart palettes are now identical across
+both themes (defined once in `_chart-tokens.scss`, included by both),
+and categorical slots are addressed by hue name (`--color-chart-blue`,
+`--color-chart-orange`, …) instead of by index (`--color-chart-1`..`-10`).
+The numbered vars are removed.
+
+Brand impact: HyperDX charts no longer lead with brand green
+(`#00c28a`). They now lead with Observable blue (`#437eef`), matching
+ClickStack. Brand identity stays visible via Mantine accent (`green`
+on HyperDX), Click UI globals, sidebar gradient, and other UI chrome.
+
+Multi-series ordering moves from CSS to JS via `CATEGORICAL_ORDER` in
+`packages/app/src/utils.ts`, so reordering default series colors no
+longer requires SCSS edits.
diff --git a/agent_docs/data_viz_colors.md b/agent_docs/data_viz_colors.md
index 72438f54c1..836d9e2c8f 100644
--- a/agent_docs/data_viz_colors.md
+++ b/agent_docs/data_viz_colors.md
@@ -9,46 +9,107 @@
 There are **three** color systems for data viz, with three different
 consumption patterns:
 
-| System                         | Use for                                  | Source of truth                          | How to consume                                |
-| ------------------------------ | ---------------------------------------- | ---------------------------------------- | --------------------------------------------- |
-| **Categorical 1–10**           | Multi-series line/bar/area/pie charts    | CSS vars `--color-chart-1`..`-10`        | `getColorProps(index, label)` in `utils.ts`   |
-| **Semantic (success/warn/err)**| Status indicators, log levels, deltas    | CSS vars `--color-chart-{success,...}`   | `getChartColorSuccess/Warning/Error()`        |
-| **Heatmap continuous**         | `DBHeatmapChart` density gradients       | `darkPalette`/`lightPalette` arrays      | Imported directly from `DBHeatmapChart.tsx`   |
+| System                         | Use for                                  | Source of truth                            | How to consume                                |
+| ------------------------------ | ---------------------------------------- | ------------------------------------------ | --------------------------------------------- |
+| **Categorical (10 named hues)**| Multi-series line/bar/area/pie charts    | CSS vars `--color-chart-{blue,orange,...}` | `getColorProps(index, label)` in `utils.ts`   |
+| **Semantic (success/warn/err)**| Status indicators, log levels, deltas    | CSS vars `--color-chart-{success,...}`     | `getChartColorSuccess/Warning/Error()`        |
+| **Heatmap continuous**         | `DBHeatmapChart` density gradients       | `darkPalette`/`lightPalette` arrays        | Imported directly from `DBHeatmapChart.tsx`   |
+
+The categorical and semantic palettes are **identical across the HyperDX
+and ClickStack themes** — they're defined once in
+`packages/app/src/theme/themes/_chart-tokens.scss` and `@include`d by
+both themes. Theme branding still differentiates UI chrome (Mantine
+accent, Click UI globals); chart colors do not.
 
 **Hard rules**:
 
-- **Never** pass a hex color to a chart series. Always go through one of the
-  helpers above so theme switching works.
+- **Never** pass a hex color to a chart series. Always go through one of
+  the helpers above so dark/light scheme switching works.
 - **Never** map log levels to raw Mantine colors (`red.5`, `yellow.6`).
-  Use `logLevelColor()` / `getColorProps()` — they pick the theme-correct
+  Use `logLevelColor()` / `getColorProps()` — they pick the correct
   semantic chart color.
 - The categorical palette and the heatmap palette are **different things**.
-  Don't reuse `--color-chart-N` for heatmap density; don't reuse the heatmap
-  arrays for series colors.
+  Don't reuse `--color-chart-{name}` vars for heatmap density; don't reuse
+  the heatmap arrays for series colors.
+
+**Two ways to address the categorical palette**:
+
+- **By name** (identity): `var(--color-chart-cyan)` always means cyan,
+  regardless of where cyan sits in the categorical assignment order. Use
+  this when a specific element should always be the same hue.
+- **By position** (ordering): `getColorProps(index, label)` returns the
+  `index`-th color from `CATEGORICAL_ORDER` in `utils.ts`. Use this for
+  multi-series charts where each series just needs a distinct slot.
+
+The two layers are decoupled: changing `CATEGORICAL_ORDER` to re-prioritize
+which hue is "slot 0" doesn't move any of the named vars around.
 
 ## Where the colors live
 
-### Categorical series palette (`--color-chart-1` through `--color-chart-10`)
+### Categorical series palette (named slots)
+
+Defined once in **`packages/app/src/theme/themes/_chart-tokens.scss`**
+and consumed by both themes via `@include chart-tokens.chart-tokens`
+inside their dark and light scheme blocks:
+
+| CSS var                     | Hex       |
+| --------------------------- | --------- |
+| `--color-chart-blue`        | `#437eef` |
+| `--color-chart-orange`      | `#efb118` |
+| `--color-chart-red`         | `#ff725c` |
+| `--color-chart-cyan`        | `#6cc5b0` |
+| `--color-chart-green`       | `#3ca951` |
+| `--color-chart-pink`        | `#ff8ab7` |
+| `--color-chart-purple`      | `#a463f2` |
+| `--color-chart-light-blue`  | `#97bbf5` |
+| `--color-chart-brown`       | `#9c6b4e` |
+| `--color-chart-gray`        | `#9498a0` |
+
+Source: [Observable 10 categorical palette](https://observablehq.com/@d3/color-schemes).
+Designed to be distinguishable on both dark and light backgrounds and
+for color-vision-deficient viewers.
+
+#### Ordering for multi-series charts
+
+The categorical assignment order — which named slot is "slot 0", "slot 1",
+etc. for multi-series charts — lives entirely in JS, in
+`packages/app/src/utils.ts`:
+
+```ts
+const CATEGORICAL_ORDER = [
+  'blue', 'orange', 'red', 'cyan', 'green',
+  'pink', 'purple', 'lightBlue', 'brown', 'gray',
+] as const;
+```
+
+`getColorProps(index, label)` walks this array. To re-prioritize the
+default ordering for all charts, edit `CATEGORICAL_ORDER` — no SCSS edit
+required. The named vars stay where they are.
+
+#### Why one palette across both themes
+
+Originally HyperDX led with brand green (`#00c28a`) and ClickStack led
+with Observable blue. That coupled "brand identity" with "chart slot 1",
+which in practice caused two problems:
 
-| Theme       | File                                                                    | Index 1 (primary) |
-| ----------- | ----------------------------------------------------------------------- | ----------------- |
-| HyperDX     | `packages/app/src/theme/themes/hyperdx/_tokens.scss` (lines ~95–117)    | `#00c28a` brand green |
-| ClickStack  | `packages/app/src/theme/themes/clickstack/_tokens.scss` (lines ~175–201)| `#437eef` Observable blue |
+- The HyperDX brand-green also doubled as `--color-chart-success`, so
+  success pills and primary chart series shared a hue.
+- Per-theme palette ordering required a runtime `detectActiveTheme()`
+  branch in the JS fallback path and an SSR/hydration mismatch caveat.
 
-The same ten slots in both themes use the same hue families (blue, orange,
-red, cyan, green, pink, purple, light blue, brown, gray) — only **slot 1**
-differs:
+Unifying on one palette removes both concerns. Brand identity stays in
+the UI chrome (Mantine accent yellow vs green, sidebar gradient, etc.);
+chart-color identity is now a stable, theme-agnostic contract.
 
-- **HyperDX** leads with brand green, then Observable colors.
-- **ClickStack** leads with Observable blue (Click UI accent yellow doesn't
-  pass contrast on a typical chart background, so we don't use it as a series
-  color — see "Per-theme considerations" below).
+#### Why scheme blocks still redeclare
 
-The vars are defined identically inside the dark and light selectors. That
-duplication is intentional and called out in `_tokens.scss`: CSS specificity
-requires it because the parent selectors `[data-mantine-color-scheme='dark']`
-and `[data-mantine-color-scheme='light']` would otherwise drop the vars on
-scheme switch.
+Even though the values are identical between dark and light, both
+scheme blocks `@include chart-tokens.chart-tokens` rather than declaring
+the vars at a parent selector. The reason is CSS specificity: the rest
+of the design tokens are scoped to
+`[data-mantine-color-scheme='dark|light']` and would otherwise win the
+cascade and reset the chart vars to `unset`. The shared partial keeps
+the values in lockstep without sacrificing specificity.
 
 ### Semantic chart colors
 
@@ -61,26 +122,40 @@ scheme switch.
 --color-chart-error-highlight
 ```
 
-Defined in both `_tokens.scss` files. **HyperDX success uses brand green
-(`#00c28a`)**; **ClickStack success uses Observable green (`#3ca951`)** so it
-doesn't collide with the yellow brand accent. Warning and error are the same
-across themes (orange `#efb118`, red `#ff725c`).
+Also defined in `_chart-tokens.scss`. Identical across themes:
 
-### JavaScript fallback (`packages/app/src/utils.ts`)
+| Var                                | Hex       |
+| ---------------------------------- | --------- |
+| `--color-chart-success`            | `#3ca951` |
+| `--color-chart-warning`            | `#efb118` |
+| `--color-chart-error`              | `#ff725c` |
+| `--color-chart-success-highlight`  | `#80d9b3` |
+| `--color-chart-warning-highlight`  | `#f5c94d` |
+| `--color-chart-error-highlight`    | `#ffa090` |
 
-The CSS vars are the source of truth at runtime, but two palette objects in
-`utils.ts` are the SSR fallback **and** the storybook reference:
+Note that `--color-chart-success` (`#3ca951`) is **not** the same var as
+`--color-chart-green` (`#3ca951`) — they happen to coincide today but
+they're two different vars with different intents. Treat them as
+independent contracts: success can change to a less-saturated green
+without touching the categorical palette, and vice versa.
+
+### JavaScript palette (`packages/app/src/utils.ts`)
+
+The CSS vars are the source of truth at runtime; `utils.ts` mirrors them
+in three pieces:
 
 ```text
-CHART_PALETTE              # HyperDX (green-first), lines ~356-374
-CLICKSTACK_CHART_PALETTE   # ClickStack (blue-first), lines ~376-393
-COLORS                     # Exported, ordered, HyperDX-default array, lines ~398-409
+CHART_PALETTE        # name -> hex map, mirrors `_chart-tokens.scss`
+CATEGORICAL_ORDER    # ordered list of palette keys for slot-N assignment
+COLORS               # exported hex array, derived from CATEGORICAL_ORDER
 ```
 
-`COLORS[0]` corresponds to `--color-chart-1`, `COLORS[1]` to `--color-chart-2`,
-and so on. **Keep them in sync.** If you change a hex in one place, change it
-in all three (HyperDX SCSS, ClickStack SCSS, and `CHART_PALETTE` /
-`CLICKSTACK_CHART_PALETTE` / `COLORS`).
+`COLORS[i]` always equals `CHART_PALETTE[CATEGORICAL_ORDER[i]]`. It's
+exported as the SSR fallback for `getColorFromCSSVariable(index)` and a
+convenience for callers that want a positional hex without going through
+the helpers. **Keep them in sync.** A hex change must update both
+`_chart-tokens.scss` and `CHART_PALETTE`. Re-ordering the categorical
+assignment is a `CATEGORICAL_ORDER`-only edit.
 
 ### Reader functions (`packages/app/src/utils.ts`)
 
@@ -99,16 +174,14 @@ These are the only functions React code should call:
 
 Internals worth knowing:
 
-- `getColorFromCSSVariable(index)` reads `--color-chart-{index+1}` from
-  `documentElement` via `getComputedStyle`. On SSR or if the var is missing,
-  it falls back to `COLORS[index % COLORS.length]`.
-- `getSemanticChartColor(varName, hyperdxFallback, clickstackFallback)` does
-  the same for the semantic vars and uses `detectActiveTheme()` (checks for
-  the `theme-clickstack` class on `<html>`) to pick the correct fallback when
-  CSS isn't available.
-- During SSR, semantic readers return the **HyperDX** default — the
-  hydration mismatch window is tiny because charts render after data fetch
-  on the client.
+- `getColorFromCSSVariable(index)` looks up the categorical slot name via
+  `CATEGORICAL_ORDER[index % CATEGORICAL_ORDER.length]`, then reads the
+  matching `--color-chart-{kebab-case name}` var from `documentElement`
+  via `getComputedStyle`. On SSR or if the var is missing, it falls back
+  to `CHART_PALETTE[name]`.
+- `getSemanticChartColor(varName, fallback)` does the same for the
+  semantic vars. Single-argument fallback — both themes resolve to the
+  same hex now, so the SSR fallback always matches the live value.
 
 ### Heatmap palette (component-local)
 
@@ -119,7 +192,7 @@ Internals worth knowing:
 - Selected at the call site by `useMantineColorScheme()` and
   `colorScheme === 'light' ? lightPalette : darkPalette`.
 
-These are **scheme-aware, not brand-aware**: HyperDX dark and ClickStack
+These are **scheme-aware, not theme-aware**: HyperDX dark and ClickStack
 dark share the same heatmap gradient, same for light. Red is intentionally
 omitted from the high end so it can be reserved for error overlays.
 
@@ -129,59 +202,35 @@ duplicate the arrays in another component.
 
 ### Trace and delta-specific colors
 
-A few component-local accents that are **not** part of the categorical or
-semantic palettes:
+A few component-local accents that are **not** part of the categorical
+or semantic palettes:
 
 - `ALL_SPANS_COLOR = 'var(--mantine-color-blue-6)'` in
   `packages/app/src/components/deltaChartUtils.ts` — the "all spans"
-  reference bar in `DBDeltaChart`. Keep using this var; don't replace it
-  with `--color-chart-1` (it's a comparison reference, not a series).
-- Trace waterfall span tints in `DBTraceWaterfallChart.tsx` — derived from
-  span attributes, not from this palette.
+  reference bar in `DBDeltaChart`. Keep using this var; don't replace
+  it with `--color-chart-blue` (it's a comparison reference, not a
+  categorical series).
+- Trace waterfall span tints in `DBTraceWaterfallChart.tsx` — derived
+  from span attributes, not from this palette.
 
 ## Storybook reference
 
 The visual reference for the categorical and semantic palettes is the
-storybook story at:
-
-```1:22:packages/app/src/theme/ChartColors.stories.tsx
-import React from 'react';
-
-import {
-  COLORS,
-  getChartColorError,
-  getChartColorSuccess,
-  getChartColorWarning,
-} 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',
-];
-```
-
-It renders `AllChartColors`, `BarChartPreview`, `LineChartPreview`,
-`SemanticColorsPreview`, and `AccessibilityCheck`. Run storybook in the
-`app` package to inspect both schemes side by side.
+storybook story at `packages/app/src/theme/ChartColors.stories.tsx`. It
+renders `AllChartColors`, `BarChartPreview`, `LineChartPreview`,
+`SemanticColorsPreview`, and `AccessibilityCheck`. Both schemes look
+identical across the two brand themes (since chart vars are shared);
+toggle dark/light to verify legibility.
 
 ## How to consume (recipes)
 
 ### Multi-series time-series chart
 
-`ChartUtils.tsx → setLineColors` already wires the categorical palette per
-series via `getColorProps(index, level)` in
+`ChartUtils.tsx → setLineColors` already wires the categorical palette
+per series via `getColorProps(index, level)` in
 `packages/app/src/ChartUtils.tsx`. **You should not have to think about
-chart colors when adding a new chart that goes through `seriesToTimeSeries`
-/ `setLineColors`** — they handle it.
+chart colors when adding a new chart that goes through
+`seriesToTimeSeries` / `setLineColors`** — they handle it.
 
 If you're rendering a custom chart outside that pipeline:
 
@@ -195,9 +244,10 @@ const series = data.map((s, i) => ({
 }));
 ```
 
-`level` (the second arg) is used to override with semantic colors when the
-label looks like a log level (`'error'`, `'warn'`, `'info'`, etc.). Pass
-`s.label` if it might encode a log level, otherwise pass an empty string.
+`level` (the second arg) is used to override with semantic colors when
+the label looks like a log level (`'error'`, `'warn'`, `'info'`, etc.).
+Pass `s.label` if it might encode a log level, otherwise pass an empty
+string.
 
 ### Status pill / delta indicator
 
@@ -208,19 +258,20 @@ import { getChartColorError, getChartColorSuccess } from '@/utils';
 <Box style={{ background: getChartColorSuccess() }} />
 ```
 
-These functions return resolved hex strings, so they can be used in inline
-styles or passed to libraries that don't understand CSS vars (e.g.
-`uPlot`'s canvas fills).
+These functions return resolved hex strings, so they can be used in
+inline styles or passed to libraries that don't understand CSS vars
+(e.g. `uPlot`'s canvas fills).
 
-If you're styling a DOM element with regular CSS, prefer the var directly:
+If you're styling a DOM element with regular CSS, prefer the var
+directly:
 
 ```tsx
 <Box style={{ background: 'var(--color-chart-success)' }} />
 ```
 
-The var route reacts instantly to theme switches without re-running React.
-Use the function form only when you need a string at compute time
-(canvas/WebGL, library config objects, etc.).
+The var route reacts instantly to scheme switches without re-running
+React. Use the function form only when you need a string at compute
+time (canvas/WebGL, library config objects, etc.).
 
 ### Heatmap
 
@@ -237,10 +288,10 @@ reconstruct it.
 
 ### Pie / donut where slice order matters
 
-The categorical palette is **ordered for distinguishability** — adjacent
-slots are designed to contrast. If you're drawing a pie chart where the
-largest slice should always be the most prominent color, sort your data
-first and let the index map to the palette naturally:
+The categorical palette is **ordered for distinguishability** —
+adjacent slots are designed to contrast. If you're drawing a pie chart
+where the largest slice should always be the most prominent color, sort
+your data first and let the index map to the palette naturally:
 
 ```tsx
 const sorted = data.toSorted((a, b) => b.value - a.value);
@@ -250,76 +301,78 @@ const slices = sorted.map((d, i) => ({
 }));
 ```
 
-`ChartUtils.tsx → buildPieChartData` already does this — the comment "Sort
-in descending order so the largest slice is always first and gets the
-first color in the palette" is at line ~444.
+`ChartUtils.tsx → buildPieChartData` already does this — the comment
+"Sort in descending order so the largest slice is always first and gets
+the first color in the palette" is at line ~444.
 
 ## Per-theme considerations
 
-### HyperDX (green-first)
-
-- Slot 1 is brand green (`#00c28a`) so single-series charts feel
-  on-brand without any extra config.
-- Semantic success **also** uses brand green, so success indicators and
-  primary series share a hue. This is intentional but worth knowing:
-  if a chart juxtaposes a "success" pill with a green series, that's
-  expected, not a bug.
-
-### ClickStack (blue-first)
-
-- The brand accent is **yellow** (`--palette-brand-300: #faff69`). It is
-  **not** in the chart palette and should not be added — yellow on a
-  light background fails contrast, and yellow as a series color reads as
-  "warning" in most contexts.
-- Slot 1 falls back to Observable blue (`#437eef`).
-- Semantic success is **Observable green** (`#3ca951`), distinct from
-  the yellow brand accent. Don't try to "brand" success with yellow.
+The categorical and semantic chart palettes are **theme-agnostic** —
+both HyperDX and ClickStack resolve every `--color-chart-*` var to the
+same hex. Theme branding lives elsewhere:
 
-### Both themes
+- **Mantine accent**: `green` for HyperDX, `yellow` for ClickStack.
+  Affects `<Button color="primary">`, focus rings, links, etc.
+- **Click UI globals**: ClickStack defines a `--click-global-color-*`
+  layer (yellow brand palette, slate neutrals); HyperDX uses Mantine's
+  green palette directly.
+- **Sidebar / chrome**: each theme styles its own surfaces, headers,
+  and field backgrounds independently.
 
-- The dark/light scheme split is handled by CSS (the same vars get
-  redefined inside each scheme selector). React code does not need to
-  branch on scheme except for the heatmap palette.
-- The chart vars in `_tokens.scss` are intentionally duplicated across
-  the dark and light blocks. If you change one, change the other.
+The yellow ClickStack accent is **deliberately not** in the chart
+palette — yellow on a light background fails contrast, and yellow as a
+series color reads as "warning" in most contexts. If a future Click UI
+update wants brand yellow visible somewhere in charts, that goes in a
+new semantic var (`--color-chart-brand`?), never as a categorical slot.
 
 ## Adding new entries
 
-### A new categorical slot (slot 11+)
+### A new categorical slot (an 11th hue)
 
-Don't, unless you have a real need. Ten distinguishable hues is the upper
-bound for readable categorical legends — beyond that, viewers can't tell
-slices apart, and color-blind viewers definitely can't. Solutions in
-descending order of preference:
+Don't, unless you have a real need. Ten distinguishable hues is the
+upper bound for readable categorical legends — beyond that, viewers
+can't tell slices apart, and color-blind viewers definitely can't.
+Solutions in descending order of preference:
 
 1. **Group small categories** into "Other" before charting.
 2. **Reuse slots** with patterns/strokes/labels for disambiguation.
-3. If you really must extend: add the same `--color-chart-N` var to
-   **all four** SCSS blocks (HyperDX dark, HyperDX light, ClickStack
-   dark, ClickStack light), append the hex to `CHART_PALETTE` /
-   `CLICKSTACK_CHART_PALETTE`, append to `COLORS`, append a label to
-   `COLOR_LABELS` in `ChartColors.stories.tsx`.
+3. If you really must extend:
+   - Add the new `--color-chart-{name}` var to the
+     `categorical-chart-tokens` mixin in `_chart-tokens.scss`.
+   - Add the hex to `CHART_PALETTE` in `utils.ts` (camelCase key).
+   - Append the new key to `CATEGORICAL_ORDER` in `utils.ts` to put it
+     at the end of the assignment order, or insert it earlier to bump
+     other hues down a slot.
+   - Append a `{ key, cssSlug, label }` row to `CATEGORICAL_SLOTS` in
+     `ChartColors.stories.tsx`.
+
+### Reordering the categorical assignment (which hue is "slot 0"?)
+
+Edit `CATEGORICAL_ORDER` in `utils.ts`. SCSS does not need to change —
+the named vars stay where they are; only `getColorProps(index)`'s mapping
+from index to hue moves.
 
 ### A new semantic color (e.g. `--color-chart-pending`)
 
-1. Pick the hex per theme (HyperDX often uses brand variants;
-   ClickStack uses Observable variants).
-2. Add `--color-chart-pending` and (if needed)
-   `--color-chart-pending-highlight` to **all four** SCSS blocks.
-3. Add a hex to `CHART_PALETTE` and `CLICKSTACK_CHART_PALETTE`.
-4. Add a `getChartColorPending()` reader in `utils.ts` that calls
-   `getSemanticChartColor('--color-chart-pending', hyperdxHex, clickstackHex)`.
-5. Update `ChartColors.stories.tsx` `SEMANTIC_CHART_COLORS` so the new
+1. Add `--color-chart-pending` and (if needed)
+   `--color-chart-pending-highlight` to the `semantic-chart-tokens`
+   mixin in `_chart-tokens.scss`.
+2. Add the hex to `CHART_PALETTE` in `utils.ts` (do **not** add it to
+   `CATEGORICAL_ORDER` — semantic vars are independent of the
+   categorical assignment order).
+3. Add a `getChartColorPending()` reader in `utils.ts` that calls
+   `getSemanticChartColor('--color-chart-pending', CHART_PALETTE.<key>)`.
+4. Update `ChartColors.stories.tsx` `SEMANTIC_CHART_COLORS` so the new
    color shows up in the design-tokens story.
-6. If it should override based on a label / status string, extend
+5. If it should override based on a label / status string, extend
    `getLevelColor` / `logLevelColor` accordingly.
 
 ### A new heatmap palette
 
-The current arrays were tuned to (a) be visible on the chart's dark/light
-background, (b) avoid red at the high end so error overlays stay
-readable, and (c) follow a perceptually monotonic luminance ramp.
-Don't add a new palette without those three properties verified — both
+The current arrays were tuned to (a) be visible on the chart's dark/
+light background, (b) avoid red at the high end so error overlays stay
+readable, and (c) follow a perceptually monotonic luminance ramp. Don't
+add a new palette without those three properties verified — both
 "physically dim" and "perceptually noisy" gradients hurt readability.
 
 If you do need to add one (e.g. for a different chart type), keep it
@@ -338,36 +391,38 @@ import { CHART_PALETTE } from '@/utils';   // CHART_PALETTE is not exported
 
 Why each is wrong:
 
-- **Hex / keyword**: bypasses theme switching. ClickStack users will see
-  HyperDX colors, dark/light won't react.
+- **Hex / keyword**: bypasses the CSS var. Dark/light won't react, and
+  any future palette tweak silently misses your chart.
 - **Raw Mantine**: bypasses semantic mapping. `green.5` is not the same
-  as `--color-chart-success` once we tweak the brand palette.
-- **Importing palette objects**: they're module-private. The exported
-  surface is the reader functions and `COLORS` (the SSR fallback array,
-  not for direct use in components).
+  as `--color-chart-success` once we tweak the palette.
+- **Importing palette objects**: `CHART_PALETTE` is module-private. The
+  exported surface is the reader functions and `COLORS` (the SSR
+  fallback array, not for direct use in components).
 
 ## Pre-merge checklist for chart-touching PRs
 
-- [ ] Toggled HyperDX ↔ ClickStack theme — series colors change as
-      expected (slot 1 swaps green ↔ blue).
-- [ ] Toggled dark ↔ light — categorical and semantic colors stay legible
-      on both backgrounds; heatmap gradient flips palettes.
+- [ ] Toggled dark ↔ light — categorical and semantic colors stay
+      legible on both backgrounds; heatmap gradient flips palettes.
+- [ ] Toggled HyperDX ↔ ClickStack — chart colors stay **the same**
+      (only theme chrome should change).
 - [ ] Status indicators use `getChartColor*()` / `var(--color-chart-*)`,
       not raw Mantine colors.
 - [ ] No new hex strings in chart components — all colors flow through
       `utils.ts` helpers or CSS vars.
-- [ ] If you added or changed a hex, changed it in **all four** places
-      (HyperDX SCSS, ClickStack SCSS, `CHART_PALETTE` /
-      `CLICKSTACK_CHART_PALETTE`, `COLORS`).
+- [ ] If you added or changed a hex, changed it in **two** places
+      (`_chart-tokens.scss` + `CHART_PALETTE` in `utils.ts`).
+- [ ] If you added a new categorical slot, also added it to
+      `CATEGORICAL_ORDER` in `utils.ts` and `CATEGORICAL_SLOTS` in
+      `ChartColors.stories.tsx`.
 - [ ] Storybook `Design Tokens / Chart Colors` still renders correctly.
 
 ## File reference summary
 
 | What                                       | Where                                                                       |
 | ------------------------------------------ | --------------------------------------------------------------------------- |
-| HyperDX chart vars (dark + light)          | `packages/app/src/theme/themes/hyperdx/_tokens.scss`                        |
-| ClickStack chart vars (dark + light)       | `packages/app/src/theme/themes/clickstack/_tokens.scss`                     |
-| JS palettes + reader functions             | `packages/app/src/utils.ts`                                                 |
+| Shared chart vars (categorical + semantic) | `packages/app/src/theme/themes/_chart-tokens.scss`                          |
+| Theme files that include the partial       | `packages/app/src/theme/themes/{hyperdx,clickstack}/_tokens.scss`           |
+| JS palette + reader functions              | `packages/app/src/utils.ts`                                                 |
 | Multi-series wiring (`setLineColors` etc.) | `packages/app/src/ChartUtils.tsx`                                           |
 | Heatmap palettes                           | `packages/app/src/components/DBHeatmapChart.tsx` (`darkPalette`, `lightPalette`) |
 | Storybook visual reference                 | `packages/app/src/theme/ChartColors.stories.tsx`                            |
diff --git a/packages/app/src/ChartUtils.tsx b/packages/app/src/ChartUtils.tsx
index 544c6762d5..36790d29f9 100644
--- a/packages/app/src/ChartUtils.tsx
+++ b/packages/app/src/ChartUtils.tsx
@@ -521,6 +521,7 @@ function addResponseToFormattedData({
   previousPeriodOffsetSeconds,
   isPreviousPeriod,
   hiddenSeries = [],
+  logLevelColorFn = logLevelColor,
 }: {
   tsBucketMap: Map<number, Record<string, any>>;
   lineDataMap: { [keyName: string]: LineDataWithOptionalColor };
@@ -529,6 +530,8 @@ function addResponseToFormattedData({
   isPreviousPeriod: boolean;
   previousPeriodOffsetSeconds: number;
   hiddenSeries?: string[];
+  /** When set (e.g. HyperDX log charts), avoids reading nested Mantine vars from the DOM before Mantine updates them after a brand switch. */
+  logLevelColorFn?: typeof logLevelColor;
 }) {
   const { meta, data } = response;
   if (meta == null) {
@@ -584,7 +587,7 @@ function addResponseToFormattedData({
       // Special handling for log level / trace severity colors
       let color: string | undefined = undefined;
       if (firstGroupColumnIsLogLevel(source, groupColumns)) {
-        color = logLevelColor(row[groupColumns[0].name]);
+        color = logLevelColorFn(row[groupColumns[0].name]);
       }
 
       lineDataMap[keyName] = {
@@ -611,6 +614,7 @@ export function formatResponseForTimeChart({
   source,
   hiddenSeries = [],
   previousPeriodOffsetSeconds = 0,
+  logLevelColorFn,
 }: {
   dateRange: [Date, Date];
   granularity?: SQLInterval;
@@ -620,6 +624,7 @@ export function formatResponseForTimeChart({
   source?: TSource;
   hiddenSeries?: string[];
   previousPeriodOffsetSeconds?: number;
+  logLevelColorFn?: typeof logLevelColor;
 }) {
   const meta = currentPeriodResponse.meta;
 
@@ -650,6 +655,8 @@ export function formatResponseForTimeChart({
     [keyName: string]: LineDataWithOptionalColor;
   } = {};
 
+  const resolveLogLevelColor = logLevelColorFn ?? logLevelColor;
+
   addResponseToFormattedData({
     response: currentPeriodResponse,
     lineDataMap,
@@ -658,6 +665,7 @@ export function formatResponseForTimeChart({
     isPreviousPeriod: false,
     previousPeriodOffsetSeconds,
     hiddenSeries,
+    logLevelColorFn: resolveLogLevelColor,
   });
 
   if (previousPeriodResponse != null) {
@@ -669,10 +677,11 @@ export function formatResponseForTimeChart({
       isPreviousPeriod: true,
       previousPeriodOffsetSeconds,
       hiddenSeries,
+      logLevelColorFn: resolveLogLevelColor,
     });
   }
 
-  const logLevelColorOrder = getLogLevelColorOrder();
+  const logLevelColorOrder = getLogLevelColorOrder(resolveLogLevelColor);
   const sortedLineData = Object.values(lineDataMap).sort((a, b) => {
     return (
       logLevelColorOrder.findIndex(color => color === a.color) -
diff --git a/packages/app/src/__tests__/ChartUtils.test.ts b/packages/app/src/__tests__/ChartUtils.test.ts
index e2c1081e8d..851ad7ab50 100644
--- a/packages/app/src/__tests__/ChartUtils.test.ts
+++ b/packages/app/src/__tests__/ChartUtils.test.ts
@@ -11,7 +11,7 @@ import {
   formatResponseForPieChart,
   formatResponseForTimeChart,
 } from '@/ChartUtils';
-import { COLORS, getChartColorError } from '@/utils';
+import { COLORS, getChartColorError, getChartColorInfo } from '@/utils';
 
 describe('ChartUtils', () => {
   describe('formatResponseForTimeChart', () => {
@@ -306,7 +306,7 @@ describe('ChartUtils', () => {
 
       expect(actual.lineData).toEqual([
         {
-          color: COLORS[0],
+          color: getChartColorInfo(),
           dataKey: 'info',
           currentPeriodKey: 'info',
           previousPeriodKey: 'info (previous)',
@@ -315,7 +315,7 @@ describe('ChartUtils', () => {
           isDashed: false,
         },
         {
-          color: COLORS[0],
+          color: getChartColorInfo(),
           dataKey: 'debug',
           currentPeriodKey: 'debug',
           previousPeriodKey: 'debug (previous)',
diff --git a/packages/app/src/components/DBTimeChart.tsx b/packages/app/src/components/DBTimeChart.tsx
index 3f6a5725b1..8f24c9dcf1 100644
--- a/packages/app/src/components/DBTimeChart.tsx
+++ b/packages/app/src/components/DBTimeChart.tsx
@@ -22,6 +22,8 @@ import {
   Stack,
   Text,
   Tooltip,
+  useMantineColorScheme,
+  useMantineTheme,
 } from '@mantine/core';
 import { IconChartBar, IconChartLine, IconSearch } from '@tabler/icons-react';
 
@@ -41,6 +43,13 @@ import { MemoChart } from '@/HDXMultiSeriesTimeChart';
 import { useQueriedChartConfig } from '@/hooks/useChartConfig';
 import { useMVOptimizationExplanation } from '@/hooks/useMVOptimizationExplanation';
 import { useChartNumberFormats, useSource } from '@/source';
+import { useAppTheme } from '@/theme/ThemeProvider';
+import {
+  getChartColorError,
+  getChartColorWarning,
+  getLogLevelClass,
+  logLevelColor,
+} from '@/utils';
 
 import ChartContainer from './charts/ChartContainer';
 import ChartErrorState, {
@@ -286,6 +295,35 @@ function DBTimeChartComponent({
     fillNulls,
   } = useTimeChartSettings(config);
 
+  const { themeName } = useAppTheme();
+  const mantineTheme = useMantineTheme();
+  const { colorScheme } = useMantineColorScheme();
+  const hyperdxGreen6 = mantineTheme.colors?.green?.[6];
+  const hyperdxGreen7 = mantineTheme.colors?.green?.[7];
+
+  /** HyperDX: `--color-chart-info` uses Mantine green-*; those CSS vars update after our DOM read on brand switch, so resolve from the live Mantine theme object instead. */
+  const resolveLogLevelColorForTimeChart = useMemo((): typeof logLevelColor => {
+    if (
+      themeName !== 'hyperdx' ||
+      hyperdxGreen6 == null ||
+      hyperdxGreen7 == null
+    ) {
+      return logLevelColor;
+    }
+    const effectiveScheme = colorScheme ?? 'dark';
+    const infoHex = effectiveScheme === 'light' ? hyperdxGreen7 : hyperdxGreen6;
+    return (key: string | number | undefined) => {
+      const lvl = getLogLevelClass(`${key}`);
+      if (lvl === 'error') {
+        return getChartColorError();
+      }
+      if (lvl === 'warn') {
+        return getChartColorWarning();
+      }
+      return infoHex;
+    };
+  }, [themeName, colorScheme, hyperdxGreen6, hyperdxGreen7]);
+
   const queriedConfig = useMemo(
     () => convertToTimeChartConfig(config),
     [config],
@@ -403,6 +441,7 @@ function DBTimeChartComponent({
         source,
         hiddenSeries,
         previousPeriodOffsetSeconds,
+        logLevelColorFn: resolveLogLevelColorForTimeChart,
       });
       return {
         ...defaultResponse,
@@ -426,6 +465,8 @@ function DBTimeChartComponent({
     previousPeriodData,
     hiddenSeries,
     previousPeriodOffsetSeconds,
+    // Brand + Mantine-sensitive log colors flow through `resolveLogLevelColorForTimeChart`.
+    resolveLogLevelColorForTimeChart,
   ]);
 
   // To enable backward compatibility, allow non-controlled usage of displayType
diff --git a/packages/app/src/components/__tests__/DBTimeChart.test.tsx b/packages/app/src/components/__tests__/DBTimeChart.test.tsx
index cf71665fa5..7b738dbe0d 100644
--- a/packages/app/src/components/__tests__/DBTimeChart.test.tsx
+++ b/packages/app/src/components/__tests__/DBTimeChart.test.tsx
@@ -36,6 +36,18 @@ jest.mock('@/source', () => ({
     .mockReturnValue({ formatByColumn: new Map(), chartFormat: undefined }),
 }));
 
+jest.mock('@/theme/ThemeProvider', () => ({
+  useAppTheme: jest.fn(() => ({
+    theme: { name: 'hyperdx' },
+    themeName: 'hyperdx',
+    availableThemes: ['hyperdx', 'clickstack'],
+    setTheme: jest.fn(),
+    toggleTheme: jest.fn(),
+    clearThemeOverride: jest.fn(),
+    isDev: false,
+  })),
+}));
+
 jest.mock('../MaterializedViews/MVOptimizationIndicator', () =>
   jest.fn(() => null),
 );
diff --git a/packages/app/src/theme/ChartColors.stories.tsx b/packages/app/src/theme/ChartColors.stories.tsx
index 56e17a2568..88905153a5 100644
--- a/packages/app/src/theme/ChartColors.stories.tsx
+++ b/packages/app/src/theme/ChartColors.stories.tsx
@@ -3,29 +3,36 @@ import React from 'react';
 import {
   COLORS,
   getChartColorError,
+  getChartColorInfo,
   getChartColorSuccess,
   getChartColorWarning,
 } 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',
-];
+// Categorical chart slots in canonical assignment order. The CSS var name
+// is the kebab-case form of the camelCase key, and the human label is just
+// the prettified version of the same (so adding a new slot only requires
+// touching `CATEGORICAL_ORDER` in `utils.ts` and adding the matching var
+// to `_chart-tokens.scss` — no story edits needed).
+const CATEGORICAL_SLOTS = [
+  { key: 'blue', cssSlug: 'blue', label: 'Blue (Primary)' },
+  { key: 'orange', cssSlug: 'orange', label: 'Orange' },
+  { key: 'red', cssSlug: 'red', label: 'Red' },
+  { key: 'cyan', cssSlug: 'cyan', label: 'Cyan' },
+  { key: 'green', cssSlug: 'green', label: 'Green' },
+  { key: 'pink', cssSlug: 'pink', label: 'Pink' },
+  { key: 'purple', cssSlug: 'purple', label: 'Purple' },
+  { key: 'lightBlue', cssSlug: 'light-blue', label: 'Light Blue' },
+  { key: 'brown', cssSlug: 'brown', label: 'Brown' },
+  { key: 'gray', cssSlug: 'gray', label: 'Gray' },
+] as const;
 
-// 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}`,
+// Derive chart colors from the single source of truth in utils.ts (COLORS
+// is hex-by-position; CATEGORICAL_SLOTS is name-by-position; their lengths
+// and ordering are kept in lockstep).
+const CHART_COLORS = CATEGORICAL_SLOTS.map((slot, i) => ({
+  name: `color-chart-${slot.cssSlug}`,
+  hex: COLORS[i],
+  label: slot.label,
 }));
 
 const SEMANTIC_CHART_COLORS = [
@@ -34,6 +41,11 @@ const SEMANTIC_CHART_COLORS = [
     hex: getChartColorSuccess(),
     label: 'Success (Green)',
   },
+  {
+    name: 'color-chart-info',
+    hex: getChartColorInfo(),
+    label: 'Info logs (HyperDX: green · ClickStack: blue)',
+  },
   {
     name: 'color-chart-warning',
     hex: getChartColorWarning(),
diff --git a/packages/app/src/theme/ThemeProvider.tsx b/packages/app/src/theme/ThemeProvider.tsx
index 435ff26d9e..802081700f 100644
--- a/packages/app/src/theme/ThemeProvider.tsx
+++ b/packages/app/src/theme/ThemeProvider.tsx
@@ -4,7 +4,6 @@ import React, {
   useContext,
   useEffect,
   useMemo,
-  useRef,
   useState,
 } from 'react';
 
@@ -55,10 +54,11 @@ export function AppThemeProvider({
   // SSR/initial render: Always use props or DEFAULT_THEME for hydration consistency.
   // The server cannot read localStorage, so we must start with a deterministic value.
   //
-  // HYDRATION NOTE: In dev mode, the useEffect below may update the theme after hydration
-  // if localStorage contains a different theme. This is intentional for dev testing
-  // and will cause a brief flash. In production (IS_DEV=false), theme is stable and
-  // matches server render. To avoid any flash in production, pass themeName prop explicitly.
+  // HYDRATION NOTE: In dev mode, the useEffect that syncs localStorage may update
+  // the theme after hydration if localStorage contains a different theme. This is
+  // intentional for dev testing and will cause a brief flash. In production
+  // (IS_DEV=false), theme is stable and matches server render. To avoid any flash
+  // in production, pass themeName prop explicitly.
   const [resolvedThemeName, setResolvedThemeName] = useState<ThemeName>(
     () => propsThemeName ?? DEFAULT_THEME,
   );
@@ -131,28 +131,22 @@ export function AppThemeProvider({
     [theme, setTheme, toggleTheme, clearThemeOverride],
   );
 
-  // Track previous theme class for efficient swap
-  const prevThemeClassRef = useRef<string | null>(null);
-
-  // Apply theme CSS class to document (single class swap for performance)
-  useEffect(() => {
-    if (typeof document !== 'undefined') {
-      const html = document.documentElement;
-      const newClass = theme.cssClass;
-
-      // Remove only the previous theme class (not all themes)
-      if (prevThemeClassRef.current && prevThemeClassRef.current !== newClass) {
-        html.classList.remove(prevThemeClassRef.current);
-      }
-
-      // Add new theme class if not already present
-      if (!html.classList.contains(newClass)) {
-        html.classList.add(newClass);
+  // Apply theme CSS class to <html> synchronously during render so descendants
+  // that read CSS variables in the same commit (e.g. chart formatting via
+  // getComputedStyle) see the correct theme. useEffect runs too late — after
+  // children have already rendered with the previous class still on the document.
+  if (typeof document !== 'undefined') {
+    const html = document.documentElement;
+    const nextClass = theme.cssClass;
+    for (const t of Object.values(themes)) {
+      if (t.cssClass !== nextClass) {
+        html.classList.remove(t.cssClass);
       }
-
-      prevThemeClassRef.current = newClass;
     }
-  }, [theme]);
+    if (!html.classList.contains(nextClass)) {
+      html.classList.add(nextClass);
+    }
+  }
 
   // Dev mode: expose theme API to window (namespaced to avoid global pollution)
   useEffect(() => {
diff --git a/packages/app/src/theme/themes/_chart-tokens.scss b/packages/app/src/theme/themes/_chart-tokens.scss
new file mode 100644
index 0000000000..99b2363995
--- /dev/null
+++ b/packages/app/src/theme/themes/_chart-tokens.scss
@@ -0,0 +1,56 @@
+/* Shared Chart Color Tokens
+ *
+ * The categorical chart palette and most semantic chart colors are identical
+ * across the HyperDX and ClickStack themes. `--color-chart-info` (log / chart
+ * “info” severity) is defined per brand in each theme’s `_tokens.scss`.
+ *
+ * Source: Observable 10 categorical palette
+ * https://observablehq.com/@d3/color-schemes
+ *
+ * Note: chart vars do not currently differ between dark and light schemes.
+ * If that changes, split this into `chart-tokens-dark` / `chart-tokens-light`
+ * and adjust the per-theme `@include`s accordingly.
+ */
+
+@mixin categorical-chart-tokens {
+  /* Categorical palette - 10 distinct, accessible hues addressed by name.
+   *
+   * Multi-series charts pick from these slots in a canonical order defined
+   * by `CATEGORICAL_ORDER` in `packages/app/src/utils.ts`. Identity callers
+   * (e.g. "this status pill is always cyan") can reference the named var
+   * directly: `var(--color-chart-cyan)`.
+   *
+   * NOTE: These vars are intentionally duplicated into both dark and light
+   * scheme blocks via the consuming theme files. CSS specificity requires
+   * them to be defined within each [data-mantine-color-scheme] selector;
+   * declaring them only on `.theme-*` would cause the scheme-scoped block
+   * to take precedence and reset them to undefined. */
+  --color-chart-blue: #437eef;
+  --color-chart-orange: #efb118;
+  --color-chart-red: #ff725c;
+  --color-chart-cyan: #6cc5b0;
+  --color-chart-green: #3ca951;
+  --color-chart-pink: #ff8ab7;
+  --color-chart-purple: #a463f2;
+  --color-chart-light-blue: #97bbf5;
+  --color-chart-brown: #9c6b4e;
+  --color-chart-gray: #9498a0;
+}
+
+@mixin semantic-chart-tokens {
+  /* Semantic chart colors */
+  --color-chart-success: #3ca951; /* Green */
+  --color-chart-warning: #efb118; /* Orange */
+  --color-chart-error: #ff725c; /* Red */
+
+  /* Semantic chart colors - highlighted (hover/selection states) */
+  --color-chart-success-highlight: #80d9b3;
+  --color-chart-warning-highlight: #f5c94d;
+  --color-chart-error-highlight: #ffa090;
+}
+
+/* Convenience mixin that includes both categorical and semantic tokens. */
+@mixin chart-tokens {
+  @include categorical-chart-tokens;
+  @include semantic-chart-tokens;
+}
diff --git a/packages/app/src/theme/themes/clickstack/_tokens.scss b/packages/app/src/theme/themes/clickstack/_tokens.scss
index 0c77f5498c..2a0ea88170 100644
--- a/packages/app/src/theme/themes/clickstack/_tokens.scss
+++ b/packages/app/src/theme/themes/clickstack/_tokens.scss
@@ -4,6 +4,12 @@
 
 /* Uses Click UI design tokens */
 
+/* Chart color tokens (categorical + semantic) are mostly shared with the
+ * HyperDX theme via `_chart-tokens.scss`. `--color-chart-info` (log / chart
+ * “info” severity) is set per brand after that include. */
+
+@use '../chart-tokens';
+
 /* Dark Mode */
 .theme-clickstack[data-mantine-color-scheme='dark'] {
   /* Brand Palette - Yellow/Gold */
@@ -172,33 +178,11 @@
   --color-json-array: #ffd966;
   --color-json-punctuation: #666980;
 
-  /*
-   * Chart Colors - Observable 10 categorical palette
-   * NOTE: These colors are intentionally duplicated in both dark and light mode sections.
-   * CSS specificity requires them to be defined within each [data-mantine-color-scheme] selector
-   * to ensure they're applied correctly. A shared .theme-clickstack section would have lower
-   * specificity and could be overridden by other styles.
-   */
-  --color-chart-1: #437eef; /* Blue - Primary */
-  --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 */
-
-  /* Chart Semantic Colors - Highlighted (for hover/selection states) */
-  --color-chart-success-highlight: #80d9b3;
-  --color-chart-warning-highlight: #f5c94d;
-  --color-chart-error-highlight: #ffa090;
+  /* Chart Colors - shared across themes via the chart-tokens partial. */
+  @include chart-tokens.chart-tokens;
+
+  /* Log / chart "info" severity — ClickStack brand (blue). */
+  --color-chart-info: var(--color-chart-blue);
 
   /* Mantine Overrides */
   --mantine-color-body: var(--color-bg-body) !important;
@@ -379,27 +363,11 @@
   --color-json-array: #997300;
   --color-json-punctuation: #868e96;
 
-  /* Chart Colors - See dark mode section for explanation of why duplication is required */
-  --color-chart-1: #437eef; /* Blue - Primary */
-  --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 */
-
-  /* Chart Semantic Colors - Highlighted (for hover/selection states) */
-  --color-chart-success-highlight: #80d9b3;
-  --color-chart-warning-highlight: #f5c94d;
-  --color-chart-error-highlight: #ffa090;
+  /* Chart Colors - shared across themes via the chart-tokens partial. */
+  @include chart-tokens.chart-tokens;
+
+  /* Log / chart "info" severity — ClickStack brand (blue). */
+  --color-chart-info: var(--color-chart-blue);
 
   /* Mantine Overrides */
   --mantine-color-body: var(--color-bg-body) !important;
diff --git a/packages/app/src/theme/themes/hyperdx/_tokens.scss b/packages/app/src/theme/themes/hyperdx/_tokens.scss
index 1503bbc4ae..1235d734e7 100644
--- a/packages/app/src/theme/themes/hyperdx/_tokens.scss
+++ b/packages/app/src/theme/themes/hyperdx/_tokens.scss
@@ -6,8 +6,14 @@
  * These mixins define all design tokens for HyperDX theme.
  * They are used both here (for .theme-hyperdx scoped selectors) and
  * in _base-tokens.scss (for unscoped fallback selectors during SSR).
+ *
+ * Most chart color tokens (categorical + semantic) are intentionally shared
+ * with the ClickStack theme via `_chart-tokens.scss`. `--color-chart-info`
+ * (log / chart “info” severity) is set per brand below after that include.
  */
 
+@use '../chart-tokens';
+
 @mixin dark-mode-tokens {
   /* Backgrounds */
   --color-bg-body: var(--mantine-color-dark-9);
@@ -92,29 +98,14 @@
   --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-success-highlight: #80d9b3;
-  --color-chart-warning-highlight: #f5c94d;
-  --color-chart-error-highlight: #ffa090;
+  /* Chart Colors - shared across themes via the chart-tokens partial.
+     Categorical slots are addressed by name (e.g. `--color-chart-blue`);
+     positional access goes through `getColorFromCSSVariable(index)` in
+     `utils.ts` using the `CATEGORICAL_ORDER` array. */
+  @include chart-tokens.chart-tokens;
+
+  /* Log / chart “info” severity — HyperDX Mantine brand greens. */
+  --color-chart-info: var(--mantine-color-green-6);
 
   /* Mantine Overrides */
   --mantine-color-body: var(--color-bg-body) !important;
@@ -206,27 +197,11 @@
   --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-success-highlight: #80d9b3;
-  --color-chart-warning-highlight: #f5c94d;
-  --color-chart-error-highlight: #ffa090;
+  /* Chart Colors - shared across themes via the chart-tokens partial. */
+  @include chart-tokens.chart-tokens;
+
+  /* Log / chart “info” severity — HyperDX Mantine brand greens. */
+  --color-chart-info: var(--mantine-color-green-7);
 
   /* Mantine Overrides */
   --mantine-color-body: var(--color-bg-body);
diff --git a/packages/app/src/utils.ts b/packages/app/src/utils.ts
index 294f31946f..57ae546b78 100644
--- a/packages/app/src/utils.ts
+++ b/packages/app/src/utils.ts
@@ -353,30 +353,12 @@ export const getLogLevelClass = (lvl: string | undefined) => {
         : undefined;
 };
 
-// Chart color palette - single source of truth
-// Colors from Observable categorical palette, with custom brand green
+// Chart color palette - single source of truth, shared across themes.
+// Mirrors `packages/app/src/theme/themes/_chart-tokens.scss`. Hex changes
+// must update both this object and the SCSS partial.
 // https://observablehq.com/@d3/color-schemes
 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)
-  greenHighlight: '#80d9b3',
-  redHighlight: '#ffa090',
-  orangeHighlight: '#f5c94d',
-} as const;
-
-// ClickStack theme chart color palette - Observable 10 categorical palette
-// https://observablehq.com/@d3/color-schemes
-const CLICKSTACK_CHART_PALETTE = {
-  blue: '#437EEF', // Primary color for ClickStack
+  blue: '#437eef',
   orange: '#efb118',
   red: '#ff725c',
   cyan: '#6cc5b0',
@@ -392,68 +374,53 @@ const CLICKSTACK_CHART_PALETTE = {
   orangeHighlight: '#f5c94d',
 } as const;
 
-// Ordered array for chart series - green first for brand consistency (HyperDX default)
-// Maps to CSS variables: COLORS[0] -> --color-chart-1, COLORS[1] -> --color-chart-2, etc.
-// NOTE: This is a fallback for SSR. In browser, getColorFromCSSVariable() reads from CSS variables
-export const COLORS = [
-  CHART_PALETTE.green, // 1 - Brand green (primary) - HyperDX default
-  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
-];
-
-/**
- * Detects the active theme by checking for theme classes on documentElement.
- * Returns 'clickstack' if theme-clickstack class is present, 'hyperdx' otherwise.
- * Note: classList.contains() is O(1) and fast - no caching needed.
- */
-function detectActiveTheme(): 'clickstack' | 'hyperdx' {
-  if (typeof window === 'undefined') {
-    // SSR: default to hyperdx (can't detect theme without DOM)
-    return 'hyperdx';
-  }
-
-  try {
-    const isClickStack =
-      document.documentElement.classList.contains('theme-clickstack');
-    return isClickStack ? 'clickstack' : 'hyperdx';
-  } catch {
-    // Fallback if DOM access fails
-    return 'hyperdx';
-  }
+// Canonical ordering for the categorical palette. Multi-series charts pick
+// colors by index; index N maps to the Nth name in this list, which in
+// turn maps to `--color-chart-{kebab-case name}` in `_chart-tokens.scss`.
+// To re-order how slots are assigned, change this array — no SCSS edit
+// required.
+const CATEGORICAL_ORDER = [
+  'blue',
+  'orange',
+  'red',
+  'cyan',
+  'green',
+  'pink',
+  'purple',
+  'lightBlue',
+  'brown',
+  'gray',
+] as const satisfies ReadonlyArray<keyof typeof CHART_PALETTE>;
+
+// Ordered hex array - SSR fallback for `getColorFromCSSVariable()`. Kept
+// in sync with `CATEGORICAL_ORDER` so `COLORS[i]` always equals the live
+// value of `var(--color-chart-{CATEGORICAL_ORDER[i]})`.
+export const COLORS = CATEGORICAL_ORDER.map(name => CHART_PALETTE[name]);
+
+// Convert a camelCase palette key to its CSS-var slug (e.g. `lightBlue`
+// becomes `light-blue`).
+function paletteKeyToCssSlug(name: keyof typeof CHART_PALETTE): string {
+  return name.replace(/([A-Z])/g, '-$1').toLowerCase();
 }
 
 /**
- * Reads chart color from CSS variable based on index.
- * CSS variables handle theme switching automatically via theme classes on documentElement.
- * Falls back to COLORS array if CSS variable is not available (SSR or getComputedStyle fails).
- *
- * Note on SSR/Hydration: During SSR, this returns fallback colors (HyperDX green palette).
- * On client hydration, it reads from CSS variables which may differ for ClickStack theme.
- * This is expected behavior - charts typically render after data fetching (client-side),
- * so hydration mismatches are rare. If needed, wrap chart components with suppressHydrationWarning.
+ * Reads a chart color from a CSS variable, addressed by categorical index.
+ * Both themes resolve every `--color-chart-{name}` var to the same hex (see
+ * `_chart-tokens.scss`), so the SSR fallback matches the live value.
  */
 function getColorFromCSSVariable(index: number): string {
-  const colorArrayLength = COLORS.length;
+  const order = CATEGORICAL_ORDER;
+  const name = order[index % order.length];
 
   if (typeof window === 'undefined') {
-    // SSR: fallback to default colors (HyperDX palette)
-    return COLORS[index % colorArrayLength];
+    return CHART_PALETTE[name];
   }
 
   try {
-    const cssVarName = `--color-chart-${(index % colorArrayLength) + 1}`;
-    // Read from documentElement - CSS variables cascade from theme classes
+    const cssVarName = `--color-chart-${paletteKeyToCssSlug(name)}`;
     const computedStyle = getComputedStyle(document.documentElement);
     const color = computedStyle.getPropertyValue(cssVarName).trim();
 
-    // Only use CSS variable if it's actually set (non-empty)
     if (color && color !== '') {
       return color;
     }
@@ -461,8 +428,7 @@ function getColorFromCSSVariable(index: number): string {
     // Fallback if getComputedStyle fails
   }
 
-  // Fallback to default colors
-  return COLORS[index % colorArrayLength];
+  return CHART_PALETTE[name];
 }
 
 export function hashCode(str: string) {
@@ -479,21 +445,16 @@ export function hashCode(str: string) {
 }
 
 /**
- * Gets theme-aware chart color from CSS variable or falls back to palette.
- * Reads from --color-chart-{type} CSS variable, falls back to theme-appropriate palette.
- *
- * Note on SSR/Hydration: During SSR, returns HyperDX colors as default.
- * On client, reads from CSS variables for accurate theme colors.
- * Charts typically render client-side after data fetching, minimizing hydration issues.
+ * Reads a semantic chart CSS variable, falling back to the shared palette.
+ * Both themes resolve these vars to the same hex (see `_chart-tokens.scss`),
+ * so the SSR fallback matches the live value.
  */
 function getSemanticChartColor(
   cssVarName: string,
-  hyperdxColor: string,
-  clickstackColor: string,
+  fallbackColor: string,
 ): string {
   if (typeof window === 'undefined') {
-    // SSR: use HyperDX as default (can't detect theme without DOM)
-    return hyperdxColor;
+    return fallbackColor;
   }
 
   try {
@@ -506,43 +467,32 @@ function getSemanticChartColor(
     // Fallback if getComputedStyle fails
   }
 
-  // Fallback to theme-appropriate palette
-  const activeTheme = detectActiveTheme();
-  return activeTheme === 'clickstack' ? clickstackColor : hyperdxColor;
+  return fallbackColor;
 }
 
-// Semantic colors for log levels (theme-aware)
-// These are functions that read from CSS variables with theme-appropriate fallbacks
+// Semantic colors for log levels — resolved via CSS variables with a hex
+// fallback for SSR / failed `getComputedStyle` reads.
 export function getChartColorSuccess(): string {
-  return getSemanticChartColor(
-    '--color-chart-success',
-    CHART_PALETTE.green,
-    CLICKSTACK_CHART_PALETTE.green,
-  );
+  return getSemanticChartColor('--color-chart-success', CHART_PALETTE.green);
 }
 
 export function getChartColorWarning(): string {
-  return getSemanticChartColor(
-    '--color-chart-warning',
-    CHART_PALETTE.orange,
-    CLICKSTACK_CHART_PALETTE.orange,
-  );
+  return getSemanticChartColor('--color-chart-warning', CHART_PALETTE.orange);
 }
 
 export function getChartColorError(): string {
-  return getSemanticChartColor(
-    '--color-chart-error',
-    CHART_PALETTE.red,
-    CLICKSTACK_CHART_PALETTE.red,
-  );
+  return getSemanticChartColor('--color-chart-error', CHART_PALETTE.red);
+}
+
+/** Info-level logs (see `getLogLevelClass`): `--color-chart-info` (green on HyperDX, blue on ClickStack). */
+export function getChartColorInfo(): string {
+  return getSemanticChartColor('--color-chart-info', CHART_PALETTE.green);
 }
 
-// Highlighted variants (theme-aware)
 export function getChartColorSuccessHighlight(): string {
   return getSemanticChartColor(
     '--color-chart-success-highlight',
     CHART_PALETTE.greenHighlight,
-    CLICKSTACK_CHART_PALETTE.greenHighlight,
   );
 }
 
@@ -550,7 +500,6 @@ export function getChartColorErrorHighlight(): string {
   return getSemanticChartColor(
     '--color-chart-error-highlight',
     CHART_PALETTE.redHighlight,
-    CLICKSTACK_CHART_PALETTE.redHighlight,
   );
 }
 
@@ -558,7 +507,6 @@ export function getChartColorWarningHighlight(): string {
   return getSemanticChartColor(
     '--color-chart-warning-highlight',
     CHART_PALETTE.orangeHighlight,
-    CLICKSTACK_CHART_PALETTE.orangeHighlight,
   );
 }
 
@@ -573,8 +521,7 @@ export const semanticKeyedColor = (
       ? getChartColorError()
       : logLevel === 'warn'
         ? getChartColorWarning()
-        : // Info-level logs use primary chart color (blue for ClickStack, green for HyperDX)
-          getColorFromCSSVariable(0);
+        : getChartColorInfo();
   }
 
   // Use CSS variable for theme-aware colors, fallback to hardcoded array
@@ -587,14 +534,15 @@ export const logLevelColor = (key: string | number | undefined) => {
     ? getChartColorError()
     : logLevel === 'warn'
       ? getChartColorWarning()
-      : // Info-level logs use primary chart color (blue for ClickStack, green for HyperDX)
-        getColorFromCSSVariable(0);
+      : getChartColorInfo();
 };
 
-// order of colors for sorting. primary color (blue/green) on bottom, then yellow, then red
+// Sort order (lowest severity first): info (theme: HyperDX green / ClickStack blue), warn, error
 // Computed lazily to avoid DOM access at module initialization (SSR-safe)
-export function getLogLevelColorOrder(): string[] {
-  return [logLevelColor('info'), logLevelColor('warn'), logLevelColor('error')];
+export function getLogLevelColorOrder(
+  colorForLevel: typeof logLevelColor = logLevelColor,
+): string[] {
+  return [colorForLevel('info'), colorForLevel('warn'), colorForLevel('error')];
 }
 
 const getLevelColor = (logLevel?: string) => {
@@ -605,8 +553,7 @@ const getLevelColor = (logLevel?: string) => {
     ? getChartColorError()
     : logLevel === 'warn'
       ? getChartColorWarning()
-      : // Info-level logs use primary chart color (blue for ClickStack, green for HyperDX)
-        getColorFromCSSVariable(0);
+      : getChartColorInfo();
 };
 
 export const getColorProps = (index: number, level: string): string => {