@felloinnovations/brand-kit 0.4.0 → 0.5.0

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

@@ -0,0 +1,112 @@
+A page's main column and its aside, side by side when both fit and stacked when they do not. It measures its own
+width, so it is right in the shell's body, a page, a dialog or a pane.
+
+## Use it when
+
+- A page shows a list or a report and, beside it, the detail of the one thing picked (Seth's checks list and its
+  check drawer).
+- A page needs a column of facts or acts beside its main content (a deal and its next steps).
+- The two parts have different jobs and the aside has a natural width; the main column takes the rest.
+
+## Not for
+
+- A page of like cards: that is a board (`CardBoard`, `.ws-board`).
+- Small cards one, two then four across: `.ws-board--4` (see `Page`).
+- A drawer that covers the page: `Panel` or a `Dialog` drawer.
+- A list and its detail joined into one surface: `ListDetail` (from WP-data).
+
+## Anatomy
+
+- `<div class="ws-split">`: a size container named `ws-split`, its two parts 24 apart (`--ws-gap-group`, Seth's gap
+  between a report and its drawer), tops on one line (nothing stretches).
+- Main (`__main`): takes the width the aside leaves, never under 0 (its content wraps or scrolls inside itself).
+- Aside (`__aside`): 440 wide (`--ws-thing-width`, Seth's drawer). A page that needs another width sets
+  `--ws-split-aside` on the split from a token (North's side columns run 320 to 420).
+- From 60rem of the split's own width the two sit side by side; under it the aside goes under the main column, both
+  the full width, in DOM order (the phone's order is the reading order).
+- `--sticky`: side by side, the aside stays in view while the main column scrolls past it (`position: sticky`), 16
+  under the scroller's top (`--ws-gap-component`), the same gap it had under the bar before it stuck.
+- `--fill`: the split is the rest of a height-bound column (the shell's body, a pane), Seth's report and its check
+  drawer (`301:2011`). Side by side, both parts take its height: the main column scrolls on its own (with 4 px of room
+  at its sides, so a ring on a row's edge is never cut) and the aside runs to the foot, its last part (a `Panel`'s
+  foot, a card's band) on the bottom. In the shell's body the page then ends 24 above the stage's foot, as Seth draws
+  it. Stacked, the split scrolls the two together. Its parent must be a flex column with a height.
+
+## Variants and sizes
+
+| Width of the split | Shows |
+| --- | --- |
+| 60rem and up | Main (the rest) and aside (440) side by side, 24 apart |
+| Under 60rem | Main, then the aside under it, each the full width, 24 apart |
+
+| Class | Height | Use |
+| --- | --- | --- |
+| (default) | Each part its content's | A page that scrolls as a whole |
+| `--sticky` | The aside its own, held in view | A long main column beside a short aside |
+| `--fill` | Both the rest of the column, the main scrolling inside | Seth's report and its drawer, the drawer's acts on the stage foot |
+
+## States
+
+- **Default**: side by side or stacked by width, as above.
+- **Long content**: the main column grows the page; the aside keeps its own height. With `--sticky` it stays in view;
+  with `--fill` the main column scrolls inside its part and the aside's foot stays on the bottom; while rows are
+  hidden below, its last 24 px fade out (a scroll-driven fade, as `ListDetail`'s list), so a cut on a row's edge never
+  reads as the end. The fade lifts at the end, a column that fits shows none, and a keyboard focus inside drops it.
+- **Long words**: they wrap inside their part, never widening it past its column.
+- **No aside**: leave the split out; the main content goes straight in the page.
+- **Loading**: each part shows its own ghosts (`.ws-shimmer`) at the size of what is coming.
+
+## Behaviour
+
+- Order is DOM order at every width: put the part that matters first on a phone first in the markup.
+- No motion of its own; the parts' content settles in. The `--fill` fade follows the scroll, not time, so it is the
+  same under reduced motion.
+- It sizes from its own width, never the window's, so in a 720 px pane it stacks even on a wide screen.
+
+## Content
+
+- The main column holds the page's answer; the aside holds the detail of one picked thing or the page's next acts.
+- The aside's head names what it is the detail of, once.
+
+## Props
+
+| Name | Type | Meaning |
+| --- | --- | --- |
+| `main` | `ReactNode` | The main column |
+| `aside` | `ReactNode` | The aside |
+| `asideWidth` | `string` | A token for `--ws-split-aside`; default `--ws-thing-width` |
+| `sticky` | `boolean` | Keeps the aside in view while the main column scrolls |
+| `fill` | `boolean` | The split is the rest of a height-bound column; the main column scrolls inside it |
+
+## Rules
+
+- **Size from the split, not the window** (K3): it is its own container.
+- **Tops on one line**: the two parts start on the same edge; neither adds a margin.
+- **DOM order is the phone's order**: never reorder the parts for a narrow screen.
+
+## Source
+
+**Derived from**: Seth's Grow report with its check drawer (Figma `301:1630`: report 886, gap 24, drawer 440 in a
+1350 content box), North's side columns (`style1.css` 311, 446, 963, 1036: a chart and a 320 to 420 column, 24 apart)
+and Revenue OS's missing "main plus aside" pattern (Aryan's `.mock-split`, which switched by window and left the main
+column too narrow at 1280). New in 0.5.0, 4 Nov 2026.
+
+## Markup
+
+```html
+<div class="ws-split ws-split--sticky">
+  <div class="ws-split__main">
+    <!-- the report or the list -->
+  </div>
+  <aside class="ws-split__aside" aria-labelledby="split-aside-title">
+    <h2 class="ws-title" id="split-aside-title">Local search</h2>
+    <!-- the detail of the picked thing -->
+  </aside>
+</div>
+```
+
+## Styles
+
+`Split/style.css`. Tokens: `--ws-gap-group`, `--ws-gap-component`, `--ws-thing-width`, `--ws-focus-width`,
+`--ws-focus-offset`, `--ws-ink`; the page may set `--ws-split-aside`. With the shell, Seth's frame is
+`<main class="ws-app-shell__body ws-app-shell__body--wide"><div class="ws-split ws-split--fill">`.

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

@@ -0,0 +1,105 @@
+<!-- @dsCard group="Layout" height=974 -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Split</title>
+<link rel="stylesheet" href="../../tokens.css">
+<link rel="stylesheet" href="../bundle.css">
+</head>
+<body>
+<div class="ws-stage ws-stage--column">
+
+  <div class="ws-stack">
+    <span class="ws-muted">Side by side from 60rem of its own width: the main column takes the rest, the aside 440, 24 apart, tops on one line; --sticky keeps the aside in view</span>
+    <div class="ws-split ws-split--sticky">
+      <div class="ws-split__main ws-stack ws-stack--component">
+        <section class="ws-section-group" aria-labelledby="split-checks">
+          <div class="ws-section-group__head">
+            <div class="ws-section-group__words">
+              <h2 id="split-checks" class="ws-section-group__title">Your AI visibility checks</h2>
+            </div>
+          </div>
+          <ul>
+            <li class="ws-section-group__row"><span class="ws-row-name">Local search</span><span class="ws-figure ws-figure--row">39</span></li>
+            <li class="ws-section-group__row"><span class="ws-row-name">Website</span><span class="ws-figure ws-figure--row">75</span></li>
+            <li class="ws-section-group__row"><span class="ws-row-name">Social</span><span class="ws-figure ws-figure--row">92</span></li>
+            <li class="ws-section-group__row"><span class="ws-row-name">Zillow</span><span class="ws-figure ws-figure--row">100</span></li>
+          </ul>
+        </section>
+        <section class="ws-card ws-card--inset ws-stack" aria-labelledby="split-more">
+          <h2 class="ws-title" id="split-more">Zillow is your strongest</h2>
+          <p class="ws-body">Start with Local search: buyers near you see you in five of nine spots, never in the top three.</p>
+        </section>
+      </div>
+      <aside class="ws-split__aside ws-card ws-card--inset ws-stack ws-stack--loose" aria-labelledby="split-aside">
+        <h2 class="ws-title" id="split-aside">Local search</h2>
+        <p class="ws-body">How often you show up on Google Maps when buyers search near you.</p>
+        <div class="ws-plate ws-stack ws-stack--tight">
+          <span class="ws-muted">Next fix, 1 of 2</span>
+          <span class="ws-section">Name the towns you serve in your Google Business Profile.</span>
+        </div>
+        <div class="ws-cluster">
+          <button type="button" class="ws-btn ws-btn--secondary">Send to my web person</button>
+          <button type="button" class="ws-btn ws-btn--primary">Review the rewrite</button>
+        </div>
+      </aside>
+    </div>
+  </div>
+
+  <div class="ws-stack">
+    <span class="ws-muted">--fill in a height-bound column (here a 280 px frame standing in for the shell's body): both parts take its height, the main column scrolls on its own, the aside's foot sits on the bottom</span>
+    <div style="height: 280px; display: flex; flex-direction: column;">
+      <div class="ws-split ws-split--fill">
+        <div class="ws-split__main">
+          <section class="ws-section-group" aria-labelledby="split-fill-checks">
+            <div class="ws-section-group__head">
+              <div class="ws-section-group__words">
+                <h2 id="split-fill-checks" class="ws-section-group__title">Your AI visibility checks <span class="ws-section-group__count">6 checks</span></h2>
+              </div>
+            </div>
+            <ul>
+              <li class="ws-section-group__row"><span class="ws-row-name">Local search</span><span class="ws-figure ws-figure--row">39</span></li>
+              <li class="ws-section-group__row"><span class="ws-row-name">Website</span><span class="ws-figure ws-figure--row">75</span></li>
+              <li class="ws-section-group__row"><span class="ws-row-name">Social</span><span class="ws-figure ws-figure--row">92</span></li>
+              <li class="ws-section-group__row"><span class="ws-row-name">Zillow</span><span class="ws-figure ws-figure--row">100</span></li>
+              <li class="ws-section-group__row"><span class="ws-row-name">Google profile</span><span class="ws-muted">Could not check</span></li>
+              <li class="ws-section-group__row"><span class="ws-row-name">AI answers</span><span class="ws-muted">Could not check</span></li>
+              <li class="ws-section-group__row"><span class="ws-row-name">Reviews</span><span class="ws-figure ws-figure--row">88</span></li>
+            </ul>
+          </section>
+        </div>
+        <aside class="ws-split__aside ws-card ws-card--compound" aria-labelledby="split-fill-aside">
+          <header class="ws-head"><div>
+            <h2 class="ws-title" id="split-fill-aside">Local search</h2>
+            <p class="ws-body ws-card__line">How often you show up on Google Maps when buyers search near you.</p>
+          </div></header>
+          <footer class="ws-band">
+            <div class="ws-band__words">
+              <p class="ws-band__title">Next fix, 1 of 2</p>
+              <p class="ws-band__how">Name the towns you serve</p>
+            </div>
+            <button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Review the rewrite</button>
+          </footer>
+        </aside>
+      </div>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="width: 720px; max-width: 100%;">
+    <span class="ws-muted">Under 60rem (here a 720 px column): the aside goes under the main column, both the full width, in DOM order</span>
+    <div class="ws-split">
+      <section class="ws-split__main ws-card ws-card--inset ws-stack" aria-labelledby="split-narrow-main">
+        <h2 class="ws-title" id="split-narrow-main">Three offers wait on you</h2>
+        <p class="ws-body">The oldest has waited two days. Call Dana Alvarez first, then Marco Diaz.</p>
+      </section>
+      <aside class="ws-split__aside ws-card ws-card--inset ws-stack" aria-labelledby="split-narrow-aside">
+        <h2 class="ws-section" id="split-narrow-aside">Dana Alvarez</h2>
+        <p class="ws-body">Offer out Monday on 14 Elm Street, a long label that wraps inside the aside rather than widening it past its column.</p>
+      </aside>
+    </div>
+  </div>
+
+</div>
+</body>
+</html>

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

@@ -0,0 +1,30 @@
+/* ---- Split: a page's main column and its aside (a check's drawer, a list's detail, a column of facts) side by side, 24
+   apart, tops on one line; the aside 440 wide (Seth's drawer, --ws-thing-width) unless the page sets --ws-split-aside.
+   It measures itself: under 60rem of its own width the two stack in DOM order, each the full width. --sticky keeps the
+   aside in view while the main column scrolls past it; --fill makes the split the rest of a height-bound column. ---- */
+.ws-split { container: ws-split / inline-size; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--ws-gap-group); }
+.ws-split > * { flex: 1 1 100%; min-width: 0; }
+/* Fill (Seth's report and its drawer, 301:2011): the split takes the rest of a height-bound column (the shell's body).
+   Side by side, both parts take its height: the main column scrolls on its own (4 px of room at its sides, so a ring on
+   a row's edge is never cut; its scroll edges stay on the aside's) and the aside runs to the foot, its last part (a
+   Panel's or a card's foot) on the bottom. Stacked, the split scrolls the two together. */
+.ws-split--fill { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ws-ink) 18%, transparent) transparent; }
+@container ws-split (min-width: 60rem) {
+  .ws-split > .ws-split__main { flex: 1 1 0; }
+  .ws-split > .ws-split__aside { flex: 0 0 var(--ws-split-aside, var(--ws-thing-width)); }
+  .ws-split--sticky > .ws-split__aside { position: sticky; top: var(--ws-gap-component); }
+  .ws-split--fill > :is(.ws-split__main, .ws-split__aside) { align-self: stretch; max-height: 100%; min-height: 0; }
+  .ws-split--fill > .ws-split__main { --ws-split-room: calc(var(--ws-focus-width) + var(--ws-focus-offset)); margin-inline: calc(var(--ws-split-room) * -1); padding-inline: var(--ws-split-room); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ws-ink) 18%, transparent) transparent; }
+  .ws-split--fill > .ws-split__aside { overflow-y: auto; }
+  .ws-split--fill > .ws-split__aside > :last-child:not(:first-child) { margin-top: auto; }
+}
+/* The main column shows that it holds more (a cut on a row's edge reads as the list's end): while rows are hidden below,
+   its last 24 px fade out, and the fade lifts at the end. Scroll-driven, as ListDetail's list, so a column that fits
+   shows none and nothing moves under reduced motion. A keyboard focus inside drops it, so a ring is never faded. */
+@supports (animation-timeline: scroll()) {
+  @container ws-split (min-width: 60rem) {
+    .ws-split--fill > .ws-split__main { mask-image: linear-gradient(to top, transparent, var(--ws-mask) var(--space-lg)); mask-size: 100% calc(100% + var(--space-lg)); mask-repeat: no-repeat; animation: ws-split-end linear both; animation-timeline: scroll(self block); animation-range: calc(100% - var(--space-lg)) 100%; }
+    .ws-split--fill > .ws-split__main:is(:focus-visible, :has(:focus-visible)) { mask-image: none; }
+  }
+}
+@keyframes ws-split-end { from { mask-position: 0 calc(var(--space-lg) * -1); } to { mask-position: 0 0; } }

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

@@ -5,8 +5,8 @@ paste the CSS into the `<style>`, then replace the sample content with the real
 ## Use it when
 
 - Starting any page on the system: a claude.ai artifact, a mockup, a one-off HTML page, a report or a dashboard.
-- Starting from markup only: every class in it is the kit's (`fello-core.css` plus the `Card` styles), so the page needs no
-  CSS of its own.
+- Starting from markup only: every class in it is the kit's (`fello-core.css` plus the `Page`, `PageBar`, `Card`,
+  `Button` and `Well` blocks), so the page needs no CSS of its own.
 
 ## Not for
 
@@ -20,11 +20,13 @@ paste the CSS into the `<style>`, then replace the sample content with the real
 - `<head>`: charset, viewport, a title, the Google Fonts link for Instrument Sans (fello.css also imports it; the link
   loads it sooner), and one `<style>` holding the kit's CSS.
 - In a claude.ai artifact the CSS must be inlined (an artifact may load no stylesheet but Google Fonts): paste
-  `fello-core.css`, then the styles of each component the page uses (each component's card lists them; the whole
-  `fello.css` is too big to paste). A plain page links the whole file instead, pinned:
-  `https://brand-kit-site-production.up.railway.app/v/0.4.0/fello.css`.
-- `<main class="ws-page">`: the page (see `Page`).
-- `PageBar`: the page's one `h1`, one line, and its acts with the page's one navy primary last.
+  `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`.
+- `<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.
 - `.ws-board` with two `Card`s, each `ws-card ws-card--compound`: a head (`.ws-head`, the 22 px title that answers the
   question and one line), a body (`.ws-card__body`), and a footer band (`.ws-band`) whose act is secondary, since the
   page's one primary is in the PageBar.
@@ -34,7 +36,7 @@ paste the CSS into the `<style>`, then replace the sample content with the real
 
 - **Wide**: the two cards side by side, each up to 556.
 - **Narrow** (under 976 of content): one column, the first card first.
-- **Arriving**: the cards rise in, 30 ms apart; still with reduced motion.
+- **Arriving**: the cards settle in (`ws-settle`, `--ws-i` 0 and 1), 22 ms apart; still with reduced motion.
 
 ## Behaviour
 
@@ -57,4 +59,14 @@ paste the CSS into the `<style>`, then replace the sample content with the real
 ## Source
 
 **Derived from**: `Page`, `PageBar`, `CardBoard` and `Card` in this catalog, and the first product's dashboard
-arrangement (a page bar, then tiles, then cards). Added 27 Oct 2026 so a page is built from markup only.
+arrangement (a page bar, then tiles, then cards). Added 27 Oct 2026 so a page is built from markup only; brought to
+0.5.0 (Seth's thread header and gutter) 4 Nov 2026.
+
+## Markup
+
+The whole of `preview.html` is the markup to copy: the head, the one `<style>`, the page, its bar and the board.
+
+## Styles
+
+Starter has no `style.css`: it is `fello-core.css` (tokens and the house) plus the `Page`, `PageBar`, `Card`,
+`Button` and `Well` blocks. Write no other CSS. A component added to the page brings its own block (its card says which).

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

@@ -7,12 +7,12 @@
 <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.4.0/fello.css -->
+     whole kit instead, pinned: https://brand-kit-site-production.up.railway.app/v/0.5.0/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">
 <style>
-/* fello-core.css here, then each used component's styles (this page: PageBar, Card). Write no other CSS. */
+/* fello-core.css here, then each used component's styles (this page: Page, PageBar, Card, Button, Well). Write no other CSS. */
 </style>
 </head>
 <body>
@@ -21,7 +21,7 @@
   <header class="ws-page-bar">
     <div class="ws-page-bar__words">
       <h1 class="ws-page-bar__title">Calls this month</h1>
-      <p class="ws-body">Your team's calls and who to call next, since Oct 1.</p>
+      <span class="ws-page-bar__context">Your team's calls since Oct 1</span>
     </div>
     <div class="ws-page-bar__acts">
       <button type="button" class="ws-btn ws-btn--secondary">Share</button>
@@ -31,7 +31,7 @@
 
   <div class="ws-board">
 
-    <section class="ws-card ws-card--compound ws-rise" aria-labelledby="starter-pace">
+    <section class="ws-card ws-card--compound ws-settle" style="--ws-i: 0;" aria-labelledby="starter-pace">
       <header class="ws-head">
         <div>
           <h2 class="ws-title" id="starter-pace">On pace for 40 calls by Oct 22</h2>
@@ -56,7 +56,7 @@
       </footer>
     </section>
 
-    <section class="ws-card ws-card--compound ws-rise" style="animation-delay: 30ms;" aria-labelledby="starter-waiting">
+    <section class="ws-card ws-card--compound ws-settle" style="--ws-i: 1;" aria-labelledby="starter-waiting">
       <header class="ws-head">
         <div>
           <h2 class="ws-title" id="starter-waiting">Three leads are waiting</h2>

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

@@ -1,6 +1,6 @@
 The kit's marketing piece: for a public page, never a product screen.
 
-A single figure with its label, built to be a marketing proof point, three of them in a row.
+A single figure with its label, built to be a marketing proof point, three of them in a strip.
 
 ## Use it when
 
@@ -11,87 +11,108 @@ A single figure with its label, built to be a marketing proof point, three of th
 
 ## Not for
 
-- Any product screen: use `StatTiles` or `GoalTicks`, which carry the product's 40px and 72px
-  figure sizes and its "a card whose data does not exist is left out" rule instead of a dash.
-- A number that changes and should be compared to a past value: that is a `ChangeChip` beside a figure, a
-  different idea than this component carries.
+- Any product screen: use `StatTiles` or `GoalTicks`, which carry the product's figure sizes and its "a card whose
+  data does not exist is left out" rule instead of a dash.
+- A number that should be compared to a past value: that is a change chip beside a figure.
 - Several related numbers that need their own chart: a bar or goal chart, not three `Stat`s side by side.
 
 ## Anatomy
 
-- Label: `--font-size-3xs` (10px), semibold, uppercase, `--letter-spacing-overline` (1.2px) tracking, `--color-text-muted`.
-- Value: 28px semibold, 1.05 line height, tabular numerals, `--color-text-heading` by default (see Rules for why
-  28px is not a token step).
-- Note: `--font-size-2xs` (12px), 16px line height, `--color-text-muted`, `--space-xxs` (4px) below the value.
-- Gap from label to value: `--space-xxs` (4px).
+- Label (`__label`): 12/16 (`--font-size-2xs`), semibold, uppercase, `--letter-spacing-overline` (1.2px),
+  `--color-text-muted`.
+- Value (`__value`): `--space-xxs` (4px) under the label, 28/32 (`--ws-text-figure-row`, `--ws-leading-figure-row`)
+  semibold, tabular numerals, `--color-text-heading` by default.
+- Note (`__note`): `--space-xxs` under the value, 12/16 `--color-text-muted`.
+- Strip (`.ws-stat-strip`): the stats `--space-2xl` (40px) apart in a row, wrapping with `--space-lg` (24px) between
+  rows when they do not fit.
 
 ## Variants and sizes
 
-One size. Four tones, set by the `tone` prop:
+One size. Four tones:
 
 | Tone | Colour | Use |
 | --- | --- | --- |
 | `default` | `--color-text-heading` (navy) | the ordinary case |
 | `positive` | `--color-stat-positive` (teal) | a number that is good news |
-| `brand` | `--color-brand-salmon` | a number that should draw the eye |
+| `brand` | `--color-text-brand-strong` (salmon's word step) | a number that should draw the eye |
 | `muted` | `--color-text-muted` | a secondary or softer number beside a stronger one |
 
+Classes: the default is the bare `ws-stat__value`; the tones are `ws-stat__value--positive`, `--brand` and `--muted`.
+`ws-stat__value--none` is the no-data state (muted, an en dash), not a tone.
+
 ## States
 
-- **Value (default):** the number, in its tone, as above.
-- **Pending:** a shimmering block takes the value's place, sized to roughly match a number (29px tall, 80px
-  wide, `--color-gray-2`), never a zero. A screen reader hears "Loading" from an `sr-only` span. This is the
-  state to use while a real source is still answering.
-- **No data (`value: null`):** an en dash in `--color-gray-5`, with "No data" read to a screen reader. The kit's
-  own doc comment draws the line sharply: "A zero is a claim about the business that may be false; an X reads as
-  'this broke'; a dash reads as 'nothing here yet', which is the only true one." This is not the pending state:
-  it means nothing is wired up at all.
-- **Hover / focus / selected / pressed:** not applicable; `Stat` renders no interactive element.
-- **Disabled / error:** not applicable.
+- **Value (default):** the number, in its tone.
+- **Pending:** a ghost the size of a number (80 by 32, `--ws-radius-row`) under the house shimmer (`ws-shimmer`), never a
+  zero. It is the figure's own height, so nothing shifts when the number lands. A screen reader hears "Loading".
+  Under reduced motion it is the still ghost.
+- **No data (`value: null`):** an en dash in `--color-text-muted`, with "No data" read to a screen reader. "A zero is a
+  claim about the business that may be false; an X reads as 'this broke'; a dash reads as 'nothing here yet', which is
+  the only true one." This is not pending: it means nothing is wired up at all.
+- **Hover / focus / selected / pressed / disabled / error:** not applicable; `Stat` renders nothing interactive.
 - **Long label:** the label wraps; the value's size does not change to fit.
-- **Narrow:** `min-w-0` on the outer element lets the value truncate its container's width rather than overflow a
-  tight column.
+- **Narrow:** the strip wraps, so each stat keeps its words on its own lines instead of crushing into a third of a phone.
 
 ## Behaviour
 
 - Keyboard: nothing to focus; this is read-only content.
 - Pointer / touch: no interaction.
-- Motion: the pending block pulses on `animate-pulse`, dropped under `prefers-reduced-motion: reduce` in favour of
-  a still block (`motion-reduce:animate-none`).
+- Motion: the pending shimmer sweeps over 1.8s (`--ws-loop-shimmer`), only under `prefers-reduced-motion: no-preference`.
 
 ## Content
 
-- Label: short, uppercase by the component itself, so write it in sentence case in code ("Appointments booked").
+- Label: short, written in sentence case ("Appointments booked"); the component shows it uppercase.
 - Value: the real number, pre-formatted (with its "%", "$" or comma) by the caller; `Stat` does not format it.
 - Note: one short line of context ("Last 30 days, across the team"), optional.
-- No em dashes; the "no data" mark is an en dash, drawn by the component, not typed.
+- No em dashes; the "no data" mark is an en dash, drawn by the component.
 
 ## Props
 
+The React `Stat` (`@felloinnovations/brand-kit`) renders this with Tailwind utilities on the same tokens.
+
 | Name | Type | Meaning |
 | --- | --- | --- |
 | `label` | `string` | the small uppercase caption |
 | `value` | `string \| null` | the figure; `null` means no source is connected, not zero |
 | `note` | `string \| null` | optional context line under the value |
 | `tone` | `'default' \| 'positive' \| 'brand' \| 'muted'` | the value's colour, default `default` |
-| `pending` | `boolean` | shows the shimmering placeholder instead of `value` |
+| `pending` | `boolean` | shows the shimmer ghost instead of `value` |
 
 ## Rules
 
-- "A zero is a claim about the business that may be false; an X reads as 'this broke'; a dash reads as 'nothing
-  here yet', which is the only true one." (`dist/index.d.ts`, doc comment on `StatProps`.)
-- "null means no source is connected. It does not mean zero." (same doc comment, on the `value` field.)
-- **Contradiction found, reported rather than resolved:** the kit's own `AGENTS.md` states the house rule "Never
-  write a raw px font-size. There is a token for every step," yet `Stat`'s own source writes the value at a literal
-  `text-[28px]` and sizes its pending placeholder at literal `h-[29px] w-20`, none of which match a step in
-  `tokens/tokens.md` (the nearest are `--font-size-2xl` at 26px and `--font-size-3xl` at 40px). fello.css keeps the
-  kit's actual 28px value rather than rounding it to a step, since the brief asks for the kit's values exactly and code
-  is truth, but writes it as a calc on the 4px grid (`.ws-stat__value`: `calc(var(--space-lg) + var(--space-xxs))`;
-  the pending block 29 by 80, `.ws-stat__pending`); the mismatch is reported here, not silently fixed.
-- `--color-feedback-*` and `--color-stat-positive` are themselves flagged provisional in `AGENTS.md`: "inherited
-  from the HubSpot boilerplate, awaiting design." `positive` carries this caveat along with it.
+- "null means no source is connected. It does not mean zero." (`dist/index.d.ts`, doc comment on `value`.)
+- **The figure is a type step now** (D6, 4 Nov 2026): 28/32, the kit's row figure. It was a 28px calc with a 1.05
+  line height, and the React export drew 26px; both are 28/32 now.
+- **Brand takes salmon's word step** (D2): salmon itself is 2.7:1 on white, under the 3:1 a 28px figure needs.
+- **Labels are 12px** (`06-sizing-profiles.md`, public web: "meta, labels 12 to 14"); they were 10px.
+- **Pending is the shimmer** (D7, North): it was a grey block on the house pulse.
+- The strip wraps (4 Nov 2026): at 320px the three stats were 74px each and their labels and values ran past their boxes.
+- `--color-stat-positive` is still flagged provisional in `AGENTS.md`.
 
 ## Source
 
-**Derived from**: the kit's own `Stat` component, its doc comments on null-versus-zero data and pending states, and
-the house rule that every size is a token. **Precedent**: marketing pages only; no product screen uses it.
+**Derived from**: the kit's own `Stat`, its doc comments on null versus zero and pending, the type steps (D6), North's
+loading shimmer (D7), the public web profile and the geometry check at 320. **Precedent**: marketing pages only.
+
+## Markup
+
+```html
+<div class="ws-stat-strip">
+  <div class="ws-stat">
+    <div class="ws-stat__label">Appointments booked</div>
+    <div class="ws-stat__value ws-stat__value--positive">214</div>
+    <div class="ws-stat__note">Last 30 days, across the team</div>
+  </div>
+  <div class="ws-stat">
+    <div class="ws-stat__label">Calls this week</div>
+    <div class="ws-stat__value" aria-busy="true"><span class="ws-stat__pending ws-shimmer"><span class="ws-sr">Loading</span></span></div>
+  </div>
+  <div class="ws-stat">
+    <div class="ws-stat__label">Profile views</div>
+    <div class="ws-stat__value ws-stat__value--none"><span aria-hidden="true">&ndash;</span><span class="ws-sr">No data</span></div>
+    <div class="ws-stat__note">No source connected yet</div>
+  </div>
+</div>
+```
+
+Styles: the `Stat` block (`components/Stat/style.css`); `ws-shimmer` and `ws-sr` are in `fello-core.css`.

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

@@ -1,6 +1,6 @@
 <!-- @dsCard group="Marketing" height=247 -->
 <!doctype html>
-<html>
+<html lang="en">
 <head>
 <meta charset="utf-8">
 <title>Stat</title>
@@ -20,8 +20,8 @@
       </div>
       <div class="ws-stat">
         <div class="ws-stat__label">Calls this week</div>
-        <div class="ws-stat__value ws-working" aria-busy="true">
-          <span class="ws-stat__pending"><span class="ws-sr">Loading</span></span>
+        <div class="ws-stat__value" aria-busy="true">
+          <span class="ws-stat__pending ws-shimmer"><span class="ws-sr">Loading</span></span>
         </div>
         <div class="ws-stat__note">Still counting Monday's calls</div>
       </div>

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

@@ -0,0 +1,15 @@
+/* ---- Stat: the kit's marketing figure, its label above and a note under, three to a strip that wraps on a phone ---- */
+.ws-stat-strip { display: flex; flex-wrap: wrap; gap: var(--space-lg) var(--space-2xl); }
+.ws-stat { min-width: 0; }
+.ws-stat__label { font-size: var(--font-size-2xs); line-height: var(--space-md); font-weight: 600; text-transform: uppercase; letter-spacing: var(--letter-spacing-overline); color: var(--color-text-muted); }
+/* The figure is the kit's 28 / 32 row step (D6), semibold because it is a marketing heading. */
+.ws-stat__value { margin-top: var(--space-xxs); font-size: var(--ws-text-figure-row); line-height: var(--ws-leading-figure-row); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text-heading); }
+.ws-stat__value--positive { color: var(--color-stat-positive); }
+/* Salmon itself is 2.7:1 on white, under the 3:1 a 28 px figure needs; its word step carries the tone. */
+.ws-stat__value--brand { color: var(--color-text-brand-strong); }
+.ws-stat__value--muted, .ws-stat__value--none { color: var(--color-text-muted); }
+/* Pending: the North shimmer over a ghost the size of a number, never a zero. Same height as the figure, so nothing shifts. */
+.ws-stat__pending { display: block; height: var(--ws-leading-figure-row); width: var(--space-5xl); border-radius: var(--ws-radius-row); }
+/* Markup from before 0.5.0 (no ws-shimmer) still shows its ghost. */
+.ws-stat__pending:not(.ws-shimmer) { background: var(--ws-track); }
+.ws-stat__note { margin-top: var(--space-xxs); font-size: var(--font-size-2xs); line-height: var(--space-md); color: var(--color-text-muted); }