@felloinnovations/brand-kit 0.4.0 → 0.5.0

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

@@ -14,11 +14,12 @@ A number field with its figures right-aligned and tabular, an optional unit insi
 
 ## Anatomy
 
-- Field: `Input`'s exact shell (32 px, `--ws-radius-control`, white `--ws-field`, `--ws-shadow-hairline`, mid-blue focus
-  edge, 12 px label above, error below).
+- Field: `Input`'s exact shell (32 px, `--ws-radius-control`, white `--ws-field`, the inside edge, the kit's focus
+  ring, 12 px label above, error below).
 - Numerals: `.ws-tnum` (tabular numerals), right-aligned.
 - Unit: a muted (`--color-text-muted`) suffix inside the field, after the number, before the steppers if both are
-  shown; the field's own right padding grows to make room, the same technique `Select`'s chevron uses.
+  shown; the field's own right padding grows to make room, the same technique `Select`'s chevron uses. It is hidden
+  from reading on its own and named through the field's `aria-describedby`, so "6" is heard as "6, %".
 - Steppers: two 24 px `xs` ghost icon buttons (`.ws-icon-btn.ws-icon-btn--xs`), minus and plus, side by side at the
   field's right edge. Side by side, not stacked, because a 32 px field has no room for two stacked 24 px buttons without
   growing taller, which would break the field's fixed height.
@@ -38,8 +39,8 @@ There is one size; it grows to 40 px on a touch screen.
 - **Plain:** right-aligned tabular numerals, no unit, no steppers.
 - **With unit:** the muted suffix sits after the number.
 - **With steppers:** minus and plus buttons step the value; ArrowUp/ArrowDown do the same from the keyboard.
-- **Focus:** the edge turns mid blue with the focus halo, exactly as `Input`.
-- **Error:** a min/max violation turns the edge salmon and rises in a message below, exactly as `Input`'s error state
+- **Focus:** the kit's focus ring, 2 px navy, 2 px out, as `Input`'s (a field's edge darkens under the pointer).
+- **Error:** a min/max violation takes the salmon's AA step as its edge and rises in a message below, exactly as `Input`'s error state
   ("Enter a number between 1 and 100").
 - **Disabled:** the field and steppers are inert, shown at reduced emphasis.
 
@@ -48,9 +49,9 @@ There is one size; it grows to 40 px on a touch screen.
 - Keyboard: a real `<input type="number">` under the hood, so ArrowUp/ArrowDown step by the field's `step` and native
   validation works for free; the native spinner is hidden in favour of the two stepper buttons, which do the same job
   visibly.
-- Pointer / touch: clicking minus or plus steps the value by one press; the touch floor is 40 px.
-- Motion: border colour, background and shadow transition over `--ws-duration-instant` on `--ws-ease-soft`, exactly as
-  `Input`; an error message rises in over `--ws-duration-gentle`.
+- Pointer / touch: clicking minus or plus steps the value by one press; the touch floor is 40 px. On touch the two
+  marks sit 16 apart and 8 from the edge, so each 40 px hit area is whole and a tap on minus never lands on plus.
+- Motion: as `Input`'s: the edge over the hover beat; an error message rises in.
 - Reduced motion: nothing animates.
 
 ## Content
@@ -80,3 +81,21 @@ There is one size; it grows to 40 px on a touch screen.
 
 Intentional addition, decided from the system (26 Oct 2026): the system had `Input` for free text but nothing for a
 value meant to be stepped and read as a number. Built on `Input`'s field chrome and `IconButton`'s `xs` size.
+
+## Markup
+
+```html
+<span class="ws-number-input ws-number-input--steppers ws-number-input--unit">
+  <input class="ws-input ws-tnum" id="call-length" type="number" value="30" aria-describedby="call-length-unit">
+  <span class="ws-number-input__unit" id="call-length-unit" aria-hidden="true">min</span>
+  <span class="ws-number-input__steppers">
+    <button type="button" class="ws-icon-btn ws-icon-btn--xs" aria-label="Decrease by one minute"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M4 8h8"/></svg></button>
+    <button type="button" class="ws-icon-btn ws-icon-btn--xs" aria-label="Increase by one minute"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M8 4v8M4 8h8"/></svg></button>
+  </span>
+</span>
+```
+
+## Styles
+
+`design-system/components/NumberInput/style.css`: `ws-number-input` with `--unit`, `--steppers`; `__unit`,
+`__steppers`. The field is `Input`'s `ws-input`.

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

@@ -9,7 +9,7 @@
 </head>
 <body>
 <div class="ws-stage">
-  <div style="display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: var(--ws-gap-component); width: 100%;">
+  <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: var(--ws-gap-component); width: 100%;">
 
     <div class="ws-field">
       <span class="ws-muted">Plain</span>
@@ -23,8 +23,8 @@
       <span class="ws-muted">With unit</span>
       <label class="ws-label" for="ni-unit">Commission</label>
       <span class="ws-number-input ws-number-input--unit">
-        <input class="ws-input ws-tnum" id="ni-unit" type="number" value="6">
-        <span class="ws-number-input__unit" aria-hidden="true">%</span>
+        <input class="ws-input ws-tnum" id="ni-unit" type="number" value="6" aria-describedby="ni-unit-u">
+        <span class="ws-number-input__unit" id="ni-unit-u" aria-hidden="true">%</span>
       </span>
     </div>
 
@@ -32,8 +32,8 @@
       <span class="ws-muted">With steppers and a unit</span>
       <label class="ws-label" for="ni-step">Call length</label>
       <span class="ws-number-input ws-number-input--steppers ws-number-input--unit">
-        <input class="ws-input ws-tnum" id="ni-step" type="number" value="30">
-        <span class="ws-number-input__unit" aria-hidden="true">min</span>
+        <input class="ws-input ws-tnum" id="ni-step" type="number" value="30" aria-describedby="ni-step-u">
+        <span class="ws-number-input__unit" id="ni-step-u" aria-hidden="true">min</span>
         <span class="ws-number-input__steppers">
           <button type="button" class="ws-icon-btn ws-icon-btn--xs" aria-label="Decrease by one minute">
             <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M4 8h8"/></svg>
@@ -57,6 +57,22 @@
       </p>
     </div>
 
+    <div class="ws-field">
+      <span class="ws-muted">Disabled, with steppers</span>
+      <label class="ws-label" for="ni-off">Seats</label>
+      <span class="ws-number-input ws-number-input--steppers">
+        <input class="ws-input ws-tnum" id="ni-off" type="number" value="12" disabled>
+        <span class="ws-number-input__steppers">
+          <button type="button" class="ws-icon-btn ws-icon-btn--xs" aria-label="Remove a seat" disabled>
+            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M4 8h8"/></svg>
+          </button>
+          <button type="button" class="ws-icon-btn ws-icon-btn--xs" aria-label="Add a seat" disabled>
+            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M8 4v8M4 8h8"/></svg>
+          </button>
+        </span>
+      </span>
+    </div>
+
   </div>
 </div>
 </body>

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

@@ -0,0 +1,34 @@
+/* ---- NumberInput: the house field, numerals at the right, a unit inside it (named to a screen reader through the
+   field's aria-describedby) and two steppers ---- */
+.ws-number-input { position: relative; display: flex; }
+.ws-number-input .ws-input { text-align: right; }
+.ws-number-input__unit { position: absolute; top: 50%; transform: translateY(-50%); right: var(--space-sm); color: var(--color-text-muted); font-size: var(--ws-text-body); pointer-events: none; }
+.ws-number-input__steppers { position: absolute; top: 50%; right: calc(var(--space-xxs) / 2); transform: translateY(-50%); display: flex; gap: calc(var(--space-xxs) / 2); }
+/* The steppers are field marks (--ws-field-mark, Input/style.css): navy, and the field's ink on the navy ground. */
+.ws-number-input__steppers .ws-icon-btn { color: var(--ws-field-mark, var(--color-text-heading)); }
+/* They sit on the field, not the ground, so their ring and wash take the mark's colour too (on the navy ground the
+   white ring and wash vanished on the white field). */
+.ws-number-input__steppers .ws-icon-btn:focus-visible { outline-color: var(--ws-field-mark, var(--ws-focus-color)); }
+@media (hover: hover) { .ws-number-input__steppers .ws-icon-btn:not(:disabled):hover { background-color: color-mix(in srgb, var(--ws-field-mark, var(--color-text-heading)) 6%, transparent); } }
+/* A disabled field's marks are muted, as Select's chevron (its sunk ground is dark on the navy ground). */
+.ws-number-input:has(> .ws-input:disabled) .ws-number-input__steppers .ws-icon-btn { color: var(--color-text-muted); }
+/* The unit's room: 36 past its right inset (a three-letter unit and 11 before the number; the browser's spinner, now
+   hidden, used to hold this room). */
+.ws-number-input--unit .ws-input { padding-right: var(--space-3xl); }
+/* Steppers alone: the numbers end 12 before the minus (on the scale; 56 was not). */
+.ws-number-input--steppers .ws-input { padding-right: var(--space-4xl); }
+.ws-number-input--steppers.ws-number-input--unit .ws-input { padding-right: var(--space-6xl); }
+.ws-number-input--steppers .ws-number-input__unit { right: calc(var(--space-4xl) - var(--space-xxs)); }
+
+/* The browser's own spinner is hidden: the kit's steppers do its job, and on hover it sat over the unit. The arrow keys
+   still step the value. */
+.ws-number-input .ws-input { appearance: textfield; }
+.ws-number-input .ws-input::-webkit-inner-spin-button, .ws-number-input .ws-input::-webkit-outer-spin-button { margin: 0; appearance: none; }
+/* Touch: each stepper's 40 px hit area (the house's touch block) sits whole, side by side, inside the field, so a tap on
+   the minus never lands on the plus: 8 from the edge, 16 between the two 24 px marks. */
+@media (pointer: coarse) {
+  .ws-number-input__steppers { right: var(--space-xs); gap: var(--space-md); }
+  .ws-number-input--steppers .ws-input { padding-right: var(--space-5xl); }
+  .ws-number-input--steppers .ws-number-input__unit { right: var(--space-5xl); }
+  .ws-number-input--steppers.ws-number-input--unit .ws-input { padding-right: var(--space-7xl); }
+}

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

@@ -0,0 +1,75 @@
+Progress toward a goal on a 14 px track, with a dot where it should be by now. North's bar, used in tiles, lanes and lists.
+
+**Use it when**
+
+- A number runs against a goal over a period and the question is "are we on pace?" (revenue this month, calls this week).
+- The same bar repeats down a list or across tiles, so each one reads at a glance against its own pace.
+
+**Not for**
+
+- A share with no time in it: use `TickStrip` or `Meter`.
+- A running job's progress: use `Meter` or `LoadBar`.
+- Comparing many rows by length: use `GoalBars`.
+
+**Anatomy**
+
+- Slot 24 tall, the track centred in it: 14 tall (`--space-sm-plus`), 2 px corners, `--ws-track`.
+- Fill from the left to `--value`, in `--tone`, square at its end (2 px at its start).
+- Cuts: 1 px lines in the ground's colour at quarters or targets (`__cut`, `style="--at: 25%"`).
+- Gap (`__gap`, behind pace only): the shortfall as an open box in the ground's colour with a 0.5 px edge in the tone, no
+  left edge, from the fill to the dot.
+- Dot (`__dot`): 14 px, in the tone, a 1.5 px ring in the ground's colour, centred on `--pace`.
+- Data on the bar: `style="--value: 48%; --pace: 70%; --tone: var(--ws-chart-past-half)"`.
+
+| Modifier | What changes |
+| --- | --- |
+| `--done` | the fill reaches the end and takes the track's corners on both sides |
+| `--thin` | 5 px, no slot, 1 px corners, no dot: the bar under a heatmap lane's name |
+| `--draw` | the fill grows in over 700 ms on `--ws-ease-settle`, the gap after it, then the dot pops |
+
+**Tones (North's pace bands, on kit tokens)**
+
+| Band | Tone |
+| --- | --- |
+| on or ahead of pace | `--ws-chart-finished` (teal) |
+| behind | `--ws-chart-past-half` (purple) |
+| off pace | `--ws-chart-needs-work` (pink) |
+| no tone yet | `--color-text-heading` (navy) |
+
+**States**
+
+- Ahead: the fill runs past the dot; no gap.
+- Behind: the gap shows how far.
+- Zero: leave out `__fill`; the gap runs from 0 to the dot as a closed box with the track's start corners.
+- Done: `--done`.
+- Draw: as above; reduced motion shows the final state.
+- Hover, focus: the bar is a picture; the row or tile around it takes the pointer.
+
+**Behaviour**
+
+- Give the bar `role="img"` and an `aria-label` with both numbers ("48% of the goal, pace is 70%"), or `aria-hidden` when
+  the words beside it already say them.
+
+**Rules**
+
+- One goal a bar. The words next to it say the number; the bar never carries a figure inside it.
+- Marks keep the chart tones; any word in a tone takes its AA step.
+
+**Source**
+
+**Derived from**: North's five bars (`.pbar`, `.mc-bar`, `.ho-bar`, `.talk-bar`, `.mp-bar`), built from the base values
+(14 track, 14 dot, 24 slot) rather than the tile's 1.09 scaled ones; the fill and dot timing from North's motion config.
+North's own pace colours (#257985 teal, #744ccb purple, #9b1b5a plum) are mapped to the kit's chart tokens.
+
+**Markup**
+
+```html
+<div class="ws-pace-bar" style="--value: 48%; --pace: 70%; --tone: var(--ws-chart-past-half);" role="img" aria-label="48% of the goal, pace is 70%">
+  <span class="ws-pace-bar__fill"></span>
+  <span class="ws-pace-bar__gap"></span>
+  <span class="ws-pace-bar__cut" style="--at: 50%;"></span>
+  <span class="ws-pace-bar__dot"></span>
+</div>
+```
+
+**Styles**: `PaceBar/style.css`, in `bundle.css` and `fello.css` as `.ws-pace-bar`. Every value is a token.

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

@@ -0,0 +1,67 @@
+<!-- @dsCard group="Progress" height=560 -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>PaceBar</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" style="max-width: 560px;">
+    <span class="ws-muted">Ahead of pace: the fill past the dot, quarter cuts, drawn in once</span>
+    <div class="ws-pace-bar ws-pace-bar--draw" style="--value: 72%; --pace: 64%; --tone: var(--ws-chart-finished);" role="img" aria-label="72% of the goal, pace is 64%">
+      <span class="ws-pace-bar__fill"></span>
+      <span class="ws-pace-bar__cut" style="--at: 25%;"></span><span class="ws-pace-bar__cut" style="--at: 50%;"></span><span class="ws-pace-bar__cut" style="--at: 75%;"></span>
+      <span class="ws-pace-bar__dot"></span>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="max-width: 560px;">
+    <span class="ws-muted">Behind pace: the shortfall as an open box in the tone, from the fill to the dot</span>
+    <div class="ws-pace-bar ws-pace-bar--draw" style="--value: 48%; --pace: 70%; --tone: var(--ws-chart-past-half);" role="img" aria-label="48% of the goal, pace is 70%">
+      <span class="ws-pace-bar__fill"></span>
+      <span class="ws-pace-bar__gap"></span>
+      <span class="ws-pace-bar__cut" style="--at: 25%;"></span><span class="ws-pace-bar__cut" style="--at: 50%;"></span><span class="ws-pace-bar__cut" style="--at: 75%;"></span>
+      <span class="ws-pace-bar__dot"></span>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="max-width: 560px;">
+    <span class="ws-muted">Far behind: the needs work tone</span>
+    <div class="ws-pace-bar" style="--value: 22%; --pace: 70%; --tone: var(--ws-chart-needs-work);" role="img" aria-label="22% of the goal, pace is 70%">
+      <span class="ws-pace-bar__fill"></span>
+      <span class="ws-pace-bar__gap"></span>
+      <span class="ws-pace-bar__dot"></span>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="max-width: 560px;">
+    <span class="ws-muted">Done: the goal met before the month is out</span>
+    <div class="ws-pace-bar ws-pace-bar--done" style="--value: 100%; --pace: 90%; --tone: var(--ws-chart-finished);" role="img" aria-label="100% of the goal, pace is 90%">
+      <span class="ws-pace-bar__fill"></span>
+      <span class="ws-pace-bar__dot"></span>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="max-width: 560px;">
+    <span class="ws-muted">Nothing yet: an empty track, the dot says where it should be by now</span>
+    <div class="ws-pace-bar" style="--value: 0%; --pace: 30%; --tone: var(--color-text-heading);" role="img" aria-label="0% of the goal, pace is 30%">
+      <span class="ws-pace-bar__gap"></span>
+      <span class="ws-pace-bar__dot"></span>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="max-width: 200px;">
+    <span class="ws-muted">Thin (5 px): under a heatmap lane's name</span>
+    <div class="ws-pace-bar ws-pace-bar--thin" style="--value: 64%; --tone: var(--ws-chart-finished);" role="img" aria-label="64% of pace">
+      <span class="ws-pace-bar__fill"></span>
+      <span class="ws-pace-bar__cut" style="--at: 25%;"></span><span class="ws-pace-bar__cut" style="--at: 50%;"></span><span class="ws-pace-bar__cut" style="--at: 75%;"></span>
+    </div>
+  </div>
+
+</div>
+</body>
+</html>

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

@@ -0,0 +1,25 @@
+/* ---- PaceBar: progress toward a goal on a 14 px track, with where it should be by now as a dot ---- */
+/* Data on the bar: style="--value: 62%; --pace: 70%; --tone: ...". The fill runs from the left to --value; the dot sits
+   on --pace with a 1.5 px ring in the ground's colour; 1 px cuts in the ground's colour mark quarters or targets
+   (style="--at: 25%"); behind pace, the shortfall is an open box in the tone (__gap) from the fill to the dot.
+   The bar sits in a 24 px slot, the track centred in it. */
+.ws-pace-bar { --value: 0%; --pace: 0%; --tone: var(--color-text-heading); --h: var(--space-sm-plus); position: relative; height: var(--space-lg); }
+.ws-pace-bar::before, .ws-pace-bar__fill, .ws-pace-bar__gap { position: absolute; top: calc((100% - var(--h)) / 2); height: var(--h); }
+.ws-pace-bar::before { content: ""; left: 0; right: 0; border-radius: var(--ws-radius-chip); background: var(--ws-track); }
+.ws-pace-bar__fill { left: 0; width: var(--value); border-radius: var(--ws-radius-chip) 0 0 var(--ws-radius-chip); background: var(--tone); transform-origin: left; }
+.ws-pace-bar__gap { left: var(--value); width: max(0%, calc(var(--pace) - var(--value))); border: var(--ws-hairline) solid var(--tone); border-left: 0; background: var(--color-bg-page); }
+/* Nothing yet (no __fill): the shortfall starts the track, so it closes its box and takes the track's start corners. */
+.ws-pace-bar:not(:has(> .ws-pace-bar__fill)) > .ws-pace-bar__gap { border-left: var(--ws-hairline) solid var(--tone); border-radius: var(--ws-radius-chip) 0 0 var(--ws-radius-chip); }
+.ws-pace-bar__cut { position: absolute; top: calc((100% - var(--h)) / 2); left: var(--at); height: var(--h); border-left: var(--ws-line) solid var(--color-bg-page); }
+.ws-pace-bar__dot { position: absolute; top: calc((100% - var(--h)) / 2); left: var(--pace); width: var(--h); height: var(--h); margin-left: calc(var(--h) / -2); border: calc(var(--ws-hairline) * 3) solid var(--color-bg-page); border-radius: var(--radius-full); background: var(--tone); }
+/* Done: the fill reaches the end, so it takes the track's corners on both sides. */
+.ws-pace-bar--done .ws-pace-bar__fill { width: 100%; border-radius: var(--ws-radius-chip); }
+/* Thin: the 5 px bar under a heatmap lane's name, no slot of its own and no dot. */
+.ws-pace-bar--thin { --h: calc(var(--space-xxs) + var(--ws-line)); height: var(--h); }
+.ws-pace-bar--thin::before, .ws-pace-bar--thin .ws-pace-bar__fill { border-radius: var(--ws-radius-bar); }
+@media (prefers-reduced-motion: no-preference) {
+  /* The fill (North): 700 ms on the settle curve; the dot pops once the fill has landed. */
+  .ws-pace-bar--draw .ws-pace-bar__fill, .ws-pace-bar--draw .ws-pace-bar__gap { animation: ws-grow var(--ws-duration-fill) var(--ws-ease-settle) backwards; animation-delay: var(--ws-build-at, 0s); }
+  .ws-pace-bar--draw .ws-pace-bar__gap { transform-origin: left; animation-delay: calc(var(--ws-build-at, 0s) + var(--ws-duration-settle)); }
+  .ws-pace-bar--draw .ws-pace-bar__dot { animation: ws-bloom var(--ws-duration-settle) var(--ws-ease-pop) backwards; animation-delay: calc(var(--ws-build-at, 0s) + var(--ws-duration-fill)); }
+}

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

@@ -8,29 +8,47 @@ and a cluster. All in fello.css; with these a page needs no layout CSS of its ow
 
 ## Not for
 
-- A product area with a sidebar and a top bar: wrap the page in `AppShell` (its stage then holds the `.ws-page`).
+- A product area with a nav and a bar: use `AppShell`. Its body is the page (it brings the same gutter, gap and size
+  container), so put the page's parts straight in it, with no `.ws-page` inside.
 - A public, marketing page: its sections (`Hero`, `FeatureGrid`, `Footer`) size from the kit's `layout-content-max`
   and `layout-margin`, full bleed (Public pages).
+- A main column and its aside: `Split`.
 - Laying out the inside of one component: the component's own classes do that.
 
 ## Anatomy
 
 | Class | What it does | Values |
 | --- | --- | --- |
-| `.ws-page` | The page: a column of its parts, centred, at most two board columns wide | max `2 x --ws-chart-card-w + --ws-gap-component` (1128) plus the gutters; padding `--ws-gutter` (24), `--space-md` (16) on a phone (under 40rem); parts `--ws-gap-component` (16) apart; a size container |
-| `.ws-page--column` | The one column: a form, a reading page, a chat-like page | max `--ws-column-width` (656) plus the gutters |
-| `.ws-area` | Any other region that tiles or small cards should size from (a card, a pane) | `container-type: inline-size` |
-| `.ws-board` | A board of chart cards (`CardBoard`): two side by side once both fit at 480, each up to 556; below that one column at full width, in DOM order | grid by width, `--ws-chart-card-min`, `--ws-chart-card-w`, gap 16 |
+| `.ws-page` | The page: a column of its parts, centred, at most two board columns wide | max `2 x --ws-chart-card-w + --ws-gap-component` (1128) plus the gutters; Seth's 32 gutter (`--space-xl`, D4), 16 on a phone (under 40rem); parts 16 apart; a size container |
+| `.ws-page--column` | The one column: a form, a reading page | max `--ws-column-width` (656) plus the gutters |
+| `.ws-area` | Any other region a component without its own container should size from | `container-type: inline-size` |
+| `.ws-board` | A board of chart cards (`CardBoard`): two side by side once both fit at 480, each up to 556; below that one column at full width, in DOM order; on the content's start edge, never centred | grid by width, `--ws-chart-card-min`, `--ws-chart-card-w`, gap 16 |
 | `.ws-board__column` | A column of cards inside the board, each card its own height | gap 16 |
-| `.ws-board--4` | Small cards in a grid: one across, two from 40rem, four from 60rem of the page or area | container queries at area-sm and area-lg |
+| `.ws-board--4` | Small cards: one across, two from 40rem, four from 60rem **of the board's own width** (K3) | a size container named `ws-board`, four tracks, each card spans 4, 2 or 1 |
 | `.ws-stack` | Things top to bottom | gap `--ws-gap` (8) |
 | `.ws-cluster` | Things side by side, centred, wrapping | gap `--ws-gap` (8); `--start` aligns them to the top |
 | `--tight`, `--loose`, `--component`, `--group` | The other named gaps, on a stack or a cluster | 4, 12, 16, 24 |
+| `.ws-stack--block` | Seth's report blocks, top to bottom (a stack only) | `--ws-gap-block` (32) |
+| `.ws-stack--section` | Page sections, top to bottom (a stack only) | `--ws-gap-section` (56) |
 
-- The page's width comes from the board: no page width token exists, so it is two 556 columns and the gap, which makes a
-  board of two columns fill the page exactly and line up with the tiles above it.
-- The 40rem and 60rem steps are the guide's area-sm and area-lg (Space and layout). They are container queries, so they
-  measure the page or the nearest `.ws-area`, never the window; outside both, `.ws-board--4` stays one across.
+Which stack each Fia page (Seth's frames, `11-page-recipes.md`) uses, so a page never writes its own gap:
+
+| Page | Its column | Inside each block |
+| --- | --- | --- |
+| Grow audit report (recipe 23) | `.ws-stack--block`: the tabs, the `ScoreHero`, the checks, 32 apart | `.ws-stack--component` (16): a heading and its card |
+| Fixes checklist | `.ws-stack--block`: the areas, 32 apart (Seth's 28 snaps to it, D4) | the area heading 10 over its card (`Section`) |
+| Tally report | `.ws-stack--section`: the hero, the bill row, the vendor board, 56 apart | `.ws-stack--loose` (12): a board's head, body and source |
+| Review inbox (recipe 24) | no stack: one three-column grid, 8 apart (`ListDetail`) | the card's own parts |
+| First open (recipe 22) | the thread's column (`ChatShell`) | the card's own parts |
+
+The four app pages (Grow, Fixes, Tally, Inbox) sit in `ws-app-shell__body--wide` (Seth's 1350), under the thread header (`PageBar`).
+
+- The page's width comes from the board: two 556 columns and the gap, so a board of two columns fills the page and
+  lines up with the bar and tiles above it.
+- `.ws-board--4` measures itself, so the same markup is four across on a wide page, two in a 700 px pane and one in a
+  card, with no `.ws-area` round it. Give it four, two or one cards; never three or five (a 4 + 1 orphan).
+- A column that can be height-bound (`.ws-page`, `.ws-stack`, `.ws-board__column`) never squashes its children (K1);
+  a child that should scroll inside says so (`flex: 1; min-height: 0; overflow: auto`).
 
 ## Variants and sizes
 
@@ -41,15 +59,15 @@ and a cluster. All in fello.css; with these a page needs no layout CSS of its ow
 
 ## States
 
-- **Wide** (content of 976 and up): two board columns; four small cards across from 960 of content.
-- **Middle**: one board column at the page's full width, lined up with the page bar; small cards two across.
+- **Wide** (content of 976 and up): two board columns; small cards four across from 960 of board width.
+- **Middle**: one board column at the page's full width; small cards two across.
 - **Phone**: a 16 gutter, one column, the same DOM order.
 
 ## Behaviour
 
 - The page scrolls as a whole: nothing in it sets a fixed height or hides overflow, so no part traps its content.
 - Order is DOM order at every width, so keyboard and screen-reader order never changes with the layout.
-- No motion of its own; cards rise in (`ws-rise`, staggered, at most six).
+- No motion of its own; parts settle in (`ws-settle`, `--ws-i` for the 22 ms stagger).
 
 ## Content
 
@@ -59,12 +77,33 @@ and a cluster. All in fello.css; with these a page needs no layout CSS of its ow
 ## Rules
 
 - **The gutter is the page's**: a card never adds a margin; the board's and the page's gaps separate things.
-- **Size from the region, not the window**: a board or tiles inside a pane follow the pane (`.ws-area`).
+- **Size from the region, not the window**: adaptive pieces measure themselves (`.ws-board--4`, `PageHero`, `Split`).
 - **Write no layout CSS**: a page made from these classes and the catalog's components needs only fello.css.
 
 ## Source
 
-**Derived from**: Space and layout (the gaps, the gutter, the board's 556 and 480, area-sm to area-xl at 40, 48, 60
-and 76 rem) and the first product's Grow board (`Board`: the page bar, the tiles and the cards one gap apart, sized
-from the board's own container). The page's maximum width is derived from the board here, 27 Oct 2026, since the
-system had none.
+**Derived from**: Space and layout (the gaps, the board's 556 and 480, area-sm to area-xl at 40, 48, 60 and 76 rem),
+the first product's Grow board, Seth's 32 gutter (D4, the Tally frame) and Revenue OS faults K1, K3 and K12 (4 Nov
+2026). The page's maximum width is derived from the board, 27 Oct 2026, since the system had none.
+
+## Markup
+
+```html
+<main class="ws-page">
+  <header class="ws-page-bar">
+    <div class="ws-page-bar__words"><h1 class="ws-page-bar__title">Team this month</h1><span class="ws-page-bar__context">Since Oct 1</span></div>
+  </header>
+  <ul class="ws-board ws-board--4" aria-label="This month">
+    <li class="ws-card ws-card--inset ws-stack ws-stack--tight"><span class="ws-muted">Calls</span><span class="ws-figure ws-figure--tile">142</span></li>
+    <!-- four, two or one -->
+  </ul>
+  <div class="ws-board">
+    <!-- chart cards -->
+  </div>
+</main>
+```
+
+## Styles
+
+The page, the board, the stack and the cluster are in `_house.css`; `Page/style.css` holds the self-measuring
+`.ws-board--4`. The 32 gutter is the global `--ws-gutter` (16 on a phone). Tokens: `--ws-gutter`, `--space-md`, `--ws-gap-component`, `--ws-chart-card-w`, `--ws-chart-card-min`, `--ws-column-width`.

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Layout" height=900 -->
+<!-- @dsCard group="Layout" height=594 -->
 <!doctype html>
 <html>
 <head>
@@ -13,19 +13,19 @@
   <header class="ws-page-bar">
     <div class="ws-page-bar__words">
       <h1 class="ws-page-bar__title">Team this month</h1>
-      <p class="ws-body">A page: two board columns wide at most, the 24 gutter (16 on a phone), its parts 16 apart.</p>
+      <span class="ws-page-bar__context">Since Oct 1</span>
     </div>
     <div class="ws-page-bar__acts">
-      <button class="ws-btn ws-btn--primary">Export</button>
+      <button type="button" class="ws-btn ws-btn--primary">Export</button>
     </div>
   </header>
 
-  <span class="ws-muted">.ws-board--4: small cards, one across, two from 40rem, four from 60rem of the page</span>
+  <span class="ws-muted">.ws-board--4 measures itself: one across, two from 40rem of its own width, four from 60rem</span>
   <ul class="ws-board ws-board--4" aria-label="This month">
-    <li class="ws-card ws-card--inset ws-stack ws-stack--tight"><span class="ws-muted">Calls</span><span class="ws-figure">142</span></li>
-    <li class="ws-card ws-card--inset ws-stack ws-stack--tight"><span class="ws-muted">Shows</span><span class="ws-figure">31</span></li>
-    <li class="ws-card ws-card--inset ws-stack ws-stack--tight"><span class="ws-muted">Follow-ups</span><span class="ws-figure">58</span></li>
-    <li class="ws-card ws-card--inset ws-stack ws-stack--tight"><span class="ws-muted">New leads</span><span class="ws-figure">14</span></li>
+    <li class="ws-card ws-card--inset ws-stack ws-stack--tight"><span class="ws-muted">Calls</span><span class="ws-figure ws-figure--tile">142</span></li>
+    <li class="ws-card ws-card--inset ws-stack ws-stack--tight"><span class="ws-muted">Shows</span><span class="ws-figure ws-figure--tile">31</span></li>
+    <li class="ws-card ws-card--inset ws-stack ws-stack--tight"><span class="ws-muted">Follow-ups</span><span class="ws-figure ws-figure--tile">58</span></li>
+    <li class="ws-card ws-card--inset ws-stack ws-stack--tight"><span class="ws-muted">New leads</span><span class="ws-figure ws-figure--tile">14</span></li>
   </ul>
 
   <span class="ws-muted">.ws-board: chart cards, two across once both fit at 480 (each up to 556), else one at full width</span>
@@ -39,18 +39,16 @@
         <span class="ws-chip">Follow-up</span>
       </div>
       <div class="ws-cluster ws-cluster--loose">
-        <button class="ws-btn ws-btn--secondary">Share</button>
-        <button class="ws-btn ws-btn--ghost">Not now</button>
+        <button type="button" class="ws-btn ws-btn--secondary">Share</button>
+        <button type="button" class="ws-btn ws-btn--ghost">Not now</button>
       </div>
     </section>
     <section class="ws-card ws-card--inset ws-stack ws-stack--loose" aria-labelledby="page-area">
-      <h2 class="ws-title" id="page-area">An area</h2>
-      <p class="ws-body">Small cards and tiles size from the page. Inside a card or a pane, mark the region .ws-area and they size from it instead.</p>
-      <div class="ws-area">
-        <div class="ws-board ws-board--4">
-          <div class="ws-plate ws-stack ws-stack--tight"><span class="ws-muted">Goal</span><span class="ws-section">40</span></div>
-          <div class="ws-plate ws-stack ws-stack--tight"><span class="ws-muted">Done</span><span class="ws-section">26</span></div>
-        </div>
+      <h2 class="ws-title" id="page-area">A board in a card</h2>
+      <p class="ws-body">The small-card board sizes from its own width, not the page's: in this card it is one across, with no .ws-area round it.</p>
+      <div class="ws-board ws-board--4">
+        <div class="ws-plate ws-stack ws-stack--tight"><span class="ws-muted">Goal</span><span class="ws-section">40</span></div>
+        <div class="ws-plate ws-stack ws-stack--tight"><span class="ws-muted">Done</span><span class="ws-section">26</span></div>
       </div>
     </section>
   </div>

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

@@ -0,0 +1,7 @@
+/* ---- Page: the page's own values in 0.5.0 (the page, the board and the stack live in _house.css). Seth's 32 gutter (D4) is the
+   global --ws-gutter now, 16 on a phone as before. A board of small cards measures itself (K3): one across, two from 40rem of the board's own
+   width, four from 60rem, so it is right in a pane, a column or the shell's body, with no .ws-area round it. ---- */
+.ws-board--4 { container: ws-board / inline-size; grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.ws-board--4 > * { grid-column: span 4; }
+@container ws-board (min-width: 40rem) { .ws-board--4 > * { grid-column: span 2; } }
+@container ws-board (min-width: 60rem) { .ws-board--4 > * { grid-column: span 1; } }