@felloinnovations/brand-kit 0.4.0 → 0.5.0

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

@@ -0,0 +1,91 @@
+A report's score the way Seth draws it: the 96 px figure, a strip of ticks across the page and the rating in words.
+
+**Use it when**
+
+- A report opens on one score out of a whole ("72", "10 of 16") and the reader needs to know at once how good it is.
+- The score carries a rating (strong, getting there, needs work) and one sentence on what to do next.
+- It is the first thing on a full page (an audit report, a check's view), not a card in a board.
+
+**Not for**
+
+- A goal's share with the gradient strip and a breakdown, in a card: use `GoalTicks`.
+- A row of a list with its own small strip: use `TickStrip` inside the row, with a 28 px figure (`ws-figure--row`).
+- A page's few numbers side by side: use `StatTiles`.
+
+**Anatomy**
+
+- A column, 16 apart (`--space-md`): the head, the strip, the summary.
+- Head: the figure (`ws-figure ws-figure--score`: 96/96, weight 400, -3%, navy, proportional numerals so its ink sits on the strip's
+  edge as in Seth's frame; tabular ones put "10 of 16" 11 px in). A line that
+  explains the figure ("We asked 4 AI assistants...") sits 2 under it, 15/22 in `--color-text-body`.
+- Strip: a `TickStrip --lg` (40 tall, 4 apart): 50 ticks for a score out of 100, one tick a unit for a count (16).
+- Summary: the rating word (15/22 semibold, in the tone's AA word), 10, then the sentence (15/22 regular,
+  `--color-text-body`), as running text that wraps.
+- It measures itself: in a column under 26rem the figure steps down to 72/72, so "10 of 16" fits a phone.
+
+| Modifier | Strip | Rating word |
+| --- | --- | --- |
+| default, strong | `--ws-rating-strong` (teal) | `--ws-word-positive` |
+| `--middle`, getting there | `--color-text-interactive` (mid blue, lifted in dark) | `--color-text-interactive` |
+| `--needs-work` | `--ws-rating-needs-work` (pink) | `--ws-word-needs-work` |
+| `--none`, not checked | every tick the track | `--color-text-muted` |
+
+**Parts and modifiers**
+
+- `.ws-score-hero__ghost`: loading: a ghost the size of the figure (with `ws-shimmer`).
+- `.ws-score-hero__ghost--line`: loading: a ghost the size of the summary line.
+
+**States**
+
+- Default: the strip draws once (`--draw` on the strip, 900 ms); the summary settles in (rises 6 px out of a 3 px blur)
+  once the draw is half way. The figure does not count up (North: headline figures are static).
+- Not checked: an en dash in muted words in place of the figure (`__figure--none`, with `aria-hidden`; the section's
+  label says "not checked"), every tick the track, "Could not check" and why.
+- Loading: a ghost the figure's height, the strip as a ghost (`--loading`) and a ghost line, all in the chart colours'
+  sweep; `aria-busy="true"` on the section.
+- Long sentence: wraps as running text under the rating; the figure never wraps.
+- Reduced motion: no draw, no settle; the ghosts stay still.
+- Hover, focus, pressed: do not apply; it is read, not pressed.
+
+**Behaviour**
+
+- The section carries `aria-label` with the whole score in words ("Your score: 72 of 100, strong"); the strip is
+  `aria-hidden`.
+
+**Content**
+
+- The figure is the score as people say it: "72", "10 of 16". No percent sign on a score out of 100.
+- The rating is one or two words; the sentence names the next thing to do.
+
+**Rules**
+
+- One ScoreHero a page, at its top. Everything under it is smaller (44 pane, 32 tile, 28 row figures).
+- Marks keep Seth's tones; the rating word takes its AA step on the ground it sits on.
+- The not-checked figure is an en dash, never an em dash and never a zero.
+
+**Source**
+
+**Derived from**: Seth's Grow audit, "Your score" (301:1668) and "Which AI platforms mention you" (305:2318); the middle
+band's tone is D10 (Seth did not draw it). North's draw and settle for the motion.
+
+**Markup**
+
+```html
+<section class="ws-score-hero ws-score-hero--needs-work" aria-label="Your score: 39 of 100, needs work">
+  <div class="ws-score-hero__head">
+    <p class="ws-figure ws-figure--score ws-score-hero__figure">39</p>
+  </div>
+  <div class="ws-tick-strip ws-tick-strip--lg ws-tick-strip--draw" style="--n: 50;" aria-hidden="true">
+    <span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 0;"></span>
+    <!-- 20 lit, then 30 of the track -->
+    <span class="ws-tick-strip__tick"></span>
+  </div>
+  <p class="ws-score-hero__summary">
+    <span class="ws-score-hero__rating">Needs work</span>
+    <span class="ws-score-hero__line">Start with Local search.</span>
+  </p>
+</section>
+```
+
+**Styles**: `ScoreHero/style.css` (with `TickStrip/style.css`), in `bundle.css` and `fello.css` as `.ws-score-hero`.
+Every value is a token.

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

@@ -0,0 +1,104 @@
+<!-- @dsCard group="Charts" height=1400 -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>ScoreHero</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: 886px;">
+    <span class="ws-muted">Strong: the overall score, its strip drawn in once, the rating and what to do next</span>
+    <section class="ws-score-hero" aria-label="Your score: 72 of 100, strong">
+      <div class="ws-score-hero__head">
+        <p class="ws-figure ws-figure--score ws-score-hero__figure">72</p>
+      </div>
+      <div class="ws-tick-strip ws-tick-strip--lg ws-tick-strip--draw" style="--n: 50;" aria-hidden="true"><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 0;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 1;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 2;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 3;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 4;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 5;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 6;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 7;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 8;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 9;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 10;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 11;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 12;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 13;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 14;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 15;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 16;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 17;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 18;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 19;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 20;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 21;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 22;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 23;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 24;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 25;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 26;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 27;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 28;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 29;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 30;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 31;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 32;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 33;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 34;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 35;"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div>
+      <p class="ws-score-hero__summary">
+        <span class="ws-score-hero__rating">Strong</span>
+        <span class="ws-score-hero__line">Zillow is your strongest. Start with Local search.</span>
+      </p>
+    </section>
+  </div>
+
+  <div class="ws-stack" style="max-width: 1350px;">
+    <span class="ws-muted">A count with its line under the figure: one tick an answer</span>
+    <section class="ws-score-hero" aria-label="10 of 16 answers named you">
+      <div class="ws-score-hero__head">
+        <p class="ws-figure ws-figure--score ws-score-hero__figure">10 of 16</p>
+        <p class="ws-score-hero__line">We asked 4 AI assistants the same 4 questions on Nov 2, about Chagrin Falls, OH.</p>
+      </div>
+      <div class="ws-tick-strip ws-tick-strip--lg" style="--n: 16;" aria-hidden="true"><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div>
+    </section>
+  </div>
+
+  <div class="ws-stack" style="max-width: 886px;">
+    <span class="ws-muted">Getting there: the middle band in mid blue</span>
+    <section class="ws-score-hero ws-score-hero--middle" aria-label="Your score: 55 of 100, getting there">
+      <div class="ws-score-hero__head">
+        <p class="ws-figure ws-figure--score ws-score-hero__figure">55</p>
+      </div>
+      <div class="ws-tick-strip ws-tick-strip--lg" style="--n: 50;" aria-hidden="true"><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div>
+      <p class="ws-score-hero__summary">
+        <span class="ws-score-hero__rating">Getting there</span>
+        <span class="ws-score-hero__line">Your website and social are close. Local search holds you back.</span>
+      </p>
+    </section>
+  </div>
+
+  <div class="ws-stack" style="max-width: 886px;">
+    <span class="ws-muted">Needs work: pink marks, the word in its AA step, a long sentence that wraps</span>
+    <section class="ws-score-hero ws-score-hero--needs-work" aria-label="Your score: 39 of 100, needs work">
+      <div class="ws-score-hero__head">
+        <p class="ws-figure ws-figure--score ws-score-hero__figure">39</p>
+      </div>
+      <div class="ws-tick-strip ws-tick-strip--lg" style="--n: 50;" aria-hidden="true"><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div>
+      <p class="ws-score-hero__summary">
+        <span class="ws-score-hero__rating">Needs work</span>
+        <span class="ws-score-hero__line">Buyers near you see you in 5 of 9 spots on Google Maps and never in the top three. Name the towns you serve in your Google Business Profile first.</span>
+      </p>
+    </section>
+  </div>
+
+  <div class="ws-stack" style="max-width: 886px;">
+    <span class="ws-muted">Not checked: a dash in muted words, every tick the track, why in words</span>
+    <section class="ws-score-hero ws-score-hero--none" aria-label="Your score: not checked">
+      <div class="ws-score-hero__head">
+        <p class="ws-figure ws-figure--score ws-score-hero__figure ws-score-hero__figure--none" aria-hidden="true">&ndash;</p>
+      </div>
+      <div class="ws-tick-strip ws-tick-strip--lg" style="--n: 50;" aria-hidden="true"><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div>
+      <p class="ws-score-hero__summary">
+        <span class="ws-score-hero__rating">Could not check</span>
+        <span class="ws-score-hero__line">Connect your Google profile and Grow scores it on the next audit.</span>
+      </p>
+    </section>
+  </div>
+
+  <div class="ws-stack" style="max-width: 886px;">
+    <span class="ws-muted">Loading: ghosts the size of the figure, the strip and the line</span>
+    <section class="ws-score-hero" aria-busy="true" aria-label="Your score, loading">
+      <div class="ws-score-hero__head">
+        <span class="ws-shimmer ws-score-hero__ghost" aria-hidden="true"></span>
+      </div>
+      <div class="ws-tick-strip ws-tick-strip--lg ws-tick-strip--loading" style="--n: 50;" aria-hidden="true"><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div>
+      <span class="ws-shimmer ws-score-hero__ghost ws-score-hero__ghost--line" aria-hidden="true"></span>
+    </section>
+  </div>
+
+  <div class="ws-stack" style="width: 320px; max-width: 100%;">
+    <span class="ws-muted">In a 320 px column: the figure steps down to 72</span>
+    <section class="ws-score-hero" aria-label="10 of 16 answers named you">
+      <div class="ws-score-hero__head">
+        <p class="ws-figure ws-figure--score ws-score-hero__figure">10 of 16</p>
+        <p class="ws-score-hero__line">We asked 4 AI assistants the same 4 questions on Nov 2.</p>
+      </div>
+      <div class="ws-tick-strip ws-tick-strip--lg" style="--n: 16;" aria-hidden="true"><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div>
+    </section>
+  </div>
+
+</div>
+</body>
+</html>

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

@@ -0,0 +1,32 @@
+/* ---- ScoreHero: a report's score as Seth draws it, the 96 px figure, its strip and the rating in words ---- */
+/* A column 16 apart: the figure (house .ws-figure--score, 96/96, -3%), the TickStrip, the summary. The figure stands
+   alone, so its numerals are proportional: tabular ones carry wide side bearings at 96 px ("10 of 16" sat 11 px in from
+   the strip's edge; Seth's 72 sits 2 in). A line that
+   explains the figure sits 2 under it in the head; a summary line sits under the strip. It measures itself: under
+   26rem the figure steps down to 72 so "10 of 16" fits a phone. */
+.ws-score-hero { --tone-word: var(--ws-word-positive); display: flex; flex-direction: column; gap: var(--space-md); container-type: inline-size; }
+.ws-score-hero__head { display: flex; flex-direction: column; gap: var(--space-3xs); }
+.ws-score-hero__figure { white-space: nowrap; font-variant-numeric: proportional-nums; }
+.ws-score-hero__figure--none { color: var(--color-text-muted); }
+.ws-score-hero__line { font-size: var(--ws-text-section); line-height: var(--ws-leading-section); color: var(--color-text-body); text-wrap: pretty; }
+/* The summary reads as one sentence: the rating word, 10, then the line, wrapping as running text. The markup keeps a
+   space between the two (screen readers and copy need it); Instrument Sans' space is 0.2em, so the margin gives it back. */
+.ws-score-hero__summary { font-size: var(--ws-text-section); line-height: var(--ws-leading-section); color: var(--color-text-body); text-wrap: pretty; }
+.ws-score-hero__rating { margin-right: calc(var(--space-xs-plus) - 0.2em); font-weight: 600; color: var(--tone-word); }
+/* Rating tones (D10): the strip takes the mark, the word its AA step. */
+.ws-score-hero--middle { --tone-word: var(--color-text-interactive); }
+.ws-score-hero--middle .ws-tick-strip { --tone: var(--ws-rating-middle); }
+.ws-score-hero--needs-work { --tone-word: var(--ws-word-needs-work); }
+.ws-score-hero--needs-work .ws-tick-strip { --tone: var(--ws-rating-needs-work); }
+.ws-score-hero--none { --tone-word: var(--color-text-muted); }
+/* Loading: ghost blocks the size of what they stand for, in the chart colours' sweep. */
+.ws-score-hero__ghost { width: calc(var(--space-6xl) * 2); max-width: 100%; height: var(--ws-leading-score); }
+.ws-score-hero__ghost--line { width: min(100%, calc(var(--space-9xl) * 2)); height: var(--ws-leading-section); }
+@container (max-width: 26rem) {
+  .ws-score-hero__figure { font-size: var(--ws-text-display); line-height: var(--ws-text-display); }
+  .ws-score-hero__ghost { height: var(--ws-text-display); }
+}
+@media (prefers-reduced-motion: no-preference) {
+  /* The words settle in after the strip's draw has begun (North: details settle after their frame). */
+  .ws-score-hero__summary { animation: ws-settle var(--ws-duration-settle) var(--ws-ease-soft) backwards; animation-delay: calc(var(--ws-duration-draw) * 0.55); }
+}

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

@@ -1,69 +1,108 @@
-A group of components under a small heading, with a line of context and one action on its right.
+A group of things under a short heading: Seth's 15 / 22 section title, an optional count on its line, a line of
+context and one act on the right.
 
 ## Use it when
 
-- A page or a panel groups a few related rows, controls or small cards under one short heading.
-- The group needs a quiet line of context under its heading ("Three waiting since Monday") and, sometimes, one action on the right ("See all").
-- The heading is a page- or panel-level grouping device, not a card's own title (a card's title is its header, its head, `.ws-head` (see `Card`), or a `Dialog`'s head, not `Section`).
+- A page or a panel groups a few related rows, controls or cards under one heading ("Your AI visibility checks").
+- The group needs a count beside its title ("Website  0 of 2 done"), a quiet line under it, or one act ("See all").
 
 ## Not for
 
-- A card's own title and sentence: use the card's head (`.ws-head`, see `Card`) instead; `Section` is for grouping several things, not naming one card.
-- A bounded, edged surface: `Section` has no card edge or background of its own; wrap it in `Card` first if it needs one.
-- A tab switch between views: use `Segmented`.
+- A card's own title and sentence: the card's head (`.ws-head`, see `Card`).
+- A bounded, edged surface: a section has no edge or ground; put a `Card` inside it.
+- A switch between views: `Segmented` or `Tabs`.
 
 ## Anatomy
 
 - A `<section>` named by its heading (`aria-labelledby`).
-- Heading row: the title (14 px semibold navy) and, under it, an optional note (`ws-muted`, 12 px); an optional action sits on the right of the same row, bottom-aligned with the title.
-- `--space-sm` (12 px) gap between the heading row and the section's content.
+- Head (`__head`): the words at the left, one act at the right on the title's baseline; 12 apart across, 4 when the
+  act wraps under (the field fix: the gaps had been swapped). The act wraps only when the words would go under 200.
+- Title (`__title`): 15 / 22 semibold navy (`--ws-text-section`, Seth's D6), an `h2` or `h3`. A long title wraps.
+- Count (`__count`): control words, 13 / 18 medium in muted, 10 after the title on its baseline, inside the heading,
+  with a space before it in the markup so the heading reads "Website 0 of 2 done". It wraps under a long title.
+- Note: one line in `ws-muted` (12 / 16), 2 under the title.
+- 12 (`--space-sm`) from the head to the content (North's rule).
+- Rows (`__row`): plain rows, at least 40 tall (`--ws-row-h-dense`), their words on the title's edge, Seth's 0.5 px
+  divider (`--ws-divider`) above each one, the first included, running the full width (Tally's side column).
 
 ## Variants and sizes
 
 | `level` | Heading element | Use |
 | --- | --- | --- |
 | `2` (default) | `h2` | A page-level section |
-| `3` | `h3` | A section nested inside a pane or another sectioned region |
+| `3` | `h3` | A section nested in a pane or another section |
+
+| Class | Title | Use |
+| --- | --- | --- |
+| (default) | 15 / 22 semibold | A group of rows or cards on a page or in a pane |
+| `--area` | 22 / 28 semibold (`--ws-text-title`), 10 to the content | Seth's area heading over its card ("Website 0 of 2 done", Fixes `308:2611`); the count keeps 13 / 18 on the title's baseline |
 
 ## States
 
-- **Default**: title, optional note, optional action, content below.
-- **No note**: the title sits alone on its line.
-- **No action**: the heading row is just the title and note, with nothing on the right.
-- **Long title**: the heading row wraps rather than clipping the title; the action moves to its own line only if there is no room beside the title.
-- **Empty content**: a section with nothing to show is not rendered at all; `Section` never draws a heading over nothing.
+- **Default**: title, optional count or note, optional act, content.
+- **With a count**: the count sits on the title's line, never on a line of its own.
+- **Long title**: wraps; the act stays beside it while the words keep 200, then moves under.
+- **Empty content**: a section with nothing to show is not drawn; it never heads nothing.
+- **Loading**: the content shows its own ghosts; the head stays.
 
 ## Behaviour
 
-- Keyboard: the heading is a real `h2`/`h3`; the action, if given, is a normal link or button in the page's tab order.
-- Pointer and touch: only the action (if any) is interactive.
-- Motion: `Section` itself has no entrance motion; its content (a list, a tile) carries its own, such as `ws-rise` on rows arriving.
-- Reduced motion: unaffected, since the component has no animation of its own.
+- The heading is a real `h2` or `h3`; the act is a normal link or button in the page's tab order.
+- No motion of its own; its content settles in.
 
 ## Content
 
-- The title is a short noun phrase naming the group ("Leads to call"), sentence case.
-- The note, if present, adds one short qualifying fact, never repeating the title or a number already shown in the content below.
-- The action is a short verb phrase ("See all"), never a bare chevron with no words.
+- The title is a short noun phrase ("Leads to call"), sentence case.
+- The count states progress as words a person can read ("0 of 2 done"), never a bare fraction.
+- The note adds one fact the content does not already show.
+- The act is a short verb phrase ("See all"), never a bare chevron.
 
 ## Props
 
 | Name | Type | Meaning |
 | --- | --- | --- |
-| `title` | `ReactNode` | The section's heading. |
-| `titleId` | string | The heading's id, for `aria-labelledby`. |
-| `note` | `ReactNode` | A line of context under the title. |
-| `action` | `ReactNode` | One action on the right of the heading row. |
-| `level` | `2` \| `3` | The heading element. Default `2`. |
-| `children` | `ReactNode` | The section's content. |
+| `title` | `ReactNode` | The heading |
+| `titleId` | `string` | The heading's id, for `aria-labelledby` |
+| `count` | `ReactNode` | Progress on the title's line |
+| `note` | `ReactNode` | A line of context under the title |
+| `action` | `ReactNode` | One act on the right |
+| `level` | `2` \| `3` | The heading element, default `2` |
+| `children` | `ReactNode` | The content |
 
 ## Rules
 
-- `Section` groups components; it never substitutes for a card's own header (a card head's 22 px title is for a card, `Section`'s 14 px title is for a group of things on a page).
-- One action per section, on the right, never a row of several small links competing for the same spot.
-- Say each thing once: a section's note never repeats a figure its content already shows (the system's own rule).
+- A section groups things; it never stands in for a card's own head.
+- One act per section, on the right.
+- Say each thing once: the note never repeats a figure the content shows.
+- On a page, sections sit further apart than the things inside them (Seth's North: 56 between sections, 12 under a
+  head, 16 between cards): at least 24, a `ws-stack ws-stack--group`, never the 8 of a plain stack.
 
 ## Source
 
-**Derived from**: the system's grouping rule that a section is not a card's own header, and the one-action-per-section
-rule. **Precedent**: the first product built on the system.
+**Derived from**: Seth's section titles (Fia `301:1725` "Your AI visibility checks" 15 / 22 semibold, 16 to its list;
+Fixes `308:2611` area heading with its count 10 after it on the baseline; Tally `319:3302` side column, a 0.5 px
+rule above every row), North's section head (12 to its content,
+`style1.css` 174 to 180), the 0.5 px divider (D5) and the field fix to the head's gaps (Ignite `surfaces.tsx:69`).
+
+## Markup
+
+```html
+<section class="ws-section-group" aria-labelledby="sec-website">
+  <div class="ws-section-group__head">
+    <div class="ws-section-group__words">
+      <h2 id="sec-website" class="ws-section-group__title">Website <span class="ws-section-group__count">0 of 2 done</span></h2>
+    </div>
+    <button type="button" class="ws-btn ws-btn--text">See all</button>
+  </div>
+  <ul>
+    <li class="ws-section-group__row"><span class="ws-row__title">Add alt text to listing photos</span><span class="ws-muted">A few days</span></li>
+  </ul>
+</section>
+```
+
+## Styles
+
+`Section/style.css`; the act is `Button`'s. Tokens: `--ws-text-section`, `--ws-leading-section`, `--ws-text-title`,
+`--ws-leading-title`, `--space-xs-plus`,
+`--ws-text-control`, `--ws-leading-control`, `--space-sm`, `--space-xs-plus`, `--ws-row-h-dense`, `--ws-divider`,
+`--color-text-heading`, `--color-text-muted`.

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Layout" height=218 -->
+<!-- @dsCard group="Layout" height=424 -->
 <!doctype html>
 <html>
 <head>
@@ -8,34 +8,64 @@
 <link rel="stylesheet" href="../bundle.css">
 </head>
 <body>
-<div class="ws-stage ws-stage--grey">
+<div class="ws-stage">
 
-  <div style="width: 360px; max-width: 100%;">
+  <div class="ws-stack" style="width: 360px; max-width: 100%;">
+    <span class="ws-muted">A title, a line of context and one act on the title's line</span>
     <section class="ws-section-group" aria-labelledby="sec-1">
       <div class="ws-section-group__head">
         <div class="ws-section-group__words">
           <h2 id="sec-1" class="ws-section-group__title">Leads to call</h2>
-          <p class="ws-muted">Three waiting since Monday</p>
+          <p class="ws-muted">Waiting since Monday</p>
         </div>
         <button type="button" class="ws-btn ws-btn--text">See all</button>
       </div>
       <ul>
-        <li class="ws-section-group__row">
-          <span class="ws-row__title">Priya Nair</span>
-          <span class="ws-muted">New lead</span>
-        </li>
-        <li class="ws-section-group__row">
-          <span class="ws-row__title">Dana Ortiz</span>
-          <span class="ws-muted">Showing booked</span>
-        </li>
-        <li class="ws-section-group__row">
-          <span class="ws-row__title">Jon Park</span>
-          <span class="ws-muted">Offer out</span>
-        </li>
+        <li class="ws-section-group__row"><span class="ws-row__title">Priya Nair</span><span class="ws-muted">New lead</span></li>
+        <li class="ws-section-group__row"><span class="ws-row__title">Dana Ortiz</span><span class="ws-muted">Showing booked</span></li>
+        <li class="ws-section-group__row"><span class="ws-row__title">Jon Park</span><span class="ws-muted">Offer out</span></li>
       </ul>
     </section>
   </div>
 
+  <div class="ws-stack" style="width: 360px; max-width: 100%;">
+    <span class="ws-muted">Seth's count on the title's line, his 22 / 28 area heading (--area), and a long title that wraps with its act kept beside it; sections sit 24 apart</span>
+    <div class="ws-stack ws-stack--group">
+    <section class="ws-section-group" aria-labelledby="sec-2">
+      <div class="ws-section-group__head">
+        <div class="ws-section-group__words">
+          <h2 id="sec-2" class="ws-section-group__title">Website <span class="ws-section-group__count">0 of 2 done</span></h2>
+        </div>
+      </div>
+      <ul>
+        <li class="ws-section-group__row"><span class="ws-row__title">Add alt text to listing photos</span><span class="ws-muted">A few days</span></li>
+        <li class="ws-section-group__row"><span class="ws-row__title">Speed up the home page</span><span class="ws-muted">An hour</span></li>
+      </ul>
+    </section>
+    <section class="ws-section-group ws-section-group--area" aria-labelledby="sec-4">
+      <div class="ws-section-group__head">
+        <div class="ws-section-group__words">
+          <h2 id="sec-4" class="ws-section-group__title">Social <span class="ws-section-group__count">1 of 2 done</span></h2>
+        </div>
+      </div>
+      <ul>
+        <li class="ws-section-group__row"><span class="ws-row__title">Post one listing a week</span><span class="ws-muted">An hour</span></li>
+      </ul>
+    </section>
+    <section class="ws-section-group" aria-labelledby="sec-3">
+      <div class="ws-section-group__head">
+        <div class="ws-section-group__words">
+          <h2 id="sec-3" class="ws-section-group__title">Buyers who opened your last two listing emails</h2>
+        </div>
+        <button type="button" class="ws-btn ws-btn--text">See all</button>
+      </div>
+      <ul>
+        <li class="ws-section-group__row"><span class="ws-row__title">Sam Okafor</span><span class="ws-muted">Opened both</span></li>
+      </ul>
+    </section>
+    </div>
+  </div>
+
 </div>
 </body>
 </html>

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

@@ -0,0 +1,18 @@
+/* ---- Section: a group under its heading, Seth's 15 / 22 semibold section title (D6), an optional count on its line, a line
+   of context and one act on the right; 12 to the content. (The block is .ws-section-group: .ws-section is the house's
+   title words.) ---- */
+.ws-section-group { display: flex; flex-direction: column; gap: var(--space-sm); }
+.ws-section-group__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-xxs) var(--space-sm); }
+.ws-section-group__words { display: flex; flex: 1 1 0; flex-direction: column; gap: var(--space-3xs); min-width: min(100%, var(--space-9xl)); }
+.ws-section-group__title { font-size: var(--ws-text-section); line-height: var(--ws-leading-section); font-weight: 600; letter-spacing: var(--ws-tracking-title); color: var(--color-text-heading); }
+/* A count on the title's line ("0 of 2 done"): control words in muted, 10 after the title, on its baseline. Keep a space
+   before it in the markup so the heading reads "Website 0 of 2 done"; the flex gap draws the 10. */
+.ws-section-group__title:has(> .ws-section-group__count) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-xs-plus); }
+/* --area: Seth's area heading over its card (Fixes 308:2611, "Website 0 of 2 done"): the 22 / 28 title step (ws-title),
+   its count still 13 / 18 on the baseline, 10 to the card. */
+.ws-section-group--area { gap: var(--space-xs-plus); }
+.ws-section-group--area .ws-section-group__title { font-size: var(--ws-text-title); line-height: var(--ws-leading-title); }
+.ws-section-group__count { font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 500; letter-spacing: normal; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
+/* Plain rows under a section: 40 tall, their words on the title's edge, Seth's 0.5 px divider above each one, the first
+   included (Tally's side column), full width. */
+.ws-section-group__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: var(--ws-row-h-dense); border-top: var(--ws-divider); }