@tangle-network/brand 1.30.0 → 1.31.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 1.31.1
+
+### Patch Changes
+
+- 1986f4e: Generate canonical and named palettes, ink tiers, status colours and accent roles from shared theme inputs. Preserve public token names and mode boundaries while giving named themes their own raised planes and wells.
+
+## 1.31.0
+
+### Minor Changes
+
+- 36a423d: Per-user accent scopes. `data-accent="violet" | "orange" | "teal" | "blue" | "pink" | "brown" | "cyan" | "lime"` on `<html>` or any theme boundary rebinds the four indigo roles (fill, mark, line, ink) and the ring to that category's hue, in both modes and inside every named theme; buttons, focus, selection, interaction states, wells, gradients and the chart accent follow, while planes, body ink and status stay the theme's. `gen-ladders.mjs` solves each hue's roles (`--tone-<hue>-{fill,ring,mark,line,ink}`): the fill carries white at 4.5:1, the ink clears 4.5:1 on the page, the card and every selected tint, the line and the focus border clear 3:1. No picker ships; a product sets the attribute.
+  
+  `tangle-drift`'s `settings_layout` counts a settings page as composed when it binds the shared frame with `bindSettingsNav` from `@tangle-network/ui/presentation`, as a server-rendered host does, as well as when it imports `@tangle-network/agent-app/settings-react`.
+
 ## 1.30.0
 
 ### Minor Changes

package/README.md

@@ -60,6 +60,7 @@ For finer control, use the exported filenames:
 | `.dark[data-theme="intelligence"]` | Existing dark-only product surface; `.light` keeps the identity and uses canonical light |
 | `[data-theme="hospitality"]` + `.dark[data-theme="hospitality"]` | Hospitality's sage-and-forest product theme in both modes. Set it on the document root. Without `.dark` it is a complete light scope, including before hydration; `.dark` selects the dark baseline and its dark ladder. Status tones stay canonical |
 | `.dark[data-theme="website"]` + `[data-theme="website"]` | The public site's indigo-night planes and indigo-paper light. Set `class="dark" data-theme="website"` on the document root; a section with `data-theme="website"` and no `.dark` is a complete light island. Accent, status, category and syntax tones stay canonical |
+| `data-accent="violet"`, `"orange"`, `"teal"`, `"blue"`, `"pink"`, `"brown"`, `"cyan"` or `"lime"` | A per-user accent. Set it on `<html>` or any theme boundary, in either mode and inside any named theme. It rebinds the four indigo roles (`--hsl-primary` fill, `--brand-primary` mark, `--brand-cool` line, `--accent-text` ink) and `--hsl-ring` to that category's `--tone-<hue>-*` values, and everything the spine derives from them follows: buttons, focus, selection, interaction states, wells, gradients, chart accent. Planes, body ink and status stay the theme's. Generated by `scripts/gen-ladders.mjs`; no picker ships, the product stores and sets the attribute |
 
 Set one coherent mode on each boundary; do not author contradictory `.light`/`.dark`/named-mode markers. Named light variants keep their existing palettes; `tangle-light` is not silently retuned to the neutral base light palette. Each known boundary receives a complete baseline before named overrides, so nested scopes do not inherit opposite-mode syntax, status or already-resolved HSL aliases.
 
@@ -86,9 +87,10 @@ Choose this **instead of** `styles`, `tokens.css` and `named-themes.css`; do not
 
 This export is the shared migration boundary, **not a claim that Agent App has already migrated** and not a replacement for that package's entire stylesheet. Its component-specific variables, neutral-ramp API, keyframes and structural rules remain consumer-owned until a separate, explicit migration reconciles them. Remove duplicate shared palette declarations in that migration rather than placing competing global token systems on the same page.
 
-The only authoring inputs are `src/styles/tokens.css` and `named-themes.css`. Never edit `legacy-light.css` by hand:
+The palette inputs live in `scripts/palette.mjs`; `scripts/palette-template.css` owns selectors, public names, aliases and non-colour styling. `gen-ladders.mjs` generates both canonical stylesheets, every named theme and all accent scopes. Never edit generated CSS by hand. Regenerate the palette before its compatibility projection:
 
 ```sh
+pnpm --filter @tangle-network/brand gen:ladders
 pnpm --filter @tangle-network/brand gen:compat
 pnpm --filter @tangle-network/brand check:compat
 ```
@@ -121,7 +123,7 @@ import { Logo, TangleKnot } from "@tangle-network/brand";
 
 Renderers that cannot read CSS variables (PDF, canvas, WebGL, email, the `theme-color` meta) import `palettes` from `@tangle-network/brand`: resolved hex values for `light`, `dark`, `websiteLight` and `websiteDark`, generated from the stylesheets by `pnpm gen:palette`. Pages styled with CSS keep using the variables.
 
-The base surface ladder is the one GTM proved out: dark is indigo-lifted `#0a0a14` / `#191826` / `#221f33` / `#2c2942`; light is a cool `#eceef3` canvas, white paper cards and overlays, and `#f1f2f7` nested wells. The cast stays below 0.1 chroma and ink stays achromatic, so indigo still reads as the interaction accent, not the base field. Existing named products may supply deliberate surface overrides.
+The palette table specifies canvas hue, chroma, plane lightnesses and accent hue per theme. The generator derives neutral ink tiers from contrast targets, status inks and washes from their semantic hues, and category/accent roles from the shared hue table. Dark planes rise in OKLCH lightness; light alternates paper and wells. Named themes resolve their own sidebar, raised planes and wells. Ink remains neutral so the chosen accent signals interaction. `tokens.test.ts`, `surface-ladder.test.ts` and the generator's contrast guards protect the hierarchy and legibility. Size and colour values belong to the executable inputs rather than a second table here.
 
 Chrome radii are 6/8/10/12px in both base modes; the composer has its own 26px role. Role radii are one ramp: `--radius-tag` 4, `--radius-control` 8, `--radius-card` 12, `--radius-container` 16, and `--radius-pill` for every chip; `--radius-chip`, `--radius-field` and `--radius-panel` are older names of control, card and container. Every shadow is drawn in `--shadow-color`, HSL channels that are black in dark and `220 40% 8%` in light; a named theme retints its shadows by setting that one token. Inter (variable, then static) leads body and display stacks, with Geist fallbacks; Geist Mono leads code with JetBrains Mono and system fallbacks. Runtime font/radius registrations retain their public override names; tests keep Tailwind registration defaults aligned with the canonical declarations.
 

package/bin/tangle-drift.mjs

@@ -143,11 +143,12 @@ export const RULE_PATTERNS = {
  */
 export const PAGE_PATTERNS = {
   // A settings page drawn locally. agent-app's settings-react owns the settings composition: the
-  // section nav, frame, rows and save behaviour.
+  // section nav, frame, rows and save behaviour. A server-rendered host binds the same frame with
+  // ui's bindSettingsNav.
   settings_layout: {
     name: "settings",
-    composes: String.raw`(?:\bfrom|\bimport)\s*\(?\s*["']@tangle-network/agent-app/settings-react(?:/[^"']*)?["']`,
-    reason: "imports nothing from @tangle-network/agent-app/settings-react",
+    composes: String.raw`(?:\bfrom|\bimport)\s*\(?\s*["']@tangle-network/agent-app/settings-react(?:/[^"']*)?["']|\bimport\s*\{[^}]*\bbindSettingsNav\b[^}]*\}\s*from\s*["']@tangle-network/ui/presentation["']`,
+    reason: "imports nothing from @tangle-network/agent-app/settings-react, nor bindSettingsNav from @tangle-network/ui/presentation",
   },
 };
 const PAGE_DIR = /(?:^|\/)(?:routes|pages|views)\//i;

package/dist/index.d.ts

@@ -51,136 +51,136 @@ interface BrandPalette {
 /** Resolved palettes for the canonical light and dark themes and the website named theme. */
 export declare const palettes: {
   readonly light: {
-    readonly canvas: "#eceef3";
+    readonly canvas: "#eceef4";
     readonly card: "#ffffff";
-    readonly well: "#f5f6fa";
-    readonly nested: "#edeff4";
+    readonly well: "#f4f5fb";
+    readonly nested: "#edeff5";
     readonly overlay: "#ffffff";
     readonly deepest: "#ffffff";
-    readonly hairline: "#c8c7d6";
-    readonly ink: "#2d2d2d";
-    readonly inkSecondary: "#3f3f3f";
-    readonly inkMuted: "#4c4c4c";
-    readonly accent: "#4c3fc6";
-    readonly accentHover: "#5a50d6";
+    readonly hairline: "#c7c9ce";
+    readonly ink: "#3f3f3f";
+    readonly inkSecondary: "#505050";
+    readonly inkMuted: "#5d5d5d";
+    readonly accent: "#5f53cc";
+    readonly accentHover: "#6f64d1";
     readonly onAccent: "#ffffff";
-    readonly accentText: "#3c32e9";
-    readonly danger: "#b91c1c";
-    readonly successBg: "#ecfdf5";
-    readonly successBorder: "#a7f3d0";
-    readonly successText: "#047857";
-    readonly warningBg: "#fffbeb";
-    readonly warningBorder: "#fde68a";
-    readonly warningText: "#ab4f09";
-    readonly dangerBg: "#fff1f2";
-    readonly dangerBorder: "#fecdd3";
-    readonly dangerText: "#b91c1c";
-    readonly infoBg: "#f0f9ff";
-    readonly infoBorder: "#bae6fd";
-    readonly infoText: "#0369a1";
-    readonly brandVibrant: "#6366f1";
-    readonly brandCool: "#818cf8";
-    readonly brandGlow: "#3c32e9";
-    readonly brandPurple: "#6366f1";
+    readonly accentText: "#3822f6";
+    readonly danger: "#b01919";
+    readonly successBg: "#f1f6f4";
+    readonly successBorder: "#afcbc0";
+    readonly successText: "#166745";
+    readonly warningBg: "#f7f5f1";
+    readonly warningBorder: "#d1c5b0";
+    readonly warningText: "#775519";
+    readonly dangerBg: "#faf1f1";
+    readonly dangerBorder: "#e4b0b0";
+    readonly dangerText: "#b01919";
+    readonly infoBg: "#f1f5f8";
+    readonly infoBorder: "#b1c8d6";
+    readonly infoText: "#1c6085";
+    readonly brandVibrant: "#6457db";
+    readonly brandCool: "#8073f4";
+    readonly brandGlow: "#3822f6";
+    readonly brandPurple: "#7e6ff9";
   };
   readonly dark: {
-    readonly canvas: "#0a0a14";
+    readonly canvas: "#0b0a13";
     readonly card: "#191826";
-    readonly well: "#11101e";
-    readonly nested: "#252237";
-    readonly overlay: "#312e47";
+    readonly well: "#12111d";
+    readonly nested: "#242335";
+    readonly overlay: "#302f45";
     readonly deepest: "#040408";
-    readonly hairline: "#37364a";
-    readonly ink: "#e6e6e6";
-    readonly inkSecondary: "#c7c7c7";
-    readonly inkMuted: "#b5b5b5";
-    readonly accent: "#4c3fc6";
-    readonly accentHover: "#5a50d6";
+    readonly hairline: "#37354d";
+    readonly ink: "#d7d7d7";
+    readonly inkSecondary: "#bdbdbd";
+    readonly inkMuted: "#ababab";
+    readonly accent: "#5f53cc";
+    readonly accentHover: "#6f64d1";
     readonly onAccent: "#ffffff";
-    readonly accentText: "#a5b4fc";
-    readonly danger: "#ffada9";
-    readonly successBg: "#2f5146";
-    readonly successBorder: "#3c7760";
-    readonly successText: "#5ed7a4";
-    readonly warningBg: "#4b4232";
-    readonly warningBorder: "#7a6236";
-    readonly warningText: "#f4c14f";
-    readonly dangerBg: "#5a3b40";
-    readonly dangerBorder: "#7d4d53";
-    readonly dangerText: "#ffada9";
-    readonly infoBg: "#2d4e67";
-    readonly infoBorder: "#3d7292";
-    readonly infoText: "#67cdff";
-    readonly brandVibrant: "#7c6cf6";
-    readonly brandCool: "#818cf8";
-    readonly brandGlow: "#a5b4fc";
-    readonly brandPurple: "#c7d2fe";
+    readonly accentText: "#ccc7fd";
+    readonly danger: "#f9d6d6";
+    readonly successBg: "#21342c";
+    readonly successBorder: "#496b5d";
+    readonly successText: "#a6eccf";
+    readonly warningBg: "#362f22";
+    readonly warningBorder: "#6e634f";
+    readonly warningText: "#f0dcb8";
+    readonly dangerBg: "#412a2a";
+    readonly dangerBorder: "#785e5e";
+    readonly dangerText: "#f9d6d6";
+    readonly infoBg: "#243239";
+    readonly infoBorder: "#546771";
+    readonly infoText: "#c4e2f3";
+    readonly brandVibrant: "#8c83e5";
+    readonly brandCool: "#8073f4";
+    readonly brandGlow: "#ccc7fd";
+    readonly brandPurple: "#dedbfe";
   };
   readonly websiteLight: {
-    readonly canvas: "#f5f5fb";
+    readonly canvas: "#efeff8";
     readonly card: "#ffffff";
-    readonly well: "#fafafd";
-    readonly nested: "#ececf6";
+    readonly well: "#f7f7ff";
+    readonly nested: "#eeeef7";
     readonly overlay: "#ffffff";
     readonly deepest: "#ffffff";
-    readonly hairline: "#dbdbea";
-    readonly ink: "#191c24";
-    readonly inkSecondary: "#3a3a50";
-    readonly inkMuted: "#5e5e7a";
-    readonly accent: "#4c3fc6";
-    readonly accentHover: "#5a50d6";
+    readonly hairline: "#d0d0d9";
+    readonly ink: "#3f3f3f";
+    readonly inkSecondary: "#515151";
+    readonly inkMuted: "#5d5d5d";
+    readonly accent: "#5f53cc";
+    readonly accentHover: "#6f64d1";
     readonly onAccent: "#ffffff";
-    readonly accentText: "#3c32e9";
-    readonly danger: "#b91c1c";
-    readonly successBg: "#ecfdf5";
-    readonly successBorder: "#a7f3d0";
-    readonly successText: "#047857";
-    readonly warningBg: "#fffbeb";
-    readonly warningBorder: "#fde68a";
-    readonly warningText: "#ab4f09";
-    readonly dangerBg: "#fff1f2";
-    readonly dangerBorder: "#fecdd3";
-    readonly dangerText: "#b91c1c";
-    readonly infoBg: "#f0f9ff";
-    readonly infoBorder: "#bae6fd";
-    readonly infoText: "#0369a1";
-    readonly brandVibrant: "#6366f1";
-    readonly brandCool: "#818cf8";
-    readonly brandGlow: "#3c32e9";
-    readonly brandPurple: "#6366f1";
+    readonly accentText: "#3822f6";
+    readonly danger: "#b01919";
+    readonly successBg: "#f1f6f4";
+    readonly successBorder: "#afcbc0";
+    readonly successText: "#166745";
+    readonly warningBg: "#f7f5f1";
+    readonly warningBorder: "#d1c5b0";
+    readonly warningText: "#775519";
+    readonly dangerBg: "#faf1f1";
+    readonly dangerBorder: "#e4b0b0";
+    readonly dangerText: "#b01919";
+    readonly infoBg: "#f1f5f8";
+    readonly infoBorder: "#b1c8d6";
+    readonly infoText: "#1c6085";
+    readonly brandVibrant: "#6457db";
+    readonly brandCool: "#8073f4";
+    readonly brandGlow: "#3822f6";
+    readonly brandPurple: "#7e6ff9";
   };
   readonly websiteDark: {
     readonly canvas: "#0c0b1d";
-    readonly card: "#1d1b38";
-    readonly well: "#141328";
-    readonly nested: "#222041";
-    readonly overlay: "#262448";
-    readonly deepest: "#080814";
-    readonly hairline: "#33315f";
-    readonly ink: "#fdfdfd";
-    readonly inkSecondary: "#aaa8b8";
-    readonly inkMuted: "#9496bc";
-    readonly accent: "#4c3fc6";
-    readonly accentHover: "#5a50d6";
+    readonly card: "#201e3e";
+    readonly well: "#16142d";
+    readonly nested: "#2b294f";
+    readonly overlay: "#363462";
+    readonly deepest: "#04040e";
+    readonly hairline: "#403d72";
+    readonly ink: "#e4e4e4";
+    readonly inkSecondary: "#c8c8c8";
+    readonly inkMuted: "#b6b6b6";
+    readonly accent: "#5f53cc";
+    readonly accentHover: "#6f64d1";
     readonly onAccent: "#ffffff";
-    readonly accentText: "#a5b4fc";
-    readonly danger: "#ffada9";
-    readonly successBg: "#2f5146";
-    readonly successBorder: "#3c7760";
-    readonly successText: "#5ed7a4";
-    readonly warningBg: "#4b4232";
-    readonly warningBorder: "#7a6236";
-    readonly warningText: "#f4c14f";
-    readonly dangerBg: "#5a3b40";
-    readonly dangerBorder: "#7d4d53";
-    readonly dangerText: "#ffada9";
-    readonly infoBg: "#2d4e67";
-    readonly infoBorder: "#3d7292";
-    readonly infoText: "#67cdff";
-    readonly brandVibrant: "#7c6cf6";
-    readonly brandCool: "#818cf8";
-    readonly brandGlow: "#a5b4fc";
-    readonly brandPurple: "#c7d2fe";
+    readonly accentText: "#ccc7fd";
+    readonly danger: "#f9d6d6";
+    readonly successBg: "#21342c";
+    readonly successBorder: "#496b5d";
+    readonly successText: "#a6eccf";
+    readonly warningBg: "#362f22";
+    readonly warningBorder: "#6e634f";
+    readonly warningText: "#f0dcb8";
+    readonly dangerBg: "#412a2a";
+    readonly dangerBorder: "#785e5e";
+    readonly dangerText: "#f9d6d6";
+    readonly infoBg: "#243239";
+    readonly infoBorder: "#546771";
+    readonly infoText: "#c4e2f3";
+    readonly brandVibrant: "#8c83e5";
+    readonly brandCool: "#8073f4";
+    readonly brandGlow: "#ccc7fd";
+    readonly brandPurple: "#dedbfe";
   };
 };
 export { type BrandPalette, type LogoProps, type TangleKnotProps, knot, knotGradientIds, knotSvg };

package/dist/index.js

@@ -92,136 +92,136 @@ function Logo({ size = "md", variant = "full", suffix = null, className }) {
 /** Resolved palettes for the canonical light and dark themes and the website named theme. */
 const palettes = {
 	light: {
-		canvas: "#eceef3",
+		canvas: "#eceef4",
 		card: "#ffffff",
-		well: "#f5f6fa",
-		nested: "#edeff4",
+		well: "#f4f5fb",
+		nested: "#edeff5",
 		overlay: "#ffffff",
 		deepest: "#ffffff",
-		hairline: "#c8c7d6",
-		ink: "#2d2d2d",
-		inkSecondary: "#3f3f3f",
-		inkMuted: "#4c4c4c",
-		accent: "#4c3fc6",
-		accentHover: "#5a50d6",
+		hairline: "#c7c9ce",
+		ink: "#3f3f3f",
+		inkSecondary: "#505050",
+		inkMuted: "#5d5d5d",
+		accent: "#5f53cc",
+		accentHover: "#6f64d1",
 		onAccent: "#ffffff",
-		accentText: "#3c32e9",
-		danger: "#b91c1c",
-		successBg: "#ecfdf5",
-		successBorder: "#a7f3d0",
-		successText: "#047857",
-		warningBg: "#fffbeb",
-		warningBorder: "#fde68a",
-		warningText: "#ab4f09",
-		dangerBg: "#fff1f2",
-		dangerBorder: "#fecdd3",
-		dangerText: "#b91c1c",
-		infoBg: "#f0f9ff",
-		infoBorder: "#bae6fd",
-		infoText: "#0369a1",
-		brandVibrant: "#6366f1",
-		brandCool: "#818cf8",
-		brandGlow: "#3c32e9",
-		brandPurple: "#6366f1"
+		accentText: "#3822f6",
+		danger: "#b01919",
+		successBg: "#f1f6f4",
+		successBorder: "#afcbc0",
+		successText: "#166745",
+		warningBg: "#f7f5f1",
+		warningBorder: "#d1c5b0",
+		warningText: "#775519",
+		dangerBg: "#faf1f1",
+		dangerBorder: "#e4b0b0",
+		dangerText: "#b01919",
+		infoBg: "#f1f5f8",
+		infoBorder: "#b1c8d6",
+		infoText: "#1c6085",
+		brandVibrant: "#6457db",
+		brandCool: "#8073f4",
+		brandGlow: "#3822f6",
+		brandPurple: "#7e6ff9"
 	},
 	dark: {
-		canvas: "#0a0a14",
+		canvas: "#0b0a13",
 		card: "#191826",
-		well: "#11101e",
-		nested: "#252237",
-		overlay: "#312e47",
+		well: "#12111d",
+		nested: "#242335",
+		overlay: "#302f45",
 		deepest: "#040408",
-		hairline: "#37364a",
-		ink: "#e6e6e6",
-		inkSecondary: "#c7c7c7",
-		inkMuted: "#b5b5b5",
-		accent: "#4c3fc6",
-		accentHover: "#5a50d6",
+		hairline: "#37354d",
+		ink: "#d7d7d7",
+		inkSecondary: "#bdbdbd",
+		inkMuted: "#ababab",
+		accent: "#5f53cc",
+		accentHover: "#6f64d1",
 		onAccent: "#ffffff",
-		accentText: "#a5b4fc",
-		danger: "#ffada9",
-		successBg: "#2f5146",
-		successBorder: "#3c7760",
-		successText: "#5ed7a4",
-		warningBg: "#4b4232",
-		warningBorder: "#7a6236",
-		warningText: "#f4c14f",
-		dangerBg: "#5a3b40",
-		dangerBorder: "#7d4d53",
-		dangerText: "#ffada9",
-		infoBg: "#2d4e67",
-		infoBorder: "#3d7292",
-		infoText: "#67cdff",
-		brandVibrant: "#7c6cf6",
-		brandCool: "#818cf8",
-		brandGlow: "#a5b4fc",
-		brandPurple: "#c7d2fe"
+		accentText: "#ccc7fd",
+		danger: "#f9d6d6",
+		successBg: "#21342c",
+		successBorder: "#496b5d",
+		successText: "#a6eccf",
+		warningBg: "#362f22",
+		warningBorder: "#6e634f",
+		warningText: "#f0dcb8",
+		dangerBg: "#412a2a",
+		dangerBorder: "#785e5e",
+		dangerText: "#f9d6d6",
+		infoBg: "#243239",
+		infoBorder: "#546771",
+		infoText: "#c4e2f3",
+		brandVibrant: "#8c83e5",
+		brandCool: "#8073f4",
+		brandGlow: "#ccc7fd",
+		brandPurple: "#dedbfe"
 	},
 	websiteLight: {
-		canvas: "#f5f5fb",
+		canvas: "#efeff8",
 		card: "#ffffff",
-		well: "#fafafd",
-		nested: "#ececf6",
+		well: "#f7f7ff",
+		nested: "#eeeef7",
 		overlay: "#ffffff",
 		deepest: "#ffffff",
-		hairline: "#dbdbea",
-		ink: "#191c24",
-		inkSecondary: "#3a3a50",
-		inkMuted: "#5e5e7a",
-		accent: "#4c3fc6",
-		accentHover: "#5a50d6",
+		hairline: "#d0d0d9",
+		ink: "#3f3f3f",
+		inkSecondary: "#515151",
+		inkMuted: "#5d5d5d",
+		accent: "#5f53cc",
+		accentHover: "#6f64d1",
 		onAccent: "#ffffff",
-		accentText: "#3c32e9",
-		danger: "#b91c1c",
-		successBg: "#ecfdf5",
-		successBorder: "#a7f3d0",
-		successText: "#047857",
-		warningBg: "#fffbeb",
-		warningBorder: "#fde68a",
-		warningText: "#ab4f09",
-		dangerBg: "#fff1f2",
-		dangerBorder: "#fecdd3",
-		dangerText: "#b91c1c",
-		infoBg: "#f0f9ff",
-		infoBorder: "#bae6fd",
-		infoText: "#0369a1",
-		brandVibrant: "#6366f1",
-		brandCool: "#818cf8",
-		brandGlow: "#3c32e9",
-		brandPurple: "#6366f1"
+		accentText: "#3822f6",
+		danger: "#b01919",
+		successBg: "#f1f6f4",
+		successBorder: "#afcbc0",
+		successText: "#166745",
+		warningBg: "#f7f5f1",
+		warningBorder: "#d1c5b0",
+		warningText: "#775519",
+		dangerBg: "#faf1f1",
+		dangerBorder: "#e4b0b0",
+		dangerText: "#b01919",
+		infoBg: "#f1f5f8",
+		infoBorder: "#b1c8d6",
+		infoText: "#1c6085",
+		brandVibrant: "#6457db",
+		brandCool: "#8073f4",
+		brandGlow: "#3822f6",
+		brandPurple: "#7e6ff9"
 	},
 	websiteDark: {
 		canvas: "#0c0b1d",
-		card: "#1d1b38",
-		well: "#141328",
-		nested: "#222041",
-		overlay: "#262448",
-		deepest: "#080814",
-		hairline: "#33315f",
-		ink: "#fdfdfd",
-		inkSecondary: "#aaa8b8",
-		inkMuted: "#9496bc",
-		accent: "#4c3fc6",
-		accentHover: "#5a50d6",
+		card: "#201e3e",
+		well: "#16142d",
+		nested: "#2b294f",
+		overlay: "#363462",
+		deepest: "#04040e",
+		hairline: "#403d72",
+		ink: "#e4e4e4",
+		inkSecondary: "#c8c8c8",
+		inkMuted: "#b6b6b6",
+		accent: "#5f53cc",
+		accentHover: "#6f64d1",
 		onAccent: "#ffffff",
-		accentText: "#a5b4fc",
-		danger: "#ffada9",
-		successBg: "#2f5146",
-		successBorder: "#3c7760",
-		successText: "#5ed7a4",
-		warningBg: "#4b4232",
-		warningBorder: "#7a6236",
-		warningText: "#f4c14f",
-		dangerBg: "#5a3b40",
-		dangerBorder: "#7d4d53",
-		dangerText: "#ffada9",
-		infoBg: "#2d4e67",
-		infoBorder: "#3d7292",
-		infoText: "#67cdff",
-		brandVibrant: "#7c6cf6",
-		brandCool: "#818cf8",
-		brandGlow: "#a5b4fc",
-		brandPurple: "#c7d2fe"
+		accentText: "#ccc7fd",
+		danger: "#f9d6d6",
+		successBg: "#21342c",
+		successBorder: "#496b5d",
+		successText: "#a6eccf",
+		warningBg: "#362f22",
+		warningBorder: "#6e634f",
+		warningText: "#f0dcb8",
+		dangerBg: "#412a2a",
+		dangerBorder: "#785e5e",
+		dangerText: "#f9d6d6",
+		infoBg: "#243239",
+		infoBorder: "#546771",
+		infoText: "#c4e2f3",
+		brandVibrant: "#8c83e5",
+		brandCool: "#8073f4",
+		brandGlow: "#ccc7fd",
+		brandPurple: "#dedbfe"
 	}
 };
 export { Logo, TangleKnot, knot, knotGradientIds, knotSvg, palettes };

package/package.json

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

package/src/accent-scopes.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+// Each data-accent scope inside an explicit .dark and .light boundary and two
+// named themes: fill, ink, focus border, selection, mark and line follow the
+// hue while the card, body ink and status stay the theme's.
+const HUES = ["violet", "orange", "teal", "blue", "pink", "brown", "cyan", "lime"] as const;
+
+function Island({ accent, theme, label }: { accent?: string; theme?: string; label: string }) {
+  return (
+    <section data-accent={accent} data-theme={theme} className="rounded-[var(--radius-card)] border border-border bg-card p-3 text-foreground">
+      <p className="mb-2 text-xs text-muted-foreground">{label}</p>
+      <div className="flex flex-wrap items-center gap-2">
+        <button type="button" className="h-8 rounded-[var(--radius-control)] bg-primary px-3 text-sm font-medium text-primary-foreground">
+          Run
+        </button>
+        <span className="text-sm font-medium text-[var(--accent-text)]">Accent ink</span>
+        <span className="h-8 w-14 rounded-[var(--radius-control)] border border-[var(--focus-border)] shadow-[0_0_0_3px_var(--focus-halo)]" />
+        <span className="rounded-[var(--radius-pill)] bg-[var(--bg-selection)] px-2 py-0.5 text-xs">Selected</span>
+        <span className="size-4 rounded-full bg-[var(--brand-primary)]" />
+        <span className="w-8 border-t-2 border-[var(--brand-cool)]" />
+        <span className="text-xs text-[var(--surface-success-text)]">Done</span>
+      </div>
+    </section>
+  );
+}
+
+function Mode({ mode }: { mode: "dark" | "light" }) {
+  return (
+    <div className={`${mode} bg-background p-4`} data-mode={mode}>
+      <div className="grid gap-3 sm:grid-cols-3">
+        <Island label="indigo (no accent)" />
+        {HUES.map((hue) => (
+          <Island key={hue} accent={hue} label={hue} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+const meta: Meta = { title: "Brand/Accent scopes", parameters: { layout: "fullscreen" } };
+export default meta;
+
+export const AllHues: StoryObj = {
+  render: () => (
+    <div>
+      <Mode mode="dark" />
+      <Mode mode="light" />
+      <div className="grid gap-3 p-4 sm:grid-cols-2">
+        <Island theme="aubergine" accent="pink" label="pink inside aubergine" />
+        <Island theme="super-light" accent="teal" label="teal inside super-light" />
+      </div>
+    </div>
+  ),
+};