@tangle-network/brand 1.8.2 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 1.9.0
+
+### Minor Changes
+
+- 720de9a: Normalize the shared neutral palette and regenerate standalone chart tokens so charts follow the palette. Make user message cards wrap in narrow layouts.
+
+### Patch Changes
+
+- d163fb8: Align the named tangle-dark island with the neutral canonical dark spine while keeping Tangle accents and dark status colors intact.
+
 ## 1.8.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/brand",
-  "version": "1.8.2",
+  "version": "1.9.0",
   "description": "Tangle brand system — design tokens, logo, Tailwind v4 theme. Single source of truth for every Tangle app.",
   "type": "module",
   "license": "MIT",

package/src/styles/named-themes.css

@@ -167,40 +167,32 @@
   --text-primary: #06231a; --text-secondary: #285048; --text-muted: #5f8472; --text-dim: #82a699;
 }
 
-/* ───────────────────────── Tangle (neutral) — the canonical pair ──────────── */
-/* tangle-dark names the default :root/.dark spine explicitly — the values mirror
- * tokens.css exactly (pinned in named-themes.test.ts). The named scope matters the
- * moment the attribute would NOT resolve to :root: a dark island inside a
- * light-named wrapper inherits the light --hsl-* without it, and a theme picker
- * switching between named themes needs a `tangle-dark` that actually selects. Same
- * indigo hue family as tangle-light (~239-246), held to the dark discipline —
- * graphite-indigo neutrals, elevation by lightening, the fill indigo that carries
- * white (7.4:1) with the bright indigo reserved for accent text. The foreground
- * and destructive redeclares equal :root standalone, but the block must be
- * self-sufficient: in the island nesting an omitted token inherits the WRAPPER's
- * light value (near-black secondary text on the dark secondary measured ~1.5:1).
- * Status tokens are deliberately not redeclared: the :root dark status palette is
- * already dark-tuned, same as aubergine/arena. */
+/* ───────────────────────── Tangle — neutral dark spine ─────────────────────
+ * tangle-dark names the default :root/.dark spine explicitly. The named block
+ * repeats its neutral surfaces and ink so a dark island remains self-sufficient
+ * inside a light-named wrapper. Indigo stays in the accent; status tokens inherit
+ * the dark-tuned root palette.
+ */
 [data-theme="tangle-dark"] {
-  --hsl-background: 240 24% 11%;  --hsl-foreground: 225 22% 91%;
-  --hsl-card: 238 20% 22%;        --hsl-card-foreground: 225 22% 91%;
-  --hsl-popover: 239 22% 25%;     --hsl-popover-foreground: 225 22% 91%;
-  --hsl-primary: 246 54% 51%;     --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 239 22% 25%;   --hsl-secondary-foreground: 225 22% 91%;
-  --hsl-muted: 239 22% 25%;       --hsl-muted-foreground: 234 16% 74%;
-  --hsl-accent: 239 22% 25%;      --hsl-accent-foreground: 225 22% 91%;
-  --hsl-destructive: 348 74% 48%; --hsl-destructive-foreground: 0 0% 100%;
-  --hsl-border: 236 20% 35%;      --hsl-input: 240 24% 15%;
+  --hsl-background: 0 0% 8.6275%;       --hsl-foreground: 0 0% 90.1961%;
+  --hsl-card: 0 0% 18.8235%;             --hsl-card-foreground: 0 0% 90.1961%;
+  --hsl-popover: 0 0% 20.7843%;          --hsl-popover-foreground: 0 0% 90.1961%;
+  --hsl-primary: 246 54% 51%;            --hsl-primary-foreground: 0 0% 100%;
+  --hsl-secondary: 0 0% 20.7843%;        --hsl-secondary-foreground: 0 0% 90.1961%;
+  --hsl-muted: 0 0% 20.7843%;            --hsl-muted-foreground: 0 0% 70.9804%;
+  --hsl-accent: 0 0% 20.7843%;           --hsl-accent-foreground: 0 0% 90.1961%;
+  --hsl-destructive: 348 74% 48%;        --hsl-destructive-foreground: 0 0% 100%;
+  --hsl-border: 0 0% 29.8039%;           --hsl-input: 0 0% 12.1569%;
   --hsl-ring: 233 100% 87%;
-  --depth-1: #151523; --depth-2: #2d2e43; --depth-3: #32324e; --depth-4: #393957;
-  --bg-root: #151523; --bg-card: var(--depth-2); --bg-input: hsl(var(--hsl-input));
-  --md3-surface-container-lowest: #0f0f1a; --md3-surface-container-low: #222235;
-  --md3-surface-container: #2d2e43; --md3-surface-container-high: #32324e;
-  --md3-surface-container-highest: #393957; --md3-outline-variant: #474a6b;
-  --border-subtle: rgba(165, 180, 252, 0.10); --border-default: rgba(165, 180, 252, 0.16);
-  --border-hover: rgba(165, 180, 252, 0.28); --accent-text: #A5B4FC;
+  --depth-1: #161616; --depth-2: #303030; --depth-3: #353535; --depth-4: #3b3b3b;
+  --bg-root: #161616; --bg-card: var(--depth-2); --bg-input: hsl(var(--hsl-input));
+  --md3-surface-container-lowest: #101010; --md3-surface-container-low: #242424;
+  --md3-surface-container: #303030; --md3-surface-container-high: #353535;
+  --md3-surface-container-highest: #3b3b3b; --md3-outline-variant: #4c4c4c;
+  --border-subtle: rgba(255, 255, 255, 0.10); --border-default: rgba(255, 255, 255, 0.16);
+  --border-hover: rgba(255, 255, 255, 0.28); --accent-text: #A5B4FC;
   --brand-primary: #7C6CF6; --brand-glow: #A5AAFC;
-  --text-primary: #e3e6ed; --text-secondary: #c2c7d4; --text-muted: #b2b4c7; --text-dim: #9ea5b9;
+  --text-primary: #e6e6e6; --text-secondary: #c7c7c7; --text-muted: #b5b5b5; --text-dim: #a5a5a5;
 }
 /* Its light mode. */
 [data-theme="tangle-light"] {

package/src/styles/named-themes.test.ts

@@ -167,35 +167,17 @@ describe('named theme: [data-theme="tangle-dark"]', () => {
     }
   });
 
-  it("shares tangle-light's indigo hue family — same brand, dark register", () => {
-    for (const token of ["hsl-primary", "hsl-ring", "hsl-background"]) {
+  it("keeps the Tangle accent in the same indigo family", () => {
+    for (const token of ["hsl-primary", "hsl-ring"]) {
       const dark = hslIn(css, token);
       const lite = hslIn(light, token);
       expect(
         Math.abs(dark.h - lite.h),
-        `--${token} hue must sit within 10 of tangle-light's`,
+        `--${token} hue must sit within 10 of tangle-light`,
       ).toBeLessThanOrEqual(10);
     }
   });
 
-  it("tints its neutrals with the hue — nothing achromatic", () => {
-    for (const token of [
-      "hsl-background",
-      "hsl-card",
-      "hsl-popover",
-      "hsl-secondary",
-      "hsl-muted",
-      "hsl-accent",
-      "hsl-border",
-      "hsl-input",
-    ]) {
-      const { h, s } = hslIn(css, token);
-      expect(h, `--${token} hue in the indigo band`).toBeGreaterThanOrEqual(220);
-      expect(h, `--${token} hue in the indigo band`).toBeLessThanOrEqual(250);
-      expect(s, `--${token} is hue-tinted, not dead grey`).toBeGreaterThan(5);
-    }
-  });
-
   it("elevates by lightening, never darkening", () => {
     const planes = ["depth-1", "depth-2", "depth-3", "depth-4"].map((t) =>
       hexRelativeLuminanceIn(css, t),

package/src/styles/tokens.css

@@ -3,7 +3,7 @@
  * The surface ladder is NEUTRAL GREY and the indigo is trim — accent, never
  * field. It steps in even lightness increments so a card, a nested panel and an
  * overlay each read as a distinct plane by their own fill, and carries a crisp
- * hairline (1.6:1 against the card in dark) because shadow does no work on a dark
+ * hairline (1.5:1 against the card in dark) because shadow does no work on a dark
  * canvas. Light mirrors it: white paper on a grey canvas, never white-on-white.
  *
  * Apps consume this spine as-is. If a product needs its own accent identity,
@@ -22,35 +22,34 @@
  * an indigo page, and the eye stops finding them. Neutral planes give the brand
  * a field to sit on, so a single accent does all the signalling.
  *
- * The canvas sits OFF pure black (#151523). A near-black page under near-white
- * ink is the glare end of the range, and it is the reading surface for long
- * sessions.
+ * The canvas stays above pure black (#161616). Near-white ink on it is the
+ * glare end of the range, so its luminance leaves room for distinct text tiers.
  *
  * Elevation is carried by surface lightness plus a hairline that can actually be
  * seen — a black shadow on a dark canvas renders as nothing, so shadow does no
- * work here. The hairline is 1.6:1 against the resting card — quiet by design,
+ * work here. The hairline is about 1.5:1 against the resting card — quiet by design,
  * enough to state an edge without drawing a box around every panel.
  */
 :root,
 [data-sandbox-ui],
 [data-theme="dark"],
 .dark {
-  --md3-surface: #151523;                   /* L0 page canvas */
-  --md3-surface-dim: #0f0f1a;               /* recessed page */
-  --md3-surface-bright: #393957;
+  --md3-surface: #161616;                   /* L0 page canvas */
+  --md3-surface-dim: #101010;               /* recessed page */
+  --md3-surface-bright: #3b3b3b;
   /* Same value as --md3-surface-dim by design, not by drift: both name the floor
    * of the ladder, and dark has no plane below it to give them. They stay two
    * tokens because the roles diverge in light, where the well is paper (#ffffff)
-   * and the recessed page is grey (#d9d9e6) — a consumer binding to the wrong one
+   * and the recessed page is grey (#dadada) — a consumer binding to the wrong one
    * there gets the wrong surface. */
-  --md3-surface-container-lowest: #0f0f1a;  /* L-1 terminal/code well */
-  --md3-surface-container-low: #222235;     /* L1 chrome, field wells */
-  --md3-surface-container: #2d2e43;         /* L2 resting card */
-  --md3-surface-container-high: #32324e;    /* L3 nested / hover */
-  --md3-surface-container-highest: #393957; /* L4 overlay */
-  --md3-surface-variant: #32324e;
-  --md3-on-surface: #e3e6ed;
-  --md3-on-surface-variant: #b2b4c7;
+  --md3-surface-container-lowest: #101010;  /* L-1 terminal/code well */
+  --md3-surface-container-low: #242424;     /* L1 chrome, field wells */
+  --md3-surface-container: #303030;         /* L2 resting card */
+  --md3-surface-container-high: #353535;    /* L3 nested / hover */
+  --md3-surface-container-highest: #3b3b3b; /* L4 overlay */
+  --md3-surface-variant: #353535;
+  --md3-on-surface: #e6e6e6;
+  --md3-on-surface-variant: #b5b5b5;
 
   --md3-primary: #A5B4FC;
   --md3-primary-dim: #7C6CF6;
@@ -67,8 +66,8 @@
   --md3-on-secondary-container: #E8E5FF;
 
   --md3-tertiary: #10B981;
-  --md3-outline: #898da9;
-  --md3-outline-variant: #474a6b;
+  --md3-outline: #8e8e8e;
+  --md3-outline-variant: #4c4c4c;
 
   --md3-error: #ff5277;
   --md3-error-dim: #eb2855;
@@ -82,37 +81,37 @@
   --md3-surface-tint: #A5B4FC;
 
   /* Semantic HSL bridge — the neutral-grey surface ladder */
-  --hsl-background: 240 24% 11%;     /* L0 canvas #151523 */
-  /* 92% L, not pure white: near-white ink on the canvas is the glare end of the
-   * range, and the tiers below it need room to separate. 91% holds 10.6:1 on the
-   * card — AAA with headroom — and leaves four ink steps the eye can tell apart. */
-  --hsl-foreground: 225 22% 91%;     /* #e3e6ed */
-  --hsl-card: 238 20% 22%;           /* L2 card #2d2e43 */
-  --hsl-card-foreground: 225 22% 91%;
-  --hsl-popover: 239 22% 25%;        /* L3 #32324e — the NESTED plane despite
+  --hsl-background: 0 0% 8.6275%;     /* L0 canvas #161616 */
+  /* Near-white ink on the canvas is the glare end of the range, and the tiers
+   * below it need room to separate. This neutral ink keeps the original 10.6:1
+   * contrast on the card and leaves four steps the eye can tell apart. */
+  --hsl-foreground: 0 0% 90.1961%;     /* #e6e6e6 */
+  --hsl-card: 0 0% 18.8235%;           /* L2 card #303030 */
+  --hsl-card-foreground: 0 0% 90.1961%;
+  --hsl-popover: 0 0% 20.7843%;        /* L3 #353535 — the NESTED plane despite
      the name; the overlay plane is --md3-surface-container-highest. A popover
      carries body text, and the ladder above L3 is reserved for planes that lift
      by shadow, so it sits on L3 and the ink ramp reaches it. */
-  --hsl-popover-foreground: 225 22% 91%;
+  --hsl-popover-foreground: 0 0% 90.1961%;
   /* The fill indigo, NOT the bright one: `.btn-primary` puts white on this, and
    * #6366F1 carries white at only 4.47:1. This clears the floor at 7.4:1. The
    * bright indigo stays available for accent TEXT via --accent-text. */
   --hsl-primary: 246 54% 51%;       /* #4c3fc6 */
   --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 239 22% 25%;      /* L3 #32324e */
-  --hsl-secondary-foreground: 225 22% 91%;
-  --hsl-muted: 239 22% 25%;          /* L3 hover well */
-  --hsl-muted-foreground: 234 16% 74%;  /* #b2b4c7 — high enough that the
+  --hsl-secondary: 0 0% 20.7843%;      /* L3 #353535 */
+  --hsl-secondary-foreground: 0 0% 90.1961%;
+  --hsl-muted: 0 0% 20.7843%;          /* L3 hover well */
+  --hsl-muted-foreground: 0 0% 70.9804%;  /* #b5b5b5 — high enough that the
      reduced-opacity caption derivatives (/70, /60) still clear the large-text
      contrast floor against the L2 card. */
-  --hsl-accent: 239 22% 25%;         /* neutral hover (indigo lives in accent-surface-strong) */
-  --hsl-accent-foreground: 225 22% 91%;
+  --hsl-accent: 0 0% 20.7843%;         /* neutral hover (indigo lives in accent-surface-strong) */
+  --hsl-accent-foreground: 0 0% 90.1961%;
   --hsl-destructive: 348 74% 48%;
   --hsl-destructive-foreground: 0 0% 100%;
-  /* Quiet on purpose: 1.6:1 against the resting card. Shadow does no work on a
+  /* Quiet on purpose: 1.5:1 against the resting card. Shadow does no work on a
    * dark canvas, so the hairline is what states where a plane ends. */
-  --hsl-border: 236 20% 35%;         /* #474a6b = --md3-outline-variant */
-  --hsl-input: 240 24% 15%;          /* recessed field well */
+  --hsl-border: 0 0% 29.8039%;         /* #4c4c4c = --md3-outline-variant */
+  --hsl-input: 0 0% 12.1569%;          /* recessed field well #1f1f1f */
   /* Brighter than --primary on purpose: the ring is NON-TEXT and has to clear
    * 3:1 against BOTH canvas and card. The fill indigo is tuned to carry white
    * text instead, so the two cannot be the same value. */
@@ -153,20 +152,20 @@
 
   /* Sidebar tokens — L1 chrome: one step BELOW the canvas here, so the nav reads
    * as chrome the content sits in front of rather than as another card. */
-  --sidebar-background: 242 26% 8%;   /* L1 chrome #0f0f1a */
-  --sidebar-foreground: 225 22% 91%;
+  --sidebar-background: 0 0% 6.2745%;   /* L1 chrome #101010 */
+  --sidebar-foreground: 0 0% 90.1961%;
   --sidebar-primary: 246 54% 51%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 239 22% 25%;      /* L3 hover well */
-  --sidebar-accent-foreground: 225 22% 91%;
-  --sidebar-border: 236 20% 35%;
+  --sidebar-accent: 0 0% 20.7843%;      /* L3 hover well */
+  --sidebar-accent-foreground: 0 0% 90.1961%;
+  --sidebar-border: 0 0% 29.8039%;
   --sidebar-ring: 233 100% 87%;
 
   /* Depth scale — tracks the MD3 ladder (canvas / card / nested / overlay) */
-  --depth-1: #151523;
-  --depth-2: #2d2e43;
-  --depth-3: #32324e;
-  --depth-4: #393957;
+  --depth-1: #161616;
+  --depth-2: #303030;
+  --depth-3: #353535;
+  --depth-4: #3b3b3b;
 
   /* Status colors */
   --status-running: #10B981;
@@ -252,7 +251,7 @@
   --accent-text: #A5B4FC;
 
   /* Surfaces — solid fills off the ladder (no radial mesh) */
-  --bg-root: #151523;
+  --bg-root: #161616;
   --bg-dark: var(--depth-1);
   --bg-card: var(--depth-2);
   --bg-elevated: var(--depth-4);
@@ -262,7 +261,7 @@
   --bg-selection: rgba(124, 108, 246, 0.28);
 
   /* Text — neutral */
-  /* Four steps the eye can actually separate: 10.6 / 7.8 / 6.5 / 5.4 against the
+  /* Four steps the eye can actually separate: 10.6 / 7.8 / 6.4 / 5.4 against the
    * L2 card. --text-dim is the faintest tier but it is still TEXT, so it clears
    * the 4.5:1 body floor rather than only the 3:1 large-text one.
    *
@@ -274,10 +273,10 @@
    * card, the chrome and the canvas are fixed points. tokens.test.ts asserts
    * every tier on every plane, so a retune cannot open a gap on one plane while
    * looking correct on another. */
-  --text-primary: #e3e6ed;
-  --text-secondary: #c2c7d4;
-  --text-muted: #b2b4c7;
-  --text-dim: #9ea5b9;
+  --text-primary: #e6e6e6;
+  --text-secondary: #c7c7c7;
+  --text-muted: #b5b5b5;
+  --text-dim: #a5a5a5;
 
   /* Brand accents — Tangle */
   --brand-primary: #7C6CF6;
@@ -292,9 +291,9 @@
   --brand-emerald: #10B981;
 
   /* Borders — neutral hairlines */
-  --border-subtle: rgba(165, 180, 252, 0.10);
-  --border-default: rgba(165, 180, 252, 0.16);
-  --border-hover: rgba(165, 180, 252, 0.28);
+  --border-subtle: rgba(255, 255, 255, 0.10);
+  --border-default: rgba(255, 255, 255, 0.16);
+  --border-hover: rgba(255, 255, 255, 0.28);
   --border-accent: rgba(129, 140, 248, 0.35);
   --border-accent-hover: rgba(129, 140, 248, 0.50);
 
@@ -420,26 +419,26 @@
 [data-sandbox-theme="vault"],
 [data-theme="light"],
 .light {
-  /* Light theme — clean professional, warm purple accents */
+  /* Light theme — neutral surfaces with purple accents */
 
   /* MD3 surface hierarchy */
   /* The light ladder ALTERNATES; it is not monotonic, and that is deliberate.
-   * On a tinted canvas, a raised plane is PAPER (white) and a recessed one is a
-   * tinted WELL. So card and overlay are both white and separate from each other
+   * On a neutral canvas, a raised plane is PAPER (white) and a recessed one is a
+   * neutral WELL. So card and overlay are both white and separate from each other
    * by shadow and ring, not by fill — which is how light-mode elevation actually
    * reads. Forcing a strictly-darkening ladder here is what produced the
    * white-on-white flatness this palette replaced. Pinned in tokens.test.ts. */
-  --md3-surface: #e9e9f1;                   /* L0 page canvas — neutral grey, BELOW the wells */
-  --md3-surface-dim: #d9d9e6;
+  --md3-surface: #eaeaea;                   /* L0 page canvas — neutral grey, BELOW the wells */
+  --md3-surface-dim: #dadada;
   --md3-surface-bright: #ffffff;
   --md3-surface-container-lowest: #ffffff;  /* insets read as paper */
-  --md3-surface-container-low: #f7f7fa;     /* L1 chrome, field wells — well */
+  --md3-surface-container-low: #f7f7f7;     /* L1 chrome, field wells — well */
   --md3-surface-container: #ffffff;         /* L2 resting card — paper */
-  --md3-surface-container-high: #f2f2f7;    /* L3 nested / hover — well */
+  --md3-surface-container-high: #f2f2f2;    /* L3 nested / hover — well */
   --md3-surface-container-highest: #ffffff; /* L4 overlay — paper + shadow */
-  --md3-surface-variant: #f2f2f7;
-  --md3-on-surface: #2b2c3e;
-  --md3-on-surface-variant: #494b5d;
+  --md3-surface-variant: #f2f2f2;
+  --md3-on-surface: #2d2d2d;
+  --md3-on-surface-variant: #4c4c4c;
 
   --md3-primary: #3E349E;
   --md3-primary-dim: #352B88;
@@ -457,8 +456,8 @@
 
   --md3-tertiary: #065F46;
   --md3-tertiary-container: #D1FAE5;
-  --md3-outline: #737696;
-  --md3-outline-variant: #cecfde;
+  --md3-outline: #787878;
+  --md3-outline-variant: #d0d0d0;
 
   --md3-error: #ba1a1a;
   --md3-error-dim: #93000a;
@@ -471,35 +470,30 @@
   --md3-inverse-on-surface: #f0f1f4;
   --md3-surface-tint: #6366F1;
 
-  /* Semantic HSL bridge — white paper on a neutral-grey canvas */
-  --hsl-background: 240 24% 93%;     /* L0 canvas #e9e9f1 */
-  /* Ink, not black. Pure #0d0d0d on white paper measures 19.5:1 — a hair off the
-   * 21:1 ceiling — and that maximum is what reads as glare rather than as
-   * legibility. 20.5% L lands 13.7:1 on the card and 11.4:1 on the canvas: AAA with
-   * headroom in both places, and a step the eye reads as text instead of as a
-   * hole. */
-  --hsl-foreground: 235 18% 20.5%;     /* #2b2c3e */
+  /* Semantic HSL bridge — white paper on an achromatic canvas */
+  --hsl-background: 0 0% 91.7647%;     /* L0 canvas #eaeaea */
+  /* Neutral ink rather than pure black keeps the original 13.7:1 contrast on
+   * white paper and 11.4:1 on the canvas: AAA with headroom in both places. */
+  --hsl-foreground: 0 0% 17.6471%;     /* #2d2d2d */
   --hsl-card: 0 0% 100%;            /* L2 card = white paper */
-  --hsl-card-foreground: 235 18% 20.5%;
+  --hsl-card-foreground: 0 0% 17.6471%;
   --hsl-popover: 0 0% 100%;
-  --hsl-popover-foreground: 235 18% 20.5%;
+  --hsl-popover-foreground: 0 0% 17.6471%;
   --hsl-primary: 246 54% 51%;       /* #4c3fc6 — carries white at 7.4:1 */
   --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 240 26% 96%;      /* L3 #f2f2f7 */
-  --hsl-secondary-foreground: 235 18% 20.5%;
-  --hsl-muted: 240 26% 96%;          /* L3 hover well */
-  /* 34% L: the shared components fade captions with /70 and /60, and a
-   * translucent foreground renders as the token COMPOSITED over the plane behind
-   * it. Against white paper that compositing is brutal — a lighter value puts the
-   * /60 caption under the 3:1 large-text floor. This holds 3.0:1 there and 8.6:1
-   * at full strength, still a clear step below the 13.7:1 body ink. */
-  --hsl-muted-foreground: 235 12% 32.5%;  /* #494b5d text-muted */
-  --hsl-accent: 240 26% 96%;         /* neutral hover */
-  --hsl-accent-foreground: 235 18% 20.5%;
+  --hsl-secondary: 0 0% 94.902%;      /* L3 #f2f2f2 */
+  --hsl-secondary-foreground: 0 0% 17.6471%;
+  --hsl-muted: 0 0% 94.902%;          /* L3 hover well */
+  /* The shared components fade captions with /70 and /60, so a translucent
+   * foreground renders composited over the surface behind it. This neutral value
+   * keeps 3.0:1 at /60 and 8.6:1 at full strength on paper. */
+  --hsl-muted-foreground: 0 0% 29.8039%;  /* #4c4c4c text-muted */
+  --hsl-accent: 0 0% 94.902%;         /* neutral hover */
+  --hsl-accent-foreground: 0 0% 17.6471%;
   --hsl-destructive: 0 72% 41%;
   --hsl-destructive-foreground: 0 0% 100%;
-  --hsl-border: 238 20% 84%;         /* #cecfde = --md3-outline-variant */
-  --hsl-input: 240 30% 97%;          /* field well */
+  --hsl-border: 0 0% 81.5686%;         /* #d0d0d0 = --md3-outline-variant */
+  --hsl-input: 0 0% 96.0784%;          /* field well #f5f5f5 */
   --hsl-ring: 246 54% 51%;
   --hsl-success: 160 84% 30%;
   --hsl-warning: 41 96% 50%;
@@ -508,9 +502,9 @@
   /* depth-2 (card) and depth-4 (elevated) are BOTH paper, on purpose: in light,
    * a popover does not out-lighten a white card — it lifts by shadow. See the
    * ladder note above. */
-  --depth-1: #e9e9f1;  /* canvas */
+  --depth-1: #eaeaea;  /* canvas */
   --depth-2: #ffffff;  /* card — paper */
-  --depth-3: #f2f2f7;  /* nested well */
+  --depth-3: #f2f2f2;  /* nested well */
   --depth-4: #ffffff;  /* elevated — paper, separated by shadow */
 
   --status-running: #059669;
@@ -579,12 +573,12 @@
 
   /* Sidebar — light, flat surface + hairline */
   --sidebar-background: 0 0% 100%;     /* white paper */
-  --sidebar-foreground: 235 18% 20.5%;
+  --sidebar-foreground: 0 0% 17.6471%;
   --sidebar-primary: 246 54% 51%;     /* #4c3fc6 */
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 240 26% 96%;       /* L3 hover well */
-  --sidebar-accent-foreground: 235 18% 20.5%;
-  --sidebar-border: 238 20% 84%;   /* = --md3-outline-variant */
+  --sidebar-accent: 0 0% 94.902%;       /* L3 hover well */
+  --sidebar-accent-foreground: 0 0% 17.6471%;
+  --sidebar-border: 0 0% 81.5686%;   /* = --md3-outline-variant */
   --sidebar-ring: 246 54% 51%;
 
   --mesh-teal: transparent;
@@ -592,7 +586,7 @@
   --mesh-blue: transparent;
 
   /* Surfaces — flat single-neutral light */
-  --bg-root: #e9e9f1;
+  --bg-root: #eaeaea;
   --bg-dark: var(--depth-1);
   --bg-card: var(--depth-2);
   /* Paper, exactly like --bg-card: in light you cannot raise a plane by making it
@@ -606,19 +600,18 @@
   --bg-hover: rgba(76, 63, 198, 0.06);
   --bg-selection: rgba(76, 63, 198, 0.16);
 
-  /* Mirrors the dark ramp's spacing: 13.7 / 10.5 / 8.6 / 5.6 against white paper.
-   * Every step carries the 240 cast so the ink belongs to the palette.
+  /* Mirrors the dark ramp's spacing against white paper. The ink uses neutral
+   * grays so purple stays reserved for interaction accents.
    *
-   * --text-dim is pinned from the CANVAS (#e9e9f1), not the white card: it is
-   * the faintest tier, so the tinted L0 is the surface that binds it, and a
-   * value chosen against paper alone sits under the 4.5:1 body floor there.
-   * 4.6 on the canvas, 5.6 on the card — both floors are asserted in
+   * --text-dim is pinned from the CANVAS (#eaeaea), not the white card: it is
+   * the faintest tier, so the lighter L0 is the surface that binds it. Its 4.6:1
+   * canvas and 5.6:1 card contrasts clear the body-text floor, as asserted in
    * tokens.test.ts, because a ratio quoted in a comment drifts the moment a
    * surface moves and nothing catches it. */
-  --text-primary: #2b2c3e;
-  --text-secondary: #3d3e52;
-  --text-muted: #494b5d;
-  --text-dim: #65677b;
+  --text-primary: #2d2d2d;
+  --text-secondary: #3f3f3f;
+  --text-muted: #4c4c4c;
+  --text-dim: #686868;
 
   --brand-primary: #6366F1;
   --brand-strong: #2E2A5E;
@@ -631,9 +624,9 @@
   --brand-vibrant: #6366F1;
   --brand-emerald: #059669;
 
-  --border-subtle: rgba(60, 52, 140, 0.10);
-  --border-default: rgba(60, 52, 140, 0.14);
-  --border-hover: rgba(60, 52, 140, 0.24);
+  --border-subtle: rgba(0, 0, 0, 0.10);
+  --border-default: rgba(0, 0, 0, 0.14);
+  --border-hover: rgba(0, 0, 0, 0.24);
   --border-accent: rgba(91, 78, 212, 0.18);
   --border-accent-hover: rgba(91, 78, 212, 0.35);
 
@@ -727,7 +720,7 @@
  * draws as a --chart-muted outline, the same mark as an unsolved attempt. No
  * categorical palette ships: identity is carried by direct labels.
  *
- * Contrast against the dark canvas (#151523) and white paper, checked with the
+ * Contrast against the dark canvas (#161616) and white paper, checked with the
  * dataviz palette validator and WCAG ratios:
  *   ink 14.45 / 13.70, ink-muted 7.34 / 5.56, accent 6.05 / 7.41,
  *   muted 5.54 / 4.41, grid 1.46 / 1.12 (recessive by design).

package/src/styles/tokens.test.ts

@@ -13,12 +13,9 @@ import {
 /**
  * The canonical spine's structural contract.
  *
- * The whole point of this palette is that a surface separates from the one below
- * it by its own FILL. A flat, desaturated ladder pushes that job onto borders,
- * and the app reads grey and washed out — which is the state this replaced. The
- * numbers are therefore not decoration; they are the contract. These assertions
- * pin the PROPERTIES rather than the exact values, so a retune stays free but a
- * collapse back to flat does not.
+ * The canonical surface and ink spine is neutral so purple can signal interaction.
+ * Each surface remains distinct by fill and elevation. These assertions pin that
+ * structure without fixing every shade, so the ladder can be retuned safely.
  */
 const tokens = readFileSync(
   path.resolve(import.meta.dirname, "tokens.css"),
@@ -31,27 +28,73 @@ const tokens = readFileSync(
 const DARK = blockIn(tokens, ".dark");
 const LIGHT = blockIn(tokens, ".light");
 
-describe("canonical dark spine", () => {
-  it("keeps the canvas in the brand's hue family, at any strength", () => {
-    const bg = hslIn(DARK, "hsl-background");
-    // HUE is the brand constraint and does not move: the greys are cool and sit
-    // in the indigo band, so they belong to the same family as the accent rather
-    // than reading as a foreign neutral pasted underneath it.
-    expect(bg.h, "canvas hue sits in the indigo band").toBeGreaterThanOrEqual(
-      215,
-    );
-    expect(bg.h).toBeLessThanOrEqual(260);
-    // SATURATION is a taste dial, not a contract. How far the surfaces lean —
-    // near-neutral graphite with the indigo purely in the accents, or a fully
-    // indigo-cast ground — is a live product decision, so the only thing pinned
-    // here is that the canvas is not dead grey. Asserting a band instead makes
-    // this test fail every time that decision is revisited, which tells you
-    // nothing about whether the palette is correct.
-    expect(bg.s, "a colourless canvas has left the brand behind").toBeGreaterThan(
-      5,
-    );
-  });
+describe("canonical surfaces, ink, and chrome are neutral", () => {
+  const neutralHslRoles = [
+    "hsl-background",
+    "hsl-foreground",
+    "hsl-card",
+    "hsl-card-foreground",
+    "hsl-popover",
+    "hsl-popover-foreground",
+    "hsl-secondary",
+    "hsl-secondary-foreground",
+    "hsl-muted",
+    "hsl-muted-foreground",
+    "hsl-accent",
+    "hsl-accent-foreground",
+    "hsl-border",
+    "hsl-input",
+    "sidebar-background",
+    "sidebar-foreground",
+    "sidebar-accent",
+    "sidebar-accent-foreground",
+    "sidebar-border",
+  ];
+  const neutralHexRoles = [
+    "md3-surface",
+    "md3-surface-dim",
+    "md3-surface-bright",
+    "md3-surface-container-lowest",
+    "md3-surface-container-low",
+    "md3-surface-container",
+    "md3-surface-container-high",
+    "md3-surface-container-highest",
+    "md3-surface-variant",
+    "md3-on-surface",
+    "md3-on-surface-variant",
+    "md3-outline",
+    "md3-outline-variant",
+    "depth-1",
+    "depth-2",
+    "depth-3",
+    "depth-4",
+  ];
+
+  for (const [theme, spine] of [
+    ["dark", DARK],
+    ["light", LIGHT],
+  ] as const) {
+    it(`${theme}: shared surface and ink roles are achromatic`, () => {
+      for (const token of neutralHslRoles) {
+        expect(hslIn(spine, token).s, `--${token}`).toBe(0);
+      }
+      for (const token of neutralHexRoles) {
+        const hex = spine.match(
+          new RegExp(`--${token}:\\s*(#[0-9a-fA-F]{6})`),
+        )?.[1];
+        expect(hex, `--${token} must be defined`).toBeDefined();
+        expect(hex?.slice(1, 3), `--${token} red equals green`).toBe(
+          hex?.slice(3, 5),
+        );
+        expect(hex?.slice(3, 5), `--${token} green equals blue`).toBe(
+          hex?.slice(5, 7),
+        );
+      }
+    });
+  }
+});
 
+describe("canonical dark spine", () => {
   it("guards reading comfort at the INK, not at the canvas", () => {
     // A deep canvas is fine — glare comes from the ratio between ink and ground,
     // not from the ground alone. So the floor here is loose, and the real guard
@@ -388,7 +431,7 @@ describe("input tokens carry two DIFFERENT roles and must not be conflated", ()
 });
 
 describe("canonical light spine", () => {
-  it("is white paper on a tinted canvas, never white-on-white", () => {
+  it("is white paper on a neutral canvas, never white-on-white", () => {
     const canvas = hslIn(LIGHT, "hsl-background");
     const card = hslIn(LIGHT, "hsl-card");
     expect(card.l, "the card is paper").toBe(100);
@@ -396,22 +439,11 @@ describe("canonical light spine", () => {
       canvas.l,
       "a pure-white canvas gives a white card nothing to lift off",
     ).toBeLessThan(97);
-    // Mirrors the dark spine exactly: HUE is the brand constraint and is pinned;
-    // saturation is a taste dial and is not. How far the surfaces lean is a live
-    // product decision, so asserting a band here only guarantees this test fails
-    // the next time that decision is revisited.
-    expect(canvas.h, "canvas hue sits in the indigo band").toBeGreaterThanOrEqual(
-      215,
-    );
-    expect(canvas.h).toBeLessThanOrEqual(260);
-    expect(canvas.s, "a colourless canvas has left the brand behind").toBeGreaterThan(
-      5,
-    );
   });
 
   it("ALTERNATES paper and well — light elevation is not a darkening ramp", () => {
-    // Deliberately not monotonic. On a tinted canvas a raised plane is paper and
-    // a recessed one is a tinted well, so the ladder alternates. Pinning it stops
+    // Deliberately not monotonic. On a neutral canvas a raised plane is paper and
+    // a recessed one is a neutral well, so the ladder alternates. Pinning it stops
     // a well-meaning "fix" from forcing a strictly-ordered ramp, which is exactly
     // what produced the white-on-white flatness this palette replaced.
     const paper = ["md3-surface-container", "md3-surface-container-highest"];