@eifi1/ui-kit 0.48.2 → 0.49.0

package/src/theme/chart-palette.ts

@@ -1,23 +1,45 @@
 // Chart colour system. Single source of truth lives in the design tokens
 // (:root / .dark in tokens.css): brand = indigo, money = teal/amber/purple,
-// chart-1..9 = Paul Tol "Muted" (CVD-safe across protan/deutan/tritan).
+// chart-1..8 = anyplot's "Imprint" hues (https://anyplot.ai/palette, 0.49 — Paul Tol
+// "Muted" before, still selectable as the `paul-tol` preset).
 // Returning CSS vars here makes every Recharts series theme-aware for free — the
 // SVG fill/stroke resolves --chart-N against the current light/dark token set.
 
 import { contrast, parseHex as parseRgbHex } from "./color";
 
-const PALETTE_SIZE = 9;
+/** How many categorical slots `paletteFor` cycles through: anyplot's eight hues. Amber,
+ *  anyplot's ninth colour, is a semantic warning anchor and not a series slot. A preset
+ *  that carries more hues (Paul Tol's nine) still writes them as `--chart-N`, but the
+ *  by-index ramp wraps after eight, so the same series keeps the same colour whichever
+ *  preset is active. */
+export const PALETTE_SIZE = 8;
+
+/** anyplot's colour-vision-deficiency-optimal order over the eight slots — the order
+ *  that keeps the FIRST n series furthest apart under protan/deutan/tritan simulation.
+ *  An option (`paletteFor(i, { order: "cvd" })`), not the default: the default order is
+ *  anyplot's own slot order, so series 1 is always the green. */
+export const CVD_ORDER = [0, 1, 7, 6, 4, 5, 2, 3] as const;
+
+export interface PaletteForOptions {
+  /** `"slot"` (default): anyplot's slot order. `"cvd"`: {@link CVD_ORDER}. */
+  order?: "slot" | "cvd";
+}
 
 /** CVD-safe categorical colour for series `index`, as a theme-aware CSS var.
+ *
+ *  The first series is always slot 0 (`--chart-1`, anyplot's green), and the ramp
+ *  wraps after {@link PALETTE_SIZE}.
  *
  *  Wraps in both directions, the way `strokeDash` does: JS `%` keeps the sign,
- *  so `-1 % 9` is `-1` and the plain formula named `--chart-0`, a token that does not
+ *  so `-1 % 8` is `-1` and the plain formula named `--chart-0`, a token that does not
  *  exist — a series with no stroke at all. A fractional index is truncated, and one
  *  that is not a number (NaN, ±Infinity — an `indexOf` miss divided by something)
  *  takes the first colour rather than `var(--chart-NaN)`. */
-export function paletteFor(index: number): string {
+export function paletteFor(index: number, options?: PaletteForOptions): string {
   const i = Number.isFinite(index) ? Math.trunc(index) : 0;
-  return `var(--chart-${(((i % PALETTE_SIZE) + PALETTE_SIZE) % PALETTE_SIZE) + 1})`;
+  const position = ((i % PALETTE_SIZE) + PALETTE_SIZE) % PALETTE_SIZE;
+  const slot = options?.order === "cvd" ? CVD_ORDER[position] : position;
+  return `var(--chart-${slot + 1})`;
 }
 
 /** Semantic money colours, theme-aware via tokens. Pair with +/- and arrow
@@ -26,10 +48,65 @@ export const CHART_COLORS = {
   income: "var(--money-income)",
   expense: "var(--money-expense)",
   net: "var(--money-net)",
+  neutral: "var(--money-neutral)",
   assigned: "var(--brand)",
   activity: "var(--money-expense)",
+  /** A generic total line — not money-coloured, the chart's neutral ink. */
+  total: "var(--chart-ink)",
+} as const;
+
+/**
+ * What a chart draws that is NOT a series (anyplot's roles, 0.49). Two inks, which are
+ * the only chart colours that change between light and dark — the eight hues do not:
+ *
+ * - `other` / `rest` / `disabled` and confidence-`band` fills → the MUTED ink. A
+ *   treemap's "rest" bucket or a pie's "Other" slice takes this instead of wrapping
+ *   round to a hue the reader will match to a real series.
+ * - `total` / `baseline` / `outline` → the neutral INK.
+ */
+export const CHART_ROLES = {
+  other: "var(--chart-muted)",
+  rest: "var(--chart-muted)",
+  disabled: "var(--chart-muted)",
+  band: "var(--chart-muted)",
+  total: "var(--chart-ink)",
+  baseline: "var(--chart-ink)",
+  outline: "var(--chart-ink)",
 } as const;
 
+/** `--chart-ink` per theme, as hex (tokens.css holds the same two). */
+export const CHART_INK_HEX = { light: "#1a1a17", dark: "#f0efe8" } as const;
+/** `--chart-muted` per theme, as hex (tokens.css holds the same two). */
+export const CHART_MUTED_HEX = { light: "#6b6a63", dark: "#a8a79f" } as const;
+
+/** The 3:1 WCAG 1.4.11 asks of a filled graphical object against its surface. */
+export const EDGE_MIN_CONTRAST = 3;
+
+/**
+ * The 1px edge a FILLED mark (a bar, an area, a treemap tile) needs, or `undefined`.
+ *
+ * anyplot's answer to hues that sit under 3:1 on the ground (cyan, lime, lavender, ochre
+ * and green on cream; matte red and rose on the dark ground): outline the shape in ink,
+ * so its boundary is legible while the fill keeps the hue that identifies the series.
+ * Only those — a hue that clears 3:1 on every surface given stays unstroked, because an
+ * outline on every bar is noise.
+ *
+ * `fill` must be a measurable `#rgb`/`#rrggbb`; `surfaces` are the grounds the mark can
+ * sit on (the card and the page), and the WORST of them decides. Anything it cannot
+ * measure gets no edge rather than a guessed one.
+ */
+export function chartEdge(
+  fill: string,
+  surfaces: readonly string[],
+  ink: string = CHART_ROLES.outline,
+): string | undefined {
+  if (!parseRgbHex(fill)) return undefined;
+  const measurable = surfaces.filter((s) => parseRgbHex(s));
+  if (measurable.length === 0) return undefined;
+  const worst = Math.min(...measurable.map((s) => contrast(fill, s)));
+  return worst < EDGE_MIN_CONTRAST ? ink : undefined;
+}
+
 // ── Raw hex stops, by theme ────────────────────────────────────────────────
 // The heatmaps interpolate colours in JS (CSS vars can't be lerped), so they
 // need concrete hex per theme — i.e. the same colours DEFAULT_PRESET already
@@ -42,9 +119,14 @@ export const CHART_COLORS = {
 // DEFAULT_PRESET" — which is not optional: they HAD drifted, five of the six light
 // heat stops, and the light `neutral` was still Tailwind's slate-100, a cool grey on
 // the warm cream page this theme has used since #328.
+//
+// 0.49: the same eight hues in both themes — anyplot does not re-tune a hue for the dark
+// ground, and neither does the kit any more; `chartEdge` outlines the two that fall
+// under 3:1 there (matte red, rose) instead of lifting them into different colours.
+const IMPRINT_HEX = ["#009e73", "#c475fd", "#4467a3", "#bd8233", "#ae3030", "#2abccd", "#954477", "#99b314"] as const;
 export const PALETTE_HEX = {
-  light: ["#332288", "#88ccee", "#44aa99", "#117733", "#999933", "#ddcc77", "#cc6677", "#882255", "#aa4499"],
-  dark: ["#7e72d6", "#9fd8f2", "#5fc4b0", "#3fa45f", "#bfbf5e", "#e8dda0", "#e08c9a", "#c25a78", "#cc78be"],
+  light: IMPRINT_HEX,
+  dark: IMPRINT_HEX,
 } as const;
 
 /** A heatmap's interpolation stops for one theme. Open string fields so any
@@ -59,24 +141,24 @@ export interface HeatStops {
 }
 
 /** Diverging (variance: under←0→over) and sequential (spending intensity)
-    heatmap stops, per theme. Teal = under/good, amber = over/spend = bad. */
+    heatmap stops, per theme — anyplot's scales (0.49). Sequential runs anyplot green →
+    blue; diverging runs blue (under) ↔ paper/ink (0, the midpoint) ↔ matte red (over).
+    The hues are the same in both themes; only the midpoint flips with the ground. */
 export const HEATMAP_HEX = {
   light: {
-    neutral: "#f1e7d2", // the cream surface itself, not a cool grey
-    under: "#0b6650", // DEFAULT_PRESET.light.moneyIncome
-    over: "#9c6418", // DEFAULT_PRESET.light.moneyExpense, warmed to the page
-    seqLow: "#f6ecd0",
-    seqHigh: "#9c6418",
+    neutral: "#faf8f1", // anyplot's light paper — the diverging scale's 0
+    under: "#4467a3",
+    over: "#ae3030",
+    seqLow: "#009e73",
+    seqHigh: "#4467a3",
     empty: "rgba(148,163,184,0.14)",
   },
   dark: {
-    neutral: "#363a5a", // one step above --border on the indigo-noir surface
-    under: "#22c3b6", // DEFAULT_PRESET.dark.moneyIncome
-    // Brighter than dark.moneyExpense (#e4b035) on purpose: a gradient endpoint is
-    // meant to be the loudest thing in its scale, and it is a fill, not a figure.
-    over: "#fbbf24",
-    seqLow: "#3a2c14", // dim amber, sits just above the page
-    seqHigh: "#fbbf24",
+    neutral: "#1a1a17", // anyplot's ink — the diverging scale's 0 on the dark ground
+    under: "#4467a3",
+    over: "#ae3030",
+    seqLow: "#009e73",
+    seqHigh: "#4467a3",
     empty: "rgba(148,163,184,0.10)",
   },
 } as const;

package/src/theme/palette-presets.ts

@@ -1,7 +1,8 @@
 // Appearance presets — the single source of truth for the "palette switcher"
 // (feedback #307). Each preset is a full set of design-token values for BOTH
 // light and dark, covering the page/surface backgrounds, the brand accent, the
-// semantic money trio and the 9-colour categorical chart palette, plus the
+// semantic money trio and the categorical chart palette (anyplot's eight "Imprint"
+// hues by default since 0.49, Paul Tol's nine in `PAUL_TOL_PRESET`), plus the
 // heatmap stops. A preset is applied at runtime by writing these as CSS custom
 // properties onto <html> (see palette-store.ts), which instantly re-skins every
 // token-driven surface and chart. The two heatmaps and the treemap interpolate
@@ -40,7 +41,9 @@ export interface TokenSet {
   moneyExpense: string;
   moneyNet: string;
   moneyNeutral: string;
-  // Categorical chart series (Paul Tol "Muted" by default — CVD-safe), exactly 9
+  // Categorical chart series, written as `--chart-1…9`. anyplot's eight "Imprint" hues by
+  // default (0.49), Paul Tol "Muted"'s nine in `PAUL_TOL_PRESET`. `paletteFor` cycles
+  // eight; a shorter ramp is repeated to fill `--chart-9` (see `applyTokenSet`).
   chart: string[];
   // Heatmap interpolation stops (variance diverging + spending sequential)
   heat: HeatStops;
@@ -54,6 +57,59 @@ export interface PalettePreset {
   dark: TokenSet;
 }
 
+// ── "Imprint" chart hues (feedback #119; the default since 0.49) ─────────────
+// anyplot's categorical palette (https://anyplot.ai/palette), by a colleague of
+// Marcel's. 8 hues + an amber semantic anchor, derived from Wong 2011 by a
+// Petroff-style max-min ΔE search in CAM02-UCS with Machado 2009 CVD simulation —
+// the same lineage as Paul Tol "Muted", one generation on, and tuned for exactly the
+// warm cream paper our light theme uses.
+//
+// 0.49 (Marcel, 2026-10-22): the DEFAULT, in anyplot's slot order, eight slots — amber
+// #DDCC77 left the pool, it is anyplot's semantic warning anchor, not a series colour.
+// The SAME hues in both themes: 0.48 lifted matte red and rose for the dark ground
+// (#BF413E, #A25083), which made the dark chart a different palette from the light one.
+// anyplot answers a hue under 3:1 with a 1px ink edge instead, and so does the kit now
+// (`chartEdge`, drawn by SeriesChart's bars and areas and by Treemap's tiles).
+//
+// Measured on our surfaces (CIEDE2000, Machado severity-100, 8 like-for-like slots on
+// the cream light surface #f6ecd9) — neither palette dominates:
+//   Paul Tol Muted  min-contrast 1.38 · worst-CVD ΔE00 11.8 · normal ΔE00 16.1
+//   imprint         min-contrast 1.95 · worst-CVD ΔE00  7.2 · normal ΔE00 22.2
+// i.e. imprint is punchier and has no near-invisible pale slot (Tol's #88ccee sits at
+// 1.5:1 on cream), while Tol separates better under colour-vision deficiency — which is
+// why `paletteFor` offers anyplot's CVD-optimal order (`{ order: "cvd" }`).
+const IMPRINT_HUES = [
+  "#009e73", // brand green   — first series, always
+  "#c475fd", // lavender      — creative
+  "#4467a3", // blue          — cool / info
+  "#bd8233", // ochre         — earth / commodity
+  "#ae3030", // matte red     — bad / loss / error
+  "#2abccd", // cyan          — sky / tech-cool
+  "#954477", // rose          — wellness / health
+  "#99b314", // lime          — growth / nature
+];
+
+/** anyplot's scales (0.49): sequential green → blue, diverging blue (under) ↔ paper or
+ *  ink (0) ↔ matte red (over). `chart-palette.ts`'s `HEATMAP_HEX` holds the same. */
+const ANYPLOT_HEAT: Record<"light" | "dark", HeatStops> = {
+  light: {
+    neutral: "#faf8f1",
+    under: "#4467a3",
+    over: "#ae3030",
+    seqLow: "#009e73",
+    seqHigh: "#4467a3",
+    empty: "rgba(148,163,184,0.14)",
+  },
+  dark: {
+    neutral: "#1a1a17",
+    under: "#4467a3",
+    over: "#ae3030",
+    seqLow: "#009e73",
+    seqHigh: "#4467a3",
+    empty: "rgba(148,163,184,0.10)",
+  },
+};
+
 // The shipped default (feedback #328): SOLAR-DUSK warm light + INDIGO-NOIR deep
 // dark surfaces — the two curated presets the user picked per mode — but with a
 // SINGLE unified brand accent (indigo) across both modes rather than each
@@ -62,10 +118,15 @@ export interface PalettePreset {
 // the dark block is Indigo Noir (already indigo). The money trio
 // (income/expense/net) drives the chart bars and stays palette-driven so those
 // semantic colours adapt to each mode's contrast (best practice — feedback #328).
+//
+// 0.49: its chart ramp and heat stops are anyplot's ("Imprint", above) — the money
+// trio stays the kit's own (Marcel, 2026-10-22: chart income/expense/net/neutral keep
+// the money tokens, never anyplot's green/red). The 0.48 default, the same surfaces
+// with Paul Tol's ramp, is `PAUL_TOL_PRESET`.
 export const DEFAULT_PRESET: PalettePreset = {
   id: "default",
-  name: "Default",
-  blurb: "Solar-dusk light · indigo-noir dark",
+  name: "Imprint",
+  blurb: "anyplot.ai chart hues · solar-dusk light · indigo-noir dark",
   light: {
     // Solar Dusk (light) surfaces, with the brand unified to indigo (see above).
     bgPage: "#ede3cf",
@@ -84,15 +145,8 @@ export const DEFAULT_PRESET: PalettePreset = {
     moneyExpense: "#905902",
     moneyNet: "#7a4fa3",
     moneyNeutral: "#6b6453",
-    chart: ["#332288", "#88ccee", "#44aa99", "#117733", "#999933", "#ddcc77", "#cc6677", "#882255", "#aa4499"],
-    heat: {
-      neutral: "#f1e7d2",
-      under: "#0b6650",
-      over: "#9c6418",
-      seqLow: "#f6ecd0",
-      seqHigh: "#9c6418",
-      empty: "rgba(148,163,184,0.14)",
-    },
+    chart: IMPRINT_HUES,
+    heat: ANYPLOT_HEAT.light,
   },
   dark: {
     // Indigo Noir (dark)
@@ -115,6 +169,36 @@ export const DEFAULT_PRESET: PalettePreset = {
     moneyExpense: "#e4b035",
     moneyNet: "#b39aef",
     moneyNeutral: "#9aa1bd",
+    chart: IMPRINT_HUES,
+    heat: ANYPLOT_HEAT.dark,
+  },
+};
+
+
+/**
+ * The 0.48 default: the same surfaces, brand and money, with Paul Tol's "Muted" nine
+ * as the chart ramp and the teal/amber heat stops that went with it. Selectable, no
+ * longer the default (0.49). `paletteFor` cycles eight, so its ninth hue (#aa4499) is
+ * reachable only as `var(--chart-9)`.
+ */
+export const PAUL_TOL_PRESET: PalettePreset = {
+  id: "paul-tol",
+  name: "Paul Tol muted",
+  blurb: "Paul Tol's CVD-safe chart hues · solar-dusk light · indigo-noir dark",
+  light: {
+    ...DEFAULT_PRESET.light,
+    chart: ["#332288", "#88ccee", "#44aa99", "#117733", "#999933", "#ddcc77", "#cc6677", "#882255", "#aa4499"],
+    heat: {
+      neutral: "#f1e7d2",
+      under: "#0b6650",
+      over: "#9c6418",
+      seqLow: "#f6ecd0",
+      seqHigh: "#9c6418",
+      empty: "rgba(148,163,184,0.14)",
+    },
+  },
+  dark: {
+    ...DEFAULT_PRESET.dark,
     chart: ["#7e72d6", "#9fd8f2", "#5fc4b0", "#3fa45f", "#bfbf5e", "#e8dda0", "#e08c9a", "#c25a78", "#cc78be"],
     heat: {
       neutral: "#363a5a",
@@ -127,73 +211,20 @@ export const DEFAULT_PRESET: PalettePreset = {
   },
 };
 
-// ── "Imprint" chart hues (feedback #119) ──────────────────────────────────────
-// anyplot's categorical palette (https://anyplot.ai/palette), by a colleague of
-// Marcel's. 8 hues + an amber semantic anchor, derived from Wong 2011 by a
-// Petroff-style max-min ΔE search in CAM02-UCS with Machado 2009 CVD simulation —
-// the same lineage as our default Paul Tol "Muted", one generation on, and tuned
-// for exactly the warm cream paper our light theme uses.
-//
-// This preset is DEFAULT_PRESET with ONLY the 9 categorical chart hues swapped;
-// surfaces, brand and the semantic money trio stay put, because those were their
-// own deliberate decisions (#307/#328) and are not what the palette is for. The
-// heatmap stops likewise stay teal/amber: they encode under/over, and imprint's
-// own diverging ramp is red↔blue, which would fight the money semantics.
-//
-// Measured on our surfaces (CIEDE2000, Machado severity-100, 8 like-for-like
-// slots on the cream light surface #f6ecd9) — neither palette dominates:
-//   Paul Tol Muted  min-contrast 1.38 · worst-CVD ΔE00 11.8 · normal ΔE00 16.1
-//   imprint         min-contrast 1.95 · worst-CVD ΔE00  7.2 · normal ΔE00 22.2
-// i.e. imprint is punchier and has no near-invisible pale slot (Tol's #88ccee
-// sits at 1.5:1 on cream), while Tol separates better under colour-vision
-// deficiency. So this ships as a CHOICE, not as a new default.
-//
-// The dark set keeps imprint's hues verbatim except matte-red and rose, whose
-// lightness is lifted (oklch L 0.50→0.55) because verbatim they land at 2.67:1
-// and 2.76:1 on our deep-indigo dark surface — under WCAG 2.1 SC 1.4.11's 3:1
-// non-text minimum. Lifted they clear it at 3.30:1 / 3.28:1. anyplot documents
-// the same shortfall on their own dark ground and answers it with a stroke halo;
-// lifting keeps the fix in the token layer instead of every chart component.
-const IMPRINT_HUES_LIGHT = [
-  "#009E73", // brand green   — first series
-  "#C475FD", // lavender      — creative
-  "#4467A3", // blue          — cool / info
-  "#BD8233", // ochre         — earth / commodity
-  "#AE3030", // matte red     — bad / loss / error
-  "#2ABCCD", // cyan          — sky / tech-cool
-  "#954477", // rose          — wellness / health
-  "#99B314", // lime          — growth / nature
-  "#DDCC77", // amber         — anyplot's semantic anchor, used here as slot 9
-];
-const IMPRINT_HUES_DARK = [
-  "#009E73",
-  "#C475FD",
-  "#4467A3",
-  "#BD8233",
-  "#BF413E", // matte red, L-lifted for our dark surface
-  "#2ABCCD",
-  "#A25083", // rose, L-lifted for our dark surface
-  "#99B314",
-  "#DDCC77",
-];
-
-export const IMPRINT_PRESET: PalettePreset = {
-  id: "imprint",
-  name: "Imprint",
-  blurb: "Colourblind-safe chart hues by anyplot.ai",
-  light: { ...DEFAULT_PRESET.light, chart: IMPRINT_HUES_LIGHT },
-  dark: { ...DEFAULT_PRESET.dark, chart: IMPRINT_HUES_DARK },
-};
+/** @deprecated 0.49 — use `DEFAULT_PRESET` (Imprint IS the default now); removed in 0.51.
+ *  A persisted `"imprint"` id resolves to it through `presetById`'s fallback. */
+export const IMPRINT_PRESET: PalettePreset = DEFAULT_PRESET;
 
 // The full-theme switcher from #307 stayed retired (feedback #328) — the default
 // is still the single source of truth for surfaces, brand and money (its five
 // alternatives are gone, see the header). What IS selectable is
-// the categorical chart ramp (feedback #119), so these two presets are the live
-// set; presetById falls back to the default for any stale persisted id.
+// the categorical chart ramp (feedback #119), so Imprint (the default) and Paul Tol are
+// the live set; presetById falls back to the default for any stale persisted id.
 /**
  * The categorical chart ramp, shared by every derived preset below.
  *
- * Paul Tol's "Muted" set, unchanged, and deliberately NOT re-derived per preset. A
+ * The default's ramp (anyplot's eight since 0.49, Paul Tol's "Muted" before), and
+ * deliberately NOT re-derived per preset. A
  * categorical ramp solves a different problem from a UI palette — separability among
  * nine unknown siblings, rather than contrast against one known surface — and a set
  * optimised against real dichromat confusion lines beats one spaced evenly by formula.
@@ -205,7 +236,7 @@ export const IMPRINT_PRESET: PalettePreset = {
  * SINGLE_LIGHTNESS_MAX_SERIES — so a chart with more than four series must carry a
  * second channel (a direct label, a pattern, a legend adjacent to the mark).
  */
-const PAUL_TOL = {
+const KIT_RAMP = {
   light: DEFAULT_PRESET.light.chart,
   dark: DEFAULT_PRESET.dark.chart,
 } as const;
@@ -249,7 +280,7 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       moneyExpense: "#8e5900",
       moneyNet: "#7356a2",
       moneyNeutral: "#61646c",
-      chart: PAUL_TOL.light,
+      chart: KIT_RAMP.light,
       heat: {
         neutral: "#dce2ef",
         under: "#00725f",
@@ -274,7 +305,7 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       moneyExpense: "#b77b29",
       moneyNet: "#9679c9",
       moneyNeutral: "#a1a5ac",
-      chart: PAUL_TOL.dark,
+      chart: KIT_RAMP.dark,
       heat: {
         neutral: "#1d212b",
         under: "#009a80",
@@ -304,7 +335,7 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       moneyExpense: "#8e5900",
       moneyNet: "#7356a2",
       moneyNeutral: "#5f6662",
-      chart: PAUL_TOL.light,
+      chart: KIT_RAMP.light,
       heat: {
         neutral: "#d8e6dd",
         under: "#00725f",
@@ -329,7 +360,7 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       moneyExpense: "#b87c2a",
       moneyNet: "#977ac9",
       moneyNeutral: "#9fa7a2",
-      chart: PAUL_TOL.dark,
+      chart: KIT_RAMP.dark,
       heat: {
         neutral: "#1a241e",
         under: "#009a80",
@@ -359,7 +390,7 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       moneyExpense: "#8d5800",
       moneyNet: "#7355a2",
       moneyNeutral: "#676269",
-      chart: PAUL_TOL.light,
+      chart: KIT_RAMP.light,
       heat: {
         neutral: "#e7dfea",
         under: "#00715e",
@@ -384,7 +415,7 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       moneyExpense: "#b77b29",
       moneyNet: "#9679c9",
       moneyNeutral: "#a8a2aa",
-      chart: PAUL_TOL.dark,
+      chart: KIT_RAMP.dark,
       heat: {
         neutral: "#251f27",
         under: "#009980",
@@ -414,7 +445,7 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       moneyExpense: "#8d5800",
       moneyNet: "#7255a1",
       moneyNeutral: "#616467",
-      chart: PAUL_TOL.light,
+      chart: KIT_RAMP.light,
       heat: {
         neutral: "#e1e2e3",
         under: "#00715e",
@@ -439,7 +470,7 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       moneyExpense: "#b77b29",
       moneyNet: "#9679c9",
       moneyNeutral: "#a2a5a8",
-      chart: PAUL_TOL.dark,
+      chart: KIT_RAMP.dark,
       heat: {
         neutral: "#212122",
         under: "#009a80",
@@ -452,7 +483,7 @@ export const DERIVED_PRESETS: PalettePreset[] = [
   },
 ];
 
-export const PALETTES: PalettePreset[] = [DEFAULT_PRESET, IMPRINT_PRESET, ...DERIVED_PRESETS];
+export const PALETTES: PalettePreset[] = [DEFAULT_PRESET, PAUL_TOL_PRESET, ...DERIVED_PRESETS];
 
 export function presetById(id: string): PalettePreset {
   return PALETTES.find((p) => p.id === id) ?? DEFAULT_PRESET;
@@ -508,5 +539,11 @@ export function applyTokenSet(
   el.style.setProperty("--money-expense", step?.well?.moneyExpense ?? t.moneyExpense);
   el.style.setProperty("--money-net", step?.well?.moneyNet ?? t.moneyNet);
   el.style.setProperty("--money-neutral", step?.well?.moneyNeutral ?? t.moneyNeutral);
-  t.chart.forEach((c, i) => el.style.setProperty(`--chart-${i + 1}`, c));
+  // All nine `--chart-N`, a shorter ramp repeated: Imprint's eight write `--chart-9` as
+  // slot 0 — what `paletteFor(8)` names — so a host addressing `var(--chart-9)` directly
+  // follows the cycle, and switching away from Paul Tol's nine leaves no stale ninth hue.
+  // An empty ramp (a `derivePalette` set) leaves whatever was there, deliberately.
+  if (t.chart.length > 0) {
+    for (let i = 0; i < 9; i++) el.style.setProperty(`--chart-${i + 1}`, t.chart[i % t.chart.length]);
+  }
 }

package/src/tour/tour.tsx

@@ -891,7 +891,7 @@ function TourCard({
                 for this user (a guest sees no "add account" button), leaving the
                 undocumented ArrowRight key as the sole escape. */}
             {!((step.awaitClick || step.awaitInput) && step.target && rect) && (
-              <Button variant="brand" onClick={onNext} className={cn("px-2.5 py-1 text-xs")}>
+              <Button variant="accent" onClick={onNext} className={cn("px-2.5 py-1 text-xs")}>
                 {isLast ? labels.done : labels.next}
               </Button>
             )}

package/src/wizard/stepper-nav.tsx

@@ -42,7 +42,7 @@ export function StepperNav<TData extends Record<string, unknown>>({
   description,
   className,
   labels,
-  finishVariant = "brand",
+  finishVariant = "accent",
   finishDisabled = false,
   finishCommit,
   finishDisabledReason,
@@ -56,7 +56,7 @@ export function StepperNav<TData extends Record<string, unknown>>({
   className?: string;
   labels?: LabelOverride<WizardLabels>;
   /** The Finish button's variant — `"danger"` for a destructive commit (an import
-   *  that replaces what is there). Default `"brand"`. Next keeps `"brand"`. */
+   *  that replaces what is there). Default `"accent"`. Next keeps `"accent"`. */
   finishVariant?: ButtonVariant;
   /** Disable Finish for a reason of the app's own, on top of the kit's gates
    *  (`canFinish`, submitting, validating). */
@@ -183,14 +183,14 @@ export function StepperNav<TData extends Record<string, unknown>>({
     // The last step after a commit. Nothing to finish; Done only when the app gave
     // an `onDone` — otherwise the step carries its own way out.
     forwardButton = wizard.canDone ? (
-      <Button variant="brand" data-tour="wizard-done" onClick={wizard.done} disabled={doneDisabled}>
+      <Button variant="accent" data-tour="wizard-done" onClick={wizard.done} disabled={doneDisabled}>
         {stepNextLabel ?? l.done ?? DEFAULT_WIZARD_LABELS.done}
       </Button>
     ) : null;
   } else {
     forwardButton = (
       <Button
-        variant="brand"
+        variant="accent"
         data-tour="wizard-next"
         onClick={wizard.goNext}
         disabled={wizard.nextBlocked || pending}

package/tokens.css

@@ -264,15 +264,23 @@ html[data-text-size="xlarge"] {
   --status-pending: #1d4ed8;   /* blue-700   — in flight */
   --status-edited: #bf6800;    /* solved     — dirty, not yet saved */
   --status-error: #b91c1c;     /* red-700    — the save failed */
-  --chart-1: #332288;
-  --chart-2: #88ccee;
-  --chart-3: #44aa99;
-  --chart-4: #117733;
-  --chart-5: #999933;
-  --chart-6: #ddcc77;
-  --chart-7: #cc6677;
-  --chart-8: #882255;
-  --chart-9: #aa4499;
+  /* Chart ramp: anyplot's eight "Imprint" hues (0.49, https://anyplot.ai/palette), the
+     SAME in both themes — a hue under 3:1 on the ground gets a 1px ink edge
+     (`chartEdge`) rather than a different colour. `--chart-9` repeats slot 1, where
+     `paletteFor(8)` lands. Only the two inks below change with the theme:
+     `--chart-ink` for totals, baselines and edges; `--chart-muted` for an "other" /
+     rest / disabled slice and confidence bands (`CHART_ROLES`). */
+  --chart-1: #009e73;
+  --chart-2: #c475fd;
+  --chart-3: #4467a3;
+  --chart-4: #bd8233;
+  --chart-5: #ae3030;
+  --chart-6: #2abccd;
+  --chart-7: #954477;
+  --chart-8: #99b314;
+  --chart-9: #009e73;
+  --chart-ink: #1a1a17;
+  --chart-muted: #6b6a63;
 }
 
 .dark {
@@ -306,15 +314,17 @@ html[data-text-size="xlarge"] {
   --status-pending: #7dd3fc;   /* sky-300 */
   --status-edited: #fbbf24;    /* amber-400 */
   --status-error: #fca5a5;     /* red-300 */
-  --chart-1: #7e72d6;
-  --chart-2: #9fd8f2;
-  --chart-3: #5fc4b0;
-  --chart-4: #3fa45f;
-  --chart-5: #bfbf5e;
-  --chart-6: #e8dda0;
-  --chart-7: #e08c9a;
-  --chart-8: #c25a78;
-  --chart-9: #cc78be;
+  --chart-1: #009e73;
+  --chart-2: #c475fd;
+  --chart-3: #4467a3;
+  --chart-4: #bd8233;
+  --chart-5: #ae3030;
+  --chart-6: #2abccd;
+  --chart-7: #954477;
+  --chart-8: #99b314;
+  --chart-9: #009e73;
+  --chart-ink: #f0efe8;
+  --chart-muted: #a8a79f;
 }
 
 /* ── Derived surface / text roles ───────────────────────────────────────────