@felloinnovations/brand-kit 0.4.0 → 0.5.0

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

@@ -0,0 +1,49 @@
+<!-- @dsCard group="Chat" height=346 -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>StatusLine</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: 440px;">
+    <span class="ws-muted">Working: who, what it is doing (the shimmer runs over these words), the step</span>
+    <p class="ws-status-line" role="status" title="Coach: reading your calls, 12 of 40">
+      <b class="ws-status-line__who">Coach</b>
+      <span class="ws-status-line__doing">Reading your calls</span>
+      <span class="ws-status-line__step">12 of 40</span>
+    </p>
+  </div>
+  <div class="ws-stack" style="max-width: 440px;">
+    <span class="ws-muted">No step yet: who and what it is doing</span>
+    <p class="ws-status-line" role="status" title="Grow: checking Google">
+      <b class="ws-status-line__who">Grow</b>
+      <span class="ws-status-line__doing">Checking Google</span>
+    </p>
+  </div>
+  <div class="ws-stack" style="max-width: 300px;">
+    <span class="ws-muted">A long line in a narrow column: the step is cut first, then the doing (the title holds it all)</span>
+    <p class="ws-status-line" role="status" title="Tally: matching every charge to a vendor, step 3 of 7: Follow Up Boss">
+      <b class="ws-status-line__who">Tally</b>
+      <span class="ws-status-line__doing">Matching every charge to a vendor</span>
+      <span class="ws-status-line__step">3 of 7: Follow Up Boss</span>
+    </p>
+  </div>
+  <div class="ws-stack" style="max-width: 440px;">
+    <span class="ws-muted">At the top of an answer at work</span>
+    <ol aria-label="Chat">
+      <li class="ws-chat-turn ws-chat-turn--agent">
+        <p class="ws-status-line" role="status" title="Coach: writing the follow-up">
+          <b class="ws-status-line__who">Coach</b>
+          <span class="ws-status-line__doing">Writing the follow-up</span>
+        </p>
+        <p class="ws-chat-turn__words">Here is a short note to Priya, in your voice.</p>
+      </li>
+    </ol>
+  </div>
+</div>
+</body>
+</html>

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

@@ -0,0 +1,14 @@
+/* ---- StatusLine: the working line at the top of an answer in progress (North's): who, what it is doing in a moving shimmer, and the step ---- */
+/* One 13 / 18 line, 8 apart on the baseline: the agent's name semibold navy, what it is doing medium, the step muted.
+   The doing words shimmer from navy through the AA steps of salmon, purple and teal (1.6 s, steady) so no letter drops
+   under AA as the band passes; under reduced motion they stay navy. A long line cuts the step first, then the doing. */
+.ws-status-line { display: flex; align-items: baseline; gap: var(--space-xs); min-width: 0; min-height: var(--space-lg); overflow: hidden; font-size: var(--ws-text-control); line-height: var(--ws-leading-control); white-space: nowrap; }
+.ws-status-line__who { flex-shrink: 0; font-weight: 600; color: var(--color-text-heading); }
+.ws-status-line__doing { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: var(--color-text-heading); }
+/* Flex shrinks in proportion to size, so a weight of 4 still cut both at once; a weight this large gives the step up
+   whole before the doing loses a letter. */
+.ws-status-line__step { flex-shrink: 1000; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
+@media (prefers-reduced-motion: no-preference) {
+  .ws-status-line { animation: ws-settle var(--ws-duration-settle) var(--ws-ease-settle) backwards; }
+  .ws-status-line__doing { background: linear-gradient(100deg, var(--color-text-heading) 0 35%, var(--ws-word-needs) 45%, var(--ws-word-past-half) 52%, var(--ws-word-positive) 59%, var(--color-text-heading) 70% 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ws-shimmer var(--ws-loop-status) var(--ws-ease-steady) infinite; }
+}

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

@@ -1,4 +1,5 @@
-The whole-page word for something that failed: a page that is not there, a server error, or a connection that is not back yet.
+The whole-page word for something that failed: a page that is not there, a server error, or a connection that is not
+back yet.
 
 ## Use it when
 
@@ -8,70 +9,83 @@ The whole-page word for something that failed: a page that is not there, a serve
 
 ## Not for
 
-- "There is an answer, and it is nothing you can act on yet" (no results, nothing connected): use `EmptyState`, inside
-  its normal card.
-- A page still loading its data: use a `Skeleton`, never this screen.
-- A single field's error: that stays beside the field.
+- "There is an answer, and it is nothing you can act on yet": `EmptyState`, inside its card.
+- A page still loading: ghosts (`.ws-shimmer`), never this screen.
+- A single field's error: it stays beside the field.
 
 ## Anatomy
 
-- A centred column, as `EntryShell` frames every entry page.
+- A centred column on the cream, 24 inside, its parts 12 apart, each at most 320 wide (the entry pages' column).
 - The assistant's orb at rest, 40 px, rising in above the words.
-- A 22 px title (`ws-title`) that says what happened in plain words ("This page is not here").
+- A 22 / 28 title (`ws-title`) that says what happened in plain words; when it wraps its lines stay even (never one
+  word on a line of its own).
 - One 14 px sentence (`ws-body`) saying what to do.
 - One large (36 px) primary button ("Go back", "Try again").
-- An optional 12 px muted reference line, in words a person can read out to support, never a status code.
+- An optional muted reference line, in words a person can read out to support, never a status code.
+- `--page`: the window's full height, the column centred in it (K17), no corners.
 
 ## Variants and sizes
 
 | Situation | Title | Button |
 | --- | --- | --- |
 | Not found | "This page is not here" | "Go back" |
-| Can't reach / offline | "We can't connect right now" | "Try again" |
-
-There is one size: the column is the same width as every other entry page.
+| Can't reach, offline | "We can't connect right now" | "Try again" |
+| Something failed | "Something went wrong on our side" | "Try again" |
 
 ## States
 
-- **Not found:** the orb, the title, one sentence saying the link may be old or moved, the primary button.
-- **Offline / can't reach:** the orb, the title, one sentence saying it usually comes back on its own, the primary
-  button, and a line that updates as it retries ("Trying again in a few seconds").
-- **With a reference:** a 12 px muted line a person can read out to support, never a code or a hash.
+- **Not found**: the orb, the title, one sentence saying the link may be old, the button.
+- **Offline**: the same, plus a line that updates as it retries (`role="status"`, `aria-live="polite"`).
+- **With a reference**: a muted line a person can read out, never a code or a hash.
+- **On a bare page**: `--page`, centred in the window, never in its top third.
 
 ## Behaviour
 
-- Keyboard: the title is a real heading; the one button is a real, focusable `<button>` or link.
-- Pointer / touch: pressing the button retries or goes back; nothing else on the screen is interactive.
-- Motion: the orb rises in (`ws-rise`) over `--ws-duration-settle` on `--ws-ease-soft`, exactly as every entry page's
-  mark.
-- Reduced motion: the orb appears in place without rising; an offline screen's retry line still updates in text, read
-  by `aria-live="polite"`.
+- Keyboard: the title is a real heading; the one button is a real `<button>` or link.
+- Motion: the orb rises in (`ws-rise`) over `--ws-duration-settle` on `--ws-ease-soft`. Reduced motion: it appears in
+  place; the retry line still updates in words.
 
 ## Content
 
-- Plain words, never a status code, a model name or any other developer-facing word.
-- A reference, if shown, reads like words a person could say aloud over the phone, not a hex string.
+- Plain words, never a status code or a model name.
+- A reference reads like words said over the phone.
 - No em dashes, sentence case.
 
 ## Props
 
 | Name | Type | Meaning |
 | --- | --- | --- |
-| `title` | `string` | what happened, in plain words |
-| `subtitle` | `string` | the one sentence saying what to do |
-| `action` | `{ label: string, onClick: () => void }` | the one large primary button |
-| `reference` | `string` | an optional, speakable reference line |
-| `retrying` | `boolean` | shows the live retry line (offline screen only) |
+| `title` | `string` | What happened, in plain words |
+| `subtitle` | `string` | The one sentence saying what to do |
+| `action` | `{ label, onClick }` | The one large primary button |
+| `reference` | `string` | An optional, speakable reference |
+| `retrying` | `boolean` | Shows the live retry line |
+| `page` | `boolean` | Fills the window and centres in it |
 
 ## Rules
 
-- Never a status code anywhere visible, even when one exists in the log: the person never needs to see it.
-- One primary button, large, matching every card and dialog's "one navy button" rule.
-- The orb is the one place outside the assistant's own wordmark allowed the AI colour tokens (`color-ai-*`), a
-  deliberate carve-out from the system's own colour rules.
+- Never a status code anywhere visible.
+- One primary button, large.
+- The orb is the one place outside the assistant's own wordmark allowed the AI colours (`--ws-orb`: the AI cyan, blue and violet drawn from the chart tones, so a palette moves them).
 
 ## Source
 
-**Derived from**: the system's entry-page frame (a centred column, the assistant's orb rising in, one large primary
-button) and the rule that a status code is never shown on screen. **Precedent**: the first product built on the
-system; its own wording differs slightly ("Go home", "Try now") from the examples used here.
+**Derived from**: the system's entry-page frame and its no-status-code rule, and Revenue OS fault K17 (status pages
+sat in the top third of an empty window). **Precedent**: the first product built on the system.
+
+## Markup
+
+```html
+<div class="ws-status-screen ws-status-screen--page">
+  <span class="ws-status-screen__orb ws-rise" aria-hidden="true"></span>
+  <h1 class="ws-title">This page is not here</h1>
+  <p class="ws-body">The link may be old, or the page may have moved.</p>
+  <button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Go back</button>
+  <p class="ws-muted">Reference: cedar-harbor-214</p>
+</div>
+```
+
+## Styles
+
+`StatusScreen/style.css`, with `Button` for its one act; the words are the house's. Tokens: `--space-2xl`, `--space-9xl`,
+`--space-7xl`, `--space-lg`, `--space-sm`, `--ws-radius-panel`, `--color-bg-page`, `--ws-orb`.

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Feedback" height=336 -->
+<!-- @dsCard group="Feedback" height=788 -->
 <!doctype html>
 <html>
 <head>
@@ -8,10 +8,11 @@
 <link rel="stylesheet" href="../bundle.css">
 </head>
 <body>
-<div class="ws-stage ws-stage--grey">
-  <div class="ws-cluster ws-cluster--start ws-cluster--component">
+<div class="ws-stage ws-stage--grey ws-stage--column">
 
-    <div style="width: 280px;">
+  <div class="ws-cluster ws-cluster--start ws-cluster--component">
+    <div class="ws-stack" style="width: 300px; max-width: 100%;">
+      <span class="ws-muted">Not found</span>
       <div class="ws-status-screen">
         <span class="ws-status-screen__orb ws-rise" aria-hidden="true"></span>
         <h1 class="ws-title">This page is not here</h1>
@@ -21,7 +22,8 @@
       </div>
     </div>
 
-    <div style="width: 280px;">
+    <div class="ws-stack" style="width: 300px; max-width: 100%;">
+      <span class="ws-muted">Offline, retrying by itself</span>
       <div class="ws-status-screen">
         <span class="ws-status-screen__orb ws-rise" aria-hidden="true"></span>
         <h1 class="ws-title">We can't connect right now</h1>
@@ -30,8 +32,21 @@
         <p class="ws-muted" role="status" aria-live="polite">Trying again in a few seconds.</p>
       </div>
     </div>
+  </div>
 
+  <div class="ws-stack">
+    <span class="ws-muted">--page: the window's full height, the column centred in it (here in a 400 px frame standing in for the window)</span>
+    <div style="height: 400px; overflow: hidden; border-radius: var(--ws-radius-panel); box-shadow: var(--ws-shadow-hairline);">
+      <div class="ws-status-screen ws-status-screen--page" style="min-height: 100%;">
+        <span class="ws-status-screen__orb ws-rise" aria-hidden="true"></span>
+        <h1 class="ws-title">Something went wrong on our side</h1>
+        <p class="ws-body">Your work is saved. Try the page again; if it keeps happening, tell us the reference below.</p>
+        <button type="button" class="ws-btn ws-btn--primary ws-btn--lg">Try again</button>
+        <p class="ws-muted">Reference: maple-quarry-87</p>
+      </div>
+    </div>
   </div>
+
 </div>
 </body>
 </html>

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

@@ -0,0 +1,9 @@
+/* ---- StatusScreen: not found, an error, offline: the orb, plain words, one act, in the entry pages' 320 column.
+   --page fills the window and centres itself in it (K17). ---- */
+.ws-status-screen { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); padding: var(--space-lg); border-radius: var(--ws-radius-panel); background: var(--color-bg-page); text-align: center; }
+.ws-status-screen > * { max-width: calc(var(--space-9xl) + var(--space-7xl)); }
+/* A title that wraps keeps its lines even, never one word on its own ("on our / side"). */
+.ws-status-screen > :is(h1, h2, .ws-title) { text-wrap: balance; }
+.ws-status-screen > .ws-body { text-wrap: pretty; }
+.ws-status-screen--page { min-height: 100dvh; justify-content: center; border-radius: 0; }
+.ws-status-screen__orb { flex-shrink: 0; width: var(--space-2xl); height: var(--space-2xl); border-radius: var(--radius-full); background: var(--ws-orb); }

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

@@ -0,0 +1,97 @@
+A bill or a rate over time as a step line against a dotted reference, the gap between them hatched, its moments named.
+
+**Use it when**
+
+- A number changes in steps on known dates (a yearly bill as tools turn off, a rate as plans change), and the reader
+  needs to see when it drops and by how much against what it would have been.
+- There is one reference ("without Fello") and one series ("with Fello"), and the gap between them is the point.
+
+**Not for**
+
+- A day-by-day trend: use `TrendBars`. A value over months or weeks on an axis, one series: use `TrendLine`.
+- Parts of one amount: use `ShareBar`.
+- A share of a goal: use `GoalTicks` or `PaceBar`.
+
+**Anatomy**
+
+- Plot: 280 tall (`calc(--space-9xl + --space-5xl)`): 32 of head room above the top rule (`--space-xl`, Seth's 34 on
+  the grid), a 224 grid, 24 under it for the x labels; across, a 40 px y gutter, 12, the plot, 12, a 152 px gutter for
+  the end figures.
+- Positions are data as percentages of the plot: `--x` from the left, `--y` from the top.
+- Grid: 0.5 px `--ws-edge-slot` rules (`__rule`, `--y`) and quarter lines (`__tick`, `--x`) the plot's height; a
+  quarter's label 11/14 muted, 4 right of its line and 6 under the plot; `--now` makes it 600 navy ("Today").
+- Y figures: 11/14 muted, right-aligned, centred on their rules.
+- Lines: one SVG, `viewBox="0 0 100 100"` stretched (`preserveAspectRatio="none"`), strokes that never scale. The
+  reference (`__ref`) 1.5 navy, dashed 3 and 3; the series (`__series`) 2 in `--tone` (salmon by default: `--ws-chart-under-half` (chart tone 3, so a palette that sets it moves it)), round caps
+  and joins.
+- Hatch (`__hatch`): a box clipped to the gap (`clip-path: polygon(...)` in the same percentages), 0.75 lines at 45
+  degrees every 6, in navy at 45%.
+- Dots: an event 8, an end 6, centred on the point, in the line's tone.
+- Event words (`__event`): 12 right of the dot and 10 down; what changed (12/16 semibold, `--ws-word-needs` for the
+  salmon series), then why (11/14 muted). Set `--to` on an event to where its words must stop (the next step's x, or
+  short of an end figure on the same line; the plot's end by default): they stop 4 short of it and wrap to fit, so
+  they never run across a step or into the hatch.
+- End figures (`__end`) in the right gutter on their lines: the value (13/16 semibold, navy or the tone's AA word),
+  6, a small label (11/14 muted).
+- Key: centred, 16 apart, 10 above and 20 below; a 16 px line (dashed for the reference) or a 12 px hatched swatch, 8,
+  14/20 medium `--color-text-body`.
+
+**Parts and modifiers**
+
+- `.ws-step-line__dot--end`: a line's end dot, 6 px instead of an event's 8.
+
+**States**
+
+- Draw (`--draw`): the lines wipe in left to right over 900 ms on the sweep curve; the hatch, dots and words rise in
+  after them.
+- Narrow (the figure under 30rem): re-laid out, not shrunk. The plot takes the full width at 256 tall (the same 32 of head room, a 200 grid); the end figures
+  sit at the right, the reference's above its line and the series' under it (`__end--below`, so it never lands on
+  the hatch); the y figures and the small words go. An event's words start under its dot, and where a word is still
+  wider than its room, the page's colour behind it keeps it off the line and the hatch.
+- Loading: a ghost (`__ghost` with `ws-shimmer`) where the plot goes; `aria-busy="true"`.
+- Reduced motion: everything in place.
+- Hover: none built in; pair a point with `HoverCard` for a read-out.
+
+**Behaviour**
+
+- The `<figure>` says the whole story in its `aria-label` (both lines, each step and when); the plot and key are
+  `aria-hidden`.
+
+**Rules**
+
+- Two lines at most: the reference and the series. Steps only where something really changes.
+- The series' words take the AA step of its tone; the marks keep the tone.
+- The y range starts at 0.
+- Every mark on the plot has its key: a hatched gap always carries the hatch key, at every width.
+- A signed figure stays whole: join the sign to it with a word joiner (`&minus;&#8288;$1,620`, U+2060), since a line
+  may break between "−" and "$" when an event's room is narrow.
+
+**Source**
+
+**Seth**: Tally report, "Your tool bill drops to $48,000 a year by Q1 2027" (319:3355 to 319:3403). His hatch is
+#2C4870 at 45%: the kit hatches in `--ws-agent-tally` at 45%. Overturns 09-charts' "no line charts".
+
+**Markup**
+
+```html
+<figure class="ws-step-line" aria-label="Your bill: $77,472 a year without Fello, $48,000 with Fello from Q1 2027.">
+  <div class="ws-step-line__plot" aria-hidden="true">
+    <div class="ws-step-line__y"><span style="--y: 0%;">$80K</span><span style="--y: 100%;">$0</span></div>
+    <div class="ws-step-line__area">
+      <span class="ws-step-line__rule" style="--y: 0%;"></span><span class="ws-step-line__rule" style="--y: 100%;"></span>
+      <span class="ws-step-line__tick ws-step-line__tick--now" style="--x: 0%;"><span>Today</span></span>
+      <span class="ws-step-line__hatch" style="clip-path: polygon(40% 3.16%, 100% 3.16%, 100% 40%, 40% 40%);"></span>
+      <svg class="ws-step-line__lines" viewBox="0 0 100 100" preserveAspectRatio="none">
+        <path class="ws-step-line__ref" d="M0 3.16 H100"/><path class="ws-step-line__series" d="M0 3.16 H40 V40 H100"/>
+      </svg>
+      <span class="ws-step-line__dot" style="--x: 40%; --y: 40%;"></span>
+      <span class="ws-step-line__event" style="--x: 40%; --y: 40%; --to: 70%;"><b>&minus;&#8288;$29,472 in Q1 2027</b><span>Luxury Presence</span></span>
+    </div>
+    <div class="ws-step-line__ends"><span class="ws-step-line__end ws-step-line__end--below" style="--y: 40%; --tone-word: var(--ws-word-needs);"><b>$48,000</b><span>with Fello</span></span></div>
+  </div>
+  <ul class="ws-step-line__legend" aria-hidden="true"><li class="ws-step-line__key--ref">Without Fello</li><li>With Fello</li><li class="ws-step-line__key--hatch">Comes off with Fello</li></ul>
+</figure>
+```
+
+**Styles**: `StepLine/style.css`, in `bundle.css` and `fello.css` as `.ws-step-line`. Every value is a token, except
+the reference's 3 and 3 dash, which is Seth's.

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

@@ -0,0 +1,108 @@
+<!-- @dsCard group="Charts" height=1180 -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>StepLine</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: 994px;">
+    <span class="ws-muted">Seth's Tally bill: without Fello dotted, with Fello a step down, the gap hatched, drawn in once</span>
+    <section class="ws-card ws-card--compound">
+      <header class="ws-head">
+        <div>
+          <h3 class="ws-title">Your tool bill drops to $48,000 a year by Q1 2027</h3>
+          <p class="ws-body">Yearly rate of your 5 tools, today through Q3 2027. The hatched gap is what Fello replaces.</p>
+        </div>
+      </header>
+      <div class="ws-card__body">
+        <figure class="ws-step-line ws-step-line--draw" aria-label="Your yearly tool bill: $77,472 without Fello; with Fello $75,852 from today, when Mailchimp turns off, and $48,000 from Q1 2027, when Luxury Presence and Follow Up Boss turn off.">
+          <div class="ws-step-line__plot" aria-hidden="true">
+            <div class="ws-step-line__y"><span style="--y: 0%;">$80K</span><span style="--y: 25%;">$60K</span><span style="--y: 50%;">$40K</span><span style="--y: 75%;">$20K</span><span style="--y: 100%;">$0</span></div>
+            <div class="ws-step-line__area">
+              <span class="ws-step-line__rule" style="--y: 0%;"></span><span class="ws-step-line__rule" style="--y: 25%;"></span><span class="ws-step-line__rule" style="--y: 50%;"></span><span class="ws-step-line__rule" style="--y: 75%;"></span><span class="ws-step-line__rule" style="--y: 100%;"></span>
+              <span class="ws-step-line__tick ws-step-line__tick--now" style="--x: 0%;"><span>Today</span></span>
+              <span class="ws-step-line__tick" style="--x: 18.1%;"><span>Q1 27</span></span>
+              <span class="ws-step-line__tick" style="--x: 45.2%;"><span>Q2 27</span></span>
+              <span class="ws-step-line__tick" style="--x: 72.6%;"><span>Q3 27</span></span>
+              <span class="ws-step-line__hatch" style="clip-path: polygon(0% 3.16%, 100% 3.16%, 100% 40%, 18.1% 40%, 18.1% 5.19%, 0% 5.19%);"></span>
+              <svg class="ws-step-line__lines" viewBox="0 0 100 100" preserveAspectRatio="none"><path class="ws-step-line__ref" d="M0 3.16 H100"/><path class="ws-step-line__series" d="M0 5.19 H18.1 V40 H100"/></svg>
+              <span class="ws-step-line__dot" style="--x: 0%; --y: 5.19%;"></span>
+              <span class="ws-step-line__event" style="--x: 0%; --y: 5.19%; --to: 18.1%;"><b>&minus;&#8288;$1,620 today</b><span>Mailchimp</span></span>
+              <span class="ws-step-line__dot" style="--x: 18.1%; --y: 40%;"></span>
+              <span class="ws-step-line__event" style="--x: 18.1%; --y: 40%; --to: 70%;"><b>&minus;&#8288;$27,852 in Q1 2027</b><span>Luxury Presence, Follow Up Boss</span></span>
+              <span class="ws-step-line__dot ws-step-line__dot--end" style="--x: 100%; --y: 3.16%; --tone: var(--color-text-heading);"></span>
+              <span class="ws-step-line__dot ws-step-line__dot--end" style="--x: 100%; --y: 40%;"></span>
+            </div>
+            <div class="ws-step-line__ends">
+              <span class="ws-step-line__end" style="--y: 3.16%;"><b>$77,472</b><span>without Fello</span></span>
+              <span class="ws-step-line__end ws-step-line__end--below" style="--y: 40%; --tone-word: var(--ws-word-needs);"><b>$48,000</b><span>with Fello</span></span>
+            </div>
+          </div>
+          <ul class="ws-step-line__legend" aria-hidden="true">
+            <li class="ws-step-line__key--ref">Without Fello</li>
+            <li>With Fello</li>
+            <li class="ws-step-line__key--hatch">Comes off with Fello</li>
+          </ul>
+        </figure>
+      </div>
+      <div class="ws-band">
+        <div class="ws-band__words">
+          <span class="ws-band__title">Nothing else turns off in Q2 or Q3 2027</span>
+          <span class="ws-band__how">Fello's website and IDX pricing isn't set yet, so your quote may differ.</span>
+        </div>
+      </div>
+    </section>
+  </div>
+
+  <div class="ws-stack" style="width: 360px; max-width: 100%;">
+    <span class="ws-muted">A 360 px card: a shorter plot, the end figures without their small words</span>
+    <section class="ws-card ws-card--inset">
+      <figure class="ws-step-line" aria-label="Your yearly tool bill: $77,472 without Fello, $48,000 with Fello from Q1 2027.">
+        <div class="ws-step-line__plot" aria-hidden="true">
+          <div class="ws-step-line__y"><span style="--y: 0%;">$80K</span><span style="--y: 50%;">$40K</span><span style="--y: 100%;">$0</span></div>
+          <div class="ws-step-line__area">
+            <span class="ws-step-line__rule" style="--y: 0%;"></span><span class="ws-step-line__rule" style="--y: 50%;"></span><span class="ws-step-line__rule" style="--y: 100%;"></span>
+            <span class="ws-step-line__tick ws-step-line__tick--now" style="--x: 0%;"><span>Today</span></span>
+            <span class="ws-step-line__tick" style="--x: 40%;"><span>Q1 27</span></span>
+            <span class="ws-step-line__hatch" style="clip-path: polygon(40% 3.16%, 100% 3.16%, 100% 40%, 40% 40%);"></span>
+            <svg class="ws-step-line__lines" viewBox="0 0 100 100" preserveAspectRatio="none"><path class="ws-step-line__ref" d="M0 3.16 H100"/><path class="ws-step-line__series" d="M0 3.16 H40 V40 H100"/></svg>
+            <span class="ws-step-line__dot" style="--x: 40%; --y: 40%;"></span>
+            <span class="ws-step-line__event" style="--x: 40%; --y: 40%;"><b>&minus;&#8288;$29,472</b><span>Luxury Presence</span></span>
+            <span class="ws-step-line__dot ws-step-line__dot--end" style="--x: 100%; --y: 3.16%; --tone: var(--color-text-heading);"></span>
+            <span class="ws-step-line__dot ws-step-line__dot--end" style="--x: 100%; --y: 40%;"></span>
+          </div>
+          <div class="ws-step-line__ends">
+            <span class="ws-step-line__end" style="--y: 3.16%;"><b>$77K</b><span>without Fello</span></span>
+            <span class="ws-step-line__end ws-step-line__end--below" style="--y: 40%; --tone-word: var(--ws-word-needs);"><b>$48K</b><span>with Fello</span></span>
+          </div>
+        </div>
+        <ul class="ws-step-line__legend" aria-hidden="true">
+          <li class="ws-step-line__key--ref">Without Fello</li>
+          <li>With Fello</li>
+          <li class="ws-step-line__key--hatch">Comes off with Fello</li>
+        </ul>
+      </figure>
+    </section>
+  </div>
+
+  <div class="ws-stack" style="width: 560px; max-width: 100%;">
+    <span class="ws-muted">Loading: a ghost where the plot goes</span>
+    <section class="ws-card ws-card--inset">
+      <figure class="ws-step-line" aria-busy="true" aria-label="Your yearly tool bill, loading">
+        <div class="ws-step-line__plot" aria-hidden="true">
+          <div class="ws-step-line__y"></div>
+          <div class="ws-step-line__area"><span class="ws-shimmer ws-step-line__ghost"></span></div>
+          <div class="ws-step-line__ends"></div>
+        </div>
+      </figure>
+    </section>
+  </div>
+
+</div>
+</body>
+</html>

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

@@ -0,0 +1,62 @@
+/* ---- StepLine: a bill over time as a step line against a dotted reference, the gap between them hatched ---- */
+/* Seth's Tally bill (319:3355). A plot 280 tall: 32 of head room above the top rule (the end figure's room; Seth 34,
+   snapped to the grid), the grid, 24 under it for the quarters; a 40 px y gutter (labels right-aligned, 12 before the
+   plot), the plot, and a gutter at the right for the end figures. Positions are data, as percentages of the plot: --x from the left,
+   --y from the top. The lines are one SVG (viewBox 0 0 100 100, stretched, strokes that never scale); the hatch is a
+   box clipped to the gap; dots and words are placed in px-true HTML, so nothing is distorted at any width. */
+.ws-step-line { --ws-step-line-hatch: color-mix(in srgb, var(--ws-agent-tally) 45%, transparent); container-type: inline-size; }
+.ws-step-line__plot { display: grid; grid-template-columns: var(--space-2xl) minmax(0, 1fr) calc(var(--space-8xl) - var(--space-xs)); column-gap: var(--space-sm); height: calc(var(--space-9xl) + var(--space-5xl)); padding: var(--space-xl) 0 var(--space-lg); }
+.ws-step-line__y, .ws-step-line__area, .ws-step-line__ends { position: relative; min-width: 0; }
+.ws-step-line__y > span { position: absolute; right: 0; top: var(--y); translate: 0 -50%; font-size: var(--ws-text-micro); line-height: var(--space-sm-plus); color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.ws-step-line__rule { position: absolute; left: 0; right: 0; top: var(--y); border-top: var(--ws-hairline) solid var(--ws-edge-slot); }
+/* A quarter line runs the plot's height; its label sits 4 right of it, under the plot. */
+.ws-step-line__tick { position: absolute; top: 0; bottom: 0; left: var(--x); border-left: var(--ws-hairline) solid var(--ws-edge-slot); }
+.ws-step-line__tick > span { position: absolute; top: calc(100% + var(--space-xxs-plus)); left: var(--space-xxs); font-size: var(--ws-text-micro); line-height: var(--space-sm-plus); color: var(--color-text-muted); white-space: nowrap; }
+.ws-step-line__tick--now > span { font-weight: 600; color: var(--color-text-heading); }
+.ws-step-line__hatch { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, var(--ws-step-line-hatch) 0 calc(var(--ws-hairline) * 1.5), transparent 0 var(--space-xxs-plus)); }
+.ws-step-line__ghost { position: absolute; inset: 0; }
+.ws-step-line__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
+.ws-step-line__lines path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
+.ws-step-line__ref { stroke: var(--color-text-heading); stroke-width: var(--ws-chart-line); stroke-dasharray: 3 3; stroke-linecap: butt; }
+.ws-step-line__series { stroke: var(--tone, var(--ws-chart-under-half)); stroke-width: var(--ws-ring); }
+/* Dots: an event 8, an end 6, centred on the point. */
+.ws-step-line__dot { position: absolute; left: var(--x); top: var(--y); width: var(--space-xs); height: var(--space-xs); border-radius: var(--radius-full); background: var(--tone, var(--ws-chart-under-half)); translate: -50% -50%; }
+.ws-step-line__dot--end { width: var(--space-xxs-plus); height: var(--space-xxs-plus); }
+/* An event's words: 12 right of the dot and 10 down; what changed (12/16 semibold, the tone's AA word), then why. They
+   stop 4 short of --to (the next step's x, or short of an end figure on their line; the plot's end by default) and
+   wrap to fit, so they never run across a step or into the hatch. */
+.ws-step-line__event { position: absolute; left: calc(var(--x) + var(--space-sm)); top: calc(var(--y) + var(--space-xs-plus)); display: flex; flex-direction: column; max-width: calc(var(--to, 100%) - var(--x) - var(--space-sm) - var(--space-xxs)); }
+.ws-step-line__event > b { font-size: var(--ws-text-dense); font-weight: 600; line-height: var(--space-md); color: var(--tone-word, var(--ws-word-needs)); text-wrap: balance; }
+.ws-step-line__event > span, .ws-step-line__end > span { overflow: hidden; font-size: var(--ws-text-micro); line-height: var(--space-sm-plus); color: var(--color-text-muted); white-space: nowrap; text-overflow: ellipsis; }
+/* An end figure in the right gutter, on its line: the value (13/16 semibold) and a small label 6 after it. */
+.ws-step-line__end { position: absolute; left: 0; right: 0; top: var(--y); display: flex; align-items: baseline; gap: var(--space-xxs-plus); translate: 0 -50%; }
+.ws-step-line__end > b { flex-shrink: 0; font-size: var(--ws-text-control); font-weight: 600; line-height: var(--space-md); color: var(--tone-word, var(--color-text-heading)); font-variant-numeric: tabular-nums; }
+/* The key, centred under the plot, 16 apart: a 16 px line (or a 12 px hatched swatch), 8, 14/20 medium words. */
+.ws-step-line__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xxs) var(--space-md); padding: var(--space-xs-plus) 0 var(--ws-card-inset); font-size: var(--ws-text-body); font-weight: 500; line-height: var(--ws-leading-row); color: var(--color-text-body); }
+.ws-step-line__legend > li { display: inline-flex; align-items: center; gap: var(--space-xs); }
+.ws-step-line__legend > li::before { content: ""; flex-shrink: 0; width: var(--space-md); height: var(--ws-ring); border-radius: var(--ws-radius-bar); background: var(--tone, var(--ws-chart-under-half)); }
+.ws-step-line__legend > .ws-step-line__key--ref::before { height: var(--ws-chart-line); background: repeating-linear-gradient(90deg, var(--color-text-heading) 0 3px, transparent 0 6px); }
+.ws-step-line__legend > .ws-step-line__key--hatch::before { width: var(--space-sm); height: var(--space-sm); border-radius: var(--ws-radius-chip); box-shadow: inset 0 0 0 var(--ws-hairline) var(--ws-step-line-hatch); background: repeating-linear-gradient(135deg, var(--ws-step-line-hatch) 0 calc(var(--ws-hairline) * 1.5), transparent 0 calc(var(--space-xxs) - var(--ws-hairline))); }
+/* Narrow (under 30rem): re-laid out, not shrunk. The plot takes the whole width and a shorter height; the end figures
+   sit at the right, the reference's above its line and the series' (--below) under it; the y figures and the small words
+   go (the ends and the events carry the numbers). */
+@container (max-width: 30rem) {
+  .ws-step-line__plot { grid-template-columns: minmax(0, 1fr); height: calc(var(--space-9xl) + var(--space-xl) + var(--space-lg)); }
+  .ws-step-line__y, .ws-step-line__area, .ws-step-line__ends { grid-area: 1 / 1; }
+  .ws-step-line__ends { pointer-events: none; }
+  .ws-step-line__y { display: none; }
+  .ws-step-line__end { justify-content: flex-end; translate: 0 calc(-100% - var(--space-xxs)); }
+  /* The lower line's figure sits under its line, so it never lands on the hatch between the two. */
+  .ws-step-line__end--below { translate: 0 var(--space-xxs); }
+  .ws-step-line__end > span, .ws-step-line__event > span { display: none; }
+  /* An event's words start under its dot (they sit 10 below it), so they keep the room up to --to; where a word is
+     still wider than that, the page's colour behind it keeps it off the line and the hatch. */
+  .ws-step-line__event { left: var(--x); min-width: min-content; max-width: calc(var(--to, 100%) - var(--x) - var(--space-xxs)); }
+  .ws-step-line__event > b { background: var(--color-bg-page); box-shadow: 0 0 0 var(--ws-ring) var(--color-bg-page); }
+}
+@media (prefers-reduced-motion: no-preference) {
+  /* The build-in: the lines draw left to right over the draw (900 ms, the sweep curve); the hatch, dots and words
+     settle in after them. */
+  .ws-step-line--draw .ws-step-line__lines { animation: ws-wipe var(--ws-duration-draw) var(--ws-ease-sweep) backwards; animation-delay: var(--ws-build-at, 0s); }
+  .ws-step-line--draw :is(.ws-step-line__hatch, .ws-step-line__dot, .ws-step-line__event, .ws-step-line__end) { animation: ws-rise var(--ws-duration-settle) var(--ws-ease-soft) backwards; animation-delay: calc(var(--ws-build-at, 0s) + var(--ws-duration-draw)); }
+}