@felloinnovations/brand-kit 0.4.0 → 0.5.1

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

@@ -15,39 +15,60 @@ The one disclosure: something folded away until wanted, in three looks, built on
 
 ## Anatomy
 
-- Built on the native `<details>`/`<summary>`, so the keyboard and a screen reader already know what it is; no script drives its open state unless the page wants to control it.
-- `card` look: the one `Card`, a 44 px summary line (`calc(--space-2xl + --space-xxs)`) with a muted chevron, a 14 px semibold navy title and an optional note that wraps, 16 px inside (`--ws-card-padding-lg`); the body sits below with no rule between.
-- `quiet` look: words that act (navy, medium, underlined on hover), the chevron after them, the body underneath; never a card.
-- `row` look: a full-width row, 16 px sides, 12 px top and bottom, the chevron at the end pointing down.
-- In every look the body eases open to its height and rises in as it appears; the chevron turns with it (only its own, not a nested fold's).
+- Built on the native `<details>`/`<summary>`, so the keyboard and a screen reader already know what it is; no script
+  drives its open state unless the page wants to control it.
+- The chevron: 16 px (`--ws-icon`), navy, a 1.5 stroke (Seth's). A right chevron turns down when open; a down chevron
+  turns up.
+- The title (`ws-fold__title`): 15 / 22 semibold navy, Seth's row and section title. A line under it
+  (`ws-fold__line`): 13 / 18 medium in `--color-text-muted`.
+- `card` look: the one `Card` (the rim round the cream), a 44 px summary line, 4 px top and bottom and 16 px at the
+  sides, the chevron before the title and an optional note after it; the body 4 / 16 / 16 below, no rule between.
+- `quiet` look (`ws-fold__summary--quiet`): words that act (navy, medium, underlined on hover), the chevron after
+  them, 24 px tall at every pointer; the body underneath (`ws-fold__body--quiet`: a column 4 px apart, 4 px under
+  the words); never a card.
+- `row` look: a row of Seth's rim list (`ws-fold__list`: the 1 px tray rim round cream rows joined by 0.5 px
+  dividers). Each summary is 48 px at least, 12 / 16 / 12 / 20, its parts 12 apart, the words (`ws-fold__words`: title
+  and line) taking the room and the chevron at the end. The body sits under the words' column, 0 / 16 / 16 / 20, and
+  may hold a cream panel (`ws-fold__panel`: 6 px corners, 24 px inside).
 
 ## Variants and sizes
 
-| Look | Chevron position | Ground | Use |
+| Look | Chevron | Ground | Use |
 | --- | --- | --- | --- |
-| `card` (default) | Before the title | A full `Card` | A self-contained block of extra detail |
-| `quiet` | After the words | None | A short reasoning trail beside other content |
-| `row` | After the words, pointing down | A list row | A chapter or section inside a list |
-
-`dense` (on `quiet` only) sets the words to 12 px instead of 14 px, for a smaller word button.
+| `card` (default) | Before the title, right, turns down | A full `Card` | A self-contained block of extra detail |
+| `quiet` | After the words, right, turns down | None | A short reasoning trail beside other content |
+| `row` | At the end, down, turns up | A row of a rim list; open, the sunk cream | A chapter or step inside a list |
 
 ## States
 
-- **Closed**: the default; only the summary line shows.
-- **Open**: the body is visible, the chevron turned (90 degrees for `card`/`quiet`, 180 for `row`).
-- **Hover** (`card`, `row`): the summary tints to `--ws-surface-sunk`; (`quiet`): the words underline.
-- **Focus**: the summary shows the shadow focus ring (`--shadow-focus-ring`); native `<details>`/`<summary>` keyboard behaviour is kept, not replaced.
-- **Controlled**: with `onOpenChange`, the page decides whether it is open (a link that opens one specific chapter); without it, the fold manages itself.
-- **Long label**: the note wraps rather than being cut off, dropping under the title on a narrow card rather than squeezing it.
-- **Touch**: the summary line is tall enough (44 px on `card`) to meet the touch floor; `row` and `quiet` should be given enough padding by their context to reach 40 px.
+- **Closed**: only the summary line shows.
+- **Open**: the body shows and the chevron has turned. In a rim list the open row and its body take the sunk cream
+  (`--ws-surface-sunk`); nothing else moves.
+- **Hover** (pointers that hover): the card summary tints to `--ws-surface-sunk`, a row to the faint navy wash
+  (`--ws-hover-faint`), the quiet words underline.
+- **Pressed**: the card and row summaries take `--ws-surface-press` at once, as a card's rows do, so a tap answers on a
+  touch screen.
+- **Focus**: the 2 px navy outline; on the card and row summaries it is drawn inside, so the rim and the dividers stay
+  clear. Native `<details>` keyboard behaviour is kept.
+- **Controlled**: the page may set `open` itself (a link that opens one chapter).
+- **Long label**: the title wraps beside its chevron; a note drops to the far end and under the title when there is no
+  room. Nothing is cut off.
+- **Touch**: card and row summaries are at least 40 px (44 and 48), the quiet look 24.
+- **Dark**: every ground and line is a token that follows the theme.
 
 ## Behaviour
 
-- Keyboard: native `<details>` behaviour, Enter or Space on the focused summary toggles it; no custom key handling needed.
-- Pointer: a click anywhere on the summary line toggles the fold.
-- Touch: the whole summary line is the target.
-- Motion: the body's height eases open (`ws-fold` in `globals.css`) and its content rises in (`ws-rise`, `--ws-duration-gentle`); the chevron rotates over `--ws-duration-settle` on `--ws-ease-soft`.
-- Reduced motion: the body appears and disappears without easing or rising; the chevron still shows its final rotation, without the transition.
+- Keyboard: Enter or Space on the focused summary toggles it; no custom key handling.
+- Pointer and touch: the whole summary line is the target.
+- Motion (North "Sidebar sections open / close", the fold spring: visualDuration .32 s, bounce 0): the body grows from
+  0 to its height and fades in, and the chevron turns on the same spring (`transition: ... var(--ws-spring-fold-duration)
+  var(--ws-spring-fold)`, the spring as a `linear()` curve, 600 ms to settle); closing runs it back on the same spring.
+  The grow is the house's fold, on every kit `<details>` (`::details-content` with `interpolate-size`), so a fold needs
+  nothing of its own; try it in the preview by opening and closing any title. A browser without `::details-content`
+  or `interpolate-size` opens at once.
+- The opening body is clipped while it grows (4 px of room for a focus ring); a menu inside a fold body would be cut,
+  so open menus from outside it.
+- Reduced motion: it opens and closes at once, the chevron jumps to its turn.
 
 ## Content
 
@@ -64,7 +85,6 @@ The one disclosure: something folded away until wanted, in three looks, built on
 | `open` | boolean | How it starts. |
 | `onOpenChange` | `(open: boolean) => void` | The page keeps the open state and hears every change. |
 | `look` | `"card"` \| `"quiet"` \| `"row"` | Which of the three looks to draw. Default `card`. |
-| `dense` | boolean | On `quiet` only: 12 px words instead of 14 px. |
 | `label` | string | The summary's accessible name when its words are a shorthand ("3 steps, 4 s"). |
 | `className` | string | Layout only. |
 | `children` | `ReactNode` | The folded body. |
@@ -77,5 +97,43 @@ The one disclosure: something folded away until wanted, in three looks, built on
 
 ## Source
 
-**Derived from**: the native `<details>`/`<summary>` element, with the system's card, quiet-link and row looks
-applied to its summary and body. **Precedent**: the first product built on the system.
+**Derived from**: the native `<details>`/`<summary>`; Seth's fold row inside a rim list (Grow 305:2405, Fixes 308:2508
+to 308:2530: 20 / 16 sides, a 16 px navy chevron, the open row sunk, the cream panel 6 / 24); North's fold motion
+(js@779818). Field fixes: the card summary's 44 px (Ignite surfaces.tsx:335-344), the height motion (globals.css:671-686).
+
+## Markup
+
+```html
+<!-- Card look -->
+<details class="ws-card">
+  <summary class="ws-fold__summary ws-fold__summary--card">
+    <svg class="ws-fold__chevron ws-fold__chevron--right" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+    <span class="ws-fold__title">Why this lead</span>
+    <span class="ws-muted">2 reasons</span>
+  </summary>
+  <div class="ws-fold__body--card"><p class="ws-body">Twelve years in the neighbourhood.</p></div>
+</details>
+
+<!-- Row look, in a rim list -->
+<ul class="ws-fold__list">
+  <li>
+    <details>
+      <summary class="ws-fold__summary ws-fold__summary--row">
+        <span class="ws-fold__words">
+          <span class="ws-fold__title">Name the towns you serve</span>
+          <span class="ws-fold__line">Google Business Profile</span>
+        </span>
+        <svg class="ws-fold__chevron ws-fold__chevron--down" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M5.2 6.6L8 9.4l2.8-2.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      </summary>
+      <div class="ws-fold__body--row"><div class="ws-fold__panel"><p class="ws-body">Why it matters.</p></div></div>
+    </details>
+  </li>
+</ul>
+```
+
+## Styles
+
+`Fold/style.css`, built into `bundle.css` and `fello.css`. The card look's rim is `Card`'s. Tokens: `--ws-icon`,
+`--ws-text-section`, `--ws-leading-section`, `--ws-text-control`, `--ws-rim`, `--ws-tray`, `--ws-divider`,
+`--ws-radius-card-inner`, `--ws-radius-row`, `--ws-surface-sunk`, `--ws-hover-faint`, `--ws-row-h`, `--ws-card-inset`,
+`--ws-duration-settle`, `--ws-ease-settle`, `--ws-focus-*`.

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Cards" height=180 -->
+<!-- @dsCard group="Cards" height=340 -->
 <!doctype html>
 <html>
 <head>
@@ -8,52 +8,95 @@
 <link rel="stylesheet" href="../bundle.css">
 </head>
 <body>
-<div class="ws-stage ws-stage--grey">
-
-  <div class="ws-stack" style="width: 320px; max-width: 100%;">
-    <span class="ws-muted">Card look, open: a disclosure that is a card</span>
-    <details class="ws-card" open>
-      <summary class="ws-fold__summary ws-fold__summary--card">
-        <svg class="ws-fold__chevron ws-fold__chevron--right" viewBox="0 0 16 16" fill="none"><path d="M6 3.5L11 8l-5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
-        <span class="ws-body ws-fold__title">Why this lead</span>
-      </summary>
-      <div class="ws-fold__body--card">
-        <p class="ws-body">Twelve years in the neighbourhood, referred by two agents already on the team.</p>
-      </div>
-    </details>
-  </div>
-
-  <div class="ws-stack" style="width: 320px; max-width: 100%;">
-    <span class="ws-muted">Quiet look, closed: words that act, no card</span>
-    <details>
-      <summary class="ws-fold__summary ws-fold__summary--quiet">
-        <span>Why this move</span>
-        <svg class="ws-fold__chevron ws-fold__chevron--right" viewBox="0 0 16 16" fill="none"><path d="M6 3.5L11 8l-5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
-      </summary>
-      <div class="ws-fold__body--quiet">
-        <p class="ws-body">Dana hasn't made a cold call in nine days.</p>
-      </div>
-    </details>
+<div class="ws-stage">
+  <div class="ws-stack ws-stack--loose" style="width: 340px;">
+    <div class="ws-stack">
+      <span class="ws-muted">Card look, open: a disclosure that is a card</span>
+      <details class="ws-card" open>
+        <summary class="ws-fold__summary ws-fold__summary--card">
+          <svg class="ws-fold__chevron ws-fold__chevron--right" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          <span class="ws-fold__title">Why this lead</span>
+          <span class="ws-muted">2 reasons</span>
+        </summary>
+        <div class="ws-fold__body--card">
+          <p class="ws-body">Twelve years in the neighbourhood, referred by two agents already on the team.</p>
+        </div>
+      </details>
+    </div>
+    <div class="ws-stack">
+      <span class="ws-muted">Card look, closed, a long title that wraps</span>
+      <details class="ws-card">
+        <summary class="ws-fold__summary ws-fold__summary--card">
+          <svg class="ws-fold__chevron ws-fold__chevron--right" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          <span class="ws-fold__title">Everything Coach read before it picked Priya Nair for today</span>
+        </summary>
+        <div class="ws-fold__body--card">
+          <p class="ws-body">Her last four calls, two open offers and the note from Tuesday.</p>
+        </div>
+      </details>
+    </div>
+    <div class="ws-stack">
+      <span class="ws-muted">Quiet look: words that act, no card</span>
+      <details>
+        <summary class="ws-fold__summary ws-fold__summary--quiet">
+          <span>Why this move</span>
+          <svg class="ws-fold__chevron ws-fold__chevron--right" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        </summary>
+        <div class="ws-fold__body--quiet">
+          <p class="ws-body">Dana hasn't made a cold call in nine days.</p>
+        </div>
+      </details>
+    </div>
   </div>
 
-  <div class="ws-stack" style="width: 320px; max-width: 100%;">
-    <span class="ws-muted">Row look, closed: a list's row that opens below itself</span>
+  <div class="ws-stack" style="width: 556px;">
+    <span class="ws-muted">Row look, in a rim list: the open row and its body sunk, a cream panel inside</span>
     <ul class="ws-fold__list">
+      <li>
+        <details open>
+          <summary class="ws-fold__summary ws-fold__summary--row">
+            <span class="ws-fold__words">
+              <span class="ws-fold__title">Name the towns you serve</span>
+              <span class="ws-fold__line">Google Business Profile &middot; a few minutes</span>
+            </span>
+            <svg class="ws-fold__chevron ws-fold__chevron--down" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M5.2 6.6L8 9.4l2.8-2.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          </summary>
+          <div class="ws-fold__body--row">
+            <div class="ws-fold__panel">
+              <p class="ws-body">Buyers near you see you in 5 of 9 spots, never in the top three. Naming the towns puts you in the searches you miss.</p>
+            </div>
+          </div>
+        </details>
+      </li>
       <li>
         <details>
           <summary class="ws-fold__summary ws-fold__summary--row">
-            <span class="ws-row__title">Follow-up plan</span>
-            <span class="ws-muted">4 steps</span>
-            <svg class="ws-fold__chevron ws-fold__chevron--down" viewBox="0 0 16 16" fill="none"><path d="M3.5 6L8 11l4.5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            <span class="ws-fold__words">
+              <span class="ws-fold__title">Add photos of sold homes</span>
+              <span class="ws-fold__line">Website &middot; a few days</span>
+            </span>
+            <svg class="ws-fold__chevron ws-fold__chevron--down" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M5.2 6.6L8 9.4l2.8-2.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
           </summary>
           <div class="ws-fold__body--row">
-            <p class="ws-body">Cold call: a complicated sale.</p>
+            <p class="ws-body">Three of your last ten listings have no photos after they sold.</p>
+          </div>
+        </details>
+      </li>
+      <li>
+        <details>
+          <summary class="ws-fold__summary ws-fold__summary--row">
+            <span class="ws-fold__words">
+              <span class="ws-fold__title">Ask your last five buyers for a review on the page they found you on</span>
+            </span>
+            <svg class="ws-fold__chevron ws-fold__chevron--down" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M5.2 6.6L8 9.4l2.8-2.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          </summary>
+          <div class="ws-fold__body--row">
+            <p class="ws-body">Zillow, Google and your own site each count on their own.</p>
           </div>
         </details>
       </li>
     </ul>
   </div>
-
 </div>
 </body>
 </html>

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

@@ -0,0 +1,48 @@
+/* ---- Fold: a disclosure in three looks (a card, quiet words that act, a list's row), the chevron turning ---- */
+.ws-fold__summary { display: flex; align-items: center; cursor: pointer; list-style: none; transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+.ws-fold__summary::-webkit-details-marker { display: none; }
+/* Card look: the summary is 44 tall, 4 / 16 (16 all round made it 48 and more); the body 4 / 16 / 16 under it. */
+.ws-fold__summary--card { min-height: calc(var(--space-2xl) + var(--space-xxs)); flex-wrap: wrap; gap: var(--space-xs); border-radius: var(--ws-radius-card-inner); padding: var(--space-xxs) var(--ws-card-padding-lg); }
+.ws-fold__summary--card > .ws-fold__title { flex: 1 1 0; min-width: min(100%, var(--space-8xl)); }
+details[open] > .ws-fold__summary--card { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
+.ws-fold__summary--card:focus-visible { outline-offset: calc(var(--ws-focus-width) * -1); }
+.ws-fold__body--card { padding: var(--space-xxs) var(--ws-card-padding-lg) var(--ws-card-padding-lg); }
+/* Quiet look: words that act, 24 tall at every pointer, the chevron after them. */
+.ws-fold__summary--quiet { width: fit-content; min-height: var(--space-lg); gap: var(--space-xxs); font-weight: 500; color: var(--color-text-heading); }
+.ws-fold__body--quiet { display: flex; flex-direction: column; gap: var(--space-xxs); padding-top: var(--space-xxs); }
+/* Row look, in Seth's rim list: cream rows inside the 1 px tray rim, joined by 0.5 px dividers; each row 48 at least,
+   12 / 16 / 12 / 20, its parts 12 apart; an open row and its body take the sunk cream. */
+.ws-fold__list { border: var(--ws-rim) solid var(--ws-tray); border-radius: var(--ws-radius-card); background: var(--color-bg-page); }
+.ws-fold__list > li + li { border-top: var(--ws-divider); }
+.ws-fold__list > li > details { border-radius: inherit; }
+.ws-fold__list > li:first-child > details { border-top-left-radius: var(--ws-radius-card-inner); border-top-right-radius: var(--ws-radius-card-inner); }
+.ws-fold__list > li:last-child > details { border-bottom-left-radius: var(--ws-radius-card-inner); border-bottom-right-radius: var(--ws-radius-card-inner); }
+.ws-fold__list details[open] { background: var(--ws-surface-sunk); }
+.ws-fold__summary--row { width: 100%; min-height: var(--ws-row-h); gap: var(--space-sm); padding: var(--space-sm) var(--space-md) var(--space-sm) var(--ws-card-inset); border-radius: inherit; }
+.ws-fold__summary--row:focus-visible { outline-offset: calc(var(--ws-focus-width) * -1); }
+.ws-fold__body--row { padding: 0 var(--space-md) var(--space-md) var(--ws-card-inset); }
+/* A cream panel inside an open row's body (Seth's open fix): 6 px corners, 24 inside. */
+.ws-fold__panel { border-radius: var(--ws-radius-row); background: var(--color-bg-page); padding: var(--space-lg); }
+/* Hover: the card and row summaries take a faint navy wash, the quiet words underline (pointers that hover only). */
+@media (hover: hover) {
+  .ws-fold__summary--card:hover { background-color: var(--ws-surface-sunk); }
+  .ws-fold__summary--row:hover { background-color: var(--ws-hover-faint); }
+  .ws-fold__summary--quiet:hover > span { text-decoration: underline; }
+}
+/* A press tints the card and row summaries at once, as a card's rows do, so a tap answers on a touch screen. */
+:is(.ws-fold__summary--card, .ws-fold__summary--row):active { background-color: var(--ws-surface-press); transition-duration: var(--ws-duration-instant); }
+/* Words: a 15 / 22 semibold title (Seth's row and section title), an optional 13 / 18 line under it in the muted grey. */
+.ws-fold__title { font-size: var(--ws-text-section); line-height: var(--ws-leading-section); font-weight: 600; color: var(--color-text-heading); }
+.ws-fold__words { display: flex; flex: 1; min-width: 0; flex-direction: column; }
+.ws-fold__line { font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 500; color: var(--color-text-muted); }
+.ws-fold__summary--row .ws-row__title { flex: 1; }
+/* The chevron: 16, navy, 1.5 stroke (Seth). Right turns down when open, down turns up. */
+.ws-fold__chevron { width: var(--ws-icon); height: var(--ws-icon); flex-shrink: 0; color: var(--color-text-heading); }
+details[open] > summary > .ws-fold__chevron--right { transform: rotate(90deg); }
+details[open] > summary > .ws-fold__chevron--down { transform: rotate(180deg); }
+/* Motion (North "Sidebar sections open / close", the fold spring .32 / 0): the body grows from 0 to its height and fades
+   in (the house's fold on every kit <details>), the chevron turns on the same spring; closing runs it back. Browsers
+   without ::details-content open at once. Reduced motion: everything is instant. */
+@media (prefers-reduced-motion: no-preference) {
+  .ws-fold__chevron { transition: transform var(--ws-spring-fold-duration) var(--ws-spring-fold); }
+}

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

@@ -1,6 +1,6 @@
 The kit's marketing piece: for a public page, never a product screen.
 
-The closing band of a marketing page: the wordmark, four columns of links and a legal line, on navy.
+The closing band of a marketing page: the wordmark, columns of links and a legal line, on navy.
 
 ## Use it when
 
@@ -8,52 +8,56 @@ The closing band of a marketing page: the wordmark, four columns of links and a
 
 ## Not for
 
-- Any product screen: the main workspace has no footer; its navigation is the sidebar, and there is nothing
-  to legally disclose inside a signed-in workspace.
+- Any product screen: the main workspace has no footer; its navigation is the sidebar.
 - A short confirmation or status line: use a `Toast` or a plain sentence instead of the full footer band.
 
 ## Anatomy
 
-- Band: full width, `--color-bg-dark` (navy) background, `--space-4xl` (64px) padding on every side.
-- Inner column: capped at `--layout-content-max` (1344px), centred.
-- Top row: the wordmark at the left, four link columns at the right, `--space-3xl` (48px) apart, wrapping to
-  stack on a narrow page.
-- Column heading: `--font-size-2xs` (12px) semibold uppercase, `--letter-spacing-overline` tracking, white at 70%
-  opacity (`rgba(255, 255, 255, 0.7)`; see Rules for why this is a literal value rather than a token).
-- Link: `--font-size-sm` (14px), the same white-at-70% as the headings, turning fully white and underlining on
-  hover.
-- Legal line: `--space-3xl` above it, a 1px white-at-15% rule, then `--font-size-2xs` (12px) white-at-70% text.
+- Band: full width, `--ws-inverse` (the act's navy in light, the brand navy in dark), `--space-4xl` (64px) top and bottom, `--layout-margin` (48px) sides.
+- Inner column (`__inner`): capped at `--layout-content-max` (1344px), centred.
+- Top row (`__top`): the wordmark (`__brand`, 20/28 semibold white) at the left, the link columns (`__cols`) at the
+  right, `--space-3xl` (48px) apart. Columns are at least 140px wide, `--space-3xl` apart.
+- Column (`__col`): a heading and its links, `--space-sm` (12px) apart.
+- Heading (`__heading`): an `<h2>`, 12/16 semibold, uppercase, `--letter-spacing-overline`, white at 70%. A real heading,
+  so a screen reader can list and jump between the groups (WCAG 1.3.1); the class sets its size, not the element.
+- Link (`__link`): 14/20, white at 70%, turning white and underlined on hover.
+- Legal line (`__legal`): `--space-3xl` above it, a 1px white-at-15% rule, `--space-lg` (24px) to 12/16 white-at-70% words.
 
 ## Variants and sizes
 
-One layout. The number of columns (four here) is a page's choice; the pattern itself does not fix it at four.
+One layout. The number of columns is a page's choice. Under 60rem (where `MarketingNav` folds): the wordmark above the
+columns, and the columns from the left edge, `--space-lg` (24px) apart and `--space-xl` (32px) between rows, so four fit
+a tablet and a fifth starts a row under the first. Under 40rem (a phone): 48px top and bottom, 16px sides, and the
+columns in a grid of two.
 
 ## States
 
 - **Default:** as above.
-- **Hover:** a link brightens to full white and underlines; nothing else in the footer reacts.
-- **Focus:** a link shows the kit's own visible focus outline (inherited from the browser default on a white-on-
-  navy background, since the kit defines no footer-specific focus treatment).
-- **Selected / pending / disabled / error:** not applicable; a footer is navigation, not a form or a control.
-- **Empty:** not applicable; a footer is not shown with no links.
-- **Long label:** a longer link label wraps within its 140px-minimum column rather than pushing the column wider.
-- **Narrow:** the wordmark and the four columns wrap to a stacked column at their own widths, the wordmark first.
+- **Hover:** a link brightens to white and underlines; nothing else reacts. Only on a pointer that hovers (`@media (hover: hover)`), so a tap on a phone leaves nothing behind.
+- **Focus:** a link takes the house ring in white (`--ws-focus-color` is set to white on the band), 2px, 2px out.
+- **Selected / pending / disabled / error / empty:** not applicable.
+- **Long label:** on a wide screen a longer link widens its column (the columns are as wide as their words, at least
+  140px); in the phone's grid of two it wraps within its column. Keep links to two or three words.
+- **Touch:** each link is a 44px row the width of its column (`--ws-touch-public`), so the rows touch instead of
+  sitting 12px apart.
+- **Dark:** the band stays navy in every theme (white 12.71:1, links 6.99:1).
 
 ## Behaviour
 
-- Keyboard: every link is a real `<a>`, in document order, left to right then wordmark-to-columns.
+- Keyboard: every link is a real `<a>`, in document order, column by column. The wordmark is not a link here (the
+  `MarketingNav` wordmark already goes home); make it an `<a>` if a page has no nav.
 - Pointer / touch: only the links react.
 - Motion: none.
 
 ## Content
 
-- Column headings: one word, sentence case shown as uppercase by the component ("Product", "Company", "Resources", "Legal").
+- Column headings: one word, written in sentence case and shown uppercase ("Product", "Company", "Resources", "Legal").
 - Links: short, sentence case, no em dash.
 - Legal line: the copyright year and the company's full legal name.
 
 ## Props
 
-Not a kit export; composed directly from tokens. A reusable version would take:
+Not a kit export. A reusable version would take:
 
 | Prop | Type | Meaning |
 | --- | --- | --- |
@@ -62,22 +66,41 @@ Not a kit export; composed directly from tokens. A reusable version would take:
 
 ## Rules
 
-- **Intentional addition, decided from the system (26 Oct 2026):** the kit ships no footer pattern at all; every
-  public marketing page needs one, built here from the kit's one dark surface and its layout tokens.
-- Navy is the kit's only dark surface: `AGENTS.md`'s known gaps say plainly "No dark mode. Marketing DS 3.0
-  defines one dark surface (navy) and no dark palette. Do not invent one here," so the footer reaches for
-  `--color-bg-dark` rather than a second, invented dark tone.
-- Padding is `--space-4xl` (64px), the exact value named in the task for this band, and the step `tokens/tokens.md`
-  lists directly after the 48px step the hero and pricing sections use, keeping the footer's rhythm one step
-  larger and clearly a closing band.
-- Link colour is white at 70% opacity rather than a token, because no token in `tokens/tokens.md` expresses "white
-  at a given opacity on navy"; the value is stated explicitly here instead of being silently invented: white at 70%
-  on `--color-brand-navy` computes to roughly 7:1 contrast, comfortably past the WCAG AA 4.5:1 floor (and close to
-  the AAA 7:1 floor), which is why 70% and not a lower opacity was chosen.
+- **The focus ring is white on the band** (4 Nov 2026): the house ring is navy, which vanished on the navy footer.
+- **44px rows on touch** (`14-accessibility.md`): the links were 20px tall, 12px apart.
+- **Column headings are `<h2>`s** (WCAG 1.3.1): a word styled as a heading must be one, or a screen reader hears 13
+  links in a row with nothing to group them.
+- **Two columns from the left on a phone**: the old row of four pushed to the right edge left half the band empty.
+- **From the left under 60rem** (4 Nov 2026): at 768px the row of four wrapped its last column to the right edge, under
+  the third, with nothing beside it. The wordmark now sits above and the columns start at the left.
+- Navy is the kit's one marketing dark surface, so the footer uses `--ws-inverse` (words `--ws-on-inverse`) and stays navy in dark mode
+  rather than turning into a light band nobody designed.
+- White at 70% on navy is 6.99:1, past AA; no token expresses "white at an opacity on navy", so it is a `color-mix`.
 
 ## Source
 
-**Derived from**: the kit's one dark surface (`color-bg-dark`) and its layout and type tokens (`space-4xl`,
-`layout-content-max`, `layout-margin`, `font-size-sm`, `font-size-2xs`, `letter-spacing-overline`), plus plain CSS
-for the link opacity, which no token in this system expresses. **Precedent**: an intentional addition decided from
-the system, 26 Oct 2026 (no product source and no kit component built a footer before).
+**Derived from**: the kit's one dark surface (`ws-inverse`), its layout and type tokens (`space-4xl`,
+`layout-content-max`, `layout-margin`, `font-size-sm`, `font-size-2xs`, `letter-spacing-overline`), the house focus ring,
+the touch floors and the geometry check at 390. **Precedent**: an intentional addition decided from the system, 26 Oct 2026.
+
+## Markup
+
+```html
+<footer class="ws-footer">
+  <div class="ws-footer__inner">
+    <div class="ws-footer__top">
+      <div class="ws-footer__brand">Fello</div>
+      <div class="ws-footer__cols">
+        <div class="ws-footer__col">
+          <h2 class="ws-footer__heading">Product</h2>
+          <a class="ws-footer__link" href="/scoring">Call scoring</a>
+          <a class="ws-footer__link" href="/pricing">Pricing</a>
+        </div>
+      </div>
+    </div>
+    <p class="ws-footer__legal">&copy; 2026 Fello Innovations. All rights reserved.</p>
+  </div>
+</footer>
+```
+
+Styles: the `Footer` block (`components/Footer/style.css`). Nothing else.

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

@@ -1,6 +1,6 @@
 <!-- @dsCard group="Marketing" height=385 -->
 <!doctype html>
-<html>
+<html lang="en">
 <head>
 <meta charset="utf-8">
 <title>Footer</title>
@@ -15,26 +15,26 @@
       <div class="ws-footer__brand">Fello</div>
       <div class="ws-footer__cols">
         <div class="ws-footer__col">
-          <span class="ws-footer__heading">Product</span>
+          <h2 class="ws-footer__heading">Product</h2>
           <a class="ws-footer__link" href="#" onclick="return false;">Call scoring</a>
           <a class="ws-footer__link" href="#" onclick="return false;">Pipeline</a>
           <a class="ws-footer__link" href="#" onclick="return false;">Content</a>
           <a class="ws-footer__link" href="#" onclick="return false;">Pricing</a>
         </div>
         <div class="ws-footer__col">
-          <span class="ws-footer__heading">Company</span>
+          <h2 class="ws-footer__heading">Company</h2>
           <a class="ws-footer__link" href="#" onclick="return false;">About</a>
           <a class="ws-footer__link" href="#" onclick="return false;">Careers</a>
           <a class="ws-footer__link" href="#" onclick="return false;">Blog</a>
         </div>
         <div class="ws-footer__col">
-          <span class="ws-footer__heading">Resources</span>
+          <h2 class="ws-footer__heading">Resources</h2>
           <a class="ws-footer__link" href="#" onclick="return false;">Help centre</a>
           <a class="ws-footer__link" href="#" onclick="return false;">Case studies</a>
           <a class="ws-footer__link" href="#" onclick="return false;">Webinars</a>
         </div>
         <div class="ws-footer__col">
-          <span class="ws-footer__heading">Legal</span>
+          <h2 class="ws-footer__heading">Legal</h2>
           <a class="ws-footer__link" href="#" onclick="return false;">Privacy</a>
           <a class="ws-footer__link" href="#" onclick="return false;">Terms</a>
           <a class="ws-footer__link" href="#" onclick="return false;">Security</a>

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

@@ -0,0 +1,30 @@
+/* ---- Footer: the public site's navy footer, the wordmark, link columns and the legal line ---- */
+/* The band is navy in every theme, so its focus ring is white: the house navy ring would vanish on it. */
+.ws-footer { --ws-focus-color: var(--ws-on-inverse); width: 100%; background: var(--ws-inverse); padding: var(--space-4xl) var(--layout-margin); }
+.ws-footer__inner { max-width: var(--layout-content-max); margin: 0 auto; }
+.ws-footer__top { display: flex; flex-wrap: wrap; gap: var(--space-3xl); justify-content: space-between; }
+.ws-footer__brand { font-size: var(--font-size-lg2); line-height: var(--ws-leading-title); font-weight: 600; color: var(--ws-on-inverse); flex: 0 0 auto; }
+.ws-footer__cols { display: flex; flex-wrap: wrap; gap: var(--space-3xl); flex: 1 1 auto; justify-content: flex-end; }
+.ws-footer__col { min-width: calc(var(--space-7xl) + var(--space-md) + var(--space-xxs)); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
+.ws-footer__heading { font-size: var(--font-size-2xs); line-height: var(--space-md); font-weight: 600; text-transform: uppercase; letter-spacing: var(--letter-spacing-overline); color: color-mix(in srgb, var(--ws-on-inverse) 70%, transparent); }
+.ws-footer__link { font-size: var(--font-size-sm); line-height: calc(var(--space-md) + var(--space-xxs)); color: color-mix(in srgb, var(--ws-on-inverse) 70%, transparent); text-decoration: none; }
+@media (hover: hover) { .ws-footer__link:hover { color: var(--ws-on-inverse); text-decoration: underline; } }
+.ws-footer__legal { margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: var(--ws-line) solid color-mix(in srgb, var(--ws-on-inverse) 15%, transparent); font-size: var(--font-size-2xs); line-height: var(--space-md); color: color-mix(in srgb, var(--ws-on-inverse) 70%, transparent); }
+/* Touch: each link is a 44 px row the width of its column, so the rows touch instead of sitting 12 apart. */
+@media (pointer: coarse) {
+  .ws-footer__col { gap: 0; align-items: stretch; }
+  .ws-footer__heading { margin-bottom: var(--space-xxs); }
+  .ws-footer__link { display: flex; align-items: center; min-height: var(--ws-touch-public); }
+}
+/* Under 60rem (where the nav folds): the wordmark above the columns and the columns from the left edge, 24 apart, so four
+   fit a tablet and one that wraps starts under the first instead of hanging at the right. */
+@media (max-width: 60rem) {
+  .ws-footer__top { flex-direction: column; gap: var(--space-xl); }
+  .ws-footer__cols { justify-content: flex-start; gap: var(--space-xl) var(--space-lg); }
+}
+/* A phone: the 16 px margin and a grid of two columns. */
+@media (max-width: 40rem) {
+  .ws-footer { padding: var(--space-3xl) var(--space-md); }
+  .ws-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .ws-footer__col { min-width: 0; }
+}

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

@@ -19,8 +19,9 @@ conversion between each pair of stages called out as a chip.
 - One card (`ws-card`), a 22 px title that states the answer ("Losing them at Contacted", not "Funnel"), one sentence
   under it.
 - The drawing sits on the dotted field (`ws-dots`), the system's rule for every chart's body.
-- A bar: height 24 px, `--ws-radius-control` (4 px) corners on the first bar's top and the rest flattened at the bottom
-  to read as a stack narrowing down (rounded only where it is the widest, the first).
+- A bar: height 24 px, `--ws-radius-control` (4 px) corners all round, the same on every bar (the bars stand apart,
+  a step's share between them, so none is flattened against another). The old `__fill--first` class is no longer
+  needed.
 - Width: the bar's share of the first stage's count, drawn to scale, never a fixed minimum width that would misstate a
   tiny share.
 - Colour: the first bar solid navy; each bar after it one of the four tones' fades (`--ws-chart-navy-fade`,
@@ -43,7 +44,8 @@ conversion between each pair of stages called out as a chip.
 ## States
 
 - **Default**: as above, bars extend in from the left on first paint (`ws-grow`, staggered).
-- **Arriving**: bars extend left to right, top to bottom, over `--ws-sweep`, matching the chart system's arrival rule.
+- **Arriving**: bars extend left to right, top to bottom, each over 700 ms on the settle curve (`--ws-duration-fill`,
+  `--ws-ease-settle`), 45 ms apart (`--ws-stagger-row`, `--i` on each fill), as North fills its bars.
 - **Live or changed**: a bar eases to its new width over `--ws-duration-settle`, its figure counting on.
 - **Zero at a stage**: the bar is drawn at its true, possibly very thin, width; it is never hidden or rounded up to be
   visible, per the chart system's "zero is drawn" rule.
@@ -87,3 +89,22 @@ conversion between each pair of stages called out as a chip.
 `ChangeChip` for the between-bar conversion mark. **Precedent**: an intentional addition decided from the system,
 26 Oct 2026 (a pipeline's conversion is a different question from a category comparison, and no product tracked a
 multi-stage funnel before).
+
+## Markup
+
+```html
+<div class="ws-dots ws-funnel-bars__body" role="img" aria-label="New leads 500, contacted 310">
+  <div class="ws-funnel-bars__row" aria-hidden="true">
+    <div class="ws-funnel-bars__track"><div class="ws-funnel-bars__fill ws-grow" style="width: 100%; background: var(--color-text-heading);"></div></div>
+    <span class="ws-funnel-bars__figure"><span class="ws-funnel-bars__count">500</span><span class="ws-funnel-bars__label">New leads</span></span>
+  </div>
+  <div class="ws-funnel-bars__between"><span class="ws-change ws-change--down">62% to next</span></div>
+  <div class="ws-funnel-bars__row" aria-hidden="true">
+    <div class="ws-funnel-bars__track"><div class="ws-funnel-bars__fill ws-grow" style="width: 62%; background: var(--ws-chart-navy-fade); --i: 1;"></div></div>
+    <span class="ws-funnel-bars__figure"><span class="ws-funnel-bars__count">310</span><span class="ws-funnel-bars__label">Contacted</span></span>
+  </div>
+</div>
+```
+
+**Styles**: `FunnelBars/style.css`, in `bundle.css` and `fello.css` as `.ws-funnel-bars`. Every value is a token. `.ws-funnel-bars` itself has no styles: it is the hook that
+names the chart (and the root for its modifiers); its parts carry the styles.