@felloinnovations/brand-kit 0.5.0 → 0.5.1

package/dist/tokens.d.ts

@@ -195,8 +195,8 @@ declare const tokens: {
     readonly "--ws-rating-strong": "var(--color-stat-positive)";
     readonly "--ws-rating-middle": "var(--color-brand-mid-blue)";
     readonly "--ws-rating-needs-work": "var(--ws-chart-needs-work)";
-    readonly "--ws-shimmer-ground": "color-mix(in srgb, var(--ws-tray) 96%, #d4700c)";
-    readonly "--ws-shimmer": "linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(243.75 247.75 247)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(249 244.8823529412 251.6470588235)) 50%, color-mix(in srgb, var(--ws-chart-finished) 15%, rgb(250.1764705882 252 251.6470588235)) 56%, var(--ws-shimmer-ground) 66% 100%)";
+    readonly "--ws-shimmer-ground": "var(--ws-ghost)";
+    readonly "--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%)";
     readonly "--ws-card-tint-blue": "color-mix(in srgb, var(--ws-rating-middle) 10%, var(--color-surface))";
     readonly "--ws-card-tint-done": "color-mix(in srgb, var(--ws-chart-finished) 10%, var(--color-surface))";
     readonly "--ws-scrim": "color-mix(in srgb, var(--color-text-heading) 35%, transparent)";
@@ -624,8 +624,8 @@ declare const themes: {
         readonly "--ws-rating-strong": "#098486";
         readonly "--ws-rating-middle": "#495883";
         readonly "--ws-rating-needs-work": "#f370a4";
-        readonly "--ws-shimmer-ground": "#ece8e4";
-        readonly "--ws-shimmer": "linear-gradient(100deg in srgb, #ece8e4 0 34%, #f6ddd8 44%, #e4dcf3 50%, #d6eaea 56%, #ece8e4 66% 100%)";
+        readonly "--ws-shimmer-ground": "#e3dfdb";
+        readonly "--ws-shimmer": "linear-gradient(100deg in srgb, #e3dfdb 0 34%, #f6f3f0 50%, #e3dfdb 66% 100%)";
         readonly "--ws-card-tint-blue": "#edeef3";
         readonly "--ws-card-tint-done": "#e6f3f3";
         readonly "--ws-scrim": "rgba(9, 53, 85, 0.35)";
@@ -1048,8 +1048,8 @@ declare const themes: {
         readonly "--ws-rating-strong": "#3bb8b2";
         readonly "--ws-rating-middle": "#93a6dc";
         readonly "--ws-rating-needs-work": "#f370a4";
-        readonly "--ws-shimmer-ground": "#1a2631";
-        readonly "--ws-shimmer": "linear-gradient(100deg, #1a2631 0 34%, #3a3137 44%, #2c334b 50%, #1f3a43 56%, #1a2631 66% 100%)";
+        readonly "--ws-shimmer-ground": "#273544";
+        readonly "--ws-shimmer": "linear-gradient(100deg in srgb, #273544 0 34%, #354250 50%, #273544 66% 100%)";
         readonly "--ws-card-tint-blue": "#1b2637";
         readonly "--ws-card-tint-done": "rgba(17, 40, 47, 1)";
         readonly "--ws-scrim": "rgba(2, 6, 10, 0.62)";
@@ -1472,8 +1472,8 @@ declare const themes: {
         readonly "--ws-rating-strong": "#3bb8b2";
         readonly "--ws-rating-middle": "#93a6dc";
         readonly "--ws-rating-needs-work": "#f370a4";
-        readonly "--ws-shimmer-ground": "#20354b";
-        readonly "--ws-shimmer": "linear-gradient(100deg, #20354b 0 34%, #3f3e4d 44%, #314062 50%, #244759 56%, #20354b 66% 100%)";
+        readonly "--ws-shimmer-ground": "#273544";
+        readonly "--ws-shimmer": "linear-gradient(100deg in srgb, #273544 0 34%, #364351 50%, #273544 66% 100%)";
         readonly "--ws-card-tint-blue": "#142a46";
         readonly "--ws-card-tint-done": "#062d41";
         readonly "--ws-scrim": "rgba(0, 8, 15, 0.62)";

package/dist/tokens.js

@@ -198,8 +198,8 @@ var tokens = {
   "--ws-rating-strong": "var(--color-stat-positive)",
   "--ws-rating-middle": "var(--color-brand-mid-blue)",
   "--ws-rating-needs-work": "var(--ws-chart-needs-work)",
-  "--ws-shimmer-ground": "color-mix(in srgb, var(--ws-tray) 96%, #d4700c)",
-  "--ws-shimmer": "linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(243.75 247.75 247)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(249 244.8823529412 251.6470588235)) 50%, color-mix(in srgb, var(--ws-chart-finished) 15%, rgb(250.1764705882 252 251.6470588235)) 56%, var(--ws-shimmer-ground) 66% 100%)",
+  "--ws-shimmer-ground": "var(--ws-ghost)",
+  "--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%)",
   "--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)",
@@ -624,8 +624,8 @@ var themes = {
     "--ws-rating-strong": "#098486",
     "--ws-rating-middle": "#495883",
     "--ws-rating-needs-work": "#f370a4",
-    "--ws-shimmer-ground": "#ece8e4",
-    "--ws-shimmer": "linear-gradient(100deg in srgb, #ece8e4 0 34%, #f6ddd8 44%, #e4dcf3 50%, #d6eaea 56%, #ece8e4 66% 100%)",
+    "--ws-shimmer-ground": "#e3dfdb",
+    "--ws-shimmer": "linear-gradient(100deg in srgb, #e3dfdb 0 34%, #f6f3f0 50%, #e3dfdb 66% 100%)",
     "--ws-card-tint-blue": "#edeef3",
     "--ws-card-tint-done": "#e6f3f3",
     "--ws-scrim": "rgba(9, 53, 85, 0.35)",
@@ -1048,8 +1048,8 @@ var themes = {
     "--ws-rating-strong": "#3bb8b2",
     "--ws-rating-middle": "#93a6dc",
     "--ws-rating-needs-work": "#f370a4",
-    "--ws-shimmer-ground": "#1a2631",
-    "--ws-shimmer": "linear-gradient(100deg, #1a2631 0 34%, #3a3137 44%, #2c334b 50%, #1f3a43 56%, #1a2631 66% 100%)",
+    "--ws-shimmer-ground": "#273544",
+    "--ws-shimmer": "linear-gradient(100deg in srgb, #273544 0 34%, #354250 50%, #273544 66% 100%)",
     "--ws-card-tint-blue": "#1b2637",
     "--ws-card-tint-done": "rgba(17, 40, 47, 1)",
     "--ws-scrim": "rgba(2, 6, 10, 0.62)",
@@ -1472,8 +1472,8 @@ var themes = {
     "--ws-rating-strong": "#3bb8b2",
     "--ws-rating-middle": "#93a6dc",
     "--ws-rating-needs-work": "#f370a4",
-    "--ws-shimmer-ground": "#20354b",
-    "--ws-shimmer": "linear-gradient(100deg, #20354b 0 34%, #3f3e4d 44%, #314062 50%, #244759 56%, #20354b 66% 100%)",
+    "--ws-shimmer-ground": "#273544",
+    "--ws-shimmer": "linear-gradient(100deg in srgb, #273544 0 34%, #364351 50%, #273544 66% 100%)",
     "--ws-card-tint-blue": "#142a46",
     "--ws-card-tint-done": "#062d41",
     "--ws-scrim": "rgba(0, 8, 15, 0.62)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@felloinnovations/brand-kit",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "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,

package/tokens/_dark.css

@@ -109,7 +109,6 @@
   --ws-chart-alert: #FF5470; /* was #FF5A5A (gtm --color-alert dark), CIEDE2000 6.1 from salmon: a chart could not tell the two apart. A step toward crimson, 12.3 from salmon and 11.9 from the pink; words 4.63 on press (D15) */
   --ws-word-needs-work: var(--ws-chart-needs-work); /* derived: Seth's pink itself clears AA on every night ground (5.26 on press) */
   --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page)); /* derived, the tint-needs formula */
-  --ws-shimmer: linear-gradient(100deg, var(--ws-track) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 14%, var(--ws-track)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 14%, var(--ws-track)) 50%, color-mix(in srgb, var(--color-stat-positive) 14%, var(--ws-track)) 56%, var(--ws-track) 66% 100%); /* derived: the chart colours at 14% over the dark track; still frames plain, as in light */
   /* Promoted at integration (0.5.0): the packages' scoped dark values, now global. */
   --ws-rating-middle: var(--color-text-interactive); /* the mid blue was 2.5:1 on night, under 3:1 for a mark; its words' own dark step */
   --ws-raised-sunk: var(--ws-surface-press); /* the page's sunk is 1/255 off raised in dark */
@@ -119,7 +118,7 @@
   --ws-agent-tally: var(--color-text-heading); /* the act itself in dark (WP-controls) */
   --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page)); /* derived: the muted words toward the page, 3.3:1 on the tray, 4.0 on night, a mark (was #6B7A8A) */
   --ws-control-off: color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59); /* #7F7F7F, the off track as in light */
-  --ws-shimmer-ground: var(--ws-track);
+  --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 93%, var(--ws-ink)) 50%, var(--ws-shimmer-ground) 66% 100%); /* derived (0.5.1): the ghost (the night's #273544, 1.42:1 on the page, 1.15:1 on the tray) with a lighter pass of 7% ink, #354250; on the navy ground #364351 */
   --ws-inverse: var(--color-bg-dark); /* a brand pair in dark: the navy message keeps the navy and white (D12) */
   --ws-on-inverse: var(--color-white);
   --ws-chart-rest: var(--ws-edge-card);

package/tokens/_product.css

@@ -151,18 +151,18 @@
   --ws-rating-middle: var(--color-brand-mid-blue);
   --ws-rating-needs-work: var(--ws-chart-needs-work);
 
-  /* === Loading shimmer (North style1.css:1458-1469) ===
-     A sweep in the chart colours over the ghost grey; Seth's hexes, not kit colours. */
-  /* Drawn at 300% wide, so a still frame (position 0 or 100%, reduced motion) shows a third of it: the grey runs to 34%
-     and from 66%, so both ends of the sweep are a plain ghost with no tint at its edge. */
-  /* D15: the grey is the tray made warmer, each tint its chart tone over a near-white: Seth's values exactly. Blended
-     "in srgb", as the hex stops always were (a derived stop would otherwise blend in Oklab). */
-  --ws-shimmer-ground: color-mix(in srgb, var(--ws-tray) 96%, #d4700c); /* #ece8e4 */
+  /* === 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-chart-under-half) 20%, rgb(243.75 247.75 247)) 44%,
-    color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(249 244.8823529412 251.6470588235)) 50%,
-    color-mix(in srgb, var(--ws-chart-finished) 15%, rgb(250.1764705882 252 251.6470588235)) 56%,
-    var(--ws-shimmer-ground) 66% 100%); /* #f6ddd8, #e4dcf3, #d6eaea */
+    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. */

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: 99 night, 42 navy ground. */
+   422 tokens: 111 kit, 311 product layer; dark: 98 night, 42 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: 99 night, 42 navy ground. */
+   422 tokens: 111 kit, 311 product layer; dark: 98 night, 42 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: 99 night, 42 navy ground. */
+   422 tokens: 111 kit, 311 product layer; dark: 98 night, 42 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

package/tokens/tokens.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: 99 night, 42 navy ground. */
+   422 tokens: 111 kit, 311 product layer; dark: 98 night, 42 navy ground. */
 
 /* "static" so every token is emitted as a custom property even when no
    utility references it. Without it Tailwind prunes the unused ones and a
@@ -199,8 +199,8 @@
   --ws-rating-strong: var(--color-stat-positive);
   --ws-rating-middle: var(--color-brand-mid-blue);
   --ws-rating-needs-work: var(--ws-chart-needs-work);
-  --ws-shimmer-ground: color-mix(in srgb, var(--ws-tray) 96%, #d4700c);
-  --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(243.75 247.75 247)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(249 244.8823529412 251.6470588235)) 50%, color-mix(in srgb, var(--ws-chart-finished) 15%, rgb(250.1764705882 252 251.6470588235)) 56%, var(--ws-shimmer-ground) 66% 100%);
+  --ws-shimmer-ground: var(--ws-ghost);
+  --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%);
   --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);
@@ -496,8 +496,8 @@
   --ws-chart-past-half-tint: color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(219.5882352941 208.4117647059 251.6470588235));
   --ws-chart-under-half-tint: color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(247.5 250.25 224.5));
   --ws-chart-cell-edge: var(--ws-edge-slot);
-  --ws-shimmer-ground: color-mix(in srgb, var(--ws-tray) 96%, #d4700c);
-  --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(243.75 247.75 247)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(249 244.8823529412 251.6470588235)) 50%, color-mix(in srgb, var(--ws-chart-finished) 15%, rgb(250.1764705882 252 251.6470588235)) 56%, var(--ws-shimmer-ground) 66% 100%);
+  --ws-shimmer-ground: var(--ws-ghost);
+  --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%);
   --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);
@@ -662,12 +662,11 @@
     --ws-float-rim: 0 0 0 0 transparent;
     --ws-word-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 37.5%, rgb(142.2 4.8 68));
     --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 20%, var(--color-bg-page));
-    --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(243.75 247.75 247)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(249 244.8823529412 251.6470588235)) 50%, color-mix(in srgb, var(--ws-chart-finished) 15%, rgb(250.1764705882 252 251.6470588235)) 56%, var(--ws-shimmer-ground) 66% 100%);
     --ws-raised-sunk: var(--ws-surface-sunk);
     --ws-act-light: color-mix(in srgb, var(--ws-on-act) 24%, transparent);
     --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 76%, #fcfcfc);
     --ws-control-off: color-mix(in srgb, var(--color-text-muted) 80%, #e3e3e3);
-    --ws-shimmer-ground: color-mix(in srgb, var(--ws-tray) 96%, #d4700c);
+    --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%);
     --ws-inverse: var(--color-text-heading);
     --ws-on-inverse: var(--ws-on-act);
     --ws-chart-rest: color-mix(in srgb, var(--ws-tray) 90%, #252525);
@@ -793,7 +792,6 @@
   --ws-chart-alert: #FF5470;
   --ws-word-needs-work: var(--ws-chart-needs-work);
   --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page));
-  --ws-shimmer: linear-gradient(100deg, var(--ws-track) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 14%, var(--ws-track)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 14%, var(--ws-track)) 50%, color-mix(in srgb, var(--color-stat-positive) 14%, var(--ws-track)) 56%, var(--ws-track) 66% 100%);
   --ws-rating-middle: var(--color-text-interactive);
   --ws-raised-sunk: var(--ws-surface-press);
   --ws-edge-hover: var(--color-text-muted);
@@ -802,7 +800,7 @@
   --ws-agent-tally: var(--color-text-heading);
   --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page));
   --ws-control-off: color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59);
-  --ws-shimmer-ground: var(--ws-track);
+  --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 93%, var(--ws-ink)) 50%, var(--ws-shimmer-ground) 66% 100%);
   --ws-inverse: var(--color-bg-dark);
   --ws-on-inverse: var(--color-white);
   --ws-chart-rest: var(--ws-edge-card);
@@ -880,12 +878,11 @@
     --ws-float-rim: 0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent);
     --ws-word-needs-work: var(--ws-chart-needs-work);
     --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page));
-    --ws-shimmer: linear-gradient(100deg, var(--ws-track) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 14%, var(--ws-track)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 14%, var(--ws-track)) 50%, color-mix(in srgb, var(--color-stat-positive) 14%, var(--ws-track)) 56%, var(--ws-track) 66% 100%);
     --ws-raised-sunk: var(--ws-surface-press);
     --ws-act-light: transparent;
     --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page));
     --ws-control-off: color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59);
-    --ws-shimmer-ground: var(--ws-track);
+    --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 93%, var(--ws-ink)) 50%, var(--ws-shimmer-ground) 66% 100%);
     --ws-inverse: var(--color-bg-dark);
     --ws-on-inverse: var(--color-white);
     --ws-chart-rest: var(--ws-edge-card);
@@ -1008,7 +1005,6 @@
     --ws-chart-alert: #FF5470;
     --ws-word-needs-work: var(--ws-chart-needs-work);
     --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page));
-    --ws-shimmer: linear-gradient(100deg, var(--ws-track) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 14%, var(--ws-track)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 14%, var(--ws-track)) 50%, color-mix(in srgb, var(--color-stat-positive) 14%, var(--ws-track)) 56%, var(--ws-track) 66% 100%);
     --ws-rating-middle: var(--color-text-interactive);
     --ws-raised-sunk: var(--ws-surface-press);
     --ws-edge-hover: var(--color-text-muted);
@@ -1017,7 +1013,7 @@
     --ws-agent-tally: var(--color-text-heading);
     --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page));
     --ws-control-off: color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59);
-    --ws-shimmer-ground: var(--ws-track);
+    --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 93%, var(--ws-ink)) 50%, var(--ws-shimmer-ground) 66% 100%);
     --ws-inverse: var(--color-bg-dark);
     --ws-on-inverse: var(--color-white);
     --ws-chart-rest: var(--ws-edge-card);
@@ -1095,12 +1091,11 @@
       --ws-float-rim: 0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent);
       --ws-word-needs-work: var(--ws-chart-needs-work);
       --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page));
-      --ws-shimmer: linear-gradient(100deg, var(--ws-track) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 14%, var(--ws-track)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 14%, var(--ws-track)) 50%, color-mix(in srgb, var(--color-stat-positive) 14%, var(--ws-track)) 56%, var(--ws-track) 66% 100%);
       --ws-raised-sunk: var(--ws-surface-press);
       --ws-act-light: transparent;
       --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page));
       --ws-control-off: color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59);
-      --ws-shimmer-ground: var(--ws-track);
+      --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 93%, var(--ws-ink)) 50%, var(--ws-shimmer-ground) 66% 100%);
       --ws-inverse: var(--color-bg-dark);
       --ws-on-inverse: var(--color-white);
       --ws-chart-rest: var(--ws-edge-card);

package/tokens/tokens.md

@@ -1,6 +1,6 @@
 # Fello brand tokens
 
-Generated from Figma Marketing - Design System 3.0 (MmOx1GHtbMge4lSLp1kcs8), captured 2026-06-11, tokens/_product.css and tokens/_dark.css. 422 tokens: 111 kit, 311 product layer (`--ws-*`); the dark theme re-points 99 (night) and 42 more on the navy ground.
+Generated from Figma Marketing - Design System 3.0 (MmOx1GHtbMge4lSLp1kcs8), captured 2026-06-11, tokens/_product.css and tokens/_dark.css. 422 tokens: 111 kit, 311 product layer (`--ws-*`); the dark theme re-points 98 (night) and 42 more on the navy ground.
 
 Use these through `var(--token)` or the Tailwind utility of the same name.
 Never write a raw hex, px font-size, or one-off shadow in a Fello project.
@@ -273,8 +273,8 @@ The names every product screen is built from (design-system/ says when to use ea
 | `--ws-rating-strong` | `var(--color-stat-positive)` |
 | `--ws-rating-middle` | `var(--color-brand-mid-blue)` |
 | `--ws-rating-needs-work` | `var(--ws-chart-needs-work)` |
-| `--ws-shimmer-ground` | `color-mix(in srgb, var(--ws-tray) 96%, #d4700c)` |
-| `--ws-shimmer` | `linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(243.75 247.75 247)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(249 244.8823529412 251.6470588235)) 50%, color-mix(in srgb, var(--ws-chart-finished) 15%, rgb(250.1764705882 252 251.6470588235)) 56%, var(--ws-shimmer-ground) 66% 100%)` |
+| `--ws-shimmer-ground` | `var(--ws-ghost)` |
+| `--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%)` |
 | `--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)` |
@@ -626,7 +626,6 @@ light. Brand colours stay literal; these semantic names carry the swap. `tokens.
 | `--ws-chart-alert` | `#FF5470` |
 | `--ws-word-needs-work` | `var(--ws-chart-needs-work)` |
 | `--ws-tint-needs-work` | `color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page))` |
-| `--ws-shimmer` | `linear-gradient(100deg, var(--ws-track) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 14%, var(--ws-track)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 14%, var(--ws-track)) 50%, color-mix(in srgb, var(--color-stat-positive) 14%, var(--ws-track)) 56%, var(--ws-track) 66% 100%)` |
 | `--ws-rating-middle` | `var(--color-text-interactive)` |
 | `--ws-raised-sunk` | `var(--ws-surface-press)` |
 | `--ws-edge-hover` | `var(--color-text-muted)` |
@@ -635,7 +634,7 @@ light. Brand colours stay literal; these semantic names carry the swap. `tokens.
 | `--ws-agent-tally` | `var(--color-text-heading)` |
 | `--ws-mark-muted` | `color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page))` |
 | `--ws-control-off` | `color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59)` |
-| `--ws-shimmer-ground` | `var(--ws-track)` |
+| `--ws-shimmer` | `linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 93%, var(--ws-ink)) 50%, var(--ws-shimmer-ground) 66% 100%)` |
 | `--ws-inverse` | `var(--color-bg-dark)` |
 | `--ws-on-inverse` | `var(--color-white)` |
 | `--ws-chart-rest` | `var(--ws-edge-card)` |

package/tokens/tokens.root.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: 99 night, 42 navy ground. */
+   422 tokens: 111 kit, 311 product layer; dark: 98 night, 42 navy ground. */
 
 :root {
   --color-brand-salmon: #FF725C;
@@ -168,8 +168,8 @@
   --ws-chart-past-half-tint: #cbbdf3;
   --ws-chart-under-half-tint: #f9dfc6;
   --ws-chart-cell-edge: var(--ws-edge-slot);
-  --ws-shimmer-ground: color-mix(in srgb, var(--ws-tray) 96%, #d4700c);
-  --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(243.75 247.75 247)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(249 244.8823529412 251.6470588235)) 50%, color-mix(in srgb, var(--ws-chart-finished) 15%, rgb(250.1764705882 252 251.6470588235)) 56%, var(--ws-shimmer-ground) 66% 100%);
+  --ws-shimmer-ground: var(--ws-ghost);
+  --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%);
   --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);
@@ -499,8 +499,8 @@
   --ws-chart-past-half-tint: color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(219.5882352941 208.4117647059 251.6470588235));
   --ws-chart-under-half-tint: color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(247.5 250.25 224.5));
   --ws-chart-cell-edge: var(--ws-edge-slot);
-  --ws-shimmer-ground: color-mix(in srgb, var(--ws-tray) 96%, #d4700c);
-  --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(243.75 247.75 247)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(249 244.8823529412 251.6470588235)) 50%, color-mix(in srgb, var(--ws-chart-finished) 15%, rgb(250.1764705882 252 251.6470588235)) 56%, var(--ws-shimmer-ground) 66% 100%);
+  --ws-shimmer-ground: var(--ws-ghost);
+  --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%);
   --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);
@@ -665,12 +665,11 @@
     --ws-float-rim: 0 0 0 0 transparent;
     --ws-word-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 37.5%, rgb(142.2 4.8 68));
     --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 20%, var(--color-bg-page));
-    --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(243.75 247.75 247)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(249 244.8823529412 251.6470588235)) 50%, color-mix(in srgb, var(--ws-chart-finished) 15%, rgb(250.1764705882 252 251.6470588235)) 56%, var(--ws-shimmer-ground) 66% 100%);
     --ws-raised-sunk: var(--ws-surface-sunk);
     --ws-act-light: color-mix(in srgb, var(--ws-on-act) 24%, transparent);
     --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 76%, #fcfcfc);
     --ws-control-off: color-mix(in srgb, var(--color-text-muted) 80%, #e3e3e3);
-    --ws-shimmer-ground: color-mix(in srgb, var(--ws-tray) 96%, #d4700c);
+    --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%);
     --ws-inverse: var(--color-text-heading);
     --ws-on-inverse: var(--ws-on-act);
     --ws-chart-rest: color-mix(in srgb, var(--ws-tray) 90%, #252525);
@@ -796,7 +795,6 @@
   --ws-chart-alert: #FF5470;
   --ws-word-needs-work: var(--ws-chart-needs-work);
   --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page));
-  --ws-shimmer: linear-gradient(100deg, var(--ws-track) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 14%, var(--ws-track)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 14%, var(--ws-track)) 50%, color-mix(in srgb, var(--color-stat-positive) 14%, var(--ws-track)) 56%, var(--ws-track) 66% 100%);
   --ws-rating-middle: var(--color-text-interactive);
   --ws-raised-sunk: var(--ws-surface-press);
   --ws-edge-hover: var(--color-text-muted);
@@ -805,7 +803,7 @@
   --ws-agent-tally: var(--color-text-heading);
   --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page));
   --ws-control-off: color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59);
-  --ws-shimmer-ground: var(--ws-track);
+  --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 93%, var(--ws-ink)) 50%, var(--ws-shimmer-ground) 66% 100%);
   --ws-inverse: var(--color-bg-dark);
   --ws-on-inverse: var(--color-white);
   --ws-chart-rest: var(--ws-edge-card);
@@ -883,12 +881,11 @@
     --ws-float-rim: 0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent);
     --ws-word-needs-work: var(--ws-chart-needs-work);
     --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page));
-    --ws-shimmer: linear-gradient(100deg, var(--ws-track) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 14%, var(--ws-track)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 14%, var(--ws-track)) 50%, color-mix(in srgb, var(--color-stat-positive) 14%, var(--ws-track)) 56%, var(--ws-track) 66% 100%);
     --ws-raised-sunk: var(--ws-surface-press);
     --ws-act-light: transparent;
     --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page));
     --ws-control-off: color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59);
-    --ws-shimmer-ground: var(--ws-track);
+    --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 93%, var(--ws-ink)) 50%, var(--ws-shimmer-ground) 66% 100%);
     --ws-inverse: var(--color-bg-dark);
     --ws-on-inverse: var(--color-white);
     --ws-chart-rest: var(--ws-edge-card);
@@ -1011,7 +1008,6 @@
     --ws-chart-alert: #FF5470;
     --ws-word-needs-work: var(--ws-chart-needs-work);
     --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page));
-    --ws-shimmer: linear-gradient(100deg, var(--ws-track) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 14%, var(--ws-track)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 14%, var(--ws-track)) 50%, color-mix(in srgb, var(--color-stat-positive) 14%, var(--ws-track)) 56%, var(--ws-track) 66% 100%);
     --ws-rating-middle: var(--color-text-interactive);
     --ws-raised-sunk: var(--ws-surface-press);
     --ws-edge-hover: var(--color-text-muted);
@@ -1020,7 +1016,7 @@
     --ws-agent-tally: var(--color-text-heading);
     --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page));
     --ws-control-off: color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59);
-    --ws-shimmer-ground: var(--ws-track);
+    --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 93%, var(--ws-ink)) 50%, var(--ws-shimmer-ground) 66% 100%);
     --ws-inverse: var(--color-bg-dark);
     --ws-on-inverse: var(--color-white);
     --ws-chart-rest: var(--ws-edge-card);
@@ -1098,12 +1094,11 @@
       --ws-float-rim: 0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent);
       --ws-word-needs-work: var(--ws-chart-needs-work);
       --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page));
-      --ws-shimmer: linear-gradient(100deg, var(--ws-track) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 14%, var(--ws-track)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 14%, var(--ws-track)) 50%, color-mix(in srgb, var(--color-stat-positive) 14%, var(--ws-track)) 56%, var(--ws-track) 66% 100%);
       --ws-raised-sunk: var(--ws-surface-press);
       --ws-act-light: transparent;
       --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page));
       --ws-control-off: color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59);
-      --ws-shimmer-ground: var(--ws-track);
+      --ws-shimmer: linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-shimmer-ground) 93%, var(--ws-ink)) 50%, var(--ws-shimmer-ground) 66% 100%);
       --ws-inverse: var(--color-bg-dark);
       --ws-on-inverse: var(--color-white);
       --ws-chart-rest: var(--ws-edge-card);

package/tokens/tokens.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: 99 night, 42 navy ground. */
+   422 tokens: 111 kit, 311 product layer; dark: 98 night, 42 navy ground. */
 
 export const tokens = {
   "--color-brand-salmon": "#FF725C",
@@ -200,8 +200,8 @@ export const tokens = {
   "--ws-rating-strong": "var(--color-stat-positive)",
   "--ws-rating-middle": "var(--color-brand-mid-blue)",
   "--ws-rating-needs-work": "var(--ws-chart-needs-work)",
-  "--ws-shimmer-ground": "color-mix(in srgb, var(--ws-tray) 96%, #d4700c)",
-  "--ws-shimmer": "linear-gradient(100deg in srgb, var(--ws-shimmer-ground) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(243.75 247.75 247)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 15%, rgb(249 244.8823529412 251.6470588235)) 50%, color-mix(in srgb, var(--ws-chart-finished) 15%, rgb(250.1764705882 252 251.6470588235)) 56%, var(--ws-shimmer-ground) 66% 100%)",
+  "--ws-shimmer-ground": "var(--ws-ghost)",
+  "--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%)",
   "--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)",
@@ -632,8 +632,8 @@ export const themes = {
     "--ws-rating-strong": "#098486",
     "--ws-rating-middle": "#495883",
     "--ws-rating-needs-work": "#f370a4",
-    "--ws-shimmer-ground": "#ece8e4",
-    "--ws-shimmer": "linear-gradient(100deg in srgb, #ece8e4 0 34%, #f6ddd8 44%, #e4dcf3 50%, #d6eaea 56%, #ece8e4 66% 100%)",
+    "--ws-shimmer-ground": "#e3dfdb",
+    "--ws-shimmer": "linear-gradient(100deg in srgb, #e3dfdb 0 34%, #f6f3f0 50%, #e3dfdb 66% 100%)",
     "--ws-card-tint-blue": "#edeef3",
     "--ws-card-tint-done": "#e6f3f3",
     "--ws-scrim": "rgba(9, 53, 85, 0.35)",
@@ -1056,8 +1056,8 @@ export const themes = {
     "--ws-rating-strong": "#3bb8b2",
     "--ws-rating-middle": "#93a6dc",
     "--ws-rating-needs-work": "#f370a4",
-    "--ws-shimmer-ground": "#1a2631",
-    "--ws-shimmer": "linear-gradient(100deg, #1a2631 0 34%, #3a3137 44%, #2c334b 50%, #1f3a43 56%, #1a2631 66% 100%)",
+    "--ws-shimmer-ground": "#273544",
+    "--ws-shimmer": "linear-gradient(100deg in srgb, #273544 0 34%, #354250 50%, #273544 66% 100%)",
     "--ws-card-tint-blue": "#1b2637",
     "--ws-card-tint-done": "rgba(17, 40, 47, 1)",
     "--ws-scrim": "rgba(2, 6, 10, 0.62)",
@@ -1480,8 +1480,8 @@ export const themes = {
     "--ws-rating-strong": "#3bb8b2",
     "--ws-rating-middle": "#93a6dc",
     "--ws-rating-needs-work": "#f370a4",
-    "--ws-shimmer-ground": "#20354b",
-    "--ws-shimmer": "linear-gradient(100deg, #20354b 0 34%, #3f3e4d 44%, #314062 50%, #244759 56%, #20354b 66% 100%)",
+    "--ws-shimmer-ground": "#273544",
+    "--ws-shimmer": "linear-gradient(100deg in srgb, #273544 0 34%, #364351 50%, #273544 66% 100%)",
     "--ws-card-tint-blue": "#142a46",
     "--ws-card-tint-done": "#062d41",
     "--ws-scrim": "rgba(0, 8, 15, 0.62)",