@felloinnovations/brand-kit 0.5.1 → 0.5.3

package/dist/tokens.d.ts

@@ -122,6 +122,7 @@ declare const tokens: {
     readonly "--ws-tint-accent": "color-mix(in srgb, var(--color-bg-page) 96%, #4f4c7c)";
     readonly "--ws-tint-needs": "color-mix(in srgb, var(--ws-chart-under-half) 10%, var(--color-surface))";
     readonly "--ws-tint-live": "color-mix(in srgb, var(--ws-chart-finished) 12%, var(--color-surface))";
+    readonly "--ws-tint-alert": "color-mix(in srgb, var(--ws-chart-alert) 8%, var(--color-surface))";
     readonly "--ws-edge": "var(--color-gray-stroke)";
     readonly "--ws-edge-card": "var(--color-gray-3)";
     readonly "--ws-edge-card-1x": "color-mix(in srgb, var(--ws-edge-card) 50%, transparent)";
@@ -269,6 +270,7 @@ declare const tokens: {
     readonly "--ws-shadow-menu": "var(--ws-float-rim), 0 16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent)";
     readonly "--ws-shadow-tip": "var(--ws-float-rim), 0 16px 32px -20px color-mix(in srgb, var(--ws-shade) 45%, transparent)";
     readonly "--ws-shadow-float": "var(--ws-float-rim), 0 40px 80px -30px color-mix(in srgb, var(--ws-shade) 30%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--ws-shade) 14%, transparent)";
+    readonly "--ws-shadow-rise": "var(--ws-float-rim), 0 -16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent)";
     readonly "--ws-shadow-bar": "var(--ws-float-rim), 0 24px 60px -24px color-mix(in srgb, var(--ws-shade) 32%, transparent), 0 2px 10px color-mix(in srgb, var(--ws-shade) 6%, transparent)";
     readonly "--ws-hover-faint": "color-mix(in srgb, var(--ws-ink) 3.137254902%, transparent)";
     readonly "--ws-hover": "color-mix(in srgb, var(--ws-ink) 5.0980392157%, transparent)";
@@ -551,6 +553,7 @@ declare const themes: {
         readonly "--ws-tint-accent": "#f7f4f4";
         readonly "--ws-tint-needs": "#fff1ef";
         readonly "--ws-tint-live": "#e1f0f0";
+        readonly "--ws-tint-alert": "#f9ebee";
         readonly "--ws-edge": "#e8e8e8";
         readonly "--ws-edge-card": "#d3d3d3";
         readonly "--ws-edge-card-1x": "rgba(211, 211, 211, 0.5)";
@@ -698,6 +701,7 @@ declare const themes: {
         readonly "--ws-shadow-menu": "0 0 0 0 transparent, 0 16px 32px -16px rgba(9, 53, 85, 0.35)";
         readonly "--ws-shadow-tip": "0 0 0 0 transparent, 0 16px 32px -20px rgba(9, 53, 85, 0.45)";
         readonly "--ws-shadow-float": "0 0 0 0 transparent, 0 40px 80px -30px rgba(9, 53, 85, 0.3), 0 10px 24px -12px rgba(9, 53, 85, 0.14)";
+        readonly "--ws-shadow-rise": "0 0 0 0 transparent, 0 -16px 32px -16px rgba(9, 53, 85, 0.35)";
         readonly "--ws-shadow-bar": "0 0 0 0 transparent, 0 24px 60px -24px rgba(9, 53, 85, 0.32), 0 2px 10px rgba(9, 53, 85, 0.06)";
         readonly "--ws-hover-faint": "rgba(9, 53, 85, 0.031)";
         readonly "--ws-hover": "rgba(9, 53, 85, 0.051)";
@@ -975,6 +979,7 @@ declare const themes: {
         readonly "--ws-tint-accent": "#131e28";
         readonly "--ws-tint-needs": "#2e252a";
         readonly "--ws-tint-live": "#112a32";
+        readonly "--ws-tint-alert": "#2e212c";
         readonly "--ws-edge": "#1e2a36";
         readonly "--ws-edge-card": "#273544";
         readonly "--ws-edge-card-1x": "#273544";
@@ -1122,6 +1127,7 @@ declare const themes: {
         readonly "--ws-shadow-menu": "0 0 0 0.5px rgba(232, 237, 243, 0.08), 0 16px 32px -16px rgba(0, 0, 0, 0.35)";
         readonly "--ws-shadow-tip": "0 0 0 0.5px rgba(232, 237, 243, 0.08), 0 16px 32px -20px rgba(0, 0, 0, 0.45)";
         readonly "--ws-shadow-float": "0 0 0 0.5px rgba(232, 237, 243, 0.08), 0 40px 80px -30px rgba(0, 0, 0, 0.3), 0 10px 24px -12px rgba(0, 0, 0, 0.14)";
+        readonly "--ws-shadow-rise": "0 0 0 0.5px rgba(232, 237, 243, 0.08), 0 -16px 32px -16px rgba(0, 0, 0, 0.35)";
         readonly "--ws-shadow-bar": "0 0 0 0.5px rgba(232, 237, 243, 0.08), 0 24px 60px -24px rgba(0, 0, 0, 0.32), 0 2px 10px rgba(0, 0, 0, 0.06)";
         readonly "--ws-hover-faint": "rgba(232, 237, 243, 0.031)";
         readonly "--ws-hover": "rgba(232, 237, 243, 0.051)";
@@ -1399,6 +1405,7 @@ declare const themes: {
         readonly "--ws-tint-accent": "#11283e";
         readonly "--ws-tint-needs": "#302a3a";
         readonly "--ws-tint-live": "#062d41";
+        readonly "--ws-tint-alert": "#30243d";
         readonly "--ws-edge": "rgba(255, 255, 255, 0.1)";
         readonly "--ws-edge-card": "rgba(255, 255, 255, 0.18)";
         readonly "--ws-edge-card-1x": "rgba(255, 255, 255, 0.18)";
@@ -1546,6 +1553,7 @@ declare const themes: {
         readonly "--ws-shadow-menu": "0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 16px 32px -16px rgba(0, 0, 0, 0.35)";
         readonly "--ws-shadow-tip": "0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 16px 32px -20px rgba(0, 0, 0, 0.45)";
         readonly "--ws-shadow-float": "0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 40px 80px -30px rgba(0, 0, 0, 0.3), 0 10px 24px -12px rgba(0, 0, 0, 0.14)";
+        readonly "--ws-shadow-rise": "0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 -16px 32px -16px rgba(0, 0, 0, 0.35)";
         readonly "--ws-shadow-bar": "0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 24px 60px -24px rgba(0, 0, 0, 0.32), 0 2px 10px rgba(0, 0, 0, 0.06)";
         readonly "--ws-hover-faint": "rgba(255, 255, 255, 0.031)";
         readonly "--ws-hover": "rgba(255, 255, 255, 0.051)";

package/dist/tokens.js

@@ -125,6 +125,7 @@ var tokens = {
   "--ws-tint-accent": "color-mix(in srgb, var(--color-bg-page) 96%, #4f4c7c)",
   "--ws-tint-needs": "color-mix(in srgb, var(--ws-chart-under-half) 10%, var(--color-surface))",
   "--ws-tint-live": "color-mix(in srgb, var(--ws-chart-finished) 12%, var(--color-surface))",
+  "--ws-tint-alert": "color-mix(in srgb, var(--ws-chart-alert) 8%, var(--color-surface))",
   "--ws-edge": "var(--color-gray-stroke)",
   "--ws-edge-card": "var(--color-gray-3)",
   "--ws-edge-card-1x": "color-mix(in srgb, var(--ws-edge-card) 50%, transparent)",
@@ -272,6 +273,7 @@ var tokens = {
   "--ws-shadow-menu": "var(--ws-float-rim), 0 16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent)",
   "--ws-shadow-tip": "var(--ws-float-rim), 0 16px 32px -20px color-mix(in srgb, var(--ws-shade) 45%, transparent)",
   "--ws-shadow-float": "var(--ws-float-rim), 0 40px 80px -30px color-mix(in srgb, var(--ws-shade) 30%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--ws-shade) 14%, transparent)",
+  "--ws-shadow-rise": "var(--ws-float-rim), 0 -16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent)",
   "--ws-shadow-bar": "var(--ws-float-rim), 0 24px 60px -24px color-mix(in srgb, var(--ws-shade) 32%, transparent), 0 2px 10px color-mix(in srgb, var(--ws-shade) 6%, transparent)",
   "--ws-hover-faint": "color-mix(in srgb, var(--ws-ink) 3.137254902%, transparent)",
   "--ws-hover": "color-mix(in srgb, var(--ws-ink) 5.0980392157%, transparent)",
@@ -551,6 +553,7 @@ var themes = {
     "--ws-tint-accent": "#f7f4f4",
     "--ws-tint-needs": "#fff1ef",
     "--ws-tint-live": "#e1f0f0",
+    "--ws-tint-alert": "#f9ebee",
     "--ws-edge": "#e8e8e8",
     "--ws-edge-card": "#d3d3d3",
     "--ws-edge-card-1x": "rgba(211, 211, 211, 0.5)",
@@ -698,6 +701,7 @@ var themes = {
     "--ws-shadow-menu": "0 0 0 0 transparent, 0 16px 32px -16px rgba(9, 53, 85, 0.35)",
     "--ws-shadow-tip": "0 0 0 0 transparent, 0 16px 32px -20px rgba(9, 53, 85, 0.45)",
     "--ws-shadow-float": "0 0 0 0 transparent, 0 40px 80px -30px rgba(9, 53, 85, 0.3), 0 10px 24px -12px rgba(9, 53, 85, 0.14)",
+    "--ws-shadow-rise": "0 0 0 0 transparent, 0 -16px 32px -16px rgba(9, 53, 85, 0.35)",
     "--ws-shadow-bar": "0 0 0 0 transparent, 0 24px 60px -24px rgba(9, 53, 85, 0.32), 0 2px 10px rgba(9, 53, 85, 0.06)",
     "--ws-hover-faint": "rgba(9, 53, 85, 0.031)",
     "--ws-hover": "rgba(9, 53, 85, 0.051)",
@@ -975,6 +979,7 @@ var themes = {
     "--ws-tint-accent": "#131e28",
     "--ws-tint-needs": "#2e252a",
     "--ws-tint-live": "#112a32",
+    "--ws-tint-alert": "#2e212c",
     "--ws-edge": "#1e2a36",
     "--ws-edge-card": "#273544",
     "--ws-edge-card-1x": "#273544",
@@ -1122,6 +1127,7 @@ var themes = {
     "--ws-shadow-menu": "0 0 0 0.5px rgba(232, 237, 243, 0.08), 0 16px 32px -16px rgba(0, 0, 0, 0.35)",
     "--ws-shadow-tip": "0 0 0 0.5px rgba(232, 237, 243, 0.08), 0 16px 32px -20px rgba(0, 0, 0, 0.45)",
     "--ws-shadow-float": "0 0 0 0.5px rgba(232, 237, 243, 0.08), 0 40px 80px -30px rgba(0, 0, 0, 0.3), 0 10px 24px -12px rgba(0, 0, 0, 0.14)",
+    "--ws-shadow-rise": "0 0 0 0.5px rgba(232, 237, 243, 0.08), 0 -16px 32px -16px rgba(0, 0, 0, 0.35)",
     "--ws-shadow-bar": "0 0 0 0.5px rgba(232, 237, 243, 0.08), 0 24px 60px -24px rgba(0, 0, 0, 0.32), 0 2px 10px rgba(0, 0, 0, 0.06)",
     "--ws-hover-faint": "rgba(232, 237, 243, 0.031)",
     "--ws-hover": "rgba(232, 237, 243, 0.051)",
@@ -1399,6 +1405,7 @@ var themes = {
     "--ws-tint-accent": "#11283e",
     "--ws-tint-needs": "#302a3a",
     "--ws-tint-live": "#062d41",
+    "--ws-tint-alert": "#30243d",
     "--ws-edge": "rgba(255, 255, 255, 0.1)",
     "--ws-edge-card": "rgba(255, 255, 255, 0.18)",
     "--ws-edge-card-1x": "rgba(255, 255, 255, 0.18)",
@@ -1546,6 +1553,7 @@ var themes = {
     "--ws-shadow-menu": "0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 16px 32px -16px rgba(0, 0, 0, 0.35)",
     "--ws-shadow-tip": "0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 16px 32px -20px rgba(0, 0, 0, 0.45)",
     "--ws-shadow-float": "0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 40px 80px -30px rgba(0, 0, 0, 0.3), 0 10px 24px -12px rgba(0, 0, 0, 0.14)",
+    "--ws-shadow-rise": "0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 -16px 32px -16px rgba(0, 0, 0, 0.35)",
     "--ws-shadow-bar": "0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 24px 60px -24px rgba(0, 0, 0, 0.32), 0 2px 10px rgba(0, 0, 0, 0.06)",
     "--ws-hover-faint": "rgba(255, 255, 255, 0.031)",
     "--ws-hover": "rgba(255, 255, 255, 0.051)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@felloinnovations/brand-kit",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "Fello brand tokens, the house stylesheet (fello.css), React components and the design system guide. One source of truth for every GTM app.",
   "license": "UNLICENSED",
   "private": false,
@@ -19,6 +19,7 @@
   "files": [
     "dist",
     "scripts/check-palette.mjs",
+    "scripts/check-drift.mjs",
     "scripts/token-model.mjs",
     "tokens",
     "design-system",
@@ -26,6 +27,9 @@
     "AGENTS.md",
     "CHANGELOG.md"
   ],
+  "bin": {
+    "brand-kit-drift": "scripts/check-drift.mjs"
+  },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -76,7 +80,8 @@
     "hosted": "node scripts/build-hosted.mjs",
     "check:geometry": "node scripts/check-geometry.mjs",
     "check:scope": "node scripts/check-scope.mjs",
-    "check:palette": "node scripts/check-palette.mjs"
+    "check:palette": "node scripts/check-palette.mjs",
+    "check:drift": "node scripts/check-drift.mjs --selftest"
   },
   "dependencies": {
     "@radix-ui/react-tabs": "^1.1.21",

package/scripts/check-drift.mjs

@@ -0,0 +1,325 @@
+#!/usr/bin/env node
+/**
+ * check-drift: the static half of brand-audit as a script, so nothing depends on an agent remembering to grep every
+ * file. It walks an app's own source (never node_modules, builds or a vendored copy of the kit) and lists every line
+ * that has drifted from the Fello brand kit, by file and line:
+ *
+ *   colour     hex, rgb(), hsl(), oklch() literals and Tailwind palette classes (bg-blue-500); each hex is marked as
+ *              matching a kit token, close to one, or no token
+ *   tokens     an app redefining a kit token (--ws-*, --color-*, ...) or restyling a kit class (.ws-*)
+ *   type       px font sizes, text-[14px], a font-family that is not the kit's
+ *   radius     raw border-radius, rounded-[...]
+ *   shadow     raw box-shadow, shadow-[...]
+ *   trap       text-[var(--x)]: Tailwind reads a bare var as a font size, so the colour silently drops
+ *   motion     raw durations and curves, transition-all, duration-300, animate-*, @keyframes, hover lifts
+ *   underline  a link underlined at rest, or its hover underline taken away (04-type: medium, underlined under the pointer)
+ *   words      em dashes in markup
+ *   copy       a local components/ui file named after a kit component that never touches the kit
+ *
+ * A line that is right as it is carries `brand-kit-ignore: <why>` on it or on the line above.
+ *
+ *   node check-drift.mjs [dir]                          report; exit 1 when anything drifted
+ *   node check-drift.mjs [dir] --json                   the findings as JSON
+ *   node check-drift.mjs [dir] --write-baseline <file>  record today's counts per file and rule, exit 0
+ *   node check-drift.mjs [dir] --baseline <file>        exit 1 only when a file and rule has more than its baseline
+ *                                                       (CI for an app mid-migration: nothing new gets in)
+ *   node check-drift.mjs --selftest                     plants known drift in a temp folder and proves each is caught
+ *
+ * In an app: node node_modules/@felloinnovations/brand-kit/scripts/check-drift.mjs src
+ */
+import { readFileSync, writeFileSync, readdirSync, statSync, mkdtempSync, mkdirSync, rmSync } from 'node:fs';
+import { join, relative, dirname, extname, basename } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { tmpdir } from 'node:os';
+
+const here = dirname(fileURLToPath(import.meta.url));
+
+// ---- The kit's tokens: every name, and the light value of each written as a hex.
+function loadTokens() {
+  const css = readFileSync(join(here, '../tokens/tokens.root.css'), 'utf8');
+  const names = new Set();
+  const byHex = new Map();
+  for (const m of css.matchAll(/(--[a-z0-9-]+)\s*:\s*([^;]+);/gi)) {
+    names.add(m[1]);
+    const hex = m[2].trim().match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+    if (hex && !byHex.has(norm(hex[0]))) byHex.set(norm(hex[0]), m[1]);
+  }
+  return { names, byHex };
+}
+
+function norm(hex) {
+  let h = hex.slice(1).toLowerCase();
+  if (h.length === 3 || h.length === 4) h = [...h].map((c) => c + c).join('');
+  return `#${h.slice(0, 6)}`;
+}
+
+const rgb = (hex) => [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
+
+/** "matches --x", "close to --x (#abc)" (no channel more than 12 off), or "no token". */
+function classify(hex, byHex) {
+  const h = norm(hex);
+  if (byHex.has(h)) return `matches ${byHex.get(h)}`;
+  const [r, g, b] = rgb(h);
+  let best = null;
+  for (const [v, name] of byHex) {
+    const [r2, g2, b2] = rgb(v);
+    const d = Math.max(Math.abs(r - r2), Math.abs(g - g2), Math.abs(b - b2));
+    if (d <= 12 && (!best || d < best.d)) best = { d, name, v };
+  }
+  return best ? `close to ${best.name} (${best.v})` : 'no token';
+}
+
+// ---- What to read.
+const SKIP_DIRS = new Set(['node_modules', 'dist', 'build', 'out', '.next', '.nuxt', '.svelte-kit', '.turbo', '.vercel',
+  '.git', '.claude', 'coverage', 'storybook-static', '.output']);
+const EXT = new Set(['.css', '.scss', '.sass', '.less', '.ts', '.tsx', '.js', '.jsx', '.mjs', '.cjs', '.html', '.vue', '.svelte', '.astro']);
+const STYLE = new Set(['.css', '.scss', '.sass', '.less']);
+const MARKUP = new Set(['.tsx', '.jsx', '.html', '.vue', '.svelte', '.astro']);
+const SKIP_FILE = /\.(d\.ts|test\.[jt]sx?|spec\.[jt]sx?|stories\.[jt]sx?)$|\.min\.(css|js)$/;
+// A vendored copy of the kit (fello-css.mjs output, the brand-kit's own files) is the kit, not drift.
+const VENDORED = /Generated by scripts\/fello-css\.mjs|generated by scripts\/build-bundle\.mjs/;
+
+function* walk(dir) {
+  for (const e of readdirSync(dir, { withFileTypes: true })) {
+    if (e.isDirectory()) {
+      if (!SKIP_DIRS.has(e.name)) yield* walk(join(dir, e.name));
+    } else if (EXT.has(extname(e.name)) && !SKIP_FILE.test(e.name)) yield join(dir, e.name);
+  }
+}
+
+// ---- The rules. Each returns [{ col, value, note }] for one line.
+const TW_HUES = 'slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose';
+const TW_PREFIX = 'bg|text|border|ring|fill|stroke|from|via|to|outline|divide|placeholder|accent|caret|decoration|shadow';
+const KIT_UI = new Set(['button', 'badge', 'card', 'input', 'label', 'skeleton', 'tabs', 'toast', 'toaster', 'checkbox',
+  'radio', 'radio-group', 'switch', 'select', 'textarea', 'dialog', 'tooltip', 'popover', 'avatar', 'table', 'menu',
+  'dropdown-menu', 'slider', 'pagination', 'breadcrumb', 'stepper', 'combobox']);
+
+const all = (re, line, fn) => [...line.matchAll(re)].flatMap((m) => fn(m) ?? []);
+
+function rules(tokens) {
+  return {
+    colour: (line, ext) => [
+      ...all(/(^|[\s'"`(:,[=])(#(?:[0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{3,4}))(?![0-9a-z_-])/gi, line, (m) => {
+        if (/(href|to|id)=["'`{]*$/.test(line.slice(0, m.index + m[1].length))) return null;
+        if (!STYLE.has(ext) && /^#[0-9a-f]{3,4}$/i.test(m[2]) && !/color|colour|fill|stroke|background|border|#[0-9a-f]{3,4}['"`;)]/i.test(line)) return null;
+        return { col: m.index + m[1].length, value: m[2], note: classify(m[2], tokens.byHex) };
+      }),
+      ...all(/\b(rgba?|hsla?|oklch|oklab|lab|lch)\(([^)]*)\)/g, line, (m) =>
+        /var\(|from\s/.test(m[2]) ? null : { col: m.index, value: m[0], note: 'no token' }),
+      ...all(new RegExp(`(?<![\\w-])(?:[a-z-]+:)*(?:${TW_PREFIX})-(?:${TW_HUES})-\\d{2,3}(?:\\/\\d+)?\\b`, 'g'), line, (m) =>
+        ({ col: m.index, value: m[0], note: 'Tailwind palette, not a kit token' })),
+    ],
+    tokens: (line) => [
+      ...all(/(?<![\w(-])(--(?:ws|color|font|space|radius|shadow|text|size|brand)-[a-z0-9-]+)\s*:/g, line, (m) =>
+        tokens.names.has(m[1]) ? { col: m.index, value: m[1], note: 'redefines a kit token (a palette, 20-palettes.md, sets colours)' } : null),
+      ...all(/(^|[\s,}>~+])(\.ws-[a-z0-9_-]+)[^{};]*\{/g, line, (m) =>
+        ({ col: m.index + m[1].length, value: m[2], note: 'restyles a kit class' })),
+    ],
+    type: (line) => [
+      ...all(/font-size\s*:\s*[\d.]+px/g, line, (m) => ({ col: m.index, value: m[0], note: 'px font size' })),
+      ...all(/fontSize\s*:\s*['"]?[\d.]+(px)?['"]?\s*[,}]/g, line, (m) => ({ col: m.index, value: m[0], note: 'px font size' })),
+      ...all(/\btext-\[[\d.]+(px|rem)\]/g, line, (m) => ({ col: m.index, value: m[0], note: 'arbitrary font size' })),
+      ...all(/font-family\s*:\s*([^;}]+)/g, line, (m) =>
+        /var\(|instrument sans|inherit|monospace|ui-monospace/i.test(m[1]) ? null : { col: m.index, value: m[0].trim(), note: 'not the kit face' }),
+      ...all(/\bfont-\[['"]?[A-Za-z]/g, line, (m) => ({ col: m.index, value: m[0], note: 'not the kit face' })),
+    ],
+    radius: (line) => [
+      ...all(/border-radius\s*:\s*(?!var|0[;\s]|inherit|50%)[\d.]+(px|rem|em)/g, line, (m) => ({ col: m.index, value: m[0], note: 'raw radius' })),
+      ...all(/borderRadius\s*:\s*['"]?\d/g, line, (m) => ({ col: m.index, value: m[0], note: 'raw radius' })),
+      ...all(/\brounded(-[a-z]{1,2})?-\[(?!var)[^\]]+\]/g, line, (m) => ({ col: m.index, value: m[0], note: 'raw radius' })),
+    ],
+    shadow: (line) => [
+      ...all(/box-shadow\s*:\s*(?!var|none|inherit|0\s*0\s*0\s*0)([^;}]+)/g, line, (m) => ({ col: m.index, value: m[0].trim(), note: 'raw shadow' })),
+      ...all(/boxShadow\s*:\s*['"`](?!var|none)/g, line, (m) => ({ col: m.index, value: m[0], note: 'raw shadow' })),
+      ...all(/\bshadow-\[(?!var)[^\]]+\]/g, line, (m) => ({ col: m.index, value: m[0], note: 'raw shadow' })),
+    ],
+    trap: (line) => all(/\btext-\[var\(--/g, line, (m) => ({ col: m.index, value: m[0], note: 'write text-[color:var(--x)] or text-[length:var(--x)]' })),
+    motion: (line, ext) => [
+      ...all(/(transition|animation)(-duration)?\s*:\s*(?![^;}]*var\()[^;}]*\b\d*\.?\d+m?s\b[^;}]*/g, line, (m) => ({ col: m.index, value: m[0].trim(), note: 'raw duration (--ws-spring-*, --ws-duration-*)' })),
+      ...all(/cubic-bezier\(/g, line, (m) => ({ col: m.index, value: m[0], note: 'raw curve (--ws-ease-*)' })),
+      ...(STYLE.has(ext) ? all(/@keyframes\s+[\w-]+/g, line, (m) => ({ col: m.index, value: m[0], note: 'hand-rolled animation' })) : []),
+      ...all(/(?<![\w-])(transition-all|duration-\d+|ease-(in|out|in-out|linear)|animate-(spin|ping|pulse|bounce))(?![\w-])/g, line, (m) =>
+        ({ col: m.index, value: m[0], note: 'Tailwind motion, not the kit springs' })),
+      ...all(/\bhover:(-?translate-[xy]-[\w.[\]-]+|-?scale-[\w.[\]-]+|shadow(-[\w[\]-]+)?)/g, line, (m) =>
+        ({ col: m.index, value: m[0], note: 'hover lift (hover is a tint)' })),
+    ],
+    underline: (line) => /class(Name)?\s*=|\bcn\(|clsx\(/.test(line) ? [
+      // A dotted underline is the kit's mark for a cell whose full words show on hover (04-type), not a link.
+      ...(/decoration-dotted/.test(line) ? [] : all(/(?<![\w:-])underline(?![\w-])/g, line, (m) => ({ col: m.index, value: 'underline', note: 'underlined at rest' }))),
+      ...all(/\bhover:no-underline\b/g, line, (m) => ({ col: m.index, value: m[0], note: 'hover underline taken away' })),
+    ] : [],
+    words: (line, ext) => (MARKUP.has(ext)
+      ? all(/—/g, line, (m) => ({ col: m.index, value: '—', note: 'em dash in UI words' })) : []),
+  };
+}
+
+/** The lines with comments (/* *\/ across lines, // to the end, <!-- -->) blanked to spaces, so columns hold and a
+ *  colour or a dash in a comment is not drift. `//` after a colon (a URL) is not a comment. */
+function uncomment(lines) {
+  let open = false;
+  return lines.map((line) => {
+    let out = '';
+    let i = 0;
+    while (i < line.length) {
+      if (open) {
+        const end = line.indexOf('*/', i);
+        const stop = end < 0 ? line.length : end + 2;
+        out += ' '.repeat(stop - i);
+        i = stop;
+        if (end >= 0) open = false;
+        continue;
+      }
+      const rest = line.slice(i);
+      if (rest.startsWith('/*')) { open = true; continue; }
+      if (rest.startsWith('<!--')) {
+        const end = line.indexOf('-->', i);
+        const stop = end < 0 ? line.length : end + 3;
+        out += ' '.repeat(stop - i);
+        i = stop;
+        continue;
+      }
+      if (rest.startsWith('//') && (i === 0 || /[\s;{}(),]/.test(line[i - 1]))) { out += ' '.repeat(line.length - i); break; }
+      out += line[i++];
+    }
+    return out;
+  });
+}
+
+function scan(dir, tokens) {
+  const R = rules(tokens);
+  const findings = [];
+  for (const file of walk(dir)) {
+    const text = readFileSync(file, 'utf8');
+    if (VENDORED.test(text.slice(0, 2000))) continue;
+    const rel = relative(dir, file) || basename(file);
+    const ext = extname(file);
+    const lines = text.split('\n');
+    const code = uncomment(lines);
+    lines.forEach((raw, i) => {
+      if (/brand-kit-ignore/.test(raw) || /brand-kit-ignore/.test(lines[i - 1] ?? '')) return;
+      if (raw.length > 2000) return; // a minified or inlined blob
+      const line = code[i];
+      for (const [rule, fn] of Object.entries(R)) {
+        for (const f of fn(line, ext)) findings.push({ file: rel, line: i + 1, col: f.col + 1, rule, value: f.value, note: f.note });
+      }
+    });
+    const name = basename(file, ext).toLowerCase();
+    if (/components\/ui\//.test(file) && KIT_UI.has(name) && !/ws-|@felloinnovations\/brand-kit/.test(text)) {
+      findings.push({ file: rel, line: 1, col: 1, rule: 'copy', value: basename(file), note: 'a local component the kit has; use the kit\'s class or component' });
+    }
+  }
+  return findings;
+}
+
+const key = (f) => `${f.file}::${f.rule}`;
+const countBy = (fs) => fs.reduce((m, f) => m.set(key(f), (m.get(key(f)) ?? 0) + 1), new Map());
+
+function report(findings, out = console.log) {
+  if (!findings.length) return out('brand-kit drift: nothing found.');
+  const files = new Set(findings.map((f) => f.file));
+  out(`brand-kit drift: ${findings.length} finding${findings.length === 1 ? '' : 's'} in ${files.size} file${files.size === 1 ? '' : 's'}`);
+  const byRule = new Map();
+  for (const f of findings) byRule.set(f.rule, (byRule.get(f.rule) ?? 0) + 1);
+  const colours = findings.filter((f) => f.rule === 'colour');
+  const parts = ['matches', 'close to', 'no token'].map((p) => `${colours.filter((f) => f.note.startsWith(p)).length} ${p === 'matches' ? 'match a token' : p}`);
+  for (const [rule, n] of [...byRule].sort((a, b) => b[1] - a[1])) out(`  ${rule.padEnd(10)}${String(n).padStart(5)}${rule === 'colour' ? `  (${parts.join(', ')})` : ''}`);
+  for (const file of files) {
+    out(`\n${file}`);
+    for (const f of findings.filter((x) => x.file === file)) out(`  ${`${f.line}:${f.col}`.padEnd(9)}${f.rule.padEnd(10)}${f.value}  ${f.note}`);
+  }
+}
+
+function selftest() {
+  const dir = mkdtempSync(join(tmpdir(), 'brand-drift-'));
+  try {
+    mkdirSync(join(dir, 'components/ui'), { recursive: true });
+    mkdirSync(join(dir, 'node_modules/x'), { recursive: true });
+    writeFileSync(join(dir, 'node_modules/x/a.css'), 'a { color: #123456; }');
+    writeFileSync(join(dir, 'vendored.ts'), '/* Generated by scripts/fello-css.mjs */\nexport const css = `.ws-btn { color: #f00 }`;');
+    writeFileSync(join(dir, 'app.css'), [
+      '.a { color: #093555; }', // matches --color-brand-navy
+      '.b { color: #0b3757; }', // close to it
+      '.c { color: #12ab34; }', // no token
+      '.d { font-size: 13px; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.1); }',
+      '.e { transition: opacity 200ms ease; }',
+      '@keyframes spin { to { transform: rotate(1turn) } }',
+      ':root { --ws-ink: red; --my-own: 1px; }',
+      '.ws-btn { padding: 0 }',
+      '.f { color: #abcdef; } /* brand-kit-ignore: a third-party embed */',
+      '.g { color: var(--ws-ink); transition: opacity var(--ws-duration-reveal); }',
+    ].join('\n'));
+    writeFileSync(join(dir, 'page.tsx'), [
+      'export const P = () => <a href="#add" className="text-blue-500 underline hover:-translate-y-1 text-[var(--ws-ink)] duration-300">Hi — there</a>;',
+      '// a comment with — is fine',
+      'const ok = <div className="hover:underline text-[color:var(--ws-ink)]" />;',
+      '{/* a block comment that runs on',
+      '   with a — and #ff0000 inside */}',
+      'const dotted = <span className="underline decoration-dotted" />;',
+      'const url = "https://example.com/a"; // #ff0000 in a line comment',
+    ].join('\n'));
+    writeFileSync(join(dir, 'components/ui/button.tsx'), 'export const Button = () => <button className="px-4" />;');
+    writeFileSync(join(dir, 'components/ui/card.tsx'), 'export const Card = () => <div className="ws-card" />;');
+    const fs = scan(dir, loadTokens());
+    const n = (rule, pred = () => true) => fs.filter((f) => f.rule === rule && pred(f)).length;
+    const expect = [
+      ['colour matches a token', n('colour', (f) => f.note === 'matches --color-brand-navy'), 1],
+      ['colour close to a token', n('colour', (f) => f.note.startsWith('close to --color-brand-navy')), 1],
+      ['colour with no token (hex, rgba)', n('colour', (f) => f.note === 'no token'), 2],
+      ['Tailwind palette class', n('colour', (f) => f.value === 'text-blue-500'), 1],
+      ['#add in an href is not a colour', n('colour', (f) => f.value === '#add'), 0],
+      ['type', n('type'), 1],
+      ['radius', n('radius'), 1],
+      ['shadow', n('shadow'), 1],
+      ['motion (raw duration, keyframes, duration-300, hover lift)', n('motion'), 4],
+      ['a kit token redefined, an own token left alone', n('tokens', (f) => f.value === '--ws-ink'), 1],
+      ['a kit class restyled', n('tokens', (f) => f.value === '.ws-btn'), 1],
+      ['the trap', n('trap'), 1],
+      ['underlined at rest, hover underline fine', n('underline'), 1],
+      ['em dash in markup, not in a comment', n('words'), 1],
+      ['a local kit component copy, not one that wears ws-', n('copy'), 1],
+      ['node_modules, vendored kit and ignored lines skipped', fs.filter((f) => /node_modules|vendored/.test(f.file) || f.value === '#abcdef').length, 0],
+    ];
+    let bad = 0;
+    for (const [what, got, want] of expect) {
+      const ok = got === want;
+      if (!ok) bad++;
+      console.log(`${ok ? 'ok  ' : 'FAIL'} ${what}: ${got}${ok ? '' : ` (want ${want})`}`);
+    }
+    if (bad) { report(fs); process.exit(1); }
+    console.log('check-drift selftest: every planted drift caught.');
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+}
+
+// ---- Run.
+const args = process.argv.slice(2);
+const flag = (name) => { const i = args.indexOf(name); return i < 0 ? null : (args.splice(i, 2)[1] ?? ''); };
+if (args.includes('--selftest')) selftest();
+else run();
+
+function run() {
+  const json = args.includes('--json') && args.splice(args.indexOf('--json'), 1);
+  const writeBase = flag('--write-baseline');
+  const base = flag('--baseline');
+  const dir = args[0] ?? '.';
+  if (!statSync(dir, { throwIfNoEntry: false })?.isDirectory()) { console.error(`check-drift: ${dir} is not a folder`); process.exit(2); }
+
+  let findings = scan(dir, loadTokens());
+  if (writeBase) {
+    writeFileSync(writeBase, `${JSON.stringify({ version: 1, counts: Object.fromEntries([...countBy(findings)].sort()) }, null, 2)}\n`);
+    console.log(`check-drift: baseline of ${findings.length} findings written to ${writeBase}`);
+    return;
+  }
+  if (base) {
+    const was = JSON.parse(readFileSync(base, 'utf8')).counts ?? {};
+    const now = countBy(findings);
+    const grew = new Set([...now].filter(([k, v]) => v > (was[k] ?? 0)).map(([k]) => k));
+    findings = findings.filter((f) => grew.has(key(f)));
+    if (!json) console.log(grew.size ? `check-drift: ${grew.size} file and rule pair${grew.size === 1 ? '' : 's'} drifted past ${base}` : `check-drift: nothing new past ${base}.`);
+  }
+  if (json) console.log(JSON.stringify(findings, null, 2));
+  else if (!base || findings.length) report(findings);
+  // exitCode, not exit(): a piped stdout is written after this line returns.
+  process.exitCode = findings.length ? 1 : 0;
+}

package/scripts/token-model.mjs

@@ -303,7 +303,7 @@ export const GROUNDS = {
   '--color-surface-stripe': 'stripe',
 };
 // Reported, not gated: grounds that carry only their own words (a PAIR below), or a frame under the pointer.
-export const REPORT = { '--ws-tint-needs-work': 'needs-work tint', '--color-feedback-success-bg': 'success', '--ws-well-hover': 'well hover' };
+export const REPORT = { '--ws-tint-needs-work': 'needs-work tint', '--ws-tint-alert': 'alert tint', '--color-feedback-success-bg': 'success', '--ws-well-hover': 'well hover' };
 export const WORDS = [
   '--color-text-heading', '--color-text-body', '--color-text-muted', '--color-text-interactive',
   '--color-text-brand-strong', '--color-text-error-strong', '--color-text-success-strong',
@@ -312,6 +312,7 @@ export const WORDS = [
 export const PAIRS = [
   ['--color-text-placeholder', '--ws-field'], ['--ws-field-ink', '--ws-field'], ['--ws-on-act', '--color-text-heading'],
   ['--ws-word-needs', '--ws-tint-needs'], ['--ws-word-positive', '--ws-tint-live'], ['--ws-word-needs-work', '--ws-tint-needs-work'],
+  ['--ws-word-alert', '--ws-tint-alert'],
   ['--color-text-success-strong', '--color-feedback-success-bg'], ['--ws-on-act', '--ws-agent-tally'],
 ];
 

package/tokens/_dark.css

@@ -35,6 +35,7 @@
   --ws-tint-accent: var(--color-surface);
   --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page)); /* #2E252A */
   --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12.1%, var(--color-bg-page)); /* was #0E2931 */
+  --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 13.05%, var(--color-bg-page)); /* derived (#15), the night tint-needs formula */
   --ws-card-tint-blue: color-mix(in srgb, var(--color-bg-page) 90%, #879bf4); /* #1B2637: the page toward the mid blue */
   --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page)); /* was #10262B */
   --ws-track: color-mix(in srgb, var(--ws-tray) 80%, #0a1215); /* #1A2631: the tray, darker */
@@ -143,6 +144,7 @@
   --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
   --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page));
   --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 13.1%, var(--color-bg-page)); /* was the light teal 18% (#032D41) */
+  --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 18%, var(--color-bg-page)); /* derived (#15), the navy tint-needs formula */
   --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page));
   --ws-card-tint-done: var(--ws-tint-live);
   --ws-track: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));

package/tokens/_product.css

@@ -34,6 +34,7 @@
   --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 96%, #4f4c7c); /* #f7f4f4: the zebra row, the page a step cooler */
   --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 10%, var(--color-surface));
   --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12%, var(--color-surface));
+  --ws-tint-alert: color-mix(in srgb, var(--ws-chart-alert) 8%, var(--color-surface)); /* an error status's ground (#15): the alert red at 8%, the tint-needs formula */
   --ws-edge: var(--color-gray-stroke);
   --ws-edge-card: var(--color-gray-3); /* the designer's border/card */
   --ws-edge-card-1x: color-mix(in srgb, var(--ws-edge-card) 50%, transparent); /* the card edge on a screen under 1.5 dppx, where 0.5 px rounds up to 1 */
@@ -282,6 +283,7 @@
   --ws-shadow-menu: var(--ws-float-rim), 0 16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent);
   --ws-shadow-tip: var(--ws-float-rim), 0 16px 32px -20px color-mix(in srgb, var(--ws-shade) 45%, transparent);
   --ws-shadow-float: var(--ws-float-rim), 0 40px 80px -30px color-mix(in srgb, var(--ws-shade) 30%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--ws-shade) 14%, transparent);
+  --ws-shadow-rise: var(--ws-float-rim), 0 -16px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent); /* the menu's drop cast upward: a drawer that rises from the bottom of a pane */
   --ws-shadow-bar: var(--ws-float-rim), 0 24px 60px -24px color-mix(in srgb, var(--ws-shade) 32%, transparent), 0 2px 10px color-mix(in srgb, var(--ws-shade) 6%, transparent); /* the centred chat bar (North) */
   /* Seth's hover washes (North): a list row .03, a nav or menu row .05, an icon button .06. */
   /* Each alpha is the 8-bit step rgba(.03 / .05 / .06) always painted (8, 13 and 15 of 255), so a wash laid as a

package/tokens/palettes.ts

@@ -1,7 +1,7 @@
 /* Generated by scripts/generate-tokens.mjs. Do not edit.
    Source: Figma Marketing - Design System 3.0 (MmOx1GHtbMge4lSLp1kcs8), captured 2026-06-11,
    tokens/_product.css (the product layer), tokens/_dark.css (the dark theme) and tokens/_palettes.css (the palettes).
-   422 tokens: 111 kit, 311 product layer; dark: 98 night, 42 navy ground. */
+   424 tokens: 111 kit, 313 product layer; dark: 99 night, 43 navy ground. */
 
 /** The palette contract (D15): the only tokens a palette sets, each with its group and one-line meaning. */
 export const contract = [

package/tokens/shadcn-compat.css

@@ -1,7 +1,7 @@
 /* Generated by scripts/generate-tokens.mjs. Do not edit.
    Source: Figma Marketing - Design System 3.0 (MmOx1GHtbMge4lSLp1kcs8), captured 2026-06-11,
    tokens/_product.css (the product layer), tokens/_dark.css (the dark theme) and tokens/_palettes.css (the palettes).
-   422 tokens: 111 kit, 311 product layer; dark: 98 night, 42 navy ground. */
+   424 tokens: 111 kit, 313 product layer; dark: 99 night, 43 navy ground. */
 
 /* Maps shadcn's semantic names onto Fello brand tokens. Import AFTER
    tokens.css (or fello.css). Existing shadcn components then render in brand

package/tokens/shadcn-compat.hsl.css

@@ -1,7 +1,7 @@
 /* Generated by scripts/generate-tokens.mjs. Do not edit.
    Source: Figma Marketing - Design System 3.0 (MmOx1GHtbMge4lSLp1kcs8), captured 2026-06-11,
    tokens/_product.css (the product layer), tokens/_dark.css (the dark theme) and tokens/_palettes.css (the palettes).
-   422 tokens: 111 kit, 311 product layer; dark: 98 night, 42 navy ground. */
+   424 tokens: 111 kit, 313 product layer; dark: 99 night, 43 navy ground. */
 
 /* shadcn's names as bare HSL channels, for a host whose Tailwind config writes
    hsl(var(--primary)) (Tailwind v3 shadcn, Campfire). Literal values, so the dark