@felloinnovations/brand-kit 0.5.0 → 0.5.1

package/AGENTS.md

@@ -1,4 +1,4 @@
-# brand-kit for coding agents (0.5.0)
+# brand-kit for coding agents (0.5.1)
 
 Read this before writing UI in any Fello project that uses `@felloinnovations/brand-kit`. It ships inside the
 package at `node_modules/@felloinnovations/brand-kit/AGENTS.md`. The HubSpot website (felix-theme) is out of scope:
@@ -24,7 +24,7 @@ All paths are under `node_modules/@felloinnovations/brand-kit/`.
 | `scripts/check-palette.mjs` | Checks an app's own palette file against the contract (Palettes, below). |
 
 The same guide is hosted, always current, at `https://brand-kit-site-production.up.railway.app/latest/llms.txt`
-(pinned copies under `/v/0.5.0/`).
+(pinned copies under `/v/0.5.1/`).
 
 ---
 

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 0.5.1 (10 Nov 2026)
+
+Loaders are calm: the shimmer is one quiet grey. Amit looked at the skeletons in an app built on the kit and did not
+like the salmon, purple and green tints sweeping every grey ghost block (Decisions, 10 Nov 2026).
+
+- **The shimmer is one neutral tone.** `--ws-shimmer` is the ghost grey with a lighter pass of the same grey, no chart
+  hues, in light, night, the navy ground and every palette. North's timing stays: 1.8 s on `--ws-loop-shimmer` and
+  `--ws-ease-shimmer`, the 300 % band at 100 deg; still under reduced motion. Every ghost that wears the shimmer
+  (Skeleton, a pending Stat, StatTiles, Table, Well, TickStrip, ShareBar, ScoreHero and the rest) changes with no
+  markup change.
+- **One ghost grey at rest and in motion.** `--ws-shimmer-ground` is now `--ws-ghost` (#E3DFDB, the night's #273544),
+  so a ghost shows on the cream (1.29:1) and on the tray (1.13:1) alike, and the still ghost under reduced motion is the
+  same grey. Skeleton's own ground for a card's foot or band is gone.
+- **The chart ghost's colour band is gone.** `ws-skeleton__chart`'s bars are ghosts under the same shimmer; the band
+  that crossed the drawing in blend mode colour is removed (a neutral band there would paint nothing).
+- **The docs say so**: the Skeleton card and preview, the Motion card (the shimmer row is now Close, the chart band row
+  Not yet), Colour, Motion, Patterns, Charts, Choosing components and every loading line in the catalog.
+- **Pinned links keep working**: `/v/0.5.0/` is kept as a snapshot (`hosted/v/0.5.0`), so a page pinned to it still
+  loads after the bump. Pinned links in the docs now point at `/v/0.5.1/`.
+
+**Upgrading from 0.5.0**: nothing to change. A copy of the old gradient, or of #ECE8E4 as the shimmer's grey, should
+become `var(--ws-shimmer)` or `var(--ws-shimmer-ground)`. `StatusLine`'s working words keep their colours for now (open
+in Decisions).
+
 ## 0.5.0 (4 Nov 2026)
 
 The kit the whole team can trust: teams kept hitting alignment, spacing and placement bugs, and Seth (the designer) has

package/README.md

@@ -112,7 +112,7 @@ Then point the repo's agents at the guide: paste the block at the end of [AGENTS
 One line, pinned to a version:
 
 ```html
-<link rel="stylesheet" href="https://brand-kit-site-production.up.railway.app/v/0.5.0/fello.css">
+<link rel="stylesheet" href="https://brand-kit-site-production.up.railway.app/v/0.5.1/fello.css">
 ```
 
 Then use the `ws-*` classes and `var(--token)`; the markup for each component is in the gallery. `/latest/` exists
@@ -183,11 +183,13 @@ is no longer maintained. Only the kit's owners (Amit and Arpan) change tokens.
 
 ## Releasing
 
-CI publishes. Bump `version` in `package.json` (and `plugin/.claude-plugin/plugin.json`, and the pinned `/v/` links
-in `skill/SKILL.md`), run `yarn build` and `yarn skill`, commit, then push a tag that matches:
+CI publishes. Before the bump, keep the released hosted tree: `yarn hosted`, then copy `site-dist/v/<released
+version>` to `hosted/v/` (the gallery serves every snapshot there, so pinned links keep working). Bump `version` in
+`package.json` and the pinned `/v/` links (`AGENTS.md`, `skill/SKILL.md`, this README, `Starter`, guide 01; the plugin is
+unversioned), run `yarn build` and `yarn skill`, commit, then push a tag that matches:
 
 ```sh
-git tag v0.5.0 && git push origin v0.5.0
+git tag v0.5.1 && git push origin v0.5.1
 ```
 
 `.github/workflows/publish.yml` checks the tag matches `package.json`, builds, and publishes to npm through npm's

package/design-system/01-how-claude-decides.md

@@ -57,7 +57,7 @@ rest; a mockup about to ship takes all steps.
 | Where | Setup |
 | --- | --- |
 | A claude.ai artifact | inline `fello-core.css` plus the styles of only the components used, in one `<style>` (an artifact loads stylesheets only from Google Fonts; the whole `fello.css` is too big to paste) |
-| A plain HTML page or a static site | link the pinned file: `https://brand-kit-site-production.up.railway.app/v/0.5.0/fello.css` |
+| A plain HTML page or a static site | link the pinned file: `https://brand-kit-site-production.up.railway.app/v/0.5.1/fello.css` |
 | A Next, Vite or Turbo app that owns its page | install `@felloinnovations/brand-kit`, import `fello.css` (it sits in Tailwind's layers, so utilities win) or `tokens.css` (Tailwind v4), with the Instrument Sans `@import` first (before `@import "tailwindcss"`) or a `<link>`; read its `AGENTS.md` |
 | An app inside a host it does not own (a shared bundle, a platform's guest app), or any Tailwind v3 app | the scoped build: `fello.scoped.css`, or the string from `@felloinnovations/brand-kit/scoped` injected in a `<style>`, under `class="fello"` on the app's root and on every portal's root; nothing outside it changes; it carries no font, so link Instrument Sans (the `brand-adopt` skill has the steps) |
 | Claude Design or Slides | this system is the organisation's default; nothing to load |

package/design-system/03-colour.md

@@ -40,7 +40,7 @@ positive. Marks keep Seth's exact tones; a word in a tone takes its AA step on t
 | The ink of a wash, a ring or a line of your own; the tint of a drop | `ws-ink`, `ws-shade` | navy (in dark, the heading's light ink and black) |
 | A floating navy message (a toast, the note tip) and the footer, and their words | `ws-inverse`, `ws-on-inverse` | the act and its words; in dark the brand navy and white |
 | An off control (a switch's track at rest) | `ws-control-off` | #7F7F7F |
-| The loading shimmer's ground | `ws-shimmer-ground` | #ECE8E4 |
+| The loading shimmer's ground: the ghost grey, with a lighter pass of the same grey (never a chart hue) | `ws-shimmer-ground` | #E3DFDB (`ws-ghost`) |
 | A hero's glows, an assistant's working orb | `ws-glow-rose`, `ws-glow-pink`, `ws-glow-blue`, `ws-orb` | from the chart tones |
 | Focus | `ws-focus-color` | navy |
 | Behind a dialog | `ws-scrim` | navy 35% |
@@ -99,7 +99,8 @@ Never a state by colour alone: a word or a mark goes with it.
 - **An assistant's mark** takes one of the four tones and keeps it; no other colour names it.
 - **The AI colours** (`color-ai-*`) exist only inside an assistant's orb mark, if the product has one, and as faint washes
   in `ws-cool-glow` and `ws-team-glow` behind a page hero. No conic rings, purple glows or gradient text, except the
-  status line's word while an answer works (`StatusLine`, in the chart colours) and the loading shimmer.
+  status line's word while an answer works (`StatusLine`, in the chart colours). The loading shimmer is one neutral
+  tone, the ghost grey and a lighter pass of it, never the chart colours (0.5.1).
 - **People are neutral**: a disc of `ws-surface-sunk` with navy initials.
 - **Marketing pages** keep the kit's own marketing colours (its gradient button, `color-text-primary`); they never enter a
   product screen.

package/design-system/08-choosing-components.md

@@ -106,7 +106,7 @@ Components new in 0.5.0 are marked (new).
 
 | Need | Component | Rule |
 | --- | --- | --- |
-| Content on its way | `Skeleton` (the shimmer in the chart colours over ghost shapes) | never a spinner for content |
+| Content on its way | `Skeleton` (the shimmer, one quiet grey, over ghost shapes) | never a spinner for content |
 | An answer at work | `StatusLine` (new) | the agent, what it is doing, the step |
 | A long load with no figure | `LoadBar` (new) | it never claims to finish before it has |
 | A press waiting on its answer | `Button pending` | keeps its width; a second press waits; the button stays focusable |

package/design-system/09-charts.md

@@ -89,7 +89,7 @@ Seth draws most shares as ticks. The rules every strip follows:
 
 ## States
 
-Loading and empty follow Patterns (a shimmer in the chart colours over the chart's ghost; the same card with its act).
+Loading and empty follow Patterns (the shimmer, one quiet grey, over the chart's ghost; the same card with its act).
 
 | State | How |
 | --- | --- |

package/design-system/10-patterns.md

@@ -58,7 +58,7 @@ moves. A state never changes a thing's size, its type size or its place, so noth
 | Focus | a 2 px navy ring 2 px outside (`ws-focus-color`); inside a dense row, a well, a list or a clipped container the same ring drawn inside (`ws-focus-inset`) | `:focus-visible` only; never `outline: none` without the ring (Accessibility) |
 | Selected, open, current | the ground changes (the sunk cream, or the well for a pill in an inset list), the words go navy or 600; a list's selected fill slides from the row it left; the dividers beside an inset pill drop | the row keeps its height and type size; `aria-selected`, `aria-current` or `aria-expanded` says it |
 | Pending | the control keeps its width and its words; the working dot sits in its padding on the one beat; it stays focusable (`aria-disabled`, `aria-busy`) and refuses a second press | from 100 ms (Latency above); words that say what is happening ("Saving") |
-| Loading | the region's ghost in the chart colours' shimmer, the size of what it stands for; its head shows at once | never a spinner for content; still under reduced motion, with a word |
+| Loading | the region's ghost under the shimmer (one quiet grey), the size of what it stands for; its head shows at once | never a spinner for content; still under reduced motion, with a word |
 | Disabled | dimmed (the component's own opacity), no pointer events, the reason said nearby | prefer leaving the act out, or keeping it focusable and saying why |
 | Others step back | while one row, part or tile is in focus, the rest dim (a matrix's other rows to 20%, a chart's other parts to `ws-dim`); the dimmed keep their grounds and dividers. A word that must stay readable steps to muted grey instead of fading (a heatmap's other squares fade their heat and status bar, their words stay AA) | the focused one never changes |
 

package/design-system/13-motion.md

@@ -193,9 +193,9 @@ of cards wears `.ws-build`; each card in it wears `.ws-build__card` with `--ws-i
 
 ### Loading
 
-Content on its way is a ghost the size of what it stands for with the shimmer passing over it in the chart colours
-(`Skeleton`, or `.ws-shimmer` on a block of your own: every `--ws-loop-shimmer`, 1.8 s, on `--ws-ease-shimmer`), never
-a spinner. When the content lands, its details settle in top to bottom (`.ws-settle` with `--ws-i` on each, 22 ms
+Content on its way is a ghost the size of what it stands for with the shimmer passing over it: one quiet tone, the
+ghost grey and a lighter pass of the same grey, never a chart hue (`Skeleton`, or `.ws-shimmer` on a block of your own:
+every `--ws-loop-shimmer`, 1.8 s, on `--ws-ease-shimmer`), never a spinner. When the content lands, its details settle in top to bottom (`.ws-settle` with `--ws-i` on each, 22 ms
 apart). An answer at work shows a `StatusLine`; a long load with no figure a `LoadBar`; a pressed button waiting keeps
 its width and shows its working dot on `--ws-loop`. Why: the layout is already in place, so nothing jumps when the real
 thing arrives. Under reduced motion the shimmer stops on its ghost and the words say what is loading.

package/design-system/17-decisions.md

@@ -494,3 +494,13 @@ the team builds on the kit gets them, not North alone.
 | 5 Nov 2026 | Amit (via Claude, open to veto) | `--ws-duration-fill-page` (1700 ms, North's "Metric + goal bars fill") is a token: the tiles' charts and the goal bars both use it (D4). A tile's foot figure rises in after the draw; it does not count up (the 4 Nov rule: a headline figure shows its value) | tokens, Motion |
 | 5 Nov 2026 | Amit (via Claude, open to veto) | `TrendLine`: North's revenue chart and its NRR line become one kit chart, a value over periods on an axis as a line (dots, the hatched area under it) or as columns, with the Bars / Line morph (`--ws-spring-morph-chart`), the hovered column band and the hovered dot. Overturns 09-charts' "a free line chart: make it thin bars" for one series on an axis; two series stay two cards. Its columns start at zero (North's ARR chart starts at $20M: the kit does not) | Charts, `TrendLine`, `TrendBars`, `StepLine` |
 
+## Rulings added 10 Nov 2026 (kit 0.5.1)
+
+Amit looked at the loading skeletons in an app built on the kit: the shimmer swept salmon, purple and green tints across
+every grey ghost block. He wants loaders calm and neutral.
+
+| Date | By | Decision | Where it bites |
+| --- | --- | --- | --- |
+| 10 Nov 2026 | Amit (via Claude) | Loading is one quiet tone: the shimmer (`--ws-shimmer`) is the ghost grey with a lighter pass of the same grey, never a chart hue, in light, night, the navy ground and every palette. Overturns D7's "loading is a shimmer in the chart colours", the Motion row "The skeleton breathes" (4 Nov) for its colours, and the loading shimmer as an exception to "no gradient text" in Colour. North's timing stays: the 300 % band at 100 deg over 1.8 s (`--ws-loop-shimmer` on `--ws-ease-shimmer`), still under reduced motion | Skeleton, Motion, Colour, Patterns, every `ws-shimmer` ghost |
+| 10 Nov 2026 | Amit (via Claude, open to veto) | How it is drawn. The ground is the ghost grey itself (`--ws-shimmer-ground` is now `--ws-ghost`: #E3DFDB, the night's #273544), the same at rest and in motion, so a ghost shows on the cream (1.29:1) and on the tray (1.13:1) in every theme and Skeleton's own ground for a card's foot is gone. The pass is the ghost 70 % of the way to the cream in light (#F6F3F0: 1.07:1 off the cream, 1.06:1 off the tray, so it shows on both) and 7 % toward the ink in dark (#354250; #364351 on the navy ground), the same step by eye (CIEDE2000 4.3); it derives from the ghost, the page and the ink, so a palette moves it. The chart ghost's colour band is dropped, not made neutral: in blend mode colour a neutral band has no hue and paints nothing, and in normal blend it would paint the card between the bars. Each bar is now a ghost under the same shimmer, so one token drives every loader | tokens (`_product.css`, `_dark.css`), Skeleton, the Motion card (its two rows now Close and Not yet) |
+| 10 Nov 2026 | Open, for Amit to rule | Not changed: `StatusLine`'s working words still pass through the AA steps of salmon, purple and teal. They are words at work, not a ghost; if "loaders" covers them too, they take a neutral pass next | StatusLine |

package/design-system/components/CheckRow/README.md

@@ -69,7 +69,7 @@ Seth's checks list (301:1728) and Fixes checklist (308:2466).
 - **Focus**: the 2 px navy ring drawn inside the row.
 - **Not checked**: as above.
 - **Done** (a fix, `--done`): the box ticked, the title muted, the done line under it in the positive word.
-- **Loading**: the name and the ticks as ghosts in the chart colours' sweep (`__ghost ws-shimmer`, `__ticks ws-shimmer`);
+- **Loading**: the name and the ticks as ghosts under the shimmer (`__ghost ws-shimmer`, `__ticks ws-shimmer`);
   still under reduced motion.
 - **Long name**: wraps within its 150; the row grows, every column still lines up.
 

package/design-system/components/CheckRow/preview.html

@@ -110,7 +110,7 @@
   </div>
 
   <div class="ws-stack" style="width: 560px;">
-    <span class="ws-muted">Loading: the rows' places as ghosts in the chart colours' sweep</span>
+    <span class="ws-muted">Loading: the rows' places as ghosts under the shimmer</span>
     <ul class="ws-check-row" aria-busy="true" aria-label="Checks, loading">
       <li><div class="ws-check-row__row" aria-hidden="true">
         <span class="ws-check-row__name"><span class="ws-check-row__ghost ws-shimmer" style="width: 70%;"></span></span>

package/design-system/components/CheckRow/style.css

@@ -38,7 +38,7 @@
   .ws-check-row__line > .ws-check-row__chev { transition: transform var(--ws-spring-fold-duration) var(--ws-spring-fold); }
   .ws-check-row__ticks > b { transform-origin: bottom; animation: ws-grow-up var(--ws-duration-fill) var(--ws-ease-settle) backwards; animation-delay: calc(sibling-index() * var(--ws-ripple)); }
 }
-/* Loading: the name and the ticks as ghosts in the chart colours' sweep (add ws-shimmer). */
+/* Loading: the name and the ticks as ghosts under the shimmer (add ws-shimmer). */
 .ws-check-row__ghost { display: block; height: calc(var(--space-xs) + var(--space-3xs)); border-radius: var(--ws-radius-bar); background: var(--ws-track); }
 .ws-check-row__ghost.ws-shimmer, .ws-check-row__ticks.ws-shimmer { background: var(--ws-shimmer); background-size: 300% 100%; }
 

package/design-system/components/KanbanBoard/README.md

@@ -51,7 +51,7 @@ Columns of cards for a pipeline: a stage per column, a card per thing moving thr
   reorder", `springs.reorder` .4 / 0): wrap the move in `reorder()` (below).
 - **Empty**: the column keeps its full width, its head and its count; a muted sentence in place of cards. It never
   hides, which would reflow every column beside it mid-task.
-- **Loading**: ghost cards the height of a card in the chart colours' sweep (`__ghost ws-shimmer`), the heads shown at
+- **Loading**: ghost cards the height of a card under the shimmer (`__ghost ws-shimmer`), the heads shown at
   once; still under reduced motion.
 - **Scrolled**: the far-edge fade while stages are hidden, gone at the end; in `--fill`, a column's foot fades while cards
   are hidden below it, gone at its end.

package/design-system/components/KanbanBoard/style.css

@@ -30,7 +30,7 @@
 .ws-kanban-board__who { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; }
 .ws-kanban-board__meta { font-size: var(--ws-text-control); line-height: var(--ws-leading-control); color: var(--color-text-muted); }
 .ws-kanban-board__empty { padding: var(--space-md) var(--space-xs); text-align: center; font-size: var(--ws-text-control); line-height: var(--ws-leading-control); color: var(--color-text-muted); }
-/* Loading: a ghost the height of a card, in the chart colours' sweep (add ws-shimmer). */
+/* Loading: a ghost the height of a card under the shimmer (add ws-shimmer). */
 .ws-kanban-board__ghost { display: block; height: calc(var(--ws-card-padding) * 2 + var(--ws-control-h-sm) + var(--space-xxs) + var(--ws-leading-control)); border-radius: var(--ws-radius-card); background: var(--ws-track); }
 .ws-kanban-board__ghost.ws-shimmer { background: var(--ws-shimmer); background-size: 300% 100%; }
 /* A board page (K16): the board takes the rest of a height-bound column (the shell's body, a fill page), every column

package/design-system/components/ListDetail/preview.html

@@ -175,7 +175,7 @@
   </div>
 
   <div class="ws-stack" style="width: 640px;">
-    <span class="ws-muted">Loading: the list's rows and the detail as ghosts in the chart colours' sweep (under 48rem the pair stacks, list first)</span>
+    <span class="ws-muted">Loading: the list's rows and the detail as ghosts under the shimmer (under 48rem the pair stacks, list first)</span>
     <div class="ws-list-detail" aria-busy="true">
       <div class="ws-list-detail__grid">
         <section class="ws-list-detail__list" aria-label="Reviews, loading">

package/design-system/components/Matrix/README.md

@@ -55,7 +55,7 @@ answers grid (305:2341): which AI assistants named you, for each of the question
   and the foot stay; the hovered row does not change. The whole question shows in the note.
 - **Focus** (keyboard, or a tap that focuses the question): the same dim and the same note. A page script may set
   `aria-expanded="true"` on the question to keep the note open after a tap where the browser does not focus buttons.
-- **Loading**: every cell a ghost in the chart colours' sweep (`__cell ws-shimmer`), the questions and sources shown at
+- **Loading**: every cell a ghost under the shimmer (`__cell ws-shimmer`), the questions and sources shown at
   once; still under reduced motion.
 - **Narrow**: source names drop to their marks in 32 px columns (a screen reader still hears each source through the
   head's label), and the foot's line drops under its title.

package/design-system/components/Matrix/preview.html

@@ -62,7 +62,7 @@
   </div>
 
   <div class="ws-stack" style="width: 420px;">
-    <span class="ws-muted">Loading: every cell a ghost in the chart colours' sweep, the questions and sources shown at once</span>
+    <span class="ws-muted">Loading: every cell a ghost under the shimmer, the questions and sources shown at once</span>
     <div class="ws-matrix" aria-busy="true">
       <div class="ws-matrix__table" role="table" aria-label="Which AI assistants named you, checking">
         <div class="ws-matrix__head" role="rowgroup">

package/design-system/components/Motion/README.md

@@ -71,14 +71,14 @@ Coverage, 206 behaviours (the page counts them in its head):
 | 6. Focus | 7 | 4 | 2 | 0 | 1 |
 | 7. Open and close | 23 | 10 | 5 | 2 | 6 |
 | 8. Panels docking | 12 | 6 | 1 | 1 | 4 |
-| 9. Loading, working and loops | 11 | 5 | 2 | 0 | 4 |
+| 9. Loading, working and loops | 11 | 3 | 3 | 0 | 5 |
 | 10. Number and chart build-ins | 13 | 5 | 2 | 0 | 6 |
 | 11. Tooltips and hover cards | 6 | 2 | 4 | 0 | 0 |
 | 12. Stagger | 11 | 6 | 2 | 1 | 2 |
 | 13. Reduced motion | 4 | 4 | 0 | 0 | 0 |
 | 14. What never moves | 10 | 6 | 3 | 0 | 1 |
 | 17. Interaction states | 13 | 7 | 2 | 1 | 3 |
-| All | 206 | 115 | 45 | 5 | 41 |
+| All | 206 | 113 | 46 | 5 | 42 |
 
 ## States
 

package/design-system/components/Motion/preview.html

@@ -36,7 +36,7 @@
           <li class="ws-cluster" style="flex-wrap: nowrap; align-items: flex-start; gap: var(--space-xs);"><span class="ws-badge ws-badge--navy" aria-hidden="true" style="flex: none; min-width: var(--space-lg);">11</span><span class="ws-stack ws-stack--tight" style="min-width: 0;"><span class="ws-row-name">Sort the list</span><span class="ws-meta">Pick an order: the rows glide to their new places.</span></span></li>
           <li class="ws-cluster" style="flex-wrap: nowrap; align-items: flex-start; gap: var(--space-xs);"><span class="ws-badge ws-badge--navy" aria-hidden="true" style="flex: none; min-width: var(--space-lg);">12</span><span class="ws-stack ws-stack--tight" style="min-width: 0;"><span class="ws-row-name">Press any button</span><span class="ws-meta">It gives under your finger and springs back.</span></span></li>
           <li class="ws-cluster" style="flex-wrap: nowrap; align-items: flex-start; gap: var(--space-xs);"><span class="ws-badge ws-badge--navy" aria-hidden="true" style="flex: none; min-width: var(--space-lg);">13</span><span class="ws-stack ws-stack--tight" style="min-width: 0;"><span class="ws-row-name">Point at a health square</span><span class="ws-meta">After a breath it grows open in place.</span></span></li>
-          <li class="ws-cluster" style="flex-wrap: nowrap; align-items: flex-start; gap: var(--space-xs);"><span class="ws-badge ws-badge--navy" aria-hidden="true" style="flex: none; min-width: var(--space-lg);">14</span><span class="ws-stack ws-stack--tight" style="min-width: 0;"><span class="ws-row-name">Refresh the sources</span><span class="ws-meta">A shimmer in the chart colours, then each line settles in.</span></span></li>
+          <li class="ws-cluster" style="flex-wrap: nowrap; align-items: flex-start; gap: var(--space-xs);"><span class="ws-badge ws-badge--navy" aria-hidden="true" style="flex: none; min-width: var(--space-lg);">14</span><span class="ws-stack ws-stack--tight" style="min-width: 0;"><span class="ws-row-name">Refresh the sources</span><span class="ws-meta">A shimmer, one quiet grey, then each line settles in.</span></span></li>
           <li class="ws-cluster" style="flex-wrap: nowrap; align-items: flex-start; gap: var(--space-xs);"><span class="ws-badge ws-badge--navy" aria-hidden="true" style="flex: none; min-width: var(--space-lg);">15</span><span class="ws-stack ws-stack--tight" style="min-width: 0;"><span class="ws-row-name">Replay the arrival</span><span class="ws-meta">The cards rise in, the columns grow in one after another and the goals fill.</span></span></li>
         </ol>
         <p class="ws-muted" data-reduced-readout></p>
@@ -270,7 +270,7 @@
       <div class="ws-stack" style="gap: var(--ws-gap-group); padding-top: var(--ws-gap-component);">
     <div class="ws-stack">
       <p class="ws-body">Each row is one of North's behaviours by Seth's own label (north-motion.md), North's values, a live kit demo to hover, press or play, the kit token or class to build with, and how close the kit is. 206 behaviours: 115 exact, 45 close, 5 through a small JS helper, 41 not in the kit yet.</p>
-      <span class="ws-cluster"><span class="ws-chip ws-chip--live" style="min-width: var(--space-6xl); justify-content: center;">Exact 115</span><span class="ws-chip ws-chip--middle" style="min-width: var(--space-6xl); justify-content: center;">Close 45</span><span class="ws-chip ws-chip--accent" style="min-width: var(--space-6xl); justify-content: center;">JS helper 5</span><span class="ws-chip" style="min-width: var(--space-6xl); justify-content: center;">Not yet 41</span></span>
+      <span class="ws-cluster"><span class="ws-chip ws-chip--live" style="min-width: var(--space-6xl); justify-content: center;">Exact 113</span><span class="ws-chip ws-chip--middle" style="min-width: var(--space-6xl); justify-content: center;">Close 46</span><span class="ws-chip ws-chip--accent" style="min-width: var(--space-6xl); justify-content: center;">JS helper 5</span><span class="ws-chip" style="min-width: var(--space-6xl); justify-content: center;">Not yet 42</span></span>
       <p class="ws-muted">Slow motion (in Try it) is this page's own: it multiplies every duration, delay and stagger token by --ws-motion-slow (4), so a spring's shape shows. Reduced motion: with prefers-reduced-motion set, every row here is still (instant state changes, no springs, no view transitions, shimmers stop on their ghost), and Slow motion has nothing to slow. A browser without a feature (linear(), anchor positioning, @starting-style, interpolate-size, view transitions) shows the change at once, never a broken layout.</p>
     </div>
 
@@ -1436,21 +1436,21 @@
 
   <section class="ws-stack" aria-labelledby="mo-loading">
     <h2 class="ws-section" id="mo-loading">9. Loading, working and loops</h2>
-    <p class="ws-muted">Every working signal says in words what it is doing; the shimmer passes in the chart colours over ghost shapes.</p>
+    <p class="ws-muted">Every working signal says in words what it is doing; the shimmer passes over ghost shapes in one quiet grey.</p>
     <div class="ws-board">
       <article class="ws-card" aria-label="Shimmer in chart colours"><div class="ws-head">
         <div class="ws-stack ws-stack--tight">
-          <span class="ws-cluster"><span class="ws-chip ws-chip--live" style="min-width: var(--space-6xl); justify-content: center;">Exact</span><span class="ws-row-name">Shimmer in chart colours</span></span>
+          <span class="ws-cluster"><span class="ws-chip ws-chip--middle" style="min-width: var(--space-6xl); justify-content: center;">Close</span><span class="ws-row-name">Shimmer in chart colours</span></span>
           <span class="ws-meta">North: text and blocks: a 100deg band of #f6ddd8, #e4dcf3, #d6eaea over #ece8e4, 300% wide, 1.8 s shimmer, infinite (css:1458)</span>
-          <span class="ws-meta">Kit: .ws-skeleton, .ws-shimmer: --ws-shimmer over --ws-loop-shimmer on --ws-ease-shimmer; still ghost under reduced motion</span>
+          <span class="ws-meta">Kit: .ws-skeleton, .ws-shimmer: --ws-shimmer over --ws-loop-shimmer on --ws-ease-shimmer, North's band, width and beat in one quiet grey: the ghost #e3dfdb with a lighter pass #f6f3f0, no chart hues (Amit, 10 Nov 2026); still ghost under reduced motion</span>
         </div>
         <div class="ws-cluster"><span class="ws-stack" style="width: var(--space-9xl);" aria-hidden="true"><span class="ws-skeleton ws-skeleton--title" style="width: 60%;"></span><span class="ws-skeleton ws-skeleton--line"></span><span class="ws-skeleton ws-skeleton--line" style="width: 66%;"></span></span></div>
       </div></article>
       <article class="ws-card" aria-label="Empty chart shapes take the colour band"><div class="ws-head">
         <div class="ws-stack ws-stack--tight">
-          <span class="ws-cluster"><span class="ws-chip ws-chip--live" style="min-width: var(--space-6xl); justify-content: center;">Exact</span><span class="ws-row-name">Empty chart shapes take the colour band</span></span>
+          <span class="ws-cluster"><span class="ws-chip" style="min-width: var(--space-6xl); justify-content: center;">Not yet</span><span class="ws-row-name">Empty chart shapes take the colour band</span></span>
           <span class="ws-meta">North: #e3dfdb shapes, a coral, purple, teal band at mix-blend color, .85, the same 1.8 s</span>
-          <span class="ws-meta">Kit: .ws-skeleton__chart</span>
+          <span class="ws-meta">Kit: not taken: loaders are one neutral tone (Amit, 10 Nov 2026); .ws-skeleton__chart's bars are ghosts under the same shimmer</span>
         </div>
         <div class="ws-cluster"><span class="ws-skeleton__chart" style="width: var(--space-9xl);" aria-hidden="true"><i style="height: 35%;"></i><i style="height: 60%;"></i><i style="height: 45%;"></i><i style="height: 75%;"></i><i style="height: 55%;"></i><i style="height: 90%;"></i><i style="height: 70%;"></i><i style="height: 50%;"></i></span></div>
       </div></article>
@@ -2514,7 +2514,7 @@
     veil.addEventListener('click', closeChat);
     chat.addEventListener('keydown', (e) => { if (e.key === 'Escape' && mode === 'bar') closeChat(); });
 
-    /* 14: the sources load: a shimmer in the chart colours, then each line settles in, top to bottom. */
+    /* 14: the sources load: the shimmer, one quiet grey, then each line settles in, top to bottom. */
     const sources = play.querySelector('[data-play-sources]'), sourcesView = sources.querySelector('[data-sources-view]');
     let loading = 0;
     const load = () => {

package/design-system/components/README.md

@@ -16,7 +16,7 @@ The catalog: 103 components by gallery group, one line each, plus `Cover`, the g
 - [Fold](Fold/README.md): The one disclosure: something folded away until wanted, in three looks, built on the browser's native `<details>`.
 - [Morph](Morph/README.md): A thing that changes its place or its size goes there as itself: a card flying to the full screen and back, a figure growing open across its row, the chat moving between its modes. The browser's own view transitions, started by `morph()` from the package, on Seth's curves.
 - [Plate](Plate/README.md): A quiet block set apart inside a card: the cream a shade darker, for a card's facts, a track or an aside.
-- [Skeleton](Skeleton/README.md): A ghost of what is coming, in the shape it will take, with North's shimmer in the chart colours passing over it, so nothing jumps when the real content lands.
+- [Skeleton](Skeleton/README.md): A ghost of what is coming, in the shape it will take, with North's shimmer passing over it in one quiet grey, so nothing jumps when the real content lands.
 - [Well](Well/README.md): The system's grey well: a plate holding a short list of pressable rows, for every "what to ask" list.
 
 ## Charts

package/design-system/components/ScoreHero/README.md

@@ -41,8 +41,8 @@ A report's score the way Seth draws it: the 96 px figure, a strip of ticks acros
   once the draw is half way. The figure does not count up (North: headline figures are static).
 - Not checked: an en dash in muted words in place of the figure (`__figure--none`, with `aria-hidden`; the section's
   label says "not checked"), every tick the track, "Could not check" and why.
-- Loading: a ghost the figure's height, the strip as a ghost (`--loading`) and a ghost line, all in the chart colours'
-  sweep; `aria-busy="true"` on the section.
+- Loading: a ghost the figure's height, the strip as a ghost (`--loading`) and a ghost line, all under the shimmer;
+  `aria-busy="true"` on the section.
 - Long sentence: wraps as running text under the rating; the figure never wraps.
 - Reduced motion: no draw, no settle; the ghosts stay still.
 - Hover, focus, pressed: do not apply; it is read, not pressed.

package/design-system/components/ScoreHero/style.css

@@ -19,7 +19,7 @@
 .ws-score-hero--needs-work { --tone-word: var(--ws-word-needs-work); }
 .ws-score-hero--needs-work .ws-tick-strip { --tone: var(--ws-rating-needs-work); }
 .ws-score-hero--none { --tone-word: var(--color-text-muted); }
-/* Loading: ghost blocks the size of what they stand for, in the chart colours' sweep. */
+/* Loading: ghost blocks the size of what they stand for under the shimmer. */
 .ws-score-hero__ghost { width: calc(var(--space-6xl) * 2); max-width: 100%; height: var(--ws-leading-score); }
 .ws-score-hero__ghost--line { width: min(100%, calc(var(--space-9xl) * 2)); height: var(--ws-leading-section); }
 @container (max-width: 26rem) {

package/design-system/components/ShareBar/README.md

@@ -28,7 +28,7 @@ Where a whole goes: one stacked bar of parts in their tones over what stays, a h
 - Draw (`--draw`): each part grows from its left edge in turn, 70 ms apart (`--ws-stagger-part`), over 700 ms on the
   settle curve. Set `--i` on each part.
 - Nothing moves: the bar is all ground; the key says what stays.
-- Loading (`--loading`): the bar as a ghost in the chart colours' sweep.
+- Loading (`--loading`): the bar as a ghost under the shimmer.
 - Narrow: the head and the key wrap; the bar keeps its parts in proportion.
 - Reduced motion: the parts in place, the ghost still.
 - Hover, focus: none; the key carries the words.

package/design-system/components/ShareBar/style.css

@@ -16,7 +16,7 @@
 .ws-share-bar__item::before { content: ""; position: absolute; inset-inline-start: 0; top: calc((var(--space-md) - var(--space-xs)) / 2); width: var(--space-xs); height: var(--space-xs); border-radius: var(--ws-radius-chip); background: var(--tone, var(--ws-chart-rest)); }
 /* Seth's key is one tone: the figure keeps the words' weight and colour, only its numerals are tabular. */
 .ws-share-bar__item b { font-weight: inherit; color: inherit; font-variant-numeric: tabular-nums; }
-/* Loading: the bar as a ghost in the chart colours' sweep, the key held back. */
+/* Loading: the bar as a ghost under the shimmer, the key held back. */
 .ws-share-bar--loading .ws-share-bar__bar { background: var(--ws-shimmer); background-size: 300% 100%; }
 @media (prefers-reduced-motion: no-preference) {
   .ws-share-bar--loading .ws-share-bar__bar { animation: ws-shimmer var(--ws-loop-shimmer) var(--ws-ease-shimmer) infinite; }

package/design-system/components/Skeleton/README.md

@@ -1,4 +1,4 @@
-A ghost of what is coming, in the shape it will take, with North's shimmer in the chart colours passing over it, so
+A ghost of what is coming, in the shape it will take, with North's shimmer passing over it in one quiet grey, so
 nothing jumps when the real content lands.
 
 ## Use it when
@@ -15,16 +15,15 @@ nothing jumps when the real content lands.
 
 ## Anatomy
 
-- A ghost block (`ws-skeleton`): 4 px corners (`--ws-radius-control`), the shimmer for its ground (`--ws-shimmer`:
-  the warm grey #ECE8E4 with a pass of salmon, purple and teal at 300 %), sized where used. Steps: `--line` 12 px
+- A ghost block (`ws-skeleton`): 4 px corners (`--ws-radius-control`), the shimmer (`--ws-shimmer`: the ghost grey
+  #E3DFDB with a lighter pass of the same grey, #F6F3F0, at 300 %; no chart hues), sized where used. Steps: `--line` 12 px
   tall, `--title` 28 px (a title's line), `--button` 120 x 36 with 6 px corners (North's button place, on the grid).
 - Lines: a column 8 px apart (`ws-stack`), full width except the last, two thirds.
 - A card skeleton: the same card (`ws-card`) with ghosts for its head (`ws-skeleton__head`, 20 in), its body
-  (`ws-skeleton__body`) and its band; a tile keeps its tray foot. On the tray (a foot) and in a band the ghosts are
-  built on the hover grey (`--ws-well-hover`), since the shimmer's own grey is the tray's (1.04:1) and vanished there.
-- A chart ghost (`ws-skeleton__chart`): 160 px tall, the bars 4 px apart in a quiet ghost grey (`--ws-well-hover`),
-  with one colour band (salmon, purple, teal) passing over the whole drawing in blend mode colour at 85 %, so each bar
-  takes the band's hue as it crosses it (North's loading chart).
+  (`ws-skeleton__body`) and its band; a tile keeps its tray foot. The ghost grey shows on the tray too (1.13:1, the
+  cream 1.29:1), so a ghost in a foot or a band is the same ghost.
+- A chart ghost (`ws-skeleton__chart`): 160 px tall, the bars 4 px apart, each a ghost under the same shimmer as every
+  other ghost. North's colour band over the drawing is not taken (0.5.1): loaders are one neutral tone.
 
 ## Variants and sizes
 
@@ -38,12 +37,13 @@ nothing jumps when the real content lands.
 ## States
 
 - **Loading** (the only state): the shimmer passes over every ghost every 1.8 s (`--ws-loop-shimmer` on
-  `--ws-ease-shimmer`); the chart's colour band on the same beat.
+  `--ws-ease-shimmer`), the chart's bars included.
 - **Loaded**: the skeleton is removed and the real content takes its place; nothing jumps, since the ghosts use the
   content's own sizes.
-- **Reduced motion**: nothing travels. The ghosts are one still ghost grey (`--ws-well-hover`, North's ghost, the
-  chart ghost's own), never a frozen frame of the sweep, and the chart band is not drawn; still plainly a placeholder.
-- **Dark**: the shimmer and the ghost grey are theme tokens; the band keeps the brand hues.
+- **Reduced motion**: nothing travels. The ghosts are the still ghost grey (`--ws-ghost`, the shimmer's own ground),
+  never a frozen frame of the sweep; still plainly a placeholder.
+- **Dark and palettes**: the ghost and its pass are theme tokens (the night's ghost #273544 with a pass of 7 % ink), so
+  the shimmer is one neutral tone in every theme and palette.
 
 ## Behaviour
 
@@ -75,8 +75,9 @@ The kit's own `Skeleton` takes a `className` for its shape and size directly (he
 
 ## Source
 
-**Derived from**: North's loading (style1.css:1458-1469: the chart-colour shimmer over blocks, the ghost shapes with a
-colour band in blend mode colour, the 116 x 38 button place) and the kit's own `Skeleton`. It replaces the breathing
+**Derived from**: North's loading (style1.css:1458-1469: the shimmer over blocks, the ghost shapes, the 116 x 38
+button place) and the kit's own `Skeleton`. North's sweep in the chart colours and its colour band over the chart are
+not taken: loaders are one quiet grey (Amit, 10 Nov 2026, Decisions). It replaces the breathing
 pulse, which read as blank (1.10:1 on the cream, field evidence S01). **Precedent**: the first product built on the
 system.
 
@@ -98,5 +99,5 @@ system.
 ## Styles
 
 `Skeleton/style.css`, built into `bundle.css` and `fello.css`. The keyframe is the house's `ws-shimmer`. Tokens:
-`--ws-shimmer`, `--ws-loop-shimmer`, `--ws-ease-shimmer`, `--ws-well-hover`, `--ws-chart-under-half`,
-`--ws-chart-past-half`, `--ws-chart-finished`, `--ws-radius-control`, `--ws-radius-row`.
+`--ws-shimmer` (over `--ws-shimmer-ground`), `--ws-ghost`, `--ws-loop-shimmer`, `--ws-ease-shimmer`,
+`--ws-radius-control`, `--ws-radius-row`, `--ws-radius-bar`.

package/design-system/components/Skeleton/preview.html

@@ -30,7 +30,7 @@
   </div>
 
   <div class="ws-stack" style="width: 380px;">
-    <span class="ws-muted">A chart card still loading: the ghost bars take the colour band as it passes</span>
+    <span class="ws-muted">A chart card still loading: each bar a ghost under the same shimmer</span>
     <div class="ws-card ws-card--compound" aria-busy="true">
       <span class="ws-sr">Loading the chart</span>
       <div class="ws-skeleton__head" aria-hidden="true">

package/design-system/components/Skeleton/style.css

@@ -1,22 +1,17 @@
-/* ---- Skeleton: ghost shapes of what is coming, with North's shimmer in the chart colours running over them; sized where used ---- */
-/* A ghost block: the shimmer (the warm grey, a pass of salmon, purple and teal) at 300 %, 1.8 s. It replaces the
-   breathing pulse (ws-working-slow), which read as blank. Under reduced motion it is a still ghost in North's ghost grey
-   (the chart ghost's), never a frozen frame of the sweep: at rest the 300 % gradient showed its pink edge. */
+/* ---- Skeleton: ghost shapes of what is coming, with North's shimmer, one quiet grey, running over them; sized where used ---- */
+/* A ghost block: the shimmer (the ghost grey with a lighter pass of the same grey) at 300 %, 1.8 s. It replaces the
+   breathing pulse (ws-working-slow), which read as blank. Under reduced motion it is the still ghost, the same grey
+   (North's ghost, the chart ghost's), never a frozen frame of the sweep. The ghost shows on the tray too (a card's foot,
+   a band), so it needs no ground of its own there. */
 .ws-skeleton { border-radius: var(--ws-radius-control); background: var(--ws-ghost); }
 .ws-skeleton--line { height: var(--space-sm); }
 .ws-skeleton--title { height: var(--ws-leading-title); }
 /* A button's place (North's 116 x 38 placeholder, on the grid: 120 x 36, 6 px corners). */
 .ws-skeleton--button { width: var(--space-7xl); height: var(--ws-control-h-md); border-radius: var(--ws-radius-row); }
-/* On the tray (a card's foot) and in a band the ghost's grey was the ground's own (1.04:1 on the tray in light, the same
-   grey as the track in dark), so the placeholder vanished: there it is built on the hover grey, with the dark theme's
-   recipe of 14 % salmon, purple and teal passes, on the token's stops (plain to 34 % and from 66 %, so the loop's end frames show no tint). */
-:is(.ws-card__foot, .ws-band) .ws-skeleton { --ws-shimmer: linear-gradient(100deg, var(--ws-well-hover) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 14%, var(--ws-well-hover)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 14%, var(--ws-well-hover)) 50%, color-mix(in srgb, var(--color-stat-positive) 14%, var(--ws-well-hover)) 56%, var(--ws-well-hover) 66% 100%); }
-@media (prefers-reduced-motion: no-preference) { .ws-skeleton { background: var(--ws-shimmer); background-size: 300% 100%; animation: ws-shimmer var(--ws-loop-shimmer) var(--ws-ease-shimmer) infinite; } }
 .ws-skeleton__head { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--ws-card-inset); }
 .ws-skeleton__body { display: flex; flex-direction: column; gap: var(--space-xs); padding: 0 var(--ws-card-inset) var(--space-md); }
-/* A chart still loading: its empty shapes in a quiet ghost grey, and one colour band (salmon, purple, teal) passing
-   over the whole drawing in blend mode colour, so the bars take the band's hue as it crosses them. */
-.ws-skeleton__chart { position: relative; display: flex; align-items: flex-end; gap: var(--space-xxs); height: var(--space-8xl); }
+/* A chart still loading: its empty shapes, each a ghost with the same sweep as every other ghost. North's colour band
+   over the drawing is gone (0.5.1): loaders are one neutral tone, and a neutral band in blend mode colour paints nothing. */
+.ws-skeleton__chart { display: flex; align-items: flex-end; gap: var(--space-xxs); height: var(--space-8xl); }
 .ws-skeleton__chart > * { flex: 1 1 0; min-width: 0; border-radius: var(--ws-radius-bar) var(--ws-radius-bar) 0 0; background: var(--ws-ghost); }
-.ws-skeleton__chart::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 28%, var(--ws-chart-under-half) 40%, var(--ws-chart-past-half) 50%, var(--color-stat-positive) 60%, transparent 72%); background-size: 300% 100%; mix-blend-mode: color; opacity: 0; }
-@media (prefers-reduced-motion: no-preference) { .ws-skeleton__chart::after { opacity: 0.85; animation: ws-shimmer var(--ws-loop-shimmer) var(--ws-ease-shimmer) infinite; } }
+@media (prefers-reduced-motion: no-preference) { :is(.ws-skeleton, .ws-skeleton__chart > *) { background: var(--ws-shimmer); background-size: 300% 100%; animation: ws-shimmer var(--ws-loop-shimmer) var(--ws-ease-shimmer) infinite; } }

package/design-system/components/Starter/README.md

@@ -23,7 +23,7 @@ paste the CSS into the `<style>`, then replace the sample content with the real
   `fello-core.css`, then the styles of each component the page uses (each component's card lists them; this page needs
   `Page`, `PageBar`, `Card`, `Button` and `Well`; the whole `fello.css` is too big to paste). The buttons and the well
   rows need their own blocks: `fello-core.css` holds only their 0.4 look. A plain page links the whole file instead,
-  pinned: `https://brand-kit-site-production.up.railway.app/v/0.5.0/fello.css`.
+  pinned: `https://brand-kit-site-production.up.railway.app/v/0.5.1/fello.css`.
 - `<main class="ws-page">`: the page (see `Page`), Seth's 32 gutter.
 - `PageBar`: the page's 56 px header, its one `h1` (16 / 22 semibold) and a word of context beside it, and its acts
   with the page's one navy primary last.

package/design-system/components/Starter/preview.html

@@ -7,7 +7,7 @@
 <title>Starter</title>
 <!-- In a claude.ai artifact, paste fello-core.css into the <style> below, then the styles of each component you use
      (each component's card lists them): an artifact may load no stylesheet but Google Fonts. On a plain page, link the
-     whole kit instead, pinned: https://brand-kit-site-production.up.railway.app/v/0.5.0/fello.css -->
+     whole kit instead, pinned: https://brand-kit-site-production.up.railway.app/v/0.5.1/fello.css -->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400..700&display=swap">

package/design-system/components/Table/README.md

@@ -81,7 +81,7 @@ a phone fold. This is the whole wide-table pattern; build every records table fr
   stuck columns leave the sliding ones over 100 px, not a sliver. A name that fits keeps its one line.
 - **Empty, no matches**: the same card, a sentence and the act that clears the filter (`__empty`).
 - **Empty, first use**: the same card, a sentence inviting the first record and the act that adds one.
-- **Loading**: a ghost bar per cell in the chart colours' sweep (`__placeholder ws-shimmer`), the head shown at once;
+- **Loading**: a ghost bar per cell under the shimmer (`__placeholder ws-shimmer`), the head shown at once;
   still under reduced motion.
 - **Touch**: the check target, the More act and the row acts reach 40, the sort button 24.
 

package/design-system/components/Table/preview.html

@@ -151,7 +151,7 @@
     </figure>
 
     <div class="ws-stack" style="width: 300px;">
-      <span class="ws-muted">Loading: ghost bars in the chart colours' sweep, the head shown at once</span>
+      <span class="ws-muted">Loading: ghost bars under the shimmer, the head shown at once</span>
       <section class="ws-card ws-table" aria-busy="true" aria-label="Leads, loading">
         <div class="ws-table__scroll">
           <table>

package/design-system/components/Table/style.css

@@ -97,7 +97,7 @@
   .ws-table .ws-table__more { display: inline-flex; }
   .ws-table .ws-table__name { min-width: 40cqi; white-space: normal; }
 }
-/* Loading: a ghost bar in each cell, in the chart colours' sweep (add ws-shimmer), the head shown at once. */
+/* Loading: a ghost bar in each cell under the shimmer (add ws-shimmer), the head shown at once. */
 .ws-table__placeholder { height: calc(var(--space-xs) + var(--space-3xs)); border-radius: var(--ws-radius-bar); background: var(--ws-track); }
 .ws-table__placeholder.ws-shimmer { background: var(--ws-shimmer); background-size: 300% 100%; }
 /* Empty: the same card, a sentence and the act that clears the filter. */

package/design-system/components/TickStrip/README.md

@@ -55,7 +55,7 @@ A share drawn as equal ticks across the whole width: the done ones in one tone,
 - Draw (`--draw`): one 900 ms draw (`--ws-duration-draw`); tick i starts at its share of the first 55% and rises from
   its foot on `--ws-ease-settle`. Set `--i` on each lit tick.
 - Not checked or zero: every tick the track; the figure beside it says so in words (a dash, "Could not check").
-- Loading (`--loading`): the ticks as a still ghost with the chart colours' sweep (`--ws-shimmer`, 1.8 s). The ticks
+- Loading (`--loading`): the ticks as a still ghost with the shimmer passing over them (`--ws-shimmer`, 1.8 s). The ticks
   inside are hidden, so the ghost has the strip's exact shape.
 - Hover (`--hover`, opt in): the tick under the pointer grows to 116% from its foot on `--ws-ease-lift`, its two
   neighbours half as much 4 ms later, the rest dim to 30%. Only with a hovering pointer.