@felloinnovations/brand-kit 0.4.0 → 0.5.1

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

@@ -1,66 +1,122 @@
-A page's slim header: its one headline at 26 px, one line of what the page shows, and its acts at the right. The
-page-headline rule: a page names itself here, once, and its answer is the tiles and cards below, not a hero.
+A page's 56 px header, Seth's thread header: the app's face, the page's name and a quiet word of context at the left;
+its acts and a way back at the right. The page names itself here, once; its answer is the figures and cards below.
 
 ## Use it when
 
-- A page of the product or an artifact (a dashboard, a report, a list page) needs its name and one line of what it
-  shows above its tiles and cards.
-- The page has a few controls that act on the whole page (a period, Share, Export) and at most one navy button.
+- A page of the product or an artifact needs its name, what it belongs to ("Grow", "This month") and the few acts that
+  work on the whole page.
+- A report opens full screen from a chat and needs Seth's "Back to the chat".
+- In `AppShell`, as the bar itself: put `ws-app-shell__bar` and `ws-page-bar` on one `<header>`.
 
 ## Not for
 
-- A page whose top is an answer in itself, with a picture or a summary beside the words: use `PageHero`.
-- A card's own title and sentence: use the card's head (`.ws-head` with `.ws-title`, see `Card`).
-- A group of things inside a page: use `Section`.
-- A product area's own top bar with its links and search: use `TopBar` (in an app shell, the 56 px bar carries the
-  page's name; the page then needs no PageBar).
+- A page whose top is an answer in itself, with a picture or a big figure beside the words: use `PageHero` (or the
+  page's own figure) under this bar.
+- A card's own title: the card's head (`.ws-head`, see `Card`).
+- A group inside a page: `Section`.
+- Links across a product's sections: `TopBar` or `AppShell`'s nav.
 
 ## Anatomy
 
-- `<header class="ws-page-bar">`: a row that wraps, the words on the left and the acts on the right, bottom-aligned,
-  16 apart across and 8 apart when the acts wrap under.
-- Words (`__words`): the title (`__title`, the page's one `h1`: 26 px `--font-size-2xl`, semibold, 32 px line,
-  `--ws-tracking-title`, navy, balanced when it wraps); under it one line in `ws-body`; under that an optional slim
-  status (a `ws-meta` line, a chip), 4 apart.
-- Acts (`__acts`): the page's controls, 8 apart, the page's one primary last.
-- It sits first in `.ws-page`, one gap (16) above the tiles or the board.
+- `<header class="ws-page-bar">`: one row, at least 56 tall (`--ws-header-h`), words at the left and acts at the right,
+  centred on one line, 24 apart. No side padding of its own (the page's gutter or the shell's bar holds it); 8 above
+  and below, so a bar that wraps keeps clear of the edge above it (one line stays 56).
+- Words (`__words`), one line that wraps only when it must:
+  - Face (`__face`): the app's 20 px mark (`--ws-icon-lg`), 14 before the name. Optional.
+  - Name (`__title`): the page's one `h1`, 16 / 22 semibold navy (Seth's thread title), one line, truncated with its
+    full words in `title`.
+  - Context (`__context`): 14 / 20 in muted, 16 after the name (Seth's 18, on the scale). It wraps under the name on a
+    narrow page.
+- Acts (`__acts`), 8 apart:
+  - Fact (`__meta`): control words, 13 / 18 medium navy, its parts 6 apart ("Last audit", "Nov 2, today"), 16 before
+    the buttons (its own 8 and the acts' 8, Seth's gap). It also holds a working line.
+  - Buttons: `Button` secondary (quiet), at most one primary, last.
+  - Way back (`__back`): a 20 px icon, 10, then 15 / 20 regular navy words, no box (its focus ring takes the 4 px
+    control corners), 24 after the acts before it, at least 24 tall. Give it an `aria-label` that matches its words.
+  - A fact that is the last act (a working line) ends on the bar's edge, like a button would.
+- On a page that is narrower than 40rem the words keep 160 before the acts drop under them, and the way back shows its
+  icon alone in a 40 px target (`__back-words` hides; the `aria-label` names it).
+
+## Variants and sizes
+
+| Use | Shows |
+| --- | --- |
+| Thread header (a report from a chat) | Face, name, the app's name, a fact, quiet buttons, the way back |
+| A page of its own | Name, context, the page's controls and its one primary |
+| In `AppShell` | Either of those as the shell's bar, on the bar's 32 px edges |
 
 ## States
 
-- **Default**: title, line, acts.
-- **With a status**: a slim line under the line while something is being prepared or did not finish (a working dot
-  and words, never a spinner alone).
-- **No acts**: the words take the whole row.
-- **Narrow**: the acts wrap under the words; the title wraps (balanced) rather than truncating.
+- **Default**: as above.
+- **Working**: the fact slot says what is happening, a working dot and words (`role="status"`), never a spinner alone.
+- **No acts**: the words take the row.
+- **Long name**: one line with an ellipsis, the full name in `title`; the context wraps under it.
+- **Narrow**: the context goes under the name, then the acts go under the words. When the way back is the bar's only
+  act it keeps its icon on the name's line; with other acts it goes last on their line, under the name, on the right
+  rail (acts under the words take the whole line, however few they are). A fact takes a line of its own above the
+  buttons, so they and the way back stay on one line. So on a phone
+  in a shell keep the bar to the name and the way back, and move the rest into the page (K6).
+- **Hover** on the way back: its words underline. **Focus**: the house's 2 px navy ring.
 
 ## Behaviour
 
-- The title is the page's only `h1`; the cards below use `h2` or `h3`.
-- No motion of its own; the cards below rise in.
+- The name is the page's only `h1`; the cards below use `h2` or `h3`.
+- No motion of its own; the page's parts settle in below it.
 
 ## Content
 
-- The title is the page's name as the navigation says it ("How you show up"), sentence case, no period.
-- The line says what the page shows and for when ("this month", "the last 90 days"), one sentence.
-- One navy button at most, the page's one primary; the others are secondary or ghost.
+- The name is the page's name as the nav or the chat says it ("Audit report"), sentence case, no period.
+- The context is one or two words: the app ("Grow") or the window ("This month").
+- One navy button at most, the page's one primary; the rest are quiet.
 
 ## Props
 
 | Name | Type | Meaning |
 | --- | --- | --- |
 | `title` | `string` | The page's name, its one `h1` |
-| `line` | `ReactNode` | One line of what the page shows |
-| `status` | `ReactNode` | A slim status under the line |
+| `face` | `ReactNode` | The app's 20 px mark |
+| `context` | `ReactNode` | The quiet word beside the name |
+| `meta` | `ReactNode` | A fact before the acts, or a working line |
 | `actions` | `ReactNode` | The page's controls and its one primary |
+| `back` | `{ label, href }` | The way back, last |
 
 ## Rules
 
-- **The page-headline rule**: a page's headline is this bar's 26 px title, once; no second heading in the canvas, no
-  hero on a page whose answer is tiles and cards.
+- **One name per page**, here, once; no second heading repeats it in the body.
 - **One primary per page**, here or in a card's band, never both.
+- **One line where it sticks**: as a shell's bar under 40rem it keeps one 56 px line (K6): the context goes (North's
+  rule: the secondary words go, the title stays), then the name gives way with its ellipsis and its `title`.
 
 ## Source
 
-**Derived from**: the first product's Grow pages (`PageBar`, the dashboard arrangement, 23 Oct 2026): the title, one
-line, a status under it, the controls and the one navy button on the right. **Precedent**: the first product built on
-the system.
+**Derived from**: Seth's Fia thread header (Figma `301:1632`, same in `305:2282`, `308:2468`, `313:2673`,
+`319:3304`): 56 tall, 32 px sides, face 20, 14, name 16 / 22 semibold, 18, app name 14 / 20; at the right a fact in
+13 / 18 medium, two quiet 32 px buttons and "Back to the chat" (20 px icon, 10, 15 / 20). It replaces 0.4's 26 px
+headline bar (Seth wins, D1).
+
+## Markup
+
+```html
+<header class="ws-page-bar">
+  <div class="ws-page-bar__words">
+    <svg class="ws-page-bar__face" viewBox="0 0 20 20" aria-hidden="true"><!-- the app's mark --></svg>
+    <h1 class="ws-page-bar__title">Audit report</h1>
+    <span class="ws-page-bar__context">Grow</span>
+  </div>
+  <div class="ws-page-bar__acts">
+    <p class="ws-page-bar__meta"><span>Last audit</span><span>Nov 2, today</span></p>
+    <button type="button" class="ws-btn ws-btn--secondary">Refresh</button>
+    <a href="/chat" class="ws-page-bar__back" aria-label="Back to the chat">
+      <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3v5H3M12 3v5h5M8 17v-5H3M12 17v-5h5"/></svg>
+      <span class="ws-page-bar__back-words">Back to the chat</span>
+    </a>
+  </div>
+</header>
+```
+
+## Styles
+
+`PageBar/style.css`; the buttons are `Button`'s. It is a size container named `ws-page-bar`. Tokens:
+`--ws-header-h`, `--font-size-md`, `--ws-leading-section`, `--ws-text-body`, `--ws-leading-row`, `--ws-text-control`,
+`--ws-leading-control`, `--ws-text-section`, `--ws-icon-lg`, `--ws-touch`, `--color-text-heading`,
+`--color-text-muted`.

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Layout" height=420 -->
+<!-- @dsCard group="Layout" height=458 -->
 <!doctype html>
 <html>
 <head>
@@ -11,47 +11,88 @@
 <div class="ws-stage ws-stage--column">
 
   <div class="ws-stack">
-    <span class="ws-muted">Default: the page's one h1, one line of what it shows, its acts at the right (the page's one primary last)</span>
+    <span class="ws-muted">Seth's thread header: the app's face, the page's name and the app, a fact and two quiet acts, then the way back</span>
     <header class="ws-page-bar">
       <div class="ws-page-bar__words">
-        <h1 class="ws-page-bar__title">How you show up</h1>
-        <p class="ws-body">Your calls, shows and follow-ups this month, against your goals.</p>
+        <svg class="ws-page-bar__face" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 16.5V9l6.5-5.5L16.5 9v7.5Z"/><path d="M8 16.5v-4h4v4"/></svg>
+        <h1 class="ws-page-bar__title">Audit report</h1>
+        <span class="ws-page-bar__context">Grow</span>
       </div>
       <div class="ws-page-bar__acts">
-        <div class="ws-segmented" role="tablist" aria-label="Period">
-          <button class="ws-segmented__item" role="tab" aria-selected="false">Week</button>
-          <button class="ws-segmented__item" role="tab" aria-selected="true">Month</button>
-        </div>
-        <button class="ws-btn ws-btn--secondary">Share</button>
-        <button class="ws-btn ws-btn--primary">Plan next week</button>
+        <p class="ws-page-bar__meta"><span>Last audit</span><span>Nov 2, today</span></p>
+        <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.5 8a5.5 5.5 0 1 1-1.6-3.9M13.5 2.5v3h-3"/></svg>
+          Refresh
+        </button>
+        <button type="button" class="ws-btn ws-btn--secondary">Settings</button>
+        <a href="#" class="ws-page-bar__back" aria-label="Back to the chat" onclick="return false;">
+          <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3v5H3M12 3v5h5M8 17v-5H3M12 17v-5h5"/></svg>
+          <span class="ws-page-bar__back-words">Back to the chat</span>
+        </a>
       </div>
     </header>
   </div>
 
   <div class="ws-stack">
-    <span class="ws-muted">With a status under the line, and no acts</span>
+    <span class="ws-muted">A page of its own: the name and its context, a period and the page's one primary last</span>
     <header class="ws-page-bar">
       <div class="ws-page-bar__words">
-        <h1 class="ws-page-bar__title">Fixes</h1>
-        <p class="ws-body">What to change first, from your last ten calls.</p>
-        <p class="ws-cluster ws-cluster--tight ws-meta"><span class="ws-dot ws-working" aria-hidden="true"></span>This week's audit is still being prepared</p>
+        <h1 class="ws-page-bar__title">How you show up</h1>
+        <span class="ws-page-bar__context">This month, against your goals</span>
+      </div>
+      <div class="ws-page-bar__acts">
+        <div class="ws-segmented" role="tablist" aria-label="Period">
+          <button type="button" class="ws-segmented__item" role="tab" aria-selected="false">Week</button>
+          <button type="button" class="ws-segmented__item" role="tab" aria-selected="true">Month</button>
+        </div>
+        <button type="button" class="ws-btn ws-btn--primary">Plan next week</button>
       </div>
     </header>
   </div>
 
-  <div class="ws-stack" style="width: 300px; max-width: 100%;">
-    <span class="ws-muted">Narrow: the acts wrap under the words, never squeezing the title</span>
+  <div class="ws-stack">
+    <span class="ws-muted">Working: the fact slot says what is happening, a working dot and words, never a spinner alone; no acts</span>
     <header class="ws-page-bar">
       <div class="ws-page-bar__words">
-        <h1 class="ws-page-bar__title">What clients say</h1>
-        <p class="ws-body">Reviews from the last 90 days.</p>
+        <h1 class="ws-page-bar__title">Fixes</h1>
+        <span class="ws-page-bar__context">Grow</span>
       </div>
       <div class="ws-page-bar__acts">
-        <button class="ws-btn ws-btn--primary">Ask for a review</button>
+        <p class="ws-page-bar__meta" role="status"><span class="ws-cluster ws-cluster--tight"><span class="ws-dot ws-working" aria-hidden="true"></span>Preparing this week's audit</span></p>
       </div>
     </header>
   </div>
 
+  <div class="ws-cluster ws-cluster--start ws-cluster--component">
+    <div class="ws-stack" style="width: 340px; max-width: 100%;">
+      <span class="ws-muted">Narrow: a long name gives way with an ellipsis, the context wraps under it, the way back keeps its icon</span>
+      <header class="ws-page-bar">
+        <div class="ws-page-bar__words">
+          <h1 class="ws-page-bar__title" title="What buyers ask before a showing">What buyers ask before a showing</h1>
+          <span class="ws-page-bar__context">Coach</span>
+        </div>
+        <div class="ws-page-bar__acts">
+          <a href="#" class="ws-page-bar__back" aria-label="Back to the chat" onclick="return false;">
+            <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3v5H3M12 3v5h5M8 17v-5H3M12 17v-5h5"/></svg>
+            <span class="ws-page-bar__back-words">Back to the chat</span>
+          </a>
+        </div>
+      </header>
+    </div>
+    <div class="ws-stack" style="width: 340px; max-width: 100%;">
+      <span class="ws-muted">Narrow with a primary: the context wraps under the name and the act keeps its place; it drops under the words only when they would go under 160</span>
+      <header class="ws-page-bar">
+        <div class="ws-page-bar__words">
+          <h1 class="ws-page-bar__title">What clients say</h1>
+          <span class="ws-page-bar__context">The last 90 days</span>
+        </div>
+        <div class="ws-page-bar__acts">
+          <button type="button" class="ws-btn ws-btn--primary">Ask for a review</button>
+        </div>
+      </header>
+    </div>
+  </div>
+
 </div>
 </body>
 </html>

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

@@ -0,0 +1,35 @@
+/* ---- PageBar: a page's 56 px header, Seth's thread header (D1). At the left the app's 20 px face, the page's name (its one
+   h1, 16 / 22 semibold) and a quiet word of context; at the right its acts and, last, a way back. One line; on a narrow
+   page the acts wrap under the words. No side padding of its own: the page's gutter (or the shell's bar) holds it; 8
+   above and below, so a wrapped bar keeps its edges (one line stays 56). ---- */
+.ws-page-bar { container: ws-page-bar / inline-size; display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-lg); min-height: var(--ws-header-h); padding-block: var(--space-xs); }
+.ws-page-bar__words { display: flex; flex: 1 1 0; flex-wrap: wrap; align-items: center; column-gap: var(--space-md); min-width: min(100%, var(--space-9xl)); }
+.ws-page-bar__face { flex-shrink: 0; width: var(--ws-icon-lg); height: var(--ws-icon-lg); margin-inline-end: calc(var(--space-sm-plus) - var(--space-md)); }
+.ws-page-bar__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-md); line-height: var(--ws-leading-section); font-weight: 600; letter-spacing: var(--ws-tracking-title); color: var(--color-text-heading); }
+.ws-page-bar__context { min-width: 0; font-size: var(--ws-text-body); line-height: var(--ws-leading-row); color: var(--color-text-muted); }
+.ws-page-bar__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); min-width: 0; }
+/* A fact before the acts ("Last audit  Nov 2, today"): control words, 6 apart. */
+.ws-page-bar__meta { display: inline-flex; flex-wrap: wrap; column-gap: var(--space-xxs-plus); padding-inline-end: var(--space-xs); font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 500; color: var(--color-text-heading); }
+.ws-page-bar__meta:last-child { padding-inline-end: 0; }
+/* The way back ("Back to the chat"): a 20 px icon and 15 px words, no box, 24 after the acts before it. */
+.ws-page-bar__back { display: inline-flex; align-items: center; gap: var(--space-xs-plus); min-height: var(--space-lg); padding: 0; border: 0; border-radius: var(--ws-radius-control); background: none; font-size: var(--ws-text-section); line-height: var(--ws-leading-row); font-weight: 400; color: var(--color-text-heading); text-decoration: none; white-space: nowrap; cursor: pointer; }
+.ws-page-bar__acts > * + .ws-page-bar__back { margin-inline-start: var(--space-md); }
+.ws-page-bar__back > svg { flex-shrink: 0; width: var(--ws-icon-lg); height: var(--ws-icon-lg); }
+@media (hover: hover) { .ws-page-bar__back:hover { text-decoration: underline; text-underline-offset: var(--space-xxs); } }
+/* A narrow bar keeps its one line (K6): the words keep 160 before the acts drop under them, the way back is its icon
+   alone, a 40 px target, named by its aria-label. A fact takes a line of its own, so the buttons and the way back share
+   the next one, the way back on the right rail (never alone on a line at the left). Acts that drop under the words take
+   that whole line, so the way back reaches the rail even when they are narrower than the bar; beside the words they
+   keep their own width (the words take the line's room first, 999 to 1). */
+@container ws-page-bar (max-width: 40rem) {
+  .ws-page-bar__words { flex-grow: 999; min-width: min(100%, var(--space-8xl)); }
+  .ws-page-bar__acts { flex-grow: 1; }
+  .ws-page-bar__meta { flex-basis: 100%; padding-inline-end: 0; }
+  .ws-page-bar__back { justify-content: center; min-width: var(--ws-touch); min-height: var(--ws-touch); }
+  .ws-page-bar__back-words { display: none; }
+  .ws-page-bar__acts > * + .ws-page-bar__back { margin-inline-start: auto; }
+  /* As a shell's bar it sticks, so it keeps its one 56 px line: the context goes (Seth's R6, the secondary words go and
+     the title stays), then the name gives way with its ellipsis. */
+  .ws-app-shell__bar > .ws-page-bar__words { flex-wrap: nowrap; }
+  .ws-app-shell__bar > .ws-page-bar__words > .ws-page-bar__context { display: none; }
+}

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

@@ -1,64 +1,67 @@
-A page's slim hero: a small eyebrow, the page's finding as its headline, a line or two under it, its one act, and
-a picture beside them, all on the page's own wash rather than inside a card.
+A page's slim hero: a small eyebrow, the page's finding as its headline, a line under it, its one act, and a picture
+beside them, on the page's own wash rather than inside a card.
 
 ## Use it when
 
-- An app page's dashboard needs to open with its one finding in words, before the cards that back it up (a sales
-  app's Team and Pipeline pages).
+- An app page needs to open with its one finding in words, before the cards that back it up (a sales app's Team and
+  Pipeline pages).
 - The page has a picture, chart or sample worth showing beside its headline.
 
 ## Not for
 
-- Every page: most app pages use `PageBar`'s plain 26 px headline instead (no hero, no picture); reach for
-  `PageHero` only when a page's opening finding earns the extra room.
-- A card's own head (`ws-head`, `ws-title`): `PageHero` sits on the page's wash, never inside a `ws-card`.
-- A chat's own greeting ("Morning, Ryan."): that is Home's own 22 px greeting line, not this component.
+- Every page: most pages have only `PageBar` and go straight to their figures and cards.
+- A card's own head (`ws-head`, `ws-title`): the hero sits on the page, never inside a `ws-card`.
+- A big score as the page's answer: that is the score figure (`ws-figure--score`, 96 / 96) or `ScoreHero`.
 
 ## Anatomy
 
-- Layout: a two-column grid from the `lg` area up (`minmax(0,1fr) minmax(0,1fr)`) when it has an aside, stacked below
-  it; `--space-2xl` (32 px) between the columns, `--space-lg` (24 px) between the stacked rows. The area is the nearest
-  `.ws-page` or `.ws-area` (a container query, not the window).
-- Eyebrow: `ws-muted` (12 px, `--color-text-muted`).
-- Headline: `--font-size-2xl` (26 px) from the small area, growing to `--font-size-3xl` (40 px) from the `lg`
-  area; semibold, `--ws-tracking-title`, navy.
-- Lines: `--font-size-md` (16 px), relaxed line height, `--color-text-body`, capped at prose width.
-- Action: the page's one navy button, `--space-xs` above the lines.
-- Aside: the page's picture, filling the second column, no fixed height of its own. Optional: without it the words take
-  the whole width.
-- In fello.css: `.ws-page-hero` (+ `--cool`, `--team`), `__words`, `__title`, `__lines`, `__acts`, `__aside`.
+- Layout: it measures itself (a size container named `ws-page-hero`, K3). Under 60rem of its own width, one column,
+  24 between rows; from 60rem, when it has an aside, two columns 64 apart (`--space-4xl`, Seth's Tally hero): equal
+  halves, or the words take the rest and the aside `--ws-page-hero-aside` (Tally's status is 600:
+  `calc(var(--space-9xl) * 3)`).
+- Eyebrow: `ws-muted` (12 / 16); on a wash it takes the body grey, its AA step there (the cool wash's corner leaves
+  muted at 4.49 : 1).
+- Figure (`__figure`): optional, the finding as a number above the headline (Seth's Tally "$29,472"): 96 / 96 regular
+  navy (`--ws-text-score`), -3%, proportional figures, one line that is never cut. Under 26rem of the words it steps to
+  72 (`--ws-text-display`); in a narrower column it gives way to a quarter of the column's width.
+- Headline (`__title`): 26 / 32 semibold navy (`--font-size-2xl`); from 60rem 40 / 48 (`--font-size-3xl`, Seth's
+  Tally H1), `--ws-tracking-title`, balanced when it wraps.
+- Lines (`__lines`): 14 / 22 in the body grey (Seth's hero sentence), up to 60 characters wide.
+- Words (`__words`): 6 apart (Seth's headline gap).
+- Act (`__acts`): the page's one navy button, 12 under the lines; a note beside it 14 after.
+- Aside (`__aside`): the picture, filling its column, no fixed height, centred against the words. Optional.
+  `__aside--top`: a status (a `ShareBar` and its act, Tally) sits at the top, 32 down, from 60rem.
+- In fello.css: `.ws-page-hero` (+ `--cool`, `--team`), `__words`, `__figure`, `__title`, `__lines`, `__acts`,
+  `__aside` (+ `--top`).
 
 ## Variants and sizes
 
-| Area width | Headline size |
-| --- | --- |
-| Below `lg` (under 60rem) | 26 px, one column, the aside stacked under the words |
-| `lg` and up | 40 px, two columns side by side |
+| Its own width | Headline | Layout |
+| --- | --- | --- |
+| Under 60rem | 26 / 32 | One column, the aside under the words |
+| 60rem and up | 40 / 48 | Two columns, 64 apart, when it has an aside; the aside half, or `--ws-page-hero-aside` |
 
 ## States
 
-- **Default**: as drawn above, on the page's plain cream.
-- **With a wash**: a faint radial tint behind the words, `.ws-page-hero--cool` (`--ws-cool-glow`) or
-  `.ws-page-hero--team` (`--ws-team-glow`); the hero then takes 24 px inside (`--space-lg`) and the card's 8 px corners so
-  the wash shows round the words. Always still, never animated.
-- **No aside**: the words take the whole width at every size; the hero stays one column (it only goes two-column when
-  it has an aside).
-- **No lines**: the headline and action sit alone, no gap left where the lines would be.
-- **No action**: the lines run to the hero's edge with no button under them.
-- **Narrow**: the aside drops below the words instead of beside them.
+- **Default**: on the page's plain cream.
+- **With a wash**: `--cool` (`--ws-cool-glow`) or `--team` (`--ws-team-glow`); the hero then takes 24 inside and 8 px
+  corners so the wash shows round the words. Always still.
+- **No aside**: the words take the whole width at every size.
+- **No lines** or **no act**: nothing is left where they would be.
+- **With a figure**: the number above the headline, 6 apart; on a 320 phone it is 72 and never cut.
+- **Narrow**: the aside drops under the words.
+- **Dark**: the washes have their own dark values; nothing else changes.
 
 ## Behaviour
 
-- No keyboard behaviour of its own beyond its one button and any links inside `lines`.
-- Motion: none; a hero is still even while the rest of the page animates in.
-- Hidden when expanded: when a page already says in its cards what the hero would say, the hero is left out
-  rather than repeating it (the system's rule, "Hero blocks stay slim").
+- No keyboard behaviour of its own beyond its button and any links in its lines.
+- No motion: the hero is still while the page settles in.
+- Left out when the cards already say what it would say ("Hero blocks stay slim").
 
 ## Content
 
-- The headline states the finding, not the topic ("Your team this month" says less than the real pages do;
-  prefer an answer like "Six of eight reached out this week" where the data allows it).
-- One or two lines at most under the headline; longer explanation belongs in the cards below.
+- The headline states the finding ("Six of eight reached out this week"), not the topic.
+- One or two lines under it; the rest belongs in the cards.
 - No em dashes.
 
 ## Props
@@ -66,21 +69,54 @@ a picture beside them, all on the page's own wash rather than inside a card.
 | Name | Type | Meaning |
 | --- | --- | --- |
 | `eyebrow` | `ReactNode` | The small label above the headline |
-| `title` | `ReactNode` | The headline itself |
-| `lines` | `ReactNode` | The line or two under it (optional) |
-| `action` | `ReactNode` | The page's one navy button (optional) |
-| `aside` | `ReactNode` | The picture on the right (optional: without it the words span the width) |
+| `figure` | `ReactNode` | The number above the headline |
+| `title` | `ReactNode` | The headline |
+| `lines` | `ReactNode` | The line or two under it |
+| `action` | `ReactNode` | The page's one navy button |
+| `aside` | `ReactNode` | The picture beside it |
+| `asideWidth` | `string` | A token for `--ws-page-hero-aside`; default half |
+| `asideTop` | `boolean` | The aside at the top, 32 down, not centred |
+| `wash` | `'cool'` \| `'team'` | The faint wash behind it |
 
 ## Rules
 
-- **Hero blocks stay slim: one line, not a banner** (the system's rule); hide it entirely when the screen already
-  says what it would say.
-- Tokens only: the washes are the page-wash tokens `--ws-cool-glow` and `--ws-team-glow` (`tokens/_product.css`,
-  declared in `tokens.css` and `fello.css`; `tokens.json` names them in its meta note, since a gradient cannot be held
-  there). No raw colour, size or radius.
+- **Hero blocks stay slim**: one finding, not a banner; hide it when the screen already says it.
+- **Size from itself, not the page** (K3): the same hero is right in a pane and a page.
+- Tokens only: no raw colour, size or radius.
 
 ## Source
 
-- **Derived from**: the system's page-wash and slim-hero rules (`--ws-cool-glow`/`--ws-team-glow`, the plainer
-  headline most pages use instead).
-- **Precedent**: the first product built on the system, 23 Oct 2026.
+**Derived from**: the system's page-wash and slim-hero rules, Seth's Tally report hero (Figma `319:3317`: H1 40 / 48
+semibold, sentence 14 / 22, 6 apart, two columns 64 apart, the act 12 under) and Revenue OS fault K3 (a hero that read
+its size from whichever ancestor was a container). **Precedent**: the first product built on the system.
+
+## Markup
+
+```html
+<section class="ws-page-hero ws-page-hero--cool" aria-labelledby="hero-title">
+  <div class="ws-page-hero__words">
+    <p class="ws-muted">Progress</p>
+    <h2 id="hero-title" class="ws-page-hero__title">Six of eight reached out this week</h2>
+    <div class="ws-page-hero__lines"><p>Cold calls carried most of the gain.</p></div>
+    <div class="ws-page-hero__acts"><button type="button" class="ws-btn ws-btn--primary">See the team</button></div>
+  </div>
+  <div class="ws-page-hero__aside"><!-- the picture --></div>
+</section>
+
+<!-- Tally: a figure above the headline, a 600 status at the top -->
+<section class="ws-page-hero" style="--ws-page-hero-aside: calc(var(--space-9xl) * 3);" aria-labelledby="tally-title">
+  <div class="ws-page-hero__words">
+    <p class="ws-page-hero__figure">$29,472</p>
+    <h2 id="tally-title" class="ws-page-hero__title">a year off your tools by Q1 2027</h2>
+    <div class="ws-page-hero__lines"><p>Out of $77,472 a year across 5 tools.</p></div>
+  </div>
+  <div class="ws-page-hero__aside ws-page-hero__aside--top"><!-- a ShareBar and its act --></div>
+</section>
+```
+
+## Styles
+
+`PageHero/style.css`. The words are a size container too (for the figure). Tokens: `--ws-text-score`,
+`--ws-text-display`, `--ws-tracking-display`, `--font-size-2xl`, `--font-size-3xl`, `--space-xl`, `--space-3xl`, `--space-4xl`,
+`--space-lg`, `--space-xxs-plus`, `--ws-text-body`, `--ws-leading-section`, `--ws-tracking-title`, `--ws-cool-glow`,
+`--ws-team-glow`, `--ws-radius-card`, `--color-text-heading`, `--color-text-body`.

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Desk" height=914 -->
+<!-- @dsCard group="Desk" height=1074 -->
 <!doctype html>
 <html>
 <head>
@@ -10,8 +10,8 @@
 <body>
 <div class="ws-stage ws-stage--column" style="align-items: center;">
 
-  <div class="ws-stack ws-area" style="width: 900px; max-width: 100%;">
-    <span class="ws-muted">Below the `lg` area: the 26 px headline, the aside under the words, the cool wash</span>
+  <div class="ws-stack" style="width: 900px; max-width: 100%;">
+    <span class="ws-muted">Under 60rem of its own width (here 900 px): the 26 px headline, the aside under the words, the cool wash</span>
     <section class="ws-page-hero ws-page-hero--cool" aria-labelledby="hero-narrow">
       <div class="ws-page-hero__words">
         <p class="ws-muted">Progress</p>
@@ -25,7 +25,7 @@
     </section>
   </div>
 
-  <div class="ws-stack ws-area" style="width: 900px; max-width: 100%;">
+  <div class="ws-stack" style="width: 900px; max-width: 100%;">
     <span class="ws-muted">No aside: the words take the whole width at every size, the team wash</span>
     <section class="ws-page-hero ws-page-hero--team" aria-labelledby="hero-plain">
       <div class="ws-page-hero__words">
@@ -40,8 +40,8 @@
 </div>
 <div class="ws-stage ws-stage--column ws-stage--bleed" style="padding-bottom: var(--ws-gap-component);">
 
-  <div class="ws-stack ws-area">
-    <span class="ws-muted" style="padding: 0 var(--ws-gap-component);">From the `lg` area (60rem) up: the 40 px headline, words and aside side by side</span>
+  <div class="ws-stack">
+    <span class="ws-muted" style="padding: 0 var(--ws-gap-component);">From 60rem of its own width: the 40 / 48 headline, words and aside side by side, 64 apart</span>
     <section class="ws-page-hero ws-page-hero--cool" aria-labelledby="hero-wide">
       <div class="ws-page-hero__words">
         <p class="ws-muted">Progress</p>
@@ -55,6 +55,35 @@
     </section>
   </div>
 
+  <div class="ws-stack">
+    <span class="ws-muted" style="padding: 0 var(--ws-gap-component);">Seth's Tally hero: a figure above the headline (96, 72 under 26rem of the words, never cut), a 600 status at the top (--ws-page-hero-aside, __aside--top)</span>
+    <div style="padding: 0 var(--ws-gap-component);">
+      <section class="ws-page-hero" style="--ws-page-hero-aside: calc(var(--space-9xl) * 3);" aria-labelledby="hero-tally">
+        <div class="ws-page-hero__words">
+          <p class="ws-page-hero__figure">$29,472</p>
+          <h2 id="hero-tally" class="ws-page-hero__title">a year off your tools by Q1 2027</h2>
+          <div class="ws-page-hero__lines"><p>Out of $77,472 a year across 5 tools. Email turns off today, your website and CRM in Q1 2027.</p></div>
+        </div>
+        <div class="ws-page-hero__aside ws-page-hero__aside--top">
+          <figure class="ws-share-bar" aria-label="Where your $77,472 goes: 38% comes off.">
+            <div class="ws-share-bar__head" aria-hidden="true"><span>Where your $77,472 goes</span><span>38% comes off</span></div>
+            <div class="ws-share-bar__bar" aria-hidden="true">
+              <span class="ws-share-bar__part" style="--share: 26.3%; --tone: var(--ws-chart-past-half);"></span>
+              <span class="ws-share-bar__part" style="--share: 9.6%; --tone: var(--ws-chart-finished);"></span>
+              <span class="ws-share-bar__part" style="--share: 2.1%; --tone: var(--ws-chart-under-half);"></span>
+            </div>
+            <ul class="ws-share-bar__key" aria-hidden="true">
+              <li class="ws-share-bar__item" style="--tone: var(--ws-chart-past-half);">Website &amp; IDX <b>$20,400</b></li>
+              <li class="ws-share-bar__item" style="--tone: var(--ws-chart-finished);">CRM <b>$7,452</b></li>
+              <li class="ws-share-bar__item" style="--tone: var(--ws-chart-under-half);">Email <b>$1,620</b></li>
+              <li class="ws-share-bar__item">Paid ads <b>$48,000</b> stays</li>
+            </ul>
+          </figure>
+        </div>
+      </section>
+    </div>
+  </div>
+
 </div>
 </body>
 </html>

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

@@ -0,0 +1,31 @@
+/* ---- PageHero: a page's slim hero, its finding as the headline, a line, its one act and a picture beside them.
+   It measures itself (K3): one column with the 26 px headline; from 60rem of its own width the 40 / 48 headline (Seth's
+   Tally H1) and, when it has an aside, two columns 64 apart, the aside half the width or --ws-page-hero-aside (Tally's
+   status is 600). With no aside the words take the whole width. ---- */
+.ws-page-hero { container: ws-page-hero / inline-size; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--ws-page-hero-aside, 1fr)); align-items: center; column-gap: var(--space-4xl); row-gap: var(--space-lg); }
+.ws-page-hero > * { grid-column: 1 / -1; min-width: 0; }
+/* A faint wash behind it (the page-wash tokens), padded so the wash shows round the words. */
+.ws-page-hero--cool, .ws-page-hero--team { border-radius: var(--ws-radius-card); padding: var(--space-lg); }
+.ws-page-hero--cool { background-image: var(--ws-cool-glow); }
+.ws-page-hero--team { background-image: var(--ws-team-glow); }
+/* Muted words on a wash take the body grey, their AA step on that ground (D2): the cool wash's corner is 4.49 : 1 under
+   muted in a narrow hero. */
+:is(.ws-page-hero--cool, .ws-page-hero--team) .ws-muted { color: var(--color-text-body); }
+/* The words measure themselves too, so the figure fits the column it is in, beside an aside or alone. */
+.ws-page-hero__words { container-type: inline-size; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xxs-plus); }
+/* The figure above the headline (Seth's Tally 90 / 100, on the kit's 96 / 96 score step, D6): one line, never cut; under
+   26rem of the words it steps to 72, and in a narrower column it gives way to a quarter of the column's width (72 on a
+   320 phone). */
+.ws-page-hero__figure { max-width: 100%; font-size: min(var(--ws-text-score), 25cqi); line-height: 1; font-weight: 400; letter-spacing: var(--ws-tracking-display); color: var(--color-text-heading); font-variant-numeric: proportional-nums; white-space: nowrap; }
+@container (max-width: 26rem) { .ws-page-hero__figure { font-size: min(var(--ws-text-display), 25cqi); } }
+.ws-page-hero__title { font-size: var(--font-size-2xl); line-height: var(--space-xl); font-weight: 600; letter-spacing: var(--ws-tracking-title); color: var(--color-text-heading); text-wrap: balance; overflow-wrap: break-word; max-width: 100%; }
+.ws-page-hero__lines { max-width: 60ch; text-wrap: pretty; display: flex; flex-direction: column; gap: var(--space-xs); font-size: var(--ws-text-body); line-height: var(--ws-leading-section); color: var(--color-text-body); }
+.ws-page-hero__acts { margin-top: var(--space-xxs-plus); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm-plus); }
+/* Under a status in the aside (Tally's ShareBar), the act is 12 under it too: the aside has no gap of its own. */
+.ws-page-hero__aside > .ws-page-hero__acts { margin-top: var(--space-sm); }
+@container ws-page-hero (min-width: 60rem) {
+  .ws-page-hero > :is(.ws-page-hero__words, .ws-page-hero__aside):not(:only-child) { grid-column: auto; }
+  .ws-page-hero__title { font-size: var(--font-size-3xl); line-height: var(--space-3xl); }
+  /* --top: a status beside the words sits at the top, 32 down (Seth's Tally status, pt 34 on the grid), not centred. */
+  .ws-page-hero__aside--top { align-self: start; padding-top: var(--space-xl); }
+}