@felloinnovations/brand-kit 0.4.0 → 0.5.1

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

@@ -1,34 +1,34 @@
 Ordered steps on a line that fills: done is a tick, the one in hand is ringed, the rest wait their turn.
 
-**Use it when**
+## Use it when
 
 - Something happens in a known sequence and the person benefits from seeing where it is (a setup's path, an onboarding
   checklist, an audit).
 - Several things run at once rather than in order (a scan's sources), and the page needs to say which are being read right now.
 
-**Not for**
+## Not for
 
 - A share of a goal or a percent: use `GoalTicks` or `Ring`.
 - A count out of a whole: use `TickRow`.
 - A plain loading wait with no named steps: a working chip or spinner, not a `Stepper`.
 
-**Anatomy**
+## Anatomy
 
 - Mark: `--space-lg` (24 px) circle, 12 px semibold tabular numerals.
 - Done: filled `--color-stat-positive` (teal), a white check, popping in on arrival.
 - In hand: the cream with a 2 px (`calc(--ws-hairline * 4)`) navy inset ring, the step's number inside.
-- Waiting: the cream with the fine hairline ring, muted grey number.
+- Waiting: the cream with the fine hairline ring (drawn inside), muted grey number.
 - Connecting line: a 1 px (`calc(--ws-hairline * 2)`) line between marks in `--ws-edge`, filled teal top to bottom when its step above is done.
-- Title: 14 px medium navy; a note under it in `ws-muted` (how far, or "Done").
+- Title: 14 / 20 medium navy, its first line level with the mark; a note under it in `ws-muted` (how far, or "Done").
 
-**Variants and sizes**
+## Variants and sizes
 
 | Variant | What changes |
 | --- | --- |
 | In order (default) | The first step not done is the one in hand, found automatically |
 | Side by side (`active` set on any step) | Only steps with `active: true` are in hand (several at once); none active means none are in hand, every undone step simply waits |
 
-**States**
+## States
 
 - Default: the first undone step is in hand, ringed in navy; everything after it waits.
 - In hand (parallel): rings navy and breathes on `ws-working`, because something is actually in progress right now.
@@ -36,32 +36,54 @@ Ordered steps on a line that fills: done is a tick, the one in hand is ringed, t
 - Done: a filled teal circle with a check, popping in (`ws-pop`) the moment it completes, and the line below it filling down (`ws-grow-up`) the same moment.
 - Disabled / error / hover / focus / pressed / selected: do not apply; a step is a status, not a control.
 - Reduced motion: ticks, rings and the filling line are all simply in their final state, no pop, breathe or growth.
+- Dark: the teal done mark keeps its tone with the dark act's tick (7.3:1); the rings and words take their dark values.
 
-**Behaviour**
+## Behaviour
 
 - `<ol aria-label="…">`, each step `aria-current="step"` when it is the one in hand, so assistive tech announces it the way a wizard would.
-- Motion: a step's line fills on `ws-grow-up` the moment it completes; its tick pops on `ws-pop`; an in-hand mark in the parallel mode pulses on `ws-working` (`--ws-loop`, 1.2 s); still with reduced motion.
+- Motion: a step's line fills on `ws-grow-up` the moment it completes; its tick pops on `ws-pop`; an in-hand mark in the parallel mode pulses on `ws-working` (`--ws-loop`, 1 s); still with reduced motion.
 - No pointer or keyboard behaviour; the stepper only reports progress, it never advances on its own click.
 
-**Content**
+## Content
 
 - A step's title says what it does, not just its name ("Writing the three recommendations", not "Step 3").
 - The note under an in-hand step says how far ("2 of 4") or what is happening now ("Reading now"); a waiting step carries no note.
 
-**Props**
+## Props
 
 | Name | Type | Meaning |
 | --- | --- | --- |
 | `label` | `string` | Names the whole sequence for the `<ol>` |
 | `steps` | `{ key, title, note?, done, active? }[]` | Each step; `active` turns on the side-by-side mode across the whole list |
 
-**Rules**
+## Rules
 
 - Sequences and waits are steps; do not reach for a progress bar or a percent where a named sequence says it plainer.
 - The in-hand ring is always navy; a step never borrows a chart's tone (teal, salmon, purple) for its own status beyond "done".
 - A step that cannot start yet (no data, blocked) still appears in its place, waiting; it is never removed from the list.
 
-**Source**
+## Source
 
 **Derived from**: the brand kit's own guidance that sequences and waits are drawn as steps, not a progress bar
 (21 Oct 2026). **Precedent**: the first product built on the system.
+
+## Markup
+
+```html
+<ol class="ws-stepper" aria-label="Audit">
+  <li class="ws-stepper__item">
+    <span class="ws-stepper__line"><span class="ws-stepper__line-fill ws-grow-up"></span></span>
+    <span class="ws-stepper__mark ws-stepper__mark--done" aria-hidden="true"><svg viewBox="0 0 16 16" width="12" height="12" fill="none"><path d="M3.5 8.5L6.5 11.5L12.5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+    <span class="ws-stepper__body"><span class="ws-stepper__title">Pulled the last 90 days of deals</span><span class="ws-muted">Done</span></span>
+  </li>
+  <li class="ws-stepper__item" aria-current="step">
+    <span class="ws-stepper__mark ws-stepper__mark--current" aria-hidden="true">2</span>
+    <span class="ws-stepper__body"><span class="ws-stepper__title">Writing the three recommendations</span><span class="ws-muted">2 of 4</span></span>
+  </li>
+</ol>
+```
+
+## Styles
+
+`design-system/components/Stepper/style.css`: `ws-stepper`, `__item`, `__line`, `__line-fill`, `__mark` with `--done`,
+`--current`, `--wait`; `__body`, `__title`.

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

@@ -0,0 +1,13 @@
+/* ---- Stepper: steps in order, done in teal, the one in hand ringed, the rest waiting ---- */
+.ws-stepper { display: flex; flex-direction: column; }
+.ws-stepper__item { position: relative; display: flex; gap: var(--space-sm); padding-bottom: var(--space-md); }
+.ws-stepper__item:last-child { padding-bottom: 0; }
+.ws-stepper__line { position: absolute; top: var(--space-lg); bottom: 0; left: calc(var(--space-lg) / 2 - var(--ws-hairline)); width: calc(var(--ws-hairline) * 2); background: var(--ws-edge); }
+.ws-stepper__line-fill { position: absolute; inset: 0; transform-origin: top; background: var(--color-stat-positive); }
+.ws-stepper__mark { position: relative; display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: var(--space-lg); height: var(--space-lg); border-radius: var(--radius-full); font-size: var(--ws-text-dense); font-weight: 600; font-variant-numeric: tabular-nums; }
+.ws-stepper__mark--done { background: var(--color-stat-positive); color: var(--ws-on-act); }
+.ws-stepper__mark--current { background: var(--color-bg-page); color: var(--color-text-heading); box-shadow: inset 0 0 0 calc(var(--ws-hairline) * 4) var(--color-text-heading); }
+.ws-stepper__mark--wait { background: var(--color-bg-page); color: var(--color-text-muted); box-shadow: var(--ws-shadow-hairline-in); }
+.ws-stepper__body { display: flex; flex: 1; min-width: 0; flex-direction: column; padding-top: var(--space-3xs); }
+.ws-stepper__title { font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); font-weight: 500; color: var(--color-text-heading); }
+

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

@@ -18,7 +18,7 @@ Eight weeks of activity as rows, Monday to Sunday across: a done day a pill, an
 - Day letters (M T W T F S S) at 11 px (`--ws-text-micro`) medium muted, once above the grid.
 - An active day: a filled pill (`--radius-full`), lighter navy on Monday (`--ws-chart-navy-light`) deepening to full `--color-brand-navy` by Sunday, so the eye reads the week's shape left to right.
 - An empty day: `--color-bg-page` with a `--ws-hairline` `--ws-edge-slot` edge, `--ws-radius-control` (4 px) corners.
-- Today: the same pill shape outlined in `calc(--ws-hairline * 3)` salmon on the cream; its row's label turns salmon (`--ws-word-needs`) and semibold.
+- Today: the same pill shape outlined in `calc(--ws-hairline * 3)` salmon (`--ws-chart-under-half` (chart tone 3, so a palette that sets it moves it)) on the cream; its row's label turns salmon (`--ws-word-needs`) and semibold.
 - A day still to come: the same empty cell, its edge dashed.
 - Week label: the Monday's short date ("Aug 24"), 13 px (`--ws-text-dense`).
 
@@ -29,6 +29,10 @@ Eight weeks of activity as rows, Monday to Sunday across: a done day a pill, an
 | Week count | Eight weeks is the reference card's choice; fewer (two) reads as a short recent window inside a smaller tile |
 | `tip` | An active day can show its own small card (its calls and outcomes) while pointed at |
 
+**Parts and modifiers**
+
+- `.ws-streak-calendar__cell--future`: a day not reached yet: a dashed edge.
+
 **States**
 
 - Default: an active day blooms into its cell (`ws-bloom`) top to bottom over the sweep, the weeks filling in order.
@@ -66,3 +70,20 @@ Eight weeks of activity as rows, Monday to Sunday across: a done day a pill, an
 
 **Derived from**: the system's rule that a streak is read from real logged activity, never invented, and the
 navy-pill, salmon-today colour rules. **Precedent**: the first product built on the system.
+
+**Markup**
+
+```html
+<div class="ws-dots ws-streak-calendar__body">
+  <figure class="ws-streak-calendar__grid" aria-label="Activity, last 8 weeks: 6 days">
+    <span aria-hidden="true"></span><span class="ws-streak-calendar__letter" aria-hidden="true">M</span><!-- T W T F S S -->
+    <span class="ws-streak-calendar__label" aria-hidden="true">Aug 24</span>
+    <span class="ws-streak-calendar__cell ws-streak-calendar__cell--done"></span>
+    <span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span>
+    <span class="ws-streak-calendar__cell ws-streak-calendar__cell--today"></span>
+  </figure>
+</div>
+```
+
+**Styles**: `StreakCalendar/style.css`, in `bundle.css` and `fello.css` as `.ws-streak-calendar`. Every value is a token. `.ws-streak-calendar` itself has no styles: it is the hook that
+names the chart (and the root for its modifiers); its parts carry the styles.

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

@@ -25,17 +25,17 @@
           <span class="ws-streak-calendar__letter" aria-hidden="true">M</span><span class="ws-streak-calendar__letter" aria-hidden="true">T</span><span class="ws-streak-calendar__letter" aria-hidden="true">W</span><span class="ws-streak-calendar__letter" aria-hidden="true">T</span><span class="ws-streak-calendar__letter" aria-hidden="true">F</span><span class="ws-streak-calendar__letter" aria-hidden="true">S</span><span class="ws-streak-calendar__letter" aria-hidden="true">S</span>
 
           <span class="ws-streak-calendar__label" aria-hidden="true">Aug 24</span>
-          <span class="ws-streak-calendar__cell ws-streak-calendar__cell--done ws-bloom" style="background: color-mix(in srgb, var(--ws-chart-navy-light) 100%, var(--color-brand-navy));"></span>
+          <span class="ws-streak-calendar__cell ws-streak-calendar__cell--done ws-bloom" style="background: color-mix(in srgb, var(--ws-chart-navy-light) 100%, var(--color-text-heading));"></span>
           <span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty" aria-hidden="true"></span>
-          <span class="ws-streak-calendar__cell ws-streak-calendar__cell--done ws-bloom" style="background: color-mix(in srgb, var(--ws-chart-navy-light) 67%, var(--color-brand-navy)); animation-delay: 20ms;"></span>
-          <span class="ws-streak-calendar__cell ws-streak-calendar__cell--done ws-bloom" style="background: color-mix(in srgb, var(--ws-chart-navy-light) 50%, var(--color-brand-navy)); animation-delay: 30ms;"></span>
+          <span class="ws-streak-calendar__cell ws-streak-calendar__cell--done ws-bloom" style="background: color-mix(in srgb, var(--ws-chart-navy-light) 67%, var(--color-text-heading)); animation-delay: 20ms;"></span>
+          <span class="ws-streak-calendar__cell ws-streak-calendar__cell--done ws-bloom" style="background: color-mix(in srgb, var(--ws-chart-navy-light) 50%, var(--color-text-heading)); animation-delay: 30ms;"></span>
           <span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span>
           <span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span>
           <span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span>
 
           <span class="ws-streak-calendar__label" aria-hidden="true">Aug 31</span>
           <span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span>
-          <span class="ws-streak-calendar__cell ws-streak-calendar__cell--done ws-bloom" style="background: color-mix(in srgb, var(--ws-chart-navy-light) 83%, var(--color-brand-navy)); animation-delay: 70ms;"></span>
+          <span class="ws-streak-calendar__cell ws-streak-calendar__cell--done ws-bloom" style="background: color-mix(in srgb, var(--ws-chart-navy-light) 83%, var(--color-text-heading)); animation-delay: 70ms;"></span>
           <span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span>
           <span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span>
           <span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span>
@@ -46,9 +46,9 @@
           <span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span>
           <span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span>
           <span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span>
-          <span class="ws-streak-calendar__cell ws-streak-calendar__cell--done ws-bloom" style="background: color-mix(in srgb, var(--ws-chart-navy-light) 50%, var(--color-brand-navy)); animation-delay: 110ms;"></span>
+          <span class="ws-streak-calendar__cell ws-streak-calendar__cell--done ws-bloom" style="background: color-mix(in srgb, var(--ws-chart-navy-light) 50%, var(--color-text-heading)); animation-delay: 110ms;"></span>
           <span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span>
-          <span class="ws-streak-calendar__cell ws-streak-calendar__cell--done ws-bloom" style="background: color-mix(in srgb, var(--ws-chart-navy-light) 17%, var(--color-brand-navy)); animation-delay: 120ms;"></span>
+          <span class="ws-streak-calendar__cell ws-streak-calendar__cell--done ws-bloom" style="background: color-mix(in srgb, var(--ws-chart-navy-light) 17%, var(--color-text-heading)); animation-delay: 120ms;"></span>
           <span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span>
 
           <span class="ws-streak-calendar__label" aria-hidden="true">Sep 14</span>
@@ -56,12 +56,12 @@
 
           <span class="ws-streak-calendar__label" aria-hidden="true">Sep 21</span>
           <span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span>
-          <span class="ws-streak-calendar__cell ws-streak-calendar__cell--done ws-bloom" style="background: color-mix(in srgb, var(--ws-chart-navy-light) 83%, var(--color-brand-navy)); animation-delay: 190ms;"></span>
+          <span class="ws-streak-calendar__cell ws-streak-calendar__cell--done ws-bloom" style="background: color-mix(in srgb, var(--ws-chart-navy-light) 83%, var(--color-text-heading)); animation-delay: 190ms;"></span>
           <span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span><span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span><span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span><span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span><span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span>
 
           <span class="ws-streak-calendar__label" aria-hidden="true">Sep 28</span>
           <span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span><span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span>
-          <span class="ws-streak-calendar__cell ws-streak-calendar__cell--done ws-bloom" style="background: color-mix(in srgb, var(--ws-chart-navy-light) 67%, var(--color-brand-navy)); animation-delay: 230ms;"></span>
+          <span class="ws-streak-calendar__cell ws-streak-calendar__cell--done ws-bloom" style="background: color-mix(in srgb, var(--ws-chart-navy-light) 67%, var(--color-text-heading)); animation-delay: 230ms;"></span>
           <span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span><span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span><span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span><span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span>
 
           <span class="ws-streak-calendar__label" aria-hidden="true">Oct 5</span>
@@ -96,8 +96,8 @@
         <span class="ws-streak-calendar__letter" aria-hidden="true">M</span><span class="ws-streak-calendar__letter" aria-hidden="true">T</span><span class="ws-streak-calendar__letter" aria-hidden="true">W</span><span class="ws-streak-calendar__letter" aria-hidden="true">T</span><span class="ws-streak-calendar__letter" aria-hidden="true">F</span><span class="ws-streak-calendar__letter" aria-hidden="true">S</span><span class="ws-streak-calendar__letter" aria-hidden="true">S</span>
         <span class="ws-streak-calendar__label" aria-hidden="true">Oct 6</span>
         <span class="ws-streak-calendar__cell ws-streak-calendar__cell--done"></span>
-        <span class="ws-streak-calendar__cell ws-streak-calendar__cell--done" style="background: color-mix(in srgb, var(--ws-chart-navy-light) 83%, var(--color-brand-navy));"></span>
-        <span class="ws-streak-calendar__cell ws-streak-calendar__cell--done" style="background: color-mix(in srgb, var(--ws-chart-navy-light) 67%, var(--color-brand-navy));"></span>
+        <span class="ws-streak-calendar__cell ws-streak-calendar__cell--done" style="background: color-mix(in srgb, var(--ws-chart-navy-light) 83%, var(--color-text-heading));"></span>
+        <span class="ws-streak-calendar__cell ws-streak-calendar__cell--done" style="background: color-mix(in srgb, var(--ws-chart-navy-light) 67%, var(--color-text-heading));"></span>
         <span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span><span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span><span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span><span class="ws-streak-calendar__cell ws-streak-calendar__cell--empty"></span>
         <span class="ws-streak-calendar__label ws-streak-calendar__label--today" aria-hidden="true">Oct 13</span>
         <span class="ws-streak-calendar__cell ws-streak-calendar__cell--done"></span>

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

@@ -0,0 +1,12 @@
+/* ---- StreakCalendar: one person's weeks as day cells, a navy dot a day done, today ringed in salmon ---- */
+.ws-streak-calendar__body { padding: 0 var(--ws-card-inset) var(--space-md); }
+.ws-streak-calendar__grid { display: grid; width: 100%; max-width: calc(var(--space-9xl) * 2 + var(--space-6xl) - var(--space-lg) - var(--space-sm)); grid-template-columns: calc(var(--space-4xl) - var(--space-xxs)) repeat(7, minmax(0, 1fr)); align-items: center; column-gap: var(--space-xxs); row-gap: var(--space-xxs); padding-top: var(--space-sm-plus); }
+.ws-streak-calendar__letter { padding-bottom: var(--space-xxs); text-align: center; font-size: var(--ws-text-micro); font-weight: 500; line-height: var(--space-sm); color: var(--color-text-muted); }
+.ws-streak-calendar__label { font-size: var(--ws-text-dense); line-height: var(--space-md); color: var(--color-text-body); white-space: nowrap; }
+.ws-streak-calendar__label--today { font-weight: 600; color: var(--ws-word-needs); }
+.ws-streak-calendar__cell { display: block; min-width: 0; height: var(--space-lg); }
+.ws-streak-calendar__cell--done { border-radius: var(--radius-full); background: var(--color-text-heading); }
+.ws-streak-calendar__cell--empty { border-radius: var(--ws-radius-control); border: var(--ws-hairline) solid var(--ws-edge-slot); background: var(--color-bg-page); }
+.ws-streak-calendar__cell--future { border-style: dashed; }
+.ws-streak-calendar__cell--today { border-radius: var(--radius-full); border: calc(var(--ws-hairline) * 3) solid var(--ws-chart-under-half); background: var(--color-bg-page); }
+

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

@@ -0,0 +1,87 @@
+A starter to tap: a short question under an ask field on a page, or a white pill in the chat that asks the next thing.
+
+## Use it when
+
+- An ask field on a page (a home, a report) offers two or three things to ask first.
+- An answer in the chat offers the next questions ("Show Sam's calls", "Draft the nudge").
+- An empty chat offers where to start.
+
+## Not for
+
+- A long list of prompts: use `Well`.
+- A filter or a choice that stays on: use `Chip` or `Segmented`.
+- An act that changes something (send, save): use `Button`.
+
+## Anatomy
+
+- A row of starters (`ws-suggestions`): 10 px apart on a page, 8 px in the chat (`--chat`); they wrap.
+- The page chip (`ws-suggestion-chip`): 28 px tall at least, 12 px at the sides (8 on the left when an icon leads), 4 px
+  corners, the 0.5 px card edge on no fill, 13 / 18 medium navy, an optional 16 px icon 6 px before the words.
+- Ghost (`--ghost`): no edge, 6 px sides, the body grey, regular weight.
+- The chat pill (`--chat`): 32 px tall, 12 px sides, round ends (`--radius-full`: 16 at 32 tall, still a pill at 40 on touch), white (`--color-surface`).
+- A chip never wraps: its words (in a `span`) are cut with an ellipsis, and the chip's `title` holds the whole
+  question.
+
+## Variants and sizes
+
+| Variant | Where | Look |
+| --- | --- | --- |
+| Page | Under an ask field | 28 px, edged, 4 px corners |
+| Ghost | A quiet "See all" beside them | No edge, body grey |
+| Chat | Under an answer, in an empty chat | 32 px white pill |
+
+Touch: every chip is 40 px tall.
+
+## States
+
+- **Default**: as above.
+- **Hover** (a pointer that hovers): the edge darkens (North's warm hover edge, built from the card edge and the body
+  grey); a ghost takes the navy 5 % wash.
+- **Pressed**: the navy 5 % wash at once, and the chip gives to 0.97 and springs back on North's press spring
+  (`--ws-spring-press`, the house's press rule); still under reduced motion.
+- **Focus**: the kit's 2 px navy ring, 2 px out.
+- **Long words**: cut with an ellipsis; the title holds the question.
+- **Dark**: the edge, the pill and the words follow the theme.
+
+## Behaviour
+
+- Keyboard: each chip is a real `<button type="button">`; the row is labelled (`aria-label`) for a screen reader.
+- Pointer and touch: a tap asks the question at once (it lands in the thread as the person's turn).
+- Motion: chips in a new answer arrive after its words, 40 ms apart (North); colour changes over
+  `--ws-duration-hover`. Reduced motion: they are simply there.
+
+## Content
+
+- A starter is a short question in the person's own words, sentence case, under about 30 characters, no em dash.
+- Two or three at a time; never one that repeats what the answer just said.
+
+## Rules
+
+- A sentence may wrap, its button never does (North's rule).
+- Starters ask; they never act on the person's behalf.
+
+## Source
+
+**Derived from**: North's starters (style1.css:255-260: page chips 29 tall, 0.5 edge, 4 px corners, 13 / 500 navy, 10
+apart, hover edge #AAA49D, the ghost; :602-604: chat pills 32 tall, 16 px corners, white, 8 apart). Sizes on the grid
+(28, 12, 8, 6; D3).
+
+## Markup
+
+```html
+<div class="ws-suggestions" aria-label="Ask about">
+  <button type="button" class="ws-suggestion-chip">
+    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><!-- a 16 px icon --></svg>
+    <span>Why did calls drop?</span>
+  </button>
+</div>
+<div class="ws-suggestions ws-suggestions--chat" aria-label="Ask next">
+  <button type="button" class="ws-suggestion-chip ws-suggestion-chip--chat" title="Show Sam's calls"><span>Show Sam's calls</span></button>
+</div>
+```
+
+## Styles
+
+`SuggestionChip/style.css`. Tokens: `--ws-control-h-sm`, `--ws-control-h`, `--ws-touch`, `--ws-edge-card`,
+`--color-text-body`, `--ws-radius-control`, `--ws-radius-panel`, `--color-surface`, `--ws-hover`,
+`--ws-text-control`. The hover edge is `--ws-edge-hover`.

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

@@ -0,0 +1,42 @@
+<!-- @dsCard group="Chat" height=260 -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>SuggestionChip</title>
+<link rel="stylesheet" href="../../tokens.css">
+<link rel="stylesheet" href="../bundle.css">
+</head>
+<body>
+<div class="ws-stage ws-stage--column" style="background: var(--ws-frame);">
+  <div class="ws-stack" style="max-width: 600px;">
+    <span class="ws-muted">On a page, under an ask field: edged chips, an icon before the words, 10 apart</span>
+    <div class="ws-suggestions" aria-label="Ask about">
+      <button type="button" class="ws-suggestion-chip">
+        <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M2 12l3-4 3 2 3-5 3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        <span>Why did calls drop?</span>
+      </button>
+      <button type="button" class="ws-suggestion-chip">
+        <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="5.5" r="2.5" stroke="currentColor" stroke-width="1.5"/><path d="M3 13c0-2.5 2.2-4 5-4s5 1.5 5 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+        <span>Who needs a nudge?</span>
+      </button>
+      <button type="button" class="ws-suggestion-chip ws-suggestion-chip--ghost"><span>See all</span></button>
+    </div>
+  </div>
+  <div class="ws-stack" style="max-width: 600px;">
+    <span class="ws-muted">In the chat: white pills, 8 apart</span>
+    <div class="ws-suggestions ws-suggestions--chat" aria-label="Ask next">
+      <button type="button" class="ws-suggestion-chip ws-suggestion-chip--chat"><span>Show Sam's calls</span></button>
+      <button type="button" class="ws-suggestion-chip ws-suggestion-chip--chat"><span>Draft the nudge</span></button>
+      <button type="button" class="ws-suggestion-chip ws-suggestion-chip--chat"><span>Compare with last week</span></button>
+    </div>
+  </div>
+  <div class="ws-stack" style="max-width: 260px;">
+    <span class="ws-muted">A long starter in a narrow column: the chip never wraps, its words cut (the title holds them)</span>
+    <div class="ws-suggestions ws-suggestions--chat" aria-label="Ask next">
+      <button type="button" class="ws-suggestion-chip ws-suggestion-chip--chat" title="Which of my sellers asked to wait until spring?"><span>Which of my sellers asked to wait until spring?</span></button>
+    </div>
+  </div>
+</div>
+</body>
+</html>

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

@@ -0,0 +1,20 @@
+/* ---- SuggestionChip: a starter to tap under an ask field or in the chat (North's): an edged chip on the page, a white pill in the chat ---- */
+/* A row of starters: 10 apart on the page, 8 in the chat; they wrap, a chip never does (its words cut with an ellipsis,
+   so give it a title). The page chip: 28 tall, 4 px corners, the 0.5 px card edge on no fill, 13 / 18 medium navy,
+   an optional 16 px icon 6 before the words. Hover darkens the edge (North's warm edge, from the two greys); a press
+   takes the navy wash. Touch: 40 tall. */
+.ws-suggestions { display: flex; flex-wrap: wrap; gap: var(--space-xs-plus); }
+.ws-suggestions--chat { gap: var(--space-xs); }
+.ws-suggestion-chip { display: inline-flex; align-items: center; gap: var(--space-xxs-plus); max-width: 100%; min-height: var(--ws-control-h-sm); padding: 0 var(--space-sm); border: var(--ws-hairline) solid var(--ws-edge-card); border-radius: var(--ws-radius-control); background: transparent; font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 500; color: var(--color-text-heading); text-align: left; white-space: nowrap; cursor: pointer; transition: border-color var(--ws-duration-hover) var(--ws-ease-soft), background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+.ws-suggestion-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.ws-suggestion-chip > svg { flex-shrink: 0; width: var(--ws-icon); height: var(--ws-icon); }
+/* An icon first takes 8 on its left; words alone sit 12 from both sides. */
+.ws-suggestion-chip:has(> svg:first-child) { padding-left: var(--space-xs); }
+@media (hover: hover) { .ws-suggestion-chip:hover { border-color: var(--ws-edge-hover); } }
+.ws-suggestion-chip:active { background-color: var(--ws-hover); transition-duration: var(--ws-duration-instant); }
+/* Ghost: no edge, the body grey, regular; hover is a faint wash. */
+.ws-suggestion-chip--ghost { padding: 0 var(--space-xxs-plus); border-color: transparent; font-weight: 400; color: var(--color-text-body); }
+@media (hover: hover) { .ws-suggestion-chip--ghost:hover { border-color: transparent; background-color: var(--ws-hover); } }
+/* In the chat: a white pill, 32 tall, 12 at the sides, round ends (16 at 32 tall, still round at 40 on touch). */
+.ws-suggestion-chip--chat { min-height: var(--ws-control-h); padding: 0 var(--space-sm); border-radius: var(--radius-full); background: var(--color-surface); }
+@media (pointer: coarse) { .ws-suggestion-chip { min-height: var(--ws-touch); } }

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

@@ -16,17 +16,12 @@ An on/off setting that applies itself at once, drawn as a sliding track and thum
 
 ## Anatomy
 
-- Track: 36 x 20 px, `--radius-full` corners. There is no numeric radius token for "10 px" (half the 20 px height); at
-  this fixed size `--radius-full` (9999px) is the token that reaches a true pill, the same way it rounds a disc or a
-  pill meter, so it is used here rather than inventing a `10px` value.
-- Off: `--color-bg-page` (cream) fill, `--ws-hairline` edge in `--ws-edge-card`, matching the house rule that every
-  surface at rest is cream with a fine edge.
-- On: solid `--color-text-heading` (navy) fill, no edge. Navy is one of only two fills a control may wear (03-colour.md:
-  "the tab thumb and a selected toggle are the two navy fills a control may wear").
-- Thumb: 16 px (`--ws-icon`) white disc, 2 px inset from the track's edge, travelling to 18 px inset on the other side
-  (36 − 16 − 2 × 2) when on: a 16 px move, exactly as specified.
-- Label: 14 px medium, `--color-text-heading`, to the left of the track (the reverse of `Checkbox`, whose label sits to
-  the right of its box; the row is still the one tap target in both).
+- Track: 36 by 20, a pill, no border (North's anatomy: a filled track). Off it is #7F7F7F (`--ws-control-off`, the muted words a step lighter): North's
+  warm grey (#DCD6CF) is 1.4:1 on the cream, so its tone is taken to the 3:1 a control asks. On it is navy.
+- Thumb: a 16 px disc, 2 px in on every side, with North's soft shade; the surface white when off, the act's cream when
+  on. It travels 16 px. (The 0.4.0 thumb sat 2 px from the top and 1 from the bottom, under a 0.5 px border.)
+- `--sm`: North's 28 by 16 track with a 12 px thumb, for a dense list.
+- Label: 14 / 20 medium navy, 10 px after the track; the track sits on the label's first line.
 - Description: 12 px muted (`--color-text-muted`) under the label, as `Checkbox`'s own description line.
 - "Saved": `--ws-word-positive` words appearing beside the label for a moment after a change.
 
@@ -37,12 +32,14 @@ An on/off setting that applies itself at once, drawn as a sliding track and thum
 | Plain | label only | a short setting with no extra context needed |
 | With description | label plus a muted line under it | a setting that needs one more sentence to be clear |
 
-There is one size: the track is always 36 x 20 px; the row grows to 40 px on a touch screen.
+| `--sm` | North's 28 by 16 track, a 12 px thumb | a dense list (North's watch list) |
+
+Sizes: 36 by 20 (the default) and 28 by 16 (`--sm`); one line is a 40 px row on a touch screen.
 
 ## States
 
-- **Off:** cream track, hairline edge, thumb at the left.
-- **On:** navy track, no edge, white thumb at the right.
+- **Off:** the grey track, the white thumb at the left.
+- **On:** the navy track, the cream thumb at the right.
 - **Disabled:** the whole row at 50% opacity (matching `Checkbox`'s disabled treatment), pointer events off; a disabled,
   on track keeps its navy fill so the state stays legible.
 - **With description:** the muted line shows under the label; `aria-describedby` wires it to the switch.
@@ -50,17 +47,22 @@ There is one size: the track is always 36 x 20 px; the row grows to 40 px on a t
   the change is in flight; `aria-busy="true"`.
 - **Saved:** the working dot is replaced by "Saved" in `--ws-word-positive`, rising in (`ws-arrive`) for a moment, then
   clearing.
-- **Focus:** the kit's focus halo (`--shadow-focus-ring`) around the track, from the native input's own focus.
-- **Touch:** the row clears the 40 px floor even though the track itself stays 36 x 20 px.
+- **Focus:** the kit's ring, 2 px navy, 2 px out, round the track.
+- **Hover (a mouse only):** the track answers as Checkbox and Radio do, a colour change and nothing moves: off, its
+  grey a step toward the navy; on, North's brighter navy (`--ws-act-hover`). North draws no switch hover; this follows
+  its siblings (derived).
+- **Pressed:** nothing beyond the thumb's travel.
+- **Width:** the label is as wide as its words, never the whole column, so a click far from them does nothing.
+- **Touch:** one line is a 40 px row, though the track stays 36 by 20.
+- **Dark:** the on track is the light ink with a dark thumb; the off track keeps its grey (3:1 on both dark grounds).
 
 ## Behaviour
 
 - Keyboard: a native checkbox input under the skin (`role="switch"`); Tab reaches it, Space toggles it.
 - Pointer / touch: clicking or tapping anywhere in the row toggles it, since the label is part of the control, exactly
   as `Checkbox`.
-- Motion: the thumb's `transform: translateX()` and the track's background both transition over `--ws-duration-instant`
-  (120 ms) on `--ws-ease-soft`; "Saved" rises in over `--ws-duration-gentle` (`ws-arrive`). Nothing moves under
-  `prefers-reduced-motion: reduce`.
+- Motion: North's: the track's colour over the hover beat (200 ms) on `--ws-ease-soft`, the thumb over the settle beat
+  (320 ms) on `--ws-ease-grow`; "Saved" rises in (`ws-arrive`). Still under reduced motion.
 
 ## Content
 
@@ -86,14 +88,32 @@ There is one size: the track is always 36 x 20 px; the row grows to 40 px on a t
 - The system's own component guide previously read: "A setting that applies at once | `Checkbox` (no switch yet); say
   'Saved' | a switch is listed as later." This component is that "later" arriving (26 Oct 2026): the system now has
   a switch, and it keeps the "say Saved" confirmation rather than dropping it.
-- Navy when on, cream with a hairline when off: the same colour logic as `Checkbox`'s navy-when-chosen rule, applied to
-  a track instead of a box.
-- The label sits on the left here, reversed from `Checkbox`'s label-on-the-right: a deliberate difference, not an
-  inconsistency, since a switch's row reads left to right as "name, then state."
+- Navy when on, the 3:1 grey when off: an off switch still reads as a control (0.5.0; North's own grey is 1.4:1).
+- The label sits to the right of the track, as `Checkbox`'s does beside its box.
 - The whole row is the tap target, never the 36 px track alone, since most of this audience is on a phone.
 
 ## Source
 
 **Derived from**: the system's own documented gap (a switch listed as later, with a checkbox standing in for one),
 `Checkbox`'s native-input-under-skin pattern, the navy-fill rule for a selected toggle, and `Button`'s pending-dot and
-"Saved" confirmation patterns. **Precedent**: an intentional addition decided from the system, 26 Oct 2026.
+"Saved" confirmation patterns. **Precedent**: an intentional addition decided from the system, 26 Oct 2026. 0.5.0:
+Seth's North switch (style1.css:2049-2052): a filled track, a shaded thumb, the track over 200 ms and the thumb over
+320 ms on the grow curve; the thumb centred (it sat 2 / 1 px under the old border).
+
+## Markup
+
+```html
+<label class="ws-switch">
+  <input type="checkbox" role="switch" checked aria-describedby="sw-desc">
+  <span class="ws-switch__track"><span class="ws-switch__thumb"></span></span>
+  <span class="ws-switch__words">
+    <span class="ws-switch__label">Send a copy to the team channel</span>
+    <span class="ws-muted" id="sw-desc">Posts the week's summary where the whole team can see it</span>
+  </span>
+</label>
+```
+
+## Styles
+
+`design-system/components/Switch/style.css`: `ws-switch` with `--sm`, `--disabled`; `__track`, `__thumb`, `__words`,
+`__label`, `__status`, `__saved`, `__saving`.

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Fields" height=388 -->
+<!-- @dsCard group="Fields" height=470 -->
 <!doctype html>
 <html>
 <head>
@@ -14,12 +14,12 @@
       <span class="ws-muted">Off and on</span>
       <div class="ws-cluster ws-cluster--component ws-cluster--start">
         <label class="ws-switch">
-          <input type="checkbox" role="switch" aria-checked="false">
+          <input type="checkbox" role="switch">
           <span class="ws-switch__track"><span class="ws-switch__thumb"></span></span>
           <span class="ws-switch__words"><span class="ws-switch__label">Text me a reminder before each call</span></span>
         </label>
         <label class="ws-switch">
-          <input type="checkbox" role="switch" aria-checked="true" checked>
+          <input type="checkbox" role="switch" checked>
           <span class="ws-switch__track"><span class="ws-switch__thumb"></span></span>
           <span class="ws-switch__words"><span class="ws-switch__label">Share my activity with my team lead</span></span>
         </label>
@@ -29,7 +29,7 @@
     <div class="ws-stack">
       <span class="ws-muted">With a description</span>
       <label class="ws-switch">
-        <input type="checkbox" role="switch" aria-checked="true" checked aria-describedby="sw-desc">
+        <input type="checkbox" role="switch" checked aria-describedby="sw-desc">
         <span class="ws-switch__track"><span class="ws-switch__thumb"></span></span>
         <span class="ws-switch__words">
           <span class="ws-switch__label">Send a copy to the team channel</span>
@@ -42,7 +42,7 @@
       <span class="ws-muted">Saving, then saved</span>
       <div class="ws-cluster ws-cluster--component ws-cluster--start">
         <label class="ws-switch">
-          <input type="checkbox" role="switch" aria-checked="true" checked aria-busy="true">
+          <input type="checkbox" role="switch" checked aria-busy="true">
           <span class="ws-switch__track"><span class="ws-switch__thumb"></span></span>
           <span class="ws-switch__words">
             <span class="ws-switch__label">Follow-up nudges</span>
@@ -50,7 +50,7 @@
           </span>
         </label>
         <label class="ws-switch">
-          <input type="checkbox" role="switch" aria-checked="true" checked>
+          <input type="checkbox" role="switch" checked>
           <span class="ws-switch__track"><span class="ws-switch__thumb"></span></span>
           <span class="ws-switch__words">
             <span class="ws-switch__label">Follow-up nudges</span>
@@ -60,16 +60,31 @@
       </div>
     </div>
 
+    <div class="ws-stack">
+      <span class="ws-muted">Small: North's 28 by 16 switch, for a dense list</span>
+      <div class="ws-cluster ws-cluster--component ws-cluster--start">
+        <label class="ws-switch ws-switch--sm">
+          <input type="checkbox" role="switch">
+          <span class="ws-switch__track"><span class="ws-switch__thumb"></span></span>
+          <span class="ws-switch__words"><span class="ws-switch__label">Watch Zillow Premier Agent</span></span>
+        </label>
+        <label class="ws-switch ws-switch--sm">
+          <input type="checkbox" role="switch" checked>
+          <span class="ws-switch__track"><span class="ws-switch__thumb"></span></span>
+          <span class="ws-switch__words"><span class="ws-switch__label">Watch Luxury Presence</span></span>
+        </label>
+      </div>
+    </div>
     <div class="ws-stack">
       <span class="ws-muted">Disabled, off and on</span>
       <div class="ws-cluster ws-cluster--component ws-cluster--start">
         <label class="ws-switch ws-switch--disabled">
-          <input type="checkbox" role="switch" aria-checked="false" disabled>
+          <input type="checkbox" role="switch" disabled>
           <span class="ws-switch__track"><span class="ws-switch__thumb"></span></span>
           <span class="ws-switch__words"><span class="ws-switch__label">Voice calls (needs a microphone)</span></span>
         </label>
         <label class="ws-switch ws-switch--disabled">
-          <input type="checkbox" role="switch" aria-checked="true" checked disabled>
+          <input type="checkbox" role="switch" checked disabled>
           <span class="ws-switch__track"><span class="ws-switch__thumb"></span></span>
           <span class="ws-switch__words"><span class="ws-switch__label">CRM sync (locked by your admin)</span></span>
         </label>