@felloinnovations/brand-kit 0.4.0 → 0.5.1

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

@@ -1,81 +1,93 @@
-A thin trail of links above a deep page, saying how it was reached and letting a person step back up it.
+A thin trail of links above a deep page, saying how it was reached and letting a person step back up it. Seth's North
+crumbs: the trail is the bar's name for the page.
 
 ## Use it when
 
-- A page sits several levels under its section (a listing under a pipeline under a sales app) and the person benefits from
-  a way back up, not just "Back".
-- `AppShell` is in use and a page is more than two levels under one of its nav rows.
-- A detail view wants to confirm what it is a detail of without repeating a full header.
+- A page sits a few levels under its section (a showing under a lead under the pipeline) and a way back up helps.
+- `AppShell`'s bar names the page: the crumbs sit at the bar's left, on the content's 32 px edge.
+- A detail page wants to say what it is the detail of without a second header.
 
 ## Not for
 
-- A shallow product (`AppShell`'s own nav already shows where you are): a page one level under its section needs no trail,
-  just the nav row lit and the page's own title.
-- Moving sideways between views of the same thing: use `Tabs` or `Segmented`.
-- The current page's own title: the breadcrumb's last item names it but is not a replacement for the page's `ws-title`.
+- A page one level under its nav row: the row is lit and the bar names the page.
+- Moving sideways between views of the same thing: `Tabs` or `Segmented`.
 
 ## Anatomy
 
-- Type: 13 px (`--ws-text-meta`), one line, no wrapping.
-- A link: `--color-text-interactive` (mid blue), no underline at rest, underlined on hover.
-- A chevron: 12 px, `--color-text-muted`, between every pair of items.
-- The current item: `--color-text-heading` (navy), medium weight, not a link, marked `aria-current="page"`.
-- Truncation: past four levels, the levels between the first and the last two collapse into one ellipsis item; each
-  individual label beyond about 24 characters truncates with an ellipsis and keeps its full words in the native `title`
-  attribute.
+- Type: 14 / 20 (`--ws-text-body`, Seth's 14 px crumbs), one line, never wrapping.
+- A link: the body grey (`--color-text-body`), no underline; its hover box is 28 tall (4 above and below, 6 at the
+  sides) and bleeds 6 past its words, so the words stay on the column's edge (Seth's rule A3).
+- Between items: a "/" in muted (`__sep`, `aria-hidden`), 8 from each side. The 0.4 chevron (`__chevron`, 12 px) still
+  draws.
+- The current page (`__current`): navy, medium, not a link, `aria-current="page"`.
+- The folded middle (`__ellipsis`): a 24 px act that opens the hidden levels in a `Menu`; its box bleeds 7 past the
+  "..." on each side, so the trail keeps its 8 px gaps.
+- Giving way: the root crumb never shrinks, the middle ones truncate, the current page gives way first (three times as
+  fast); each name that can truncate carries its full words in `title`. A crumb is at most 160 wide.
 
 ## Variants and sizes
 
 | Variant | When |
 | --- | --- |
 | Full trail | Four levels or fewer |
-| Collapsed | Over four levels: first item, an ellipsis item (a button that reveals the hidden levels, or itself a menu), the remaining levels up to the current one |
+| Collapsed | Over four: the root, the ellipsis act, then the last levels up to the current page |
+| Phone | The parent and the current page, the ellipsis standing in for the rest above |
 
 ## States
 
-- **Default**: as above.
-- **Hover** (a link): underline.
-- **Focus**: the kit's `--shadow-focus-ring` on the focused link or the ellipsis button.
-- **Current**: navy, not a link, `aria-current="page"`.
-- **Long label**: truncates with an ellipsis, full words in `title`; never wraps to a second line.
-- **Narrow (phone)**: shows only the immediate parent and the current item, with the ellipsis standing in for everything
-  above it, so the trail never runs off the screen's edge.
+- **Hover** (pointers that hover): Seth's navy wash (`--ws-hover-strong`, 6%) on the link's 4 px corners, its words navy.
+- **Focus**: the house's 2 px navy ring drawn inside the link's 28 px hover box (and the ellipsis's), so it never
+  runs over the "/" beside it.
+- **Current**: navy, never responds to the pointer.
+- **Long name**: truncates with an ellipsis, its full words in `title`.
+- **Touch**: every link is 28 tall and the ellipsis 24 by 24, so words that act clear the 24 px floor.
 
 ## Behaviour
 
-- Keyboard: links are real `<a>`s in Tab order; the ellipsis, if interactive, is a real `<button>` that opens a small
-  `Menu` of the hidden levels.
-- Pointer: hover underlines a link; the current item never responds to the pointer.
-- Touch: a link's tap target expands to the 24 px floor for words that act, same as `Button`'s `link` variant.
-- Motion: none; it is a static trail, not an animated piece.
+- Keyboard: links are real `<a>`s; the ellipsis is a real `<button>` that opens a `Menu` of the hidden levels.
+- Motion: the hover wash eases in over 200 ms.
 
 ## Content
 
-- Each level's words are the thing's own name or the section's name, sentence case, no trailing punctuation.
-- No em dashes; levels are separated by the chevron mark only, never a slash or a dash in the text.
-- The current item repeats the page's title exactly, once, so searching the page for its name still finds it in one
-  place in spirit even though the breadcrumb and the title are necessarily two places on the screen for navigation's sake.
+- Each level is the thing's own name or the section's, sentence case, no punctuation of its own.
+- The current item repeats the page's name exactly.
+- No em dashes.
 
 ## Props
 
 | Name | Type | Meaning |
 | --- | --- | --- |
-| `items` | `{ label, href }[]` | Every level from the root to the parent of the current page |
-| `current` | `string` | The current page's own label, rendered last and unlinked |
-| `collapseAfter` | `number` | How many levels show before collapsing the middle into an ellipsis, default 4 |
+| `items` | `{ label, href }[]` | Every level from the root to the current page's parent |
+| `current` | `string` | The current page's name, last and unlinked |
+| `collapseAfter` | `number` | Levels shown before the middle folds, default 4 |
 
 ## Rules
 
-- **Links are mid blue, the current item is navy**: the same pairing as every other link-versus-heading distinction in
-  the system (`color-text-interactive` for "goes somewhere", `color-text-heading` for "where you are"), never a third
-  colour invented for this piece.
-- **13 px meta size**, the same size used for a header's second word and a band's "how" line, so a breadcrumb never
-  competes with the 22 px card title or the 26 px page headline above it.
-- **A number never truncates; a name does**, matching the system's general truncation rule (`04-type.md`).
+- **The current page is navy, the rest the body grey**: Seth's crumbs, links in words not colour.
+- **One line**: a crumb truncates, the trail never wraps or scrolls.
+- **A number never truncates; a name does** (`04-type.md`).
 
 ## Source
 
-**Derived from**: `--ws-text-meta` (13 px, the same size as a card header's second word and the band's "how" line),
-`color-text-interactive` for links, and the truncation and long-label rules in `04-type.md`. **Precedent**: an
-intentional addition decided from the system, 26 Oct 2026 (the first product built on the system reaches its pages
-through a chat and a page flyout, not a trail).
+**Derived from**: Seth's North crumbs (`style1.css` 791 to 796: 14 / 17 `#545454`, gap 8, "/" separators, the current
+page navy 500, hover boxes `4 6` bled `-6`, a navy wash) and the geometry check (4 Nov 2026: the root "Leads" truncated
+first, to "Le...", and the ellipsis was 13 wide on touch). **Precedent**: an intentional addition decided from the
+system, 26 Oct 2026.
+
+## Markup
+
+```html
+<nav class="ws-breadcrumb" aria-label="Breadcrumb">
+  <a href="/leads">Leads</a>
+  <span class="ws-breadcrumb__sep" aria-hidden="true">/</span>
+  <a href="/leads/pipeline">Pipeline</a>
+  <span class="ws-breadcrumb__sep" aria-hidden="true">/</span>
+  <span class="ws-breadcrumb__current" aria-current="page">Priya Nair</span>
+</nav>
+```
+
+## Styles
+
+`Breadcrumb/style.css`. Tokens: `--ws-text-body`, `--ws-leading-row`, `--space-xs`, `--space-xxs`,
+`--space-xxs-plus`, `--ws-line`, `--space-lg`, `--space-8xl`, `--ws-radius-control`, `--ws-hover-strong`, `--ws-focus-width`, `--ws-icon-sm`,
+`--color-text-body`, `--color-text-heading`, `--color-text-muted`.

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Navigation" height=200 -->
+<!-- @dsCard group="Navigation" height=252 -->
 <!doctype html>
 <html>
 <head>
@@ -8,39 +8,39 @@
 <link rel="stylesheet" href="../bundle.css">
 </head>
 <body>
-<div class="ws-stage ws-stage--grey ws-stage--column" style="align-items: flex-start; gap: var(--ws-gap-component);">
+<div class="ws-stage ws-stage--column">
 
-  <div class="ws-stack" style="max-width: 420px;">
-    <span class="ws-muted">3 levels</span>
+  <div class="ws-stack">
+    <span class="ws-muted">Three levels: the links in the body grey, a muted slash between, the current page navy</span>
     <nav class="ws-breadcrumb" aria-label="Breadcrumb">
       <a href="#" onclick="return false;">Leads</a>
-      <svg class="ws-breadcrumb__chevron" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 2.5l3 3.5-3 3.5"/></svg>
+      <span class="ws-breadcrumb__sep" aria-hidden="true">/</span>
       <a href="#" onclick="return false;">Pipeline</a>
-      <svg class="ws-breadcrumb__chevron" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 2.5l3 3.5-3 3.5"/></svg>
+      <span class="ws-breadcrumb__sep" aria-hidden="true">/</span>
       <span class="ws-breadcrumb__current" aria-current="page">Priya Nair</span>
     </nav>
   </div>
 
-  <div class="ws-stack" style="max-width: 420px;">
-    <span class="ws-muted">6 levels, collapsed: the middle folds into an ellipsis item</span>
+  <div class="ws-stack">
+    <span class="ws-muted">Six levels, collapsed: the middle folds into one act that opens them in a menu</span>
     <nav class="ws-breadcrumb" aria-label="Breadcrumb">
       <a href="#" onclick="return false;">Leads</a>
-      <svg class="ws-breadcrumb__chevron" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 2.5l3 3.5-3 3.5"/></svg>
-      <button type="button" class="ws-act ws-breadcrumb__ellipsis" aria-label="Show the hidden levels" title="Pipeline, North region, Qualified">&hellip;</button>
-      <svg class="ws-breadcrumb__chevron" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 2.5l3 3.5-3 3.5"/></svg>
+      <span class="ws-breadcrumb__sep" aria-hidden="true">/</span>
+      <button type="button" class="ws-act ws-breadcrumb__ellipsis" aria-label="Show the hidden levels: Pipeline, North region, Qualified">&hellip;</button>
+      <span class="ws-breadcrumb__sep" aria-hidden="true">/</span>
       <a href="#" onclick="return false;">Priya Nair</a>
-      <svg class="ws-breadcrumb__chevron" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 2.5l3 3.5-3 3.5"/></svg>
+      <span class="ws-breadcrumb__sep" aria-hidden="true">/</span>
       <span class="ws-breadcrumb__current" aria-current="page">Showing</span>
     </nav>
   </div>
 
-  <div class="ws-stack" style="max-width: 420px;">
-    <span class="ws-muted">A long name truncating with an ellipsis, the full words in the title</span>
+  <div class="ws-stack" style="width: 420px; max-width: 100%;">
+    <span class="ws-muted">Long names in a 420 px column: the root keeps its word, the current page gives way first, each full name in its title</span>
     <nav class="ws-breadcrumb" aria-label="Breadcrumb">
       <a href="#" onclick="return false;">Leads</a>
-      <svg class="ws-breadcrumb__chevron" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 2.5l3 3.5-3 3.5"/></svg>
+      <span class="ws-breadcrumb__sep" aria-hidden="true">/</span>
       <a href="#" title="North region, spring campaign" onclick="return false;">North region, spring campaign</a>
-      <svg class="ws-breadcrumb__chevron" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 2.5l3 3.5-3 3.5"/></svg>
+      <span class="ws-breadcrumb__sep" aria-hidden="true">/</span>
       <span class="ws-breadcrumb__current" aria-current="page" title="Priya Nair, referred by Dana Alvarez last Tuesday">Priya Nair, referred by Dana Alvarez last Tuesday</span>
     </nav>
   </div>

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

@@ -0,0 +1,17 @@
+/* ---- Breadcrumb: where a page sits, Seth's North crumbs (D1): 14 px words in the body grey, a muted "/" between, the
+   current page navy medium; one line. The root crumb never shrinks, the current page gives way first, every link's
+   hover box is 28 tall and bleeds 6 past its words so the words stay on the column's edge. ---- */
+.ws-breadcrumb { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; font-size: var(--ws-text-body); line-height: var(--ws-leading-row); color: var(--color-text-body); white-space: nowrap; }
+.ws-breadcrumb a { flex: 0 1 auto; min-width: 0; max-width: var(--space-8xl); overflow: hidden; text-overflow: ellipsis; margin-inline: calc(var(--space-xxs-plus) * -1); padding: var(--space-xxs) var(--space-xxs-plus); border-radius: var(--ws-radius-control); color: inherit; text-decoration: none; }
+.ws-breadcrumb > a:first-child { flex-shrink: 0; }
+@media (hover: hover) { .ws-breadcrumb a:hover { background: var(--ws-hover-strong); color: var(--color-text-heading); } }
+/* The ring goes inside the hover box: outside it would run 10 past the words, over the "/" 8 away. */
+.ws-breadcrumb :is(a, .ws-breadcrumb__ellipsis):focus-visible { outline-offset: calc(var(--ws-focus-width) * -1); }
+.ws-breadcrumb__current { flex: 0 3 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: var(--color-text-heading); }
+.ws-breadcrumb__sep { flex-shrink: 0; color: var(--color-text-muted); }
+.ws-breadcrumb__chevron { flex-shrink: 0; width: var(--ws-icon-sm); height: var(--ws-icon-sm); color: var(--color-text-muted); }
+/* The folded middle: a 24 px act that opens the hidden levels in a Menu; its box bleeds 7 each side so the "..." keeps
+   the trail's 8 px gaps (it sat 11 from each "/"). */
+.ws-breadcrumb__ellipsis { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: var(--space-lg); min-height: var(--space-lg); margin-inline: calc((var(--space-xxs-plus) + var(--ws-line)) * -1); padding: 0 var(--space-xxs); border: 0; border-radius: var(--ws-radius-control); background: none; font-size: inherit; color: inherit; cursor: pointer; }
+@media (hover: hover) { .ws-breadcrumb__ellipsis:hover { background: var(--ws-hover-strong); color: var(--color-text-heading); text-decoration: none; } }
+@media (prefers-reduced-motion: no-preference) { .ws-breadcrumb :is(a, .ws-breadcrumb__ellipsis) { transition: background-color var(--ws-duration-hover) var(--ws-ease-soft), color var(--ws-duration-hover) var(--ws-ease-soft); } }

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

@@ -1,9 +1,10 @@
-The one control for every act on the page: a click that does something, in one of five looks, never a styled `<button>`.
+The one control for every act on the page: a click that does something, in one of six looks, never a styled `<button>`.
 
 ## Use it when
 
-- A page, a card or a dialog needs its one act (start a call, send an offer, run an audit).
-- A toolbar or a row needs a secondary or quiet act (Edit criteria, Approve, Move).
+- A page, a card or a pane needs its one act (start a call, send an offer, review a rewrite).
+- A header or a toolbar needs an outlined act (Refresh, Settings, Edit criteria).
+- A row or a pane needs a quiet grey act beside the navy one (Send to my web person).
 - A sentence needs a word that acts (a link to the board, a quiet "All your calls").
 - A form needs a submit (use `SubmitButton`, which is this component wired to the form's pending state).
 - A filter or an option needs a toggle that shows whether it is on (`selected`).
@@ -17,90 +18,147 @@ The one control for every act on the page: a click that does something, in one o
 
 ## Anatomy
 
-- Box: `--ws-radius-control` (4px) corners, flat, no float shadow.
-- Height: 28px small (`--ws-control-h-sm`), 32px medium (`--ws-control-h`), 36px large (`--ws-control-h-md`);
-  every size expands to 40px (`--ws-touch`) on a touch screen.
-  `link` and `text` have no box or height: they sit on the text line and expand to 24px touch.
-- Words: 14px medium, one line, never bold.
-- Sides: 12px (`--space-sm`) boxed, 8px (`--space-xs`) for `ghost`, none for `link`/`text`.
-- Gap to an inner icon: 8px (`--space-xs`), 4px (`--space-xxs`) at `small`.
-- Fill and words by variant (below).
+- Box: 6 px corners (`--ws-radius-row`), flat, no float shadow, no lift on hover.
+- Height: 28 small (`--ws-control-h-sm`), 32 medium (`--ws-control-h`), 40 large (`--space-2xl`); every boxed size is at
+  least 40 on a touch screen (`--ws-touch`). `link` and `text` have no box: their words, 24 tall on touch.
+- Words: 13 / 18 medium (`--ws-text-control`, `--ws-leading-control`), Seth's control words, never bold.
+- Sides: 12 (`--space-sm`) medium, 8 (`--space-xs`) small, 14 (`--space-sm-plus`) large; 4 for `link` and `text`, bled
+  back out of the line so the words sit where the sentence puts them.
+- Icon: 16 px, 6 px from the words (`--space-xxs-plus`), 4 at small.
+- One line, always (0.4.0's rule): a button never wraps and never shrinks in a row, in a table cell or a fact row (the
+  sentence beside it does). A label that can be wider than its whole column opts in with `ws-btn--wrap`: balanced lines,
+  never cut, never off a phone; a wrapped `link`, `text` or `ghost` reads from its start, like words.
+- Two word acts side by side keep 16 px between their words, so one's focus ring never covers the other.
 
 ## Variants and sizes
 
 | Variant | Fill | Words | Edge | Where |
 | --- | --- | --- | --- | --- |
-| `primary` | `--color-text-heading` (navy), solid | white | none | the page's or the card's one act |
-| `secondary` | `--color-bg-page` (cream) | navy | `--ws-shadow-hairline` | a second act beside a primary, a header or row act |
-| `ghost` | transparent, sunk cream on hover | `--color-text-body` (grey-7), navy on hover | none | a quiet row or corner act |
-| `link` | transparent | `--color-text-interactive` (mid blue), underline on hover | none | a word that goes somewhere or shows more |
-| `text` | transparent | `--color-text-heading` (navy), underline on hover | none | a quiet word that acts in place (the card language's "All your calls") |
+| `primary` | navy (`--color-text-heading`) | `--ws-on-act` | none | the page's, the card's or the pane's one act |
+| `secondary` | none | navy | 0.5 px `--ws-edge-card`, drawn inside | a header or toolbar act (Seth's Refresh, Settings) |
+| `well` | the tray grey (`--ws-tray`, #EDEDED) | navy | none | a quiet act in a row or a pane, beside the navy one (Seth's Send to my web person) |
+| `ghost` | none until the pointer | navy | none | a corner or row act that should stay out of the way |
+| `link` | none | mid blue (`--color-text-interactive`) | none | a word that goes somewhere or shows more |
+| `text` | none | navy | none | a quiet word that acts in place ("All your calls") |
 
-Sizes: `small` (28px), `medium` (32px, the default), `large` (36px, every form submit and mobile CTA).
+Sizes: `small` 28, `medium` 32 (the default), `large` 40 (a pane's acts, a form's submit, a phone's CTA).
+
+A split pair (`ws-btn-split`): two acts in equal halves across the width, the primary last (Seth's pane foot). Where a
+half would be under 160 px, or narrower than either label on its one line, they stack, the primary at the bottom, under
+the thumb.
+
+`--wrap`: a label that may be wider than its column wraps in balanced lines (a button's words never wrap otherwise).
 
 ## States
 
 - **Default:** as the table above.
-- **Hover:** `primary` dims to 90% opacity; `secondary` and `ghost` take the sunk cream (`--ws-surface-sunk`); `link` and
-  `text` underline.
-- **Focus:** the kit's focus halo (`--shadow-focus-ring`, salmon at 20%), visible only for keyboard focus.
-- **Pressed:** scales to 0.97 (`--ws-press-scale`) and springs back; nothing moves with reduced motion.
-- **Selected:** a toggle that is on wears `primary`'s navy regardless of its own variant, and carries `aria-pressed="true"`
-  (or `aria-current` for a `ButtonLink`).
-- **Pending:** its answer is on the way. The button keeps its colour (never greyed), shows the working dot
-  (`WorkingDot`, `ws-dot ws-working`) before its words, stays focusable (`aria-disabled`, not `disabled`, so the keyboard
-  stays on it) and refuses a second click (`aria-busy="true"`, `cursor: progress`).
-- **Disabled:** 40% opacity, no pointer events.
-- **Empty / loading:** not a state of its own; a button's words are always present (use `pending` while an action runs).
-- **Long label:** the button expands to fit one line; it never wraps mid-word or clips.
-- **Narrow:** on a phone a `large` submit becomes 48px and full width (`SubmitButton`'s own rule).
-- **Touch:** every boxed size expands to 40px tall; `link`/`text` to 24px, the WCAG 2.2 target-size floor for words that act.
+- **Hover (a mouse only, never stuck after a tap):** `primary` goes a shade brighter (#0F4A73) with a soft light under
+  the pointer (North); `secondary` darkens its edge (#AAA49D), no fill; `well` darkens its grey (`--ws-well-hover`);
+  `ghost` takes the navy wash (`--ws-hover-strong`); `link` and `text` underline.
+- **Focus:** the kit's ring, 2 px navy, 2 px out, on keyboard focus only.
+- **Pressed:** gives to 0.97 (`--ws-press-scale`) and springs back, both ways on North's press spring ("Button press",
+  .2 s / bounce .3: `--ws-spring-press` over `--ws-spring-press-duration`, the house's press rule); the fill takes the
+  press tint at once. Words that act and a busy button do not move; nothing moves with reduced motion.
+- **Selected:** a toggle that is on wears `primary`'s navy whatever its own look, with `aria-pressed="true"` (or
+  `aria-current` on a `ButtonLink`).
+- **Pending:** its answer is on the way. Full colour, the same size: the working dot (`ws-dot ws-working`) sits in the
+  left padding so the words never move (a small button trades 4 px between its sides to fit it, keeping its width), and
+  in a button wider than its words (a full-width act) it stays beside the label, not at the far edge; it
+  stays focusable (`aria-disabled`, not `disabled`) and refuses a second press
+  (`aria-busy="true"`, `cursor: progress`).
+- **Link pending (`LinkPending`):** a link card or `ButtonLink` whose page is on its way: a 1 px navy edge arrives after
+  a beat (so a quick answer shows nothing) and breathes until the page answers; it leaves at once.
+- **Disabled:** 40%, no pointer.
+- **Empty / loading:** not a state of its own; a button's words are always present (use `pending` while an act runs).
+- **Pictured states (a preview or a mockup):** `is-hover`, `is-pressed` and `is-focus` draw the hover, the press and
+  the ring still, exactly as a pointer and a keyboard do.
+- **Pending under the pointer:** keeps its resting look (no brighter navy, no light, no wash): it refuses the press a
+  hover would invite.
+- **Long label:** one line; with `ws-btn--wrap`, wider than its column, it wraps in balanced lines.
+- **Narrow:** the split pair stacks; a lone large button may take the width.
+- **Touch:** boxed sizes at least 40; `link` and `text` 24 tall.
+- **Dark:** the act is the light ink with dark words; its hover eases a step toward its words and draws no light
+  (derived: North has no dark values).
 
 ## Behaviour
 
 - Keyboard: a normal `<button>`; Enter or Space activates it; Tab order follows the DOM.
-- Pointer: hover and active states as above; a press gives 0.97 scale on `ws-ease-soft`.
-- Touch: 40px floor (24px for word buttons), per WCAG 2.2.
-- Motion: colour and opacity transition over `--ws-duration-instant` (120ms) on `--ws-ease-soft`; the press scale is the
-  only transform, and it is skipped entirely under `prefers-reduced-motion: reduce`.
+- Pointer: the light follows the pointer when the page sets `--mx` and `--my` on the button (pointermove, in px from its
+  corner); without them it sits in the middle.
+- Motion: colours over `--ws-duration-hover` (200 ms) on `--ws-ease-soft`; the press on the press spring (`scale`, 450 ms
+  to settle, a little give past 0.97 and past 1 on the way back). In React a press may use `springs.press`. All still
+  under reduced motion.
 
 ## Content
 
-- Sentence case, an imperative verb where it can ("Start the call", "Send the offer"), never a question.
+- Sentence case, an imperative verb where it can ("Start the call", "Review Grow's rewrite"), never a question.
 - No em dashes.
-- One primary button per card and per page; everything else is secondary, ghost or words.
-- A pending button's words may change to say what is happening ("Saving…"); keep it short enough for one line.
+- One primary button per card and per page; everything else is secondary, well, ghost or words.
+- A pending button's words may say what is happening ("Saving"); short enough for one line.
 
 ## Props
 
 | Name | Type | Meaning |
 | --- | --- | --- |
-| `variant` | `'primary' \| 'secondary' \| 'ghost' \| 'link' \| 'text'` | the look, default `primary` |
+| `variant` | `'primary' \| 'secondary' \| 'well' \| 'ghost' \| 'link' \| 'text'` | the look, default `primary` |
 | `size` | `'small' \| 'medium' \| 'large'` | the height, default `medium` |
 | `selected` | `boolean` | a toggle that is on: wears `primary`'s navy, sets `aria-pressed` unless the button has its own role |
-| `pending` | `boolean` | its answer is on the way: the working dot, `aria-busy`, refuses a click |
-| `pendingLabel` (`SubmitButton` only) | `string` | the words shown while the form submits, default "Saving…" |
+| `pending` | `boolean` | its answer is on the way: the working dot, `aria-busy`, refuses a press |
+| `pendingLabel` (`SubmitButton` only) | `string` | the words shown while the form submits, default "Saving" |
 | ...rest | native `<button>` props | passed through (`onClick`, `type`, `disabled`, `aria-*`) |
 
-`ButtonLink` takes the same `variant`/`size`/`selected` over `next/link`'s props, and shows the pending dot itself (via
+`ButtonLink` takes the same `variant`/`size`/`selected` over `next/link`'s props, and shows `LinkPending` (via
 `useLinkStatus`) until its page answers.
 
 ## Rules
 
 - Every button is `Button` or `ButtonLink` (`SubmitButton` in a form), never a styled `<button>` (24 Oct 2026, "One way to
-  use buttons", measured on every page, one app's own use as the rule).
-- One navy (`primary`) button per card, and one for the page; everything else is secondary, ghost or words.
-- A page's one act, a card's or a dialog's footer-band act, and a form's submit are `primary`, `large` (36px); a second
-  choice beside it is `secondary`, `large`.
-- A page's header actions are `secondary`, `small` beside a title, `medium` in a toolbar row of 32px fields.
-- A card's corner act is `secondary`, `medium` (unless the card's one act is the primary).
-- A row's acts (Done, Approve, Move) are `secondary` or `ghost`, `small`.
-- Words that act in a sentence are `link` (mid blue, goes somewhere or shows more) or `text` (navy, a quiet act in place).
-- Every form submit and mobile CTA is `size="large"` (house rule).
-- Drawn over the kit's tertiary variant so none of the kit's salmon or marketing ledge shows (16 Oct 2026).
+  use buttons").
+- One navy (`primary`) button per card, and one for the page; everything else is secondary, well, ghost or words.
+- A pane's or a dialog's acts are `large` (40): the second choice `well`, the primary last (`ws-btn-split` when they
+  share the width).
+- A page's or a thread's header acts are `secondary`, `medium`, with an icon where one helps (Seth's Refresh, Settings).
+- A row's act is `well`, `medium`; it turns `primary` while its row is open (Seth's fix row).
+- Words that act in a sentence are `link` (mid blue, goes somewhere) or `text` (navy, acts in place).
+- Hover is a colour change, never a lift or a shadow (North: "no lift, no shadow, just a shade brighter and the light
+  under the cursor").
 
 ## Source
 
-**Derived from**: the kit's tertiary button variant, redrawn so none of its salmon or marketing ledge shows, and the
-"One way to use buttons" rule (24 Oct 2026): every act is `Button`, `ButtonLink` or `SubmitButton`, never a styled
-`<button>`. **Precedent**: the first product built on the system.
+**Derived from**: Seth's Fia frames (Grow audit 301:1644, 301:2100; Fixes 308:2514; Review inbox 313:2957): 6 px corners,
+13 / 18 words, 6 px icon gap, 40 px pane acts with 14 px sides, the #EDEDED secondary, the split pair. Seth's North
+(style1.css:1429-1456): the brighter navy and the light under the cursor, the darker edge on hover. The field's fixes
+(Ignite, Fia feel audit T01, T05, K09): the pending dot in the padding, ghost on its size's padding. Word acts are 24 tall on touch only: on a mouse
+they pass WCAG 2.5.8 by spacing, and a 24 px box round a 20 px line put every head that aligns to box edges 2 px off.
+North's 34 px height is not taken: the Fia frames' 32 / 40 sit on the control ladder.
+
+## Markup
+
+```html
+<button type="button" class="ws-btn ws-btn--primary">Start the call</button>
+<button type="button" class="ws-btn ws-btn--secondary">
+  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 8a5 5 0 1 1-1.5-3.6M13 3v2.5h-2.5"/></svg>
+  Refresh
+</button>
+<button type="button" class="ws-btn ws-btn--well">Send to my web person</button>
+<button type="button" class="ws-btn ws-btn--primary" aria-busy="true" aria-disabled="true"><span class="ws-dot ws-working" aria-hidden="true"></span>Saving</button>
+<!-- a label that may be wider than its column -->
+<button type="button" class="ws-btn ws-btn--link ws-btn--wrap">Resend the quote before it expires on Nov 2</button>
+
+<div class="ws-btn-split">
+  <button type="button" class="ws-btn ws-btn--lg ws-btn--well">Send to my web person</button>
+  <button type="button" class="ws-btn ws-btn--lg ws-btn--primary">Review Grow's rewrite</button>
+</div>
+
+<a href="/leads/priya" class="ws-card ws-card--inset" aria-busy="true" style="position: relative; display: block;">
+  Priya Nair <span class="ws-link-pending" aria-hidden="true"></span>
+</a>
+```
+
+## Styles
+
+`design-system/components/Button/style.css` (in `bundle.css` and `fello.css`): `ws-btn` with `--sm`, `--lg`, `--primary`,
+`--secondary`, `--well`, `--ghost`, `--link`, `--text`, `--wrap`, and the pictured states `is-hover`, `is-pressed`,
+`is-focus`; `ws-btn-split`; `ws-link-pending`. It also scopes the shared hover values `--ws-edge-hover`,
+`--ws-act-hover` and `--ws-act-light` for every outlined or navy control (the switch's track too). Touch sizes come from
+the house's touch block; the working dot is the house's `ws-dot`.