@felloinnovations/brand-kit 0.4.0 → 0.5.1

package/tokens/_product.css

@@ -17,71 +17,182 @@
   /* === Surfaces and edges (colour) ===
      Ignite globals.css "The desk's design system" (re-based 13 Oct 2026 on
      the designer's Figma). Each is a kit colour or a mix of two. */
-  --ws-page: var(--color-gray-stroke);
+  /* D15 (4 Nov 2026): every colour below derives from the palette contract (tokens/design-tokens.json "palette"), so
+     an app palette that moves the page, the tray, the words or a chart tone moves everything that follows it. Where
+     the source drew a value that no plain mix of two contract tokens lands on, it is the contract token mixed with a
+     partner solved so the default paints the source's value exactly (no rounding: the share is a fraction CSS writes
+     exactly and the partner a whole or short-decimal colour). The partner is a constant; the share is the follow. */
+  --ws-page: color-mix(in srgb, var(--ws-tray) 97.5%, #252525); /* #e8e8e8: the shell, a step under the tray */
   --ws-surface-sunk: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-gray-8));
   --ws-surface-press: color-mix(in srgb, var(--color-bg-page) 90%, var(--color-gray-8));
-  --ws-sidebar-hover: color-mix(in srgb, var(--color-gray-2) 85%, var(--color-white));
-  --ws-sidebar-press: var(--color-gray-2);
+  --ws-sidebar-hover: color-mix(in srgb, var(--ws-tray) 85%, var(--color-surface));
+  --ws-sidebar-press: var(--ws-tray);
   --ws-menu-line: color-mix(in srgb, var(--color-bg-page) 87%, var(--color-gray-8));
   --ws-menu-hover: color-mix(in srgb, var(--color-bg-page) 96%, var(--color-gray-8));
-  --ws-well: var(--color-gray-2);
-  --ws-field: var(--color-white); /* fields are white on the cream (21 Oct 2026) */
-  --ws-tint-accent: var(--color-surface-stripe);
-  --ws-tint-needs: color-mix(in srgb, var(--color-brand-salmon) 10%, var(--color-white));
-  --ws-tint-live: color-mix(in srgb, var(--color-stat-positive) 12%, var(--color-white));
-  --ws-edge: var(--color-border-default);
+  --ws-well: var(--ws-tray);
+  --ws-field: var(--color-surface); /* fields are white on the cream (21 Oct 2026) */
+  --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-edge: var(--color-gray-stroke);
   --ws-edge-card: var(--color-gray-3); /* the designer's border/card */
-  --ws-edge-chip: #d9d5d0; /* the designer's border/chip, not a kit colour */
-  --ws-edge-slot: #e2e2e2; /* the designer's border/slot, not a kit colour */
-  --ws-edge-tray: #d9d3cb; /* the designer's border/tray, not a kit colour */
+  --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 */
+  --ws-edge-chip: color-mix(in srgb, var(--ws-edge-card) 75%, #ebdbc7); /* #d9d5d0, the designer's border/chip: the card edge, warmed */
+  --ws-edge-slot: color-mix(in srgb, var(--ws-edge-card) 62.5%, #fbfbfb); /* #e2e2e2, the designer's border/slot: the card edge, lighter */
+  --ws-edge-tray: color-mix(in srgb, var(--ws-tray) 84%, rgb(112 74.5 24.5)); /* #d9d3cb, the designer's border/tray: the tray, a warm step darker */
   --ws-chart-foot: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-gray-8));
+  /* Semantic names the dark theme swaps (dark-theme notes, 4 Nov 2026). Each is
+     the light value the kit already painted, so none moves a light pixel. */
+  --ws-raised: var(--color-bg-page); /* a thing lifted off the page: menu, popover, tooltip, dialog, panel, toast */
+  --ws-track: var(--ws-tray); /* an empty track: meter, upload bar, password segment, a pending stat */
+  --ws-field-ink: color-mix(in srgb, var(--color-text-body) 46.25%, #040404); /* #292929, a field's words: the body words, darker */
+  --ws-field-mark: var(--color-text-heading); /* a field's marks (chevron, calendar, eye, steppers): navy; the navy ground re-points it (promoted from Input, 0.5.0) */
+  --ws-on-act: var(--color-white); /* words and marks on the act fill (the navy primary, a pressed or chosen item) */
+  --ws-ink: var(--color-text-heading); /* the ink of Seth's alpha washes and lines (a hover, a scrollbar, a track): color-mix(in srgb, var(--ws-ink) 5%, transparent) */
+  --ws-shade: var(--color-text-heading); /* the tint of a float's drop: the heading in light, black in dark */
+  /* The two as channels, kept for apps that wrote rgba(var(--ws-ink-rgb), .05) before 0.5.0. They are the default's
+     values and do not follow a palette: the kit reads --ws-ink and --ws-shade. */
+  --ws-ink-rgb: 9, 53, 85;
+  --ws-shade-rgb: 9, 53, 85;
+  /* A message on the act's own ground (a toast, a note tip, the site footer): the act and its words in light; in dark
+     the brand navy and white, a brand pair whose words stay AA under any palette (D12). */
+  --ws-inverse: var(--color-text-heading);
+  --ws-on-inverse: var(--ws-on-act);
+  --ws-control-off: color-mix(in srgb, var(--color-text-muted) 80%, #e3e3e3); /* #7f7f7f, an off control's fill (a switch's track at rest): the muted words a step lighter, 3:1 as a control */
+  /* Promoted at integration (0.5.0, 4 Nov 2026) from the packages' scoped stand-ins. */
+  --ws-raised-sunk: var(--ws-surface-sunk); /* sunk inside a raised surface (menu, popover, dialog, panel): the house sunk in light, a step that still shows in dark */
+  --ws-edge-hover: #aaa49d; /* North (style1.css:80): an outlined control's 0.5 px edge under the pointer, not a kit colour */
+  --ws-act-hover: #0f4a73; /* North: the navy act a shade brighter under the pointer, not a kit colour */
+  --ws-act-light: color-mix(in srgb, var(--ws-on-act) 24%, transparent); /* North: the soft light under the pointer on the navy act */
+  --ws-agent-tally: #2c4870; /* Seth's agent/tally: a softer act (the figure tabs' current cell, a seat meter's fill, a hatch) */
+  /* The other assistants' tones (Seth's agent/coach, agent/growth, agent/recruit; palette contract, D15), each a data tone. */
+  --ws-agent-coach: var(--color-stat-positive);
+  --ws-agent-growth: var(--ws-chart-past-half);
+  --ws-agent-recruit: var(--ws-chart-under-half);
+  --ws-mask: #000; /* the opaque stop of a fade or tick mask: only its alpha is read, it never paints */
+  --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 76%, #fcfcfc); /* #8a8a8a, Seth's resting mark grey: nav icons at rest, the not-checked dash, axis greys (3.3:1 on the cream, a mark, never words) */
+  --ws-chart-rest: color-mix(in srgb, var(--ws-tray) 90%, #252525); /* #d9d9d9, Seth's "what stays" ground in a share bar: the tray, darker */
+  --ws-ghost: color-mix(in srgb, var(--ws-well-hover) 98%, #b24c17); /* #e3dfdb, North's ghost chart shape behind a loading shimmer: the rim under the pointer, warmer */
+  --ws-veil: color-mix(in srgb, var(--ws-page) 30%, transparent); /* the page seen through behind a floating chat bar (with --ws-blur-panel) */
+  --ws-word-answer: color-mix(in srgb, var(--color-text-body) 71.25%, #040404); /* #3d3d3d, North's answer ink: a chat answer's words, a step softer than the field ink */
+
+  /* === The rimmed tray (D5, 4 Nov 2026) ===
+     Seth's product card, in both Fia frames and North: the #EDEDED tray shows as a
+     1 px rim around the cream surface, concentric corners (8 outside, 7 inside;
+     12 and 11 for a drawer), an optional foot on the rim, rows joined by 0.5 px
+     full-width dividers, no outline, no shadow at rest. */
+  --ws-tray: var(--color-gray-2);
+  --ws-rim: var(--ws-line);
+  --ws-divider: var(--ws-hairline) solid var(--ws-edge);
+  --ws-divider-inset: inset 0 var(--ws-hairline) 0 var(--ws-edge); /* the same line drawn as a shadow on a row's top, so it takes no room (CheckRow, Matrix, ListDetail; promoted 0.5.0) */
+  --ws-well-hover: #e4e2df; /* North: a well card's frame under the pointer (style1.css:268), not a kit colour */
+
+  /* === The stage (North, style1.css:13-78; insets per D3) ===
+     The page ground is a cool-to-cream wash; the stage is white glass over it with
+     a 1 px edge. #ebf0f5 and #fef9f6 are Seth's, not kit colours; each is a contract
+     token, so a palette moves the wash without writing a gradient. */
+  --ws-frame-top: #ebf0f5; /* the wash's cool top (palette contract, D15) */
+  --ws-stage-foot: #fef9f6; /* a washed stage's warm foot (palette contract, D15) */
+  --ws-frame: linear-gradient(180deg, var(--ws-frame-top) 0, var(--color-bg-page) 640px) var(--color-bg-page);
+  --ws-stage-wash: linear-gradient(180deg, var(--color-bg-page), var(--ws-stage-foot));
+  --ws-glass: color-mix(in srgb, var(--color-surface) 59%, transparent); /* white at 59 % over the wash (Seth), so it follows the surface */
+  --ws-glass-blur: 4px;
+  --ws-glass-blur-chat: 28px;
+  --ws-edge-stage: var(--ws-page); /* the glass stage's 1 px edge: the shell's grey */
+  --ws-stage-inset-top: 13px;
+  --ws-stage-inset: var(--space-sm);
 
   /* === Words in a data tone (colour) ===
      Ignite globals.css (15 Oct 2026): salmon and teal fail AA as small words,
      so words take an AA step of the same tone. ws-word-needs is the kit's own
      --color-text-brand-strong (0.3.0), which Ignite wrote as the same hex
      while it was on kit 0.2.1. */
-  --ws-word-needs: var(--color-text-brand-strong);
-  --ws-word-positive: color-mix(in srgb, var(--color-stat-positive) 85%, var(--color-brand-navy));
+  /* #A84B3C was #B35040, 4.33:1 on the #EDEDED tray; darkened, hue held, until it clears 4.5 on every light ground
+     (2026-11-04, D2). The kit's --color-text-brand-strong reads it (D15: the kit's word follows the palette's). */
+  --ws-word-needs: #A84B3C;
+  /* 85% -> 76% teal on 4 Nov 2026 (D2): at 85% it was 4.48:1 on the #EDEDED tray
+     and on its own live tint, 4.22 on a pressed row; 76% clears 4.5 on all of them. */
+  --ws-word-positive: color-mix(in srgb, var(--ws-chart-finished) 76%, var(--color-text-heading));
+  /* The rest of the tones as words (D2): each is its mark tone, or the AA step of
+     it, on the cream, white, the sunk plate and the #EDEDED tray. Ratios are in
+     tokens.md, computed by scripts/generate-tokens.mjs, which stops on a fail. */
+  --ws-word-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 37.5%, rgb(142.2 4.8 68)); /* #b42d68: Seth's pink #f370a4 is 2.34 on the tray; Ignite ships this step (globals.css:358) */
+  --ws-word-alert: var(--ws-chart-alert); /* Seth's status red passes as words (6.13 on the tray) */
+  --ws-word-past-half: var(--ws-chart-past-half); /* the purple passes as words (5.06 on the tray) */
+  --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 20%, var(--color-bg-page)); /* the needs-work tag (Seth 301:1630) */
 
   /* === Chart tones (colour) ===
      Ignite globals.css, the designer's "Team practice" radial and "Fia
      charts, new style" (13 to 14 Oct 2026). The purple, the fades and the
      tints are the designer's, not kit colours (reported in 17-decisions.md). */
-  --ws-chart-finished: var(--color-stat-positive);
+  --ws-chart-finished: #098486; /* the kit's teal; --color-stat-positive reads it (D15) */
   --ws-chart-past-half: #6d4fc2;
   --ws-chart-under-half: var(--color-brand-salmon);
-  --ws-chart-empty: var(--color-gray-1);
+  --ws-chart-empty: color-mix(in srgb, var(--color-surface) 97.6%, #050505); /* #f9f9f9: white, a hair under */
   --ws-chart-dot: color-mix(in srgb, var(--color-bg-page) 91%, var(--color-gray-8));
   --ws-chart-navy-light: #2e6088;
-  --ws-chart-navy-fade: #a8c0d3;
-  --ws-chart-salmon-fade: #ffd2c8;
-  --ws-chart-purple-fade: #d8ccf6;
-  --ws-chart-teal-fade: #b0e2dd;
-  --ws-chart-finished-tint: #9fddd6;
-  --ws-chart-past-half-tint: #cbbdf3;
-  --ws-chart-under-half-tint: #f9dfc6;
+  /* The fades and tints: each its tone over a near-white, the designer's value exactly (a partner whose exact value
+     repeats is written to ten places, so a gradient between two of them paints the same pixels as the hex did). */
+  --ws-chart-navy-fade: color-mix(in srgb, var(--ws-chart-navy-light) 20%, rgb(198.5 216 229.75)); /* #a8c0d3 */
+  --ws-chart-salmon-fade: color-mix(in srgb, var(--ws-chart-under-half) 25%, #fff2ec); /* #ffd2c8 */
+  --ws-chart-purple-fade: color-mix(in srgb, var(--ws-chart-past-half) 10%, rgb(227.8888888889 217.8888888889 251.7777777778)); /* #d8ccf6 */
+  --ws-chart-teal-fade: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(217.75 249.5 242.75)); /* #b0e2dd */
+  --ws-chart-finished-tint: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(196.5 243.25 234)); /* #9fddd6 */
+  --ws-chart-past-half-tint: color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(219.5882352941 208.4117647059 251.6470588235)); /* #cbbdf3 */
+  --ws-chart-under-half-tint: color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(247.5 250.25 224.5)); /* #f9dfc6 */
   --ws-chart-cell-edge: var(--ws-edge-slot);
+  --ws-chart-needs-work: #f370a4; /* Seth's "Needs work" mark (Grow 301:1630); Ignite globals.css:357 */
+  --ws-chart-alert: #b1042f; /* Seth's status red, North --alert (style1.css:7) and Fixes 313:2712 */
+
+  /* === Rating tones (D10, 4 Nov 2026) ===
+     Marks keep Seth's tone; their words take --ws-word-positive,
+     --color-text-interactive and --ws-word-needs-work. Salmon stays "needs you". */
+  --ws-rating-strong: var(--color-stat-positive);
+  --ws-rating-middle: var(--color-brand-mid-blue);
+  --ws-rating-needs-work: var(--ws-chart-needs-work);
+
+  /* === Loading shimmer (North style1.css:1458-1469; one quiet tone since 0.5.1, Amit 10 Nov 2026) ===
+     The ghost grey with a lighter pass of the same grey: no chart hues. North's timing stays (--ws-loop-shimmer,
+     --ws-ease-shimmer). */
+  /* Drawn at 300% wide, so a still frame (position 0 or 100%, reduced motion) shows a third of it: the pass runs from
+     34% to 66%, so both ends of the sweep are the plain ghost. The ground is the ghost itself, the same at rest and in
+     motion, so it shows on the cream (1.29:1) and on the tray (1.13:1) and a ghost in a card's foot needs no ground of
+     its own; the pass is the ghost 70% of the way to the cream, 1.07:1 off the cream and 1.06:1 off the tray. Blended
+     "in srgb", as the stops always were (a derived stop would otherwise blend in Oklab). */
+  --ws-shimmer-ground: var(--ws-ghost); /* #e3dfdb */
+  --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%,
+    color-mix(in srgb, var(--ws-shimmer-ground) 30%, var(--color-bg-page)) 50%,
+    var(--ws-shimmer-ground) 66% 100%); /* the pass #f6f3f0 */
 
   /* === Chat card tints and the scrim (colour) ===
      Ignite globals.css "Agent cards" (8 Oct 2026) and the motion block. */
-  --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 10%, var(--color-white));
-  --ws-card-tint-done: color-mix(in srgb, var(--color-stat-positive) 10%, var(--color-white));
-  --ws-scrim: color-mix(in srgb, var(--color-brand-navy) 35%, transparent);
+  --ws-card-tint-blue: color-mix(in srgb, var(--ws-rating-middle) 10%, var(--color-surface));
+  --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10%, var(--color-surface));
+  --ws-scrim: color-mix(in srgb, var(--color-text-heading) 35%, transparent);
 
   /* === Hero washes (gradients, CSS only) ===
      Ignite globals.css (22 to 23 Oct 2026, from the designer's Team
      reference): three faint radial washes each, still, never moving. The
      design-system token page cannot hold a gradient, so they are not in
      design-system/tokens.json; the PageHero README carries them. */
+  /* D15: the blue is the link words, the navy the heading; the rose, the pink and the bright blue are the AI colours
+     drawn from the chart tones (their exact values in the default). */
+  --ws-glow-rose: color-mix(in srgb, var(--ws-chart-under-half) 50%, #ebb8ca); /* --color-ai-rose #f59593 */
+  --ws-glow-pink: color-mix(in srgb, var(--ws-chart-needs-work) 90%, #ad167c); /* --color-ai-pink #ec67a0 */
+  --ws-glow-blue: color-mix(in srgb, var(--ws-chart-navy-light) 10%, rgb(57.1111111111 158.2222222222 251.5555555556)); /* --color-ai-blue #3898f0 */
   --ws-team-glow:
-    radial-gradient(75% 70% at 10% 0%, color-mix(in srgb, var(--color-brand-mid-blue) 14%, transparent), transparent),
-    radial-gradient(70% 75% at 95% 100%, color-mix(in srgb, var(--color-ai-rose) 22%, transparent), transparent),
-    radial-gradient(55% 60% at 70% 45%, color-mix(in srgb, var(--color-ai-pink) 8%, transparent), transparent);
+    radial-gradient(75% 70% at 10% 0%, color-mix(in srgb, var(--color-text-interactive) 14%, transparent), transparent),
+    radial-gradient(70% 75% at 95% 100%, color-mix(in srgb, var(--ws-glow-rose) 22%, transparent), transparent),
+    radial-gradient(55% 60% at 70% 45%, color-mix(in srgb, var(--ws-glow-pink) 8%, transparent), transparent);
   --ws-cool-glow:
-    radial-gradient(75% 70% at 10% 0%, color-mix(in srgb, var(--color-brand-mid-blue) 16%, transparent), transparent),
-    radial-gradient(60% 70% at 92% 30%, color-mix(in srgb, var(--color-ai-blue) 10%, transparent), transparent),
-    radial-gradient(70% 60% at 60% 100%, color-mix(in srgb, var(--color-brand-navy) 6%, transparent), transparent);
+    radial-gradient(75% 70% at 10% 0%, color-mix(in srgb, var(--color-text-interactive) 16%, transparent), transparent),
+    radial-gradient(60% 70% at 92% 30%, color-mix(in srgb, var(--ws-glow-blue) 10%, transparent), transparent),
+    radial-gradient(70% 60% at 60% 100%, color-mix(in srgb, var(--color-text-heading) 6%, transparent), transparent);
+  /* The working orb (StatusScreen): the AI cyan, blue and violet, drawn from the chart tones. */
+  --ws-orb: radial-gradient(circle at 30% 30% in srgb,
+    color-mix(in srgb, var(--ws-chart-finished) 37.5%, rgb(26.6 218.4 244.4)),
+    var(--ws-glow-blue) 45%,
+    color-mix(in srgb, var(--ws-chart-past-half) 37.5%, rgb(160.2 122.2 251.6)) 80%); /* #14bacb, #3898f0, #8d6ae6 */
 
   /* === Type sizes and leading ===
      Ignite globals.css "Type, sizes and spacing" (13 Oct 2026). 11, 15 and
@@ -97,6 +208,22 @@
   --ws-text-display: var(--font-size-7xl);
   --ws-leading-message: var(--space-lg);
   --ws-leading-title: calc(var(--space-lg) + var(--space-xxs));
+  /* Seth's steps (D6, 4 Nov 2026; Grow, Fixes, Inbox and Tally frames). Built on
+     his base values, not the Figma-scaled fractions (D3). */
+  --ws-text-control: var(--font-size-xs); /* control words: tabs, buttons, tags, links, status, labels; 500 */
+  --ws-leading-control: 18px;
+  --ws-text-section: var(--ws-text-chart); /* section titles and row titles, 600; row names, 500 */
+  --ws-leading-section: 22px;
+  --ws-leading-row: calc(var(--space-md) + var(--space-xxs)); /* a row's name: 15 / 20 */
+  --ws-leading-micro: 13px; /* the 11 px sub-line, a mark or meta that passes AA */
+  --ws-text-figure-row: 28px; /* a list row's figure (301:1773) */
+  --ws-leading-figure-row: var(--space-xl);
+  --ws-text-figure: var(--space-xl); /* a tile's figure, 32 / 38 (313:2691) */
+  --ws-leading-figure: 38px;
+  --ws-text-figure-lg: 44px; /* a pane's figure (301:2026, 308:2484, 319:3471) */
+  --ws-leading-figure-lg: var(--space-3xl);
+  --ws-text-score: var(--space-6xl); /* the report's hero figure, 96 / 96 (301:1670) */
+  --ws-leading-score: var(--space-6xl);
 
   /* === Gaps and insets ===
      Ignite globals.css; ws-card-inset and ws-band-inset from Lokesh's
@@ -106,8 +233,10 @@
   --ws-gap-loose: var(--space-sm);
   --ws-gap-component: var(--space-md);
   --ws-gap-group: var(--space-lg);
-  --ws-gap-turn: calc(var(--space-lg) - var(--space-xxs) / 2);
-  --ws-gutter: var(--space-lg);
+  --ws-gap-turn: calc(var(--space-lg) + var(--space-xxs)); /* North's docked thread, 28 */
+  --ws-gap-block: var(--space-xl); /* Seth's report blocks, 32 (Grow 301:1657, 305:2307) */
+  --ws-gap-section: calc(var(--space-3xl) + var(--space-xs)); /* between page sections, 56 (North, Tally 319:3302) */
+  --ws-gutter: var(--space-xl); /* Seth's 32 page gutter (D4); a phone keeps 16 */
   --ws-card-padding: var(--space-sm);
   --ws-card-padding-lg: var(--space-md);
   --ws-card-inset: calc(var(--space-md) + var(--space-xxs));
@@ -117,27 +246,55 @@
 
   /* === Corners ===
      Ignite globals.css, the designer's ladder (15 Oct 2026): a bar 1, a chip
-     2, a control 4, a row 6, a card 8, a bubble 12, a panel 16. */
-  --ws-radius-bar: calc(var(--radius-xs) / 2);
-  --ws-radius-chip: var(--radius-xs);
-  --ws-radius-control: var(--radius-sm);
-  --ws-radius-row: var(--radius-md);
-  --ws-radius-card: var(--radius-lg);
-  --ws-radius-bubble: calc(var(--radius-lg) + var(--radius-sm));
-  --ws-radius-panel: var(--radius-xl);
+     2, a control 4, a row 6, a card 8, a bubble 12, a panel 16. Written as
+     lengths, not on --radius-*, since 0.5.0: Tailwind v4 owns --radius-xs to
+     --radius-2xl (its xl is 12, the kit's 16) and shadcn hosts re-point them to
+     their --radius, so a product corner must not move with the host's. */
+  --ws-radius-bar: 1px;
+  --ws-radius-chip: 2px;
+  --ws-radius-control: 4px;
+  --ws-radius-row: 6px;
+  --ws-radius-card: 8px;
+  --ws-radius-menu: 10px; /* North's menus, flyouts, panels and brief rows (style1.css:657) */
+  --ws-radius-card-inner: calc(var(--ws-radius-card) - var(--ws-rim)); /* the cream inside the rim (D5) */
+  --ws-radius-bubble: 12px;
+  --ws-radius-drawer: var(--ws-radius-bubble); /* a drawer's rimmed tray, 12 outside (D5) */
+  --ws-radius-drawer-inner: calc(var(--ws-radius-drawer) - var(--ws-rim));
+  --ws-radius-panel: 16px;
 
   /* === Shadows and rings ===
      Ignite globals.css. The product is flat: an edge, not a float. The band's
      five inset layers are the designer's tray shade. */
   --ws-shadow-hairline: 0 0 0 var(--ws-hairline) var(--ws-edge-card);
+  --ws-shadow-hairline-in: inset 0 0 0 var(--ws-hairline) var(--ws-edge-card); /* the same edge drawn inside, so a scroller never clips it (every outlined control) */
   --ws-shadow-band: inset 0 var(--ws-hairline) 0 var(--ws-edge-tray), inset 0 28px 8px 0 rgba(0, 0, 0, 0),
     inset 0 18px 7px 0 rgba(0, 0, 0, 0.01), inset 0 10px 6px 0 rgba(0, 0, 0, 0.03),
     inset 0 4px 4px 0 rgba(0, 0, 0, 0.05), inset 0 1px 2px 0 rgba(0, 0, 0, 0.06);
   --ws-shadow-lift: var(--shadow-card-hover);
-  --ws-ring-selected: 0 0 0 2px color-mix(in srgb, var(--color-brand-navy) 55%, transparent);
-  --ws-card-ring-lit: 0 0 0 2px color-mix(in srgb, var(--color-brand-navy) 30%, transparent);
-  --ws-card-ring-person: inset 0 0 0 1px color-mix(in srgb, var(--color-brand-navy) 12%, transparent);
-  --ws-focus-inset: inset 0 0 0 2px var(--color-text-interactive);
+  --ws-ring-selected: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 55%, transparent);
+  --ws-card-ring-lit: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 30%, transparent);
+  --ws-card-ring-person: inset 0 0 0 1px color-mix(in srgb, var(--ws-ink) 12%, transparent);
+  /* One family for everything that floats (North style1.css:87, :209, :657, :507):
+     a single negative-spread drop, tinted by --ws-shade, so it turns black in
+     dark; --ws-float-rim adds the 0.5 px light rim dark needs (none in light). */
+  --ws-float-rim: 0 0 0 0 transparent;
+  --ws-shadow-pop: var(--ws-float-rim), 0 12px 32px -16px color-mix(in srgb, var(--ws-shade) 35%, transparent);
+  --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-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
+     gradient over a fill paints exactly as it did. */
+  --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);
+  --ws-hover-strong: color-mix(in srgb, var(--ws-ink) 5.8823529412%, transparent);
+  /* Focus (D8): a 2 px navy outline 2 px out on :focus-visible everywhere (North
+     style1.css:17); inside a dense row or a clipped box, the inset ring. */
+  --ws-focus-color: var(--color-text-heading);
+  --ws-focus-width: var(--ws-ring);
+  --ws-focus-offset: var(--ws-ring);
+  --ws-focus-inset: inset 0 0 0 var(--ws-focus-width) var(--ws-focus-color);
 
   /* === Stroke widths ===
      ws-hairline from Ignite globals.css (every edge 0.5 px, 15 Oct 2026); the
@@ -157,18 +314,20 @@
   --ws-control-h: var(--space-xl);
   --ws-control-h-md: calc(var(--space-xl) + var(--space-xxs));
   --ws-touch: 40px;
+  --ws-touch-public: 44px; /* every act on a public page (14-accessibility.md:10) */
   --ws-row-h: var(--space-3xl);
   --ws-row-h-dense: var(--space-2xl);
   --ws-composer-h: 52px;
   --ws-header-h: calc(var(--space-3xl) + var(--space-xs));
   --ws-topbar-h: var(--space-3xl);
   --ws-band-h: 80px;
-  --ws-rail-width: calc(var(--space-2xl) + var(--space-xl));
+  --ws-rail-width: var(--space-4xl); /* North's folded rail, 64 (app.js B9) */
   --ws-sidebar-width: calc(var(--space-9xl) + var(--space-xl));
   --ws-thing-width: calc(var(--space-9xl) * 2 + var(--space-2xl));
   --ws-chart-card-w: calc(var(--space-9xl) * 2 + var(--space-8xl) - var(--space-xxs));
   --ws-chart-card-min: 480px;
   --ws-column-width: calc(var(--space-9xl) * 3 + var(--space-3xl) + var(--space-xs));
+  --ws-float-width: calc(var(--space-9xl) * 1.5); /* a popover's width and a note's wrap, 300 (North; Seth's notes) */
   --ws-icon-sm: 12px;
   --ws-icon: 16px;
   --ws-icon-lg: 20px;
@@ -180,22 +339,76 @@
   --ws-tracking-display: -0.03em;
 
   /* === Motion ===
-     Ignite globals.css, the motion system (29 Sep to 22 Oct 2026): one soft
-     curve, short steps, one working beat. No overshoot since 22 Oct 2026, so
-     ws-ease-spring is the soft curve itself. */
-  --ws-duration-instant: 120ms;
+     Ignite globals.css, the motion system (29 Sep to 22 Oct 2026), extended on
+     4 Nov 2026 (D7) with Seth's North DialKit config (north-motion notes): tokens
+     named by role. Soft is still the default curve; shapes that change size use
+     grow, layout uses shift, a shared element in flight morph; only small marks
+     and indicators may overshoot (pop, lift). Reduced motion: all still.
+     The springs are not written here: scripts/token-model.mjs samples every
+     preset in design-tokens.json motion.springs into --ws-spring-<name> (a
+     linear() curve) and --ws-spring-<name>-duration, from the motion library's
+     own solver, so a CSS transition moves on Seth's exact spring. */
+  --ws-duration-instant: 120ms; /* press feedback */
+  --ws-duration-exit: 120ms; /* every exit: menus, tooltips, details (North .1 to .16 s) */
   --ws-duration-gentle: 200ms;
-  --ws-duration-settle: 320ms;
+  --ws-duration-hover: 200ms; /* hover colour, tint, edge, opacity (North .2 s) */
+  --ws-duration-text: 250ms; /* text colour and small fades: a segment's words, a nav label, a card ground (North .25 s) */
+  --ws-duration-settle: 320ms; /* details settling, tooltip rows */
+  --ws-duration-reveal: 350ms; /* a reveal: a link underline growing, a top bar's ground, a chevron (North .35 s) */
+  --ws-duration-shrink: 400ms; /* a tile closing back */
   --ws-duration-calm: 420ms;
   --ws-duration-glide: 400ms;
+  --ws-duration-morph: 450ms; /* a shared element in flight, a band folding */
+  --ws-duration-grow: 550ms; /* a tile growing open from its slot */
+  --ws-duration-shift: 550ms; /* a panel docking, columns trading width */
+  --ws-duration-fill: 700ms; /* a bar filling */
+  --ws-duration-draw: 900ms; /* a chart drawing inside an opened card, a gauge */
+  --ws-duration-draw-chat: 1500ms; /* a chart sweeping in inside chat */
+  --ws-duration-fill-page: 1700ms; /* a dashboard building in: its tiles' charts and its goal bars filling (North "Metric + goal bars fill") */
+  --ws-duration-build: 2400ms; /* a page's first-paint build-in, at most */
   --ws-stagger: 30ms;
+  --ws-stagger-detail: 22ms; /* details inside an opening tile */
+  --ws-stagger-row: 45ms; /* rows in a tooltip or an opened card */
+  --ws-stagger-part: 70ms; /* blocks under a chart arriving */
+  --ws-ripple: 4ms; /* per tick, a hover grow spreading along a run */
+  --ws-stagger-square: 35ms; /* details inside an opening heatmap square (North tileStagger) */
+  --ws-hover-intent: 40ms; /* before a hover opens a tile */
+  --ws-hover-leave: 60ms; /* a hover-opened tile closes this long after the pointer leaves (North) */
+  --ws-hover-grace: 180ms; /* a tooltip stays after the pointer leaves its mark */
+  --ws-close-delay: 160ms; /* a flyout closes after the pointer leaves */
   --ws-sweep: calc(var(--ws-duration-calm) - var(--ws-duration-gentle));
-  --ws-loop: 1.2s;
+  --ws-loop: 1s; /* working dots, the load dot (North 1 s; was 1.2 s) */
+  --ws-loop-status: 1.6s; /* a status line's shimmering words */
+  --ws-loop-shimmer: 1.8s; /* a loading shimmer over ghost shapes */
   --ws-loop-slow: 2.4s;
+  --ws-loop-ambient: 6s; /* the brand sheen on a selected glass edge */
   --ws-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
   --ws-ease-exit: cubic-bezier(0.4, 0, 1, 1);
   --ws-ease-glide: cubic-bezier(0.75, 0, 0.25, 1);
   --ws-ease-steady: linear;
   --ws-ease-spring: var(--ws-ease-soft);
+  --ws-ease-settle: cubic-bezier(0.16, 1, 0.3, 1); /* things that land and rest: a mark, a bar fill */
+  --ws-ease-grow: cubic-bezier(0.32, 0.72, 0, 1); /* a shape changing size: a tile open and close, a switch thumb */
+  --ws-ease-shift: cubic-bezier(0.25, 1, 0.5, 1); /* layout moving: docking, columns */
+  --ws-ease-morph: cubic-bezier(0.5, 0, 0.15, 1); /* a shared element in flight */
+  --ws-ease-sweep: cubic-bezier(0.45, 0, 0.55, 1); /* a chart drawing left to right */
+  --ws-ease-commit: cubic-bezier(0.65, 0, 0.35, 1); /* a decisive one-shot: sending, a check mark */
+  --ws-ease-shimmer: cubic-bezier(0.4, 0, 0.2, 1); /* loading sweeps */
+  --ws-ease-ambient: cubic-bezier(0.45, 0, 0.3, 1); /* the slow brand sheen */
+  --ws-ease-loop: cubic-bezier(0.42, 0, 0.58, 1); /* a symmetric loop (ease-in-out): working dots, pulses */
+  --ws-ease-pop: cubic-bezier(0.34, 1.4, 0.64, 1); /* overshoot, small marks only */
+  --ws-ease-lift: cubic-bezier(0.22, 1.25, 0.36, 1); /* overshoot, ticks and wedges growing on hover */
   --ws-press-scale: 0.97;
+  --ws-press-scale-round: 0.94; /* a round icon button: the voice act (North) */
+  --ws-press-scale-send: 0.92; /* the send act (North) */
+  --ws-open-scale: 0.97; /* a menu, a popover or the docked panel opens from this scale (North) */
+  --ws-open-scale-pane: 0.98; /* a dialog window opens from this scale (North) */
+  --ws-open-scale-toast: 0.96; /* a toast arrives from this scale (North) */
+  --ws-pop-scale: 0.94; /* tooltips start and leave at this scale */
+  --ws-grow-scale: 1.16; /* a hovered tick or ring wedge */
+  --ws-dim: 0.3; /* the rest of a chart while one part is hovered */
+  --ws-nudge: var(--space-xxs); /* tooltip, menu and arrow offsets */
+  --ws-drop: var(--space-sm); /* a greeting or placeholder rolling in */
+  --ws-blur-arrive: 3px; /* details arriving */
+  --ws-blur-panel: 8px; /* a panel arriving */
 }

package/tokens/_source.hubl.css

@@ -36,8 +36,12 @@
   /* === Greys (11) === */
   --color-background: #FEFBF9;
   --color-white: #FFFFFF;
+  /* What white is FOR: a marketing card, a well row under the pointer, the current
+     AppShell mark. White itself stays white in every theme; this one swaps in dark
+     (dark-theme, 2026-11-04). */
+  --color-surface: var(--color-white);
   --color-gray-1: #F9F9F9;
-  --color-surface-stripe: #F7F4F4; /* warm zebra-stripe tint (table rows, between gray-1 and background) */
+  --color-surface-stripe: var(--ws-tint-accent); /* warm zebra-stripe tint (table rows, between gray-1 and background), #F7F4F4: follows the palette's page (D15) */
   --color-gray-2: #EDEDED;
   --color-gray-stroke: #E8E8E8;
   --color-gray-3: #D3D3D3;
@@ -45,7 +49,7 @@
   --color-gray-6: #7F7F7F;
   --color-gray-7: #545454;
   --color-gray-8: #292929;
-  --color-text-primary: #353E5A;
+  --color-text-primary: color-mix(in srgb, var(--color-text-heading) 50%, #61475f); /* #353E5A: between the heading and a grey (D15) */
 
   /* === AI gradient (5 stops + composed gradient) === */
   --color-ai-cyan: #14BACB;
@@ -81,19 +85,22 @@
      These are the values inherited from boilerplate form + system styling,
      hoisted into tokens so there is one change-point. CONFIRM exact values
      with Anjali, then finalise. Do not add more raw status hex to components. */
-  --color-feedback-error: #ef6b51;
+  --color-feedback-error: color-mix(in srgb, var(--ws-chart-under-half) 87.5%, #7f3a04); /* #ef6b51: the salmon tone, deeper (D15) */
   --color-feedback-success-text: #4f7d24;
-  --color-feedback-success-bg: #cde3cc;
+  --color-feedback-success-bg: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(254 250.75 221.5)); /* #cde3cc: the teal tone over a pale green (D15) */
 
   /* === Homepage capture colours — PROVISIONAL (no Figma variable exists;
      flagged in the Anjali review doc). homepage/{desktop,mobile}-sections.md */
   --color-alert: #e90f0f; /* "PROBLEM WITHOUT FELLO" overline red */
-  --color-stat-positive: #098486; /* GCI calculator teal dollar values */
+  --color-stat-positive: var(--ws-chart-finished); /* GCI calculator teal dollar values, #098486: the palette's first chart tone (D15) */
 
   /* === Semantic colour tokens — the public consumer-facing names ===
      Component CSS consumes THESE, never the brand primitives directly.
      Change a primitive (or its Theme Setting) and every consumer moves. */
-  --color-bg-page: var(--color-background);
+  /* The cream written out, not var(--color-background): shadcn v4 hosts define --color-background in @theme inline
+     (var(--background)), and Tailwind emits the host's over the kit's, so the kit's page went host-white, near-black
+     under .dark, and empty with shadcn-compat (--background -> --color-bg-page -> --color-background, a cycle). */
+  --color-bg-page: #FEFBF9;
   --color-text-heading: var(--color-brand-navy);
   --color-text-body: var(--color-gray-7);
   /* Un-aliased from gray-6 on 2026-09-30. Gray 6 (#7F7F7F) is 4.00:1 on white
@@ -101,30 +108,34 @@
      failing WCAG AA. The grey ramp keeps its value for fills and rules; this
      is the corrected one for words, and is not a second opinion about the
      palette. Same fix felix-slate had already made for the same hex. */
-  --color-text-muted: #6E6E6E;
+  --color-text-muted: #666666;
+  /* #6E6E6E -> #666666 on 2026-11-04 (kit 0.5.0, D2): #6E6E6E was 4.36:1 on the
+     #EDEDED tray and 4.16 on the grey shell, where Seth's cards and the AppShell
+     put muted words. #666666 is the AA step Ignite ships as --ws-word-muted:
+     5.57 cream, 5.74 white, 5.10 plate, 4.90 tray, 4.69 shell. */
 
   /* Text-safe forms of the brand and feedback colours. The colours themselves
      are for fills, rules and borders: salmon on white is 2.69:1 and cannot
      carry words. These are darkened until they clear 4.5:1 on their own 
      tinted background, hue held. */
-  --color-text-brand-strong: #B35040;
-  --color-text-error-strong: #AE4E3B;
-  --color-text-success-strong: #3C601B;
+  --color-text-brand-strong: var(--ws-word-needs); /* #A84B3C (tokens/_product.css says why): the palette's needs-you words (D15) */
+  --color-text-error-strong: color-mix(in srgb, var(--ws-word-needs) 95%, #944b00); /* #A74B39, was #AE4E3B (4.28 on a pressed row); darkened, hue held (2026-11-04, D2); the needs-you words a step warmer (D15) */
+  --color-text-success-strong: color-mix(in srgb, var(--ws-word-positive) 20%, rgb(72.75 91.74 3.19)); /* #3C601B: the good-news words over an olive (D15) */
 
   /* Placeholders are text. Gray 5 was 2.35:1. */
-  --color-text-placeholder: #6E6E6E;
+  --color-text-placeholder: color-mix(in srgb, var(--color-text-muted) 93.75%, #e6e6e6); /* #6E6E6E: the muted words, a step lighter (D15) */
   /* Overlines + secondary-button ink. (Nav LABELS are navy per final header
      design 2026-06-11 — they use --color-text-heading, not this.) */
   --color-text-interactive: var(--color-brand-mid-blue);
-  --color-border-default: var(--color-gray-stroke);
+  --color-border-default: var(--ws-edge); /* #E8E8E8: the palette's row line (D15) */
   /* Card/control hairlines (dropdown panel, mobile drawer cards, hamburger,
      Log In outline) — gray-3, deliberately darker than border-default. */
-  --color-border-hairline: var(--color-gray-3);
+  --color-border-hairline: var(--ws-edge-card); /* #D3D3D3: the palette's card edge (D15) */
   --color-border-btn: var(--color-button-border);
   --color-bg-dark: var(--color-brand-navy);
   /* Tinted interaction background — hover AND current-page state share it
      (final header design defines no separate active tint). */
-  --color-nav-hover-bg: color-mix(in srgb, var(--color-brand-mid-blue) 5%, transparent);
+  --color-nav-hover-bg: color-mix(in srgb, var(--color-text-interactive) 5%, transparent);
   /* Button gradient is static across rest/hover/active — matches live
      fello.ai, where only shadow + transform change on interaction. */
   --gradient-btn-primary: linear-gradient(
@@ -160,9 +171,13 @@
   --font-size-8xl: 193px; /* LP §8 results "40%" — Figma 192.649 */
 
   /* === Spacing scale (8pt base, 14 tokens) === */
+  --space-3xs: 2px; /* the half step: 44 kit uses as calc(var(--space-xxs) / 2), and Seth's 2 px gaps (2026-11-04, D4) */
   --space-xxs: 4px;
+  --space-xxs-plus: 6px; /* a step plus the 2 px half step: Seth's button icon gap, row hover pill corner inset, North rows (D4) */
   --space-xs: 8px;
+  --space-xs-plus: 10px; /* Seth's chip and bubble padding, the composer's inside, North sidebar rows (D4) */
   --space-sm: 12px;
+  --space-sm-plus: 14px; /* Seth's bubble sides, the figure edge inside a tile, the pace bar (D4) */
   --space-md: 16px;
   --space-lg: 24px;
   --space-xl: 32px;
@@ -321,10 +336,11 @@
   --shadow-label-pill: 2px 22px 6px 0 rgba(0, 0, 0, 0),
     1px 14px 6px 0 rgba(0, 0, 0, 0.01), 1px 8px 5px 0 rgba(0, 0, 0, 0.04),
     0 3px 4px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.08);
-  --shadow-card-default: 0 1px 2px rgba(9, 53, 85, 0.04),
-    0 4px 8px rgba(9, 53, 85, 0.06);
-  --shadow-card-hover: 0 4px 8px rgba(9, 53, 85, 0.06),
-    0 8px 24px rgba(9, 53, 85, 0.08);
+  /* The card shadows are the heading navy at 4 to 8% (D15: they follow the palette's heading). */
+  --shadow-card-default: 0 1px 2px color-mix(in srgb, var(--color-text-heading) 4%, transparent),
+    0 4px 8px color-mix(in srgb, var(--color-text-heading) 6%, transparent);
+  --shadow-card-hover: 0 4px 8px color-mix(in srgb, var(--color-text-heading) 6%, transparent),
+    0 8px 24px color-mix(in srgb, var(--color-text-heading) 8%, transparent);
   /* Sticky navbar pill + dropdown panel — soft BLACK 4-layer stack, exact
      values from the final header Figma (extracted from the SVG filter;
      desktop-states.md §3/§6). The pill's extra 0 189px 53px layer in Figma
@@ -340,7 +356,11 @@
   --shadow-btn-hover: 0 32px 9px rgba(0, 0, 0, 0), 0 20px 8px rgba(0, 0, 0, 0.02),
     0 11px 7px rgba(0, 0, 0, 0.06), 0 5px 5px rgba(0, 0, 0, 0.09),
     0 1px 3px rgba(0, 0, 0, 0.11);
-  --shadow-focus-ring: 0 0 0 3px rgba(255, 114, 92, 0.2);
+  /* The focus ring as a box-shadow, for a part that cannot take an outline. Was
+     a salmon halo at 20% (1.21:1 on the cream, not a visible focus). Since
+     2026-11-04 (D8) it draws Seth's North focus: a 2 px navy ring 2 px out, the
+     gap in the page colour. 12.3:1 on the cream. */
+  --shadow-focus-ring: 0 0 0 2px var(--color-bg-page), 0 0 0 4px var(--color-text-heading);
 
   /* === Animation === */
   --transition-fast: 150ms ease-out;