@felloinnovations/brand-kit 0.4.0 → 0.5.0

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

@@ -0,0 +1,36 @@
+/* ---- Tile: one card in a bento (an icon disc and a title in its head, its body under), and the product tile row ---- */
+/* Not clipped (K1, K9): a clip squashed the tile in a scroller and cut any menu or tip inside it. */
+.ws-tile { display: flex; flex-direction: column; }
+.ws-tile__head { display: flex; min-height: var(--space-3xl); align-items: center; gap: var(--space-xs); padding: var(--ws-card-padding-lg) var(--ws-card-padding-lg) 0; }
+.ws-tile__head > .ws-section { min-width: 0; }
+.ws-tile__disc { width: var(--space-lg); height: var(--space-lg); }
+.ws-tile__disc svg { width: var(--ws-icon-sm); height: var(--ws-icon-sm); color: var(--color-text-heading); }
+.ws-tile__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-xs); padding: var(--space-xxs) var(--ws-card-padding-lg) var(--ws-card-padding-lg); }
+/* Seth's tile figure: 32 / 38 regular, tight tracking, tabular. A figure that is not there yet ("Not connected") is muted. */
+.ws-tile__figure { font-size: var(--ws-text-figure); line-height: var(--ws-leading-figure); font-weight: 400; letter-spacing: var(--ws-tracking-display); color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
+.ws-tile__figure--none { color: var(--color-text-muted); }
+/* In a .ws-board--4: --full takes the whole row; --half two columns once the board has two (40rem). */
+.ws-tile--full { grid-column: 1 / -1; }
+@container (min-width: 40rem) { .ws-tile--half { grid-column: span 2; } }
+
+/* The product tile row (issue #9, Seth's first open): what an app can do, 2 or 3 tiles joined on the tray, 1 px in and
+   2 px apart. Each tile is a cream surface (a 24 px line icon, a 14 / 20 title, a 13 / 18 line, 108 tall at least)
+   with the card's foot on the grey under it: a door, or the step it waits on. The whole tile is the target. */
+.ws-tiles { display: flex; flex-wrap: wrap; gap: var(--space-3xs); padding: var(--ws-rim); border-radius: var(--ws-radius-card); background: var(--ws-tray); }
+.ws-tiles > li { display: flex; flex: 1 1 0; min-width: min(100%, calc(var(--space-8xl) + var(--space-xs))); }
+.ws-tiles__tile { display: flex; flex: 1; flex-direction: column; min-width: 0; border-radius: var(--ws-radius-card-inner); color: inherit; text-align: left; text-decoration: none; }
+a.ws-tiles__tile, button.ws-tiles__tile { width: 100%; padding: 0; border: 0; background: none; cursor: pointer; transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+a.ws-tiles__tile:focus-visible, button.ws-tiles__tile:focus-visible { outline-offset: calc(var(--ws-focus-width) * -1); }
+.ws-tiles__surface { display: flex; flex: 1; flex-direction: column; gap: var(--space-sm); min-height: calc(var(--space-7xl) - var(--space-sm)); padding: var(--space-md); border-radius: var(--ws-radius-card-inner); background: var(--color-bg-page); transition: background-color var(--ws-duration-hover) var(--ws-ease-soft); }
+.ws-tiles__icon { flex-shrink: 0; width: var(--space-lg); height: var(--space-lg); color: var(--color-text-heading); }
+.ws-tiles__words { display: flex; flex-direction: column; gap: var(--space-3xs); }
+.ws-tiles__title { font-size: var(--ws-text-body); line-height: calc(var(--space-md) + var(--space-xxs)); font-weight: 500; color: var(--color-text-heading); }
+.ws-tiles__line { font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 500; color: var(--color-text-body); }
+/* Hover darkens the tray under the tile (its foot), the door's words underline; a press tints the cream at once. A
+   muted aside in the foot takes the body grey there (the muted grey is under AA on Seth's hover tray). */
+@media (hover: hover) {
+  a.ws-tiles__tile:hover, button.ws-tiles__tile:hover { background-color: var(--ws-well-hover); }
+  :is(a, button).ws-tiles__tile:hover .ws-card__foot { --color-text-muted: var(--color-text-body); }
+  a.ws-tiles__tile:hover .ws-card__foot > :first-child, button.ws-tiles__tile:hover .ws-card__foot > :first-child { text-decoration: underline; }
+}
+a.ws-tiles__tile:active .ws-tiles__surface, button.ws-tiles__tile:active .ws-tiles__surface { background-color: var(--ws-surface-press); transition-duration: var(--ws-duration-instant); }

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

@@ -7,59 +7,57 @@ A vertical feed of what happened, grouped by day, a coloured dot on a fine line
 
 ## Not for
 
-- A sequence of steps still in progress toward an end: use `Stepper`, which shows what is done, current and ahead rather
-  than a past record.
+- A sequence of steps still in progress toward an end: use `Stepper`.
 - A list of records to compare or act on: use `Table` or rows in a `Card`.
-- A single moment worth calling out inside a chart: use `TrendBars`' own labelled moment instead of a whole timeline.
+- A single moment worth calling out inside a chart: use `TrendBars`' own labelled moment.
 
 ## Anatomy
 
-- A vertical line, `--ws-line` (1 px) in `--ws-edge-slot`, running the column's height.
-- A dot per entry: 8 px, centred on the line, with a 2 px cream ring so it reads over the line.
-- Dot colour: navy for something the person did, `--ws-chart-finished` (teal) for a positive outcome,
-  `--color-brand-salmon` for something that needs the person, grey (`--color-gray-3`) for something settled with no
-  action attached.
-- An entry: a 14 px navy title (`--color-text-heading`), a 13 px muted meta line under it with the time
-  (`--ws-text-meta`, `--color-text-muted`).
-- Spacing: 12 px between a dot and its words (the line sits in a 16 px left column, the words indent to clear it), 16 px
-  between entries (`--space-md`), 24 px between day groups.
-- A day group: a 12 px eyebrow ("Today", "Yesterday", "Oct 24") above its entries, same style as any group eyebrow.
+- A day: its label in Seth's control words (13 / 18 medium muted, sentence case: "Today", "Yesterday", "Oct 24"), flush
+  with the dots, 12 above its entries; days 24 apart.
+- A dot per entry: 8 px, centred on the title's first line, on a 2 px ring of the ground so it reads over the line.
+- The line: 1 px (`--ws-line`) in `--ws-edge-slot`, drawn from each dot's centre to the next dot's centre, so it never
+  runs past the last entry.
+- An entry: the title 14 / 20 navy, 20 in (8 for the dot, 12 to the words); the time under it, 2 below, in the meta
+  words (`ws-meta`: 13 / 16 muted). Entries 16 apart.
+- Dot tones: navy (`--color-text-heading`) for something the person did, teal (`--ws-chart-finished`) for a positive
+  outcome, salmon (`--ws-chart-under-half`) for something that needs the person, grey (`--ws-edge-card`) for something
+  settled with no act attached.
 
 ## Variants and sizes
 
-| Dot tone | Meaning |
-| --- | --- |
-| Navy | Something the person did (a call, a move) |
-| Teal (`--ws-chart-finished`) | A positive outcome (passed, accepted) |
-| Salmon (`--color-brand-salmon`) | Needs the person now |
-| Grey (`--color-gray-3`) | Settled, no action was or is needed |
+| Dot tone | Class | Meaning |
+| --- | --- | --- |
+| Navy | `__dot--navy` | Something the person did (a call, a move) |
+| Teal | `__dot--positive` | A positive outcome (passed, accepted) |
+| Salmon | `__dot--needs` | Needs the person now |
+| Grey | `__dot--settled` (or none) | Settled, no act needed |
 
 ## States
 
 - **Default**: as above.
-- **Needs you**: the salmon dot; the entry's own title already says what is needed, so no extra chip repeats it.
-- **Empty**: the same card, a sentence ("Nothing here yet") in place of the list; never an empty line with no dots.
-- **Loading**: skeleton lines in place of titles, the dots shown as plain grey circles until content arrives.
-- **Long title**: wraps to a second line rather than truncating, since a history entry is read once and should say the
-  whole thing.
-- **Many entries**: the feed scrolls inside its card past a comfortable length rather than growing the page; it is never
-  paginated like `Table`, since a history reads front to back.
+- **Needs you**: the salmon dot; the entry's own title already says what is needed.
+- **An entry that opens something**: the title is a link (`a.ws-timeline__title`, medium), underlined on hover; on
+  touch its box grows to 24 without moving anything.
+- **Empty**: the same card, a sentence ("Nothing here yet") in place of the list; never a bare line with no dots.
+- **Loading**: ghost lines where the titles go, in the chart colours' sweep (`__ghost ws-shimmer`), the dots plain grey;
+  still under reduced motion.
+- **Long title**: wraps; a history entry is read once and should say the whole thing.
+- **Many entries**: the feed scrolls inside its card past a comfortable length; it is never paginated.
 
 ## Behaviour
 
-- Keyboard: the feed is a plain ordered list (`<ol>`); an entry that opens something (a lead, a call) is a real
-  link within it.
-- Pointer: an actionable entry hovers like any row; a purely informational entry does not react to the pointer.
-- Motion: entries rise in on arrival (`ws-rise`), staggered up to six at a time per the system's stagger cap; reduced
-  motion shows them in place without the rise.
+- Keyboard: a plain ordered list (`<ol>`) per day; an entry that opens something is a real link.
+- Pointer: an informational entry does not react to the pointer.
+- Motion: entries settle in on arrival (the house `ws-settle`: up 6 px out of a 3 px blur over 320 ms, 22 ms apart; set
+  `--ws-i` on each). Under reduced motion they are simply there.
 
 ## Content
 
 - A title states what happened in a plain sentence, past tense, naming who did it ("You called Dana Alvarez", not
   "Call logged").
-- The meta line is the time alone, or the time and a short detail ("10:14", "4:47, 6 minutes"); it never repeats the
-  title.
-- No em dashes; day labels are "Today", "Yesterday", then a date ("Oct 24"), never a full date for the two most recent.
+- The meta line is the time alone, or the time and a short detail ("10:14", "4:47, 6 minutes").
+- Day labels are "Today", "Yesterday", then a date ("Oct 24"). No em dashes.
 
 ## Props
 
@@ -70,20 +68,42 @@ A vertical feed of what happened, grouped by day, a coloured dot on a fine line
 
 ## Rules
 
-- **A mark never stands for a state alone**: the dot's tone pairs with the entry's own words, matching the system's rule
-  that a state always shows with a word as well as a colour (`03-colour.md`, "Never a state by colour alone").
-- **Grouped by day, not a bare flat list**: matching the grouping rule that related information sits closer together
-  and different groups (here, different days) are told apart by a label, not just a gap (`05-space-and-layout.md`,
-  "Grouping").
-- **The hairline is `--ws-edge-slot`**, the same tone used for a day cell's or a chart row's fine edge, since the line is
-  content structure rather than a card boundary.
-- **Source**: Intentional addition, decided from the system (26 Oct 2026): any product needs a plain history of what
-  happened to one thing, which none of the system's own progress-and-goal charts provide. Derived from the slot-edge
-  hairline, the four state tones (navy, teal, salmon, grey) used throughout the colour system, and the meta text size
-  for timestamps.
+- **A mark never stands for a state alone**: the dot's tone pairs with the entry's words.
+- **Grouped by day**, each group named by a label, not just a gap.
+- **The line ends at the last dot**: no tail under the feed.
+- **Sentence case day labels** (D6): no uppercase eyebrow.
 
 ## Source
 
-**Derived from**: `--ws-edge-slot` for the line's hairline, the four state tones already defined for colour meaning
-(navy, teal, salmon, grey), and `--ws-text-meta` for the time line. **Precedent**: an intentional addition decided
-from the system, 26 Oct 2026; no chart in the first product draws a plain activity feed.
+**Derived from**: `--ws-edge-slot` for the line, the four state tones, Seth's control words for the day (D6), North's
+settle motion (D7). **Precedent**: an intentional addition decided from the system, 26 Oct 2026; in 0.5.0 the dot moved
+onto the title's first line (it sat 2 px high) and the settled dot from the near-white `--ws-chart-empty` to the card
+edge grey, which reads on cream and on dark.
+
+## Markup
+
+```html
+<section class="ws-card ws-card--inset ws-timeline" aria-label="Activity">
+  <div class="ws-timeline__day">
+    <h3 class="ws-timeline__day-label">Today</h3>
+    <ol class="ws-timeline__list">
+      <li class="ws-timeline__item ws-settle">
+        <span class="ws-timeline__dot ws-timeline__dot--needs" aria-hidden="true"></span>
+        <a class="ws-timeline__title" href="#priya">Priya Nair's showing link expired</a>
+        <p class="ws-meta ws-timeline__meta">10:14</p>
+      </li>
+      <li class="ws-timeline__item ws-settle" style="--ws-i: 1;">
+        <span class="ws-timeline__dot ws-timeline__dot--navy" aria-hidden="true"></span>
+        <p class="ws-timeline__title">You called Dana Alvarez</p>
+        <p class="ws-meta ws-timeline__meta">9:02, 6 minutes</p>
+      </li>
+    </ol>
+  </div>
+</section>
+```
+
+## Styles
+
+`design-system/components/Timeline/style.css`, in `bundle.css` and `fello.css`. `ws-timeline` on the card is a hook
+for an app's own selectors and tests; the kit gives it no rule (the parts carry the styles). Dark comes from the tokens (the dot's
+ring is `--color-bg-page`, so it matches whatever card it sits on in light, dark or navy).

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Data" height=496 -->
+<!-- @dsCard group="Data" height=600 -->
 <!doctype html>
 <html>
 <head>
@@ -10,49 +10,46 @@
 <body>
 <div class="ws-stage ws-stage--grey">
 
-  <div style="width: 360px; max-width: 100%;">
-  <section class="ws-card ws-card--inset ws-timeline" aria-label="Activity">
+  <section class="ws-card ws-card--inset ws-timeline" aria-label="Activity" style="width: 380px;">
     <div class="ws-timeline__day">
-      <h3 class="ws-eyebrow ws-timeline__day-label">Today</h3>
+      <h3 class="ws-timeline__day-label">Today</h3>
       <ol class="ws-timeline__list">
-        <li class="ws-timeline__item ws-rise">
+        <li class="ws-timeline__item ws-settle">
           <span class="ws-timeline__dot ws-timeline__dot--needs" aria-hidden="true"></span>
-          <p class="ws-timeline__title">Priya Nair's showing link expired</p>
+          <a class="ws-timeline__title" href="#priya">Priya Nair's showing link expired before she opened it</a>
           <p class="ws-meta ws-timeline__meta">10:14</p>
         </li>
-        <li class="ws-timeline__item ws-rise" style="animation-delay: calc(var(--ws-stagger) * 1);">
+        <li class="ws-timeline__item ws-settle" style="--ws-i: 1;">
           <span class="ws-timeline__dot ws-timeline__dot--navy" aria-hidden="true"></span>
           <p class="ws-timeline__title">You called Dana Alvarez</p>
           <p class="ws-meta ws-timeline__meta">9:02, 6 minutes</p>
         </li>
       </ol>
     </div>
-
     <div class="ws-timeline__day">
-      <h3 class="ws-eyebrow ws-timeline__day-label">Yesterday</h3>
+      <h3 class="ws-timeline__day-label">Yesterday</h3>
       <ol class="ws-timeline__list">
-        <li class="ws-timeline__item ws-rise" style="animation-delay: calc(var(--ws-stagger) * 2);">
+        <li class="ws-timeline__item ws-settle" style="--ws-i: 2;">
           <span class="ws-timeline__dot ws-timeline__dot--positive" aria-hidden="true"></span>
           <p class="ws-timeline__title">Sam Okafor confirmed the showing</p>
           <p class="ws-meta ws-timeline__meta">4:47</p>
         </li>
-        <li class="ws-timeline__item ws-rise" style="animation-delay: calc(var(--ws-stagger) * 3);">
+        <li class="ws-timeline__item ws-settle" style="--ws-i: 3;">
           <span class="ws-timeline__dot ws-timeline__dot--navy" aria-hidden="true"></span>
           <p class="ws-timeline__title">You moved Marco Diaz to New lead</p>
           <p class="ws-meta ws-timeline__meta">2:10</p>
         </li>
-        <li class="ws-timeline__item ws-rise" style="animation-delay: calc(var(--ws-stagger) * 4);">
+        <li class="ws-timeline__item ws-settle" style="--ws-i: 4;">
           <span class="ws-timeline__dot ws-timeline__dot--settled" aria-hidden="true"></span>
           <p class="ws-timeline__title">Nellie Park's offer expired, unanswered</p>
           <p class="ws-meta ws-timeline__meta">11:30</p>
         </li>
       </ol>
     </div>
-
     <div class="ws-timeline__day">
-      <h3 class="ws-eyebrow ws-timeline__day-label">Oct 24</h3>
+      <h3 class="ws-timeline__day-label">Oct 24</h3>
       <ol class="ws-timeline__list">
-        <li class="ws-timeline__item ws-rise" style="animation-delay: calc(var(--ws-stagger) * 5);">
+        <li class="ws-timeline__item ws-settle" style="--ws-i: 5;">
           <span class="ws-timeline__dot ws-timeline__dot--navy" aria-hidden="true"></span>
           <p class="ws-timeline__title">Jo Whitfield accepted the offer</p>
           <p class="ws-meta ws-timeline__meta">3:55</p>
@@ -60,6 +57,21 @@
       </ol>
     </div>
   </section>
+
+  <div class="ws-stack ws-stack--component" style="width: 300px;">
+    <section class="ws-card ws-card--inset ws-timeline" aria-busy="true" aria-label="Activity, loading">
+      <div class="ws-timeline__day">
+        <h3 class="ws-timeline__day-label">Today</h3>
+        <ol class="ws-timeline__list">
+          <li class="ws-timeline__item"><span class="ws-timeline__dot" aria-hidden="true"></span><div class="ws-timeline__ghost ws-shimmer" style="width: 80%;"></div></li>
+          <li class="ws-timeline__item"><span class="ws-timeline__dot" aria-hidden="true"></span><div class="ws-timeline__ghost ws-shimmer" style="width: 60%;"></div></li>
+          <li class="ws-timeline__item"><span class="ws-timeline__dot" aria-hidden="true"></span><div class="ws-timeline__ghost ws-shimmer" style="width: 70%;"></div></li>
+        </ol>
+      </div>
+    </section>
+    <section class="ws-card ws-card--inset ws-timeline" aria-label="Activity, empty">
+      <p class="ws-body">Nothing here yet. Calls, showings and offers for Priya show up as they happen.</p>
+    </section>
   </div>
 
 </div>

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

@@ -0,0 +1,25 @@
+/* ---- Timeline: what happened, grouped by day, a dot per entry on one fine line that runs from the first dot to the last ---- */
+.ws-timeline__day + .ws-timeline__day { margin-top: var(--space-lg); }
+/* The day: Seth's control words, 13 / 18 medium muted, sentence case, flush with the dots. */
+.ws-timeline__day-label { margin-bottom: var(--space-sm); font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 500; color: var(--color-text-muted); }
+/* Words start 12 past the 8 px dot (20 in); the line is drawn per entry, dot centre to the next dot's centre, so it never
+   runs past the last entry. */
+.ws-timeline__list { display: flex; flex-direction: column; gap: var(--space-md); padding-left: calc(var(--space-xs) + var(--space-sm)); }
+.ws-timeline__item { position: relative; }
+.ws-timeline__item:not(:last-child)::before { content: ""; position: absolute; left: calc((var(--space-xs) + var(--space-sm)) * -1 + (var(--space-xs) - var(--ws-line)) / 2); top: calc(var(--ws-leading-row) / 2); bottom: calc((var(--space-md) + var(--ws-leading-row) / 2) * -1); width: var(--ws-line); background: var(--ws-edge-slot); }
+/* The dot: 8 px, centred on the title's first line, on a 2 px ring of the ground so it reads over the line. */
+.ws-timeline__dot { position: absolute; z-index: 1; left: calc((var(--space-xs) + var(--space-sm)) * -1); top: calc((var(--ws-leading-row) - var(--space-xs)) / 2); width: var(--space-xs); height: var(--space-xs); border-radius: var(--radius-full); background: var(--ws-edge-card); box-shadow: 0 0 0 var(--ws-ring) var(--color-bg-page); }
+.ws-timeline__dot--navy { background: var(--color-text-heading); }
+.ws-timeline__dot--positive { background: var(--ws-chart-finished); }
+.ws-timeline__dot--needs { background: var(--ws-chart-under-half); }
+.ws-timeline__dot--settled { background: var(--ws-edge-card); }
+.ws-timeline__title { font-size: var(--ws-text-body); line-height: var(--ws-leading-row); color: var(--color-text-heading); }
+.ws-timeline__meta { margin-top: var(--space-3xs); }
+/* An entry that opens something: the title is a link, underlined on hover, focus the house ring. */
+a.ws-timeline__title { display: block; font-weight: 500; text-decoration: none; }
+@media (hover: hover) { a.ws-timeline__title:hover { text-decoration: underline; text-underline-offset: var(--space-3xs); } }
+/* On touch the link's box grows to 24 without moving a thing. */
+@media (pointer: coarse) { a.ws-timeline__title { padding-block: var(--space-3xs); margin-block: calc(var(--space-3xs) * -1); } }
+/* Loading: ghost lines where the titles go (add ws-shimmer), the dots plain. */
+.ws-timeline__ghost { display: block; height: calc(var(--space-xs) + var(--space-3xs)); margin-block: calc((var(--ws-leading-row) - var(--space-xs) - var(--space-3xs)) / 2); border-radius: var(--ws-radius-bar); background: var(--ws-track); }
+.ws-timeline__ghost.ws-shimmer { background: var(--ws-shimmer); background-size: 300% 100%; }

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

@@ -1,72 +1,104 @@
-A brief, passing confirmation that something happened in the background, drawn by the kit's own `Toaster` (sonner).
+A receipt that passes: something finished in the background, said in one line, with at most one act. Seth's navy pill.
 
 ## Use it when
 
-- Something just finished in the background and the person should know, briefly, without being blocked ("Draft saved", "Lead archived").
-- An action offers a short-lived "Undo" ("Removed from the pipeline, Undo"), with its own few seconds before it is gone.
+- Something just finished and the person should know, briefly, without being stopped ("Draft saved").
+- An action offers a short-lived Undo ("Removed from the pipeline. Undo").
 
 ## Not for
 
-- An error the person must act on: put it beside the field or action it belongs to (`ws-field-msg--error`, `ws-needs`), never in a toast, since a toast can be missed or dismissed before it is read.
-- Essential information the person needs to keep seeing: that lives on the page or in the chat, never only in a toast that disappears.
-- A question needing an answer: use `Dialog`.
+- An error the person must act on: put it beside the field or act it belongs to (`ws-field-msg--error`), never in a
+  toast, which can be missed.
+- Anything the person needs to keep seeing: that lives on the page or in the chat.
+- A question that needs an answer: use `Dialog`.
 
 ## Anatomy
 
-- The kit's own `Toaster` (`@felloinnovations/brand-kit/toast`, built on sonner): a white card, 1 px solid `--color-border-default` edge, `--radius-sm` (4 px) corners, `--shadow-card-hover` lift.
-- A title line (14 px, `--font-size-sm`, medium, navy `--color-text-heading`) and an optional description line under it (12 px, `--font-size-2xs`, muted `--color-text-muted`).
-- An optional close control and an optional action button (styled through `actionButtonStyle`/`cancelButtonStyle`), both token-coloured.
-- Positioned bottom right on a desktop, sat over the chat's composer corner; spans the foot above the tab bar on a phone.
+- The pill (`ws-toast`): the act's navy (`--ws-inverse`) with its words (`--ws-on-inverse`, 12.71:1); the brand navy and white in dark, 8 / 14 inside,
+  18 px corners (North's toast), the pop drop (`--ws-shadow-pop`). One line is 34 tall, a true pill; a second line
+  keeps the same corners. Never wider than its column.
+- Icon (`ws-toast__icon`): 16 px, before the words, 12 apart; a tick for a receipt. Centred on one line; with a
+  detail it sits on the title's line (1 above and below it), as a menu's icon does.
+- Words (`ws-toast__body`): the title (`ws-toast__title`, 13 / 18 medium), and at most one detail under it, 2 apart
+  (`ws-toast__description`, 13 / 18 in the act's words at 76%, 8.0:1).
+- Act (`ws-toast__action`): 13 / 18 semibold words that act, underlined, never a second fill. On touch it is 40 tall
+  and reaches into the pill's padding, so the pill stays 40.
 
 ## Variants and sizes
 
 | Kind | Look |
 | --- | --- |
-| Plain confirmation | Title only, or title plus a short description |
-| With an action | Adds one button (such as "Undo"), styled through `actionButtonStyle`, kept a quiet navy in the reference implementation rather than the kit's default salmon |
+| Receipt | Tick and title, one line |
+| With an act | Adds one act at the end ("Undo", "View") |
+| With a detail | Title and one detail line; the icon sits on the title's line, the act centred beside both |
 
 ## States
 
-- **Entering**: the kit's own sonner entrance (a slide and fade), not a product-specific motion.
-- **Shown**: sits over the page's corner for sonner's default duration, stacking above any other toast already showing.
-- **Dismissing**: swipe-to-dismiss (sonner's own gesture) or its own timer; leaves the same way it arrived, reversed.
-- **With an action**: pressing the action both performs it and dismisses the toast.
+- **Entering** (North's chat toast, js@685658): it slides up 8 px out of .96 (`--ws-open-scale-toast`) and settles on
+  the settle spring (`--ws-spring-settle`, .32 / .1).
+- **Shown**: for the toaster's time, stacking over any other toast.
+- **Leaving** (`data-leaving`): fades 4 px down over `--ws-duration-exit` (120 ms), faster than it came; remove it
+  120 ms later.
+- **Act hover**: its underline thickens to 2 px, for pointers that hover.
+- **Act pressed**: does the act and leaves.
+- **Focus**: the act's ring turns to its words' colour, so it shows on the navy.
+- **Dark**: the pill keeps the brand navy and white words; the pop shadow carries a faint light rim so it lifts off
+  the dark page (D12).
 
 ## Behaviour
 
-- Keyboard: sonner renders its stack in an `aria-live` region; a focused toast's action and close are reachable by Tab while it is present.
-- Pointer: a swipe or drag dismisses it; the close control, if shown, dismisses it on click.
-- Touch: swipe-to-dismiss is the primary touch interaction; sonner handles this without extra code.
-- Motion: entirely the kit's own (sonner's built-in transitions); the reference implementation only overrides colours, border, radius and shadow through `toastOptions`, never the motion itself.
-- Reduced motion: follows sonner's own reduced-motion handling, not a product override.
+- Keyboard: the toaster keeps its stack in an `aria-live` region (`role="status"`); a toast's act is reachable by Tab
+  while it is there.
+- Pointer and touch: swipe or its own timer dismisses it; the act is 40 tall on touch.
+- Motion: in the kit's `Toaster` (sonner) the toaster moves it; `ws-toast` carries the same motion for a page without
+  sonner.
+- Reduced motion: it appears and goes in place.
+- The preview's last stack is live: press Save the draft.
 
 ## Content
 
 - The title says what happened, in the past tense, briefly ("Draft saved", not "Saving your draft").
-- A description, if any, adds the one relevant detail (who or what), never repeating the title.
-- No em dash; sentence case.
-- Never used for something the person must act on: a toast's words are a receipt, not a request.
+- A detail adds the one fact that matters (who or what), never a repeat of the title.
+- The act is one short verb.
+- Never something the person must act on: a toast is a receipt, not a request.
 
 ## Props
 
-`Toaster` takes the kit's own `ToasterProps` (from sonner): `position`, `toastOptions` (its `style`, `actionButtonStyle`, `cancelButtonStyle`, `classNames`), and the rest of sonner's API. The reference implementation's own usage sets:
+`Toaster` takes sonner's `ToasterProps`: `position`, `toastOptions` (`style`, `actionButtonStyle`, `classNames`) and the
+rest of sonner's API. The skin to give it, so it matches `ws-toast`:
 
-| Name | Value | Meaning |
-| --- | --- | --- |
-| `position` | `"bottom-right"` | Where the stack sits on a desktop. |
-| `mobileOffset` | `{ bottom: 'calc(var(--space-6xl) + var(--space-xs))' }` | Clears the phone's tab bar. |
-| `toastOptions.style` | white background, `--color-border-default` edge, `--radius-sm`, `--shadow-card-hover` | The kit's own skin, kept whole. |
-| `toastOptions.actionButtonStyle.background` | `--color-brand-navy` | The reference implementation's one change: the action is a quiet navy, never the kit's default salmon, since salmon is reserved for the one primary act of a screen. |
+| Name | Value |
+| --- | --- |
+| `toastOptions.style` | `background: var(--ws-inverse)`, `color: var(--ws-on-inverse)`, no border, `border-radius: calc(var(--space-md) + var(--space-3xs))`, `box-shadow: var(--ws-shadow-pop)`, `padding: var(--space-xs) var(--space-sm-plus)`, `font-size: var(--ws-text-control)` |
+| `toastOptions.actionButtonStyle` | `background: none`, `color: var(--color-white)`, `font-weight: 600`, `text-decoration: underline` |
+| `mobileOffset` | `{ bottom: 'calc(var(--space-6xl) + var(--space-xs))' }`, clear of a phone's tab bar |
 
 ## Rules
 
-- "Style only" (the kit owns sonner's behaviour: stacking, swipe-to-dismiss, the `aria-live` region); the product never re-implements the toast mechanics itself.
-- Never for an error the person must act on (the system's own rule: salmon and red are never used for a toast's own words; an error lives where the problem is, not in a passing toast).
-- The action button is quiet navy, not the kit's default salmon, because salmon is reserved for the one primary act of a screen.
-- **Contradiction found, not resolved**: a brief for this preview once described a cream card lifted, 8 px corners, a 14 px navy line, a 12 px muted line and an x icon button. Neither the kit's own `Toaster` nor the reference implementation's override matches this: both draw a white card, 4 px corners, a card-hover lift with a 1 px solid border, and neither configures a close ("x") button at all. This preview and README follow the actual code, since code is truth.
+- Style only: the toaster owns stacking, swipe and the `aria-live` region; the product never rewrites them.
+- Never for an error.
+- One act at most, and it is words, never a second fill.
+- Navy, Seth's (North css:679): this replaces the white card with a 1 px border (logged in 17-decisions.md).
 
 ## Source
 
-**Derived from**: the kit's own `Toaster` (sonner), restyled only in its colours, border, radius and shadow; the one
-additional change is a quiet navy action button in place of the kit's default salmon. **Precedent**: the first
-product built on the system.
+**Derived from**: Seth's North toast (style1.css:679: navy pill, 8 / 14 inside, 18 px corners, white words, a
+`0 10px 24px -12px` drop; js: in from y 8 and .96 on the settle spring, out to y 4), the kit's `Toaster` (sonner) and
+the geometry check (the act under 40 on touch). **Precedent**: the first product built on the system.
+
+## Markup
+
+```html
+<div class="ws-toast" role="status">
+  <svg class="ws-toast__icon" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+  <div class="ws-toast__body">
+    <p class="ws-toast__title">Removed from the pipeline</p>
+  </div>
+  <button type="button" class="ws-toast__action">Undo</button>
+</div>
+```
+
+## Styles
+
+`Toast/style.css`, built into `bundle.css` and `fello.css`. Tokens only; the pill stays navy in dark, its rim comes with the page.
+`src/components/toast.tsx` (the `Toaster`) must carry the same skin; until it does, the React toast is the old white card.

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Overlays" height=140 -->
+<!-- @dsCard group="Overlays" height=150 -->
 <!doctype html>
 <html>
 <head>
@@ -10,22 +10,23 @@
 <body>
 <div class="ws-stage ws-stage--grey">
 
-  <div class="ws-stack">
-    <span class="ws-muted">A static toast as the kit and the reference implementation draw it (sonner, style only, no close icon)</span>
-    <div style="width: 300px; max-width: 100%;">
+  <div class="ws-stack" style="width: 360px;">
+    <span class="ws-muted">A receipt: the tick and one line, a navy pill</span>
+    <div class="ws-cluster">
       <div class="ws-toast" role="status">
+        <svg class="ws-toast__icon" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
         <div class="ws-toast__body">
           <p class="ws-toast__title">Draft saved</p>
-          <p class="ws-toast__description">Priya Nair's follow-up is ready to send.</p>
         </div>
       </div>
     </div>
   </div>
 
-  <div class="ws-stack">
-    <span class="ws-muted">With an action: the action is a quiet navy, never the kit's default salmon</span>
-    <div style="width: 300px; max-width: 100%;">
+  <div class="ws-stack" style="width: 360px;">
+    <span class="ws-muted">With its one act: words that act, never a second fill</span>
+    <div class="ws-cluster">
       <div class="ws-toast" role="status">
+        <svg class="ws-toast__icon" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
         <div class="ws-toast__body">
           <p class="ws-toast__title">Removed from the pipeline</p>
         </div>
@@ -34,6 +35,40 @@
     </div>
   </div>
 
+  <div class="ws-stack" style="width: 360px;">
+    <span class="ws-muted">A title and the one detail; long words wrap, the act sits beside them</span>
+    <div class="ws-toast" role="status">
+      <svg class="ws-toast__icon" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      <div class="ws-toast__body">
+        <p class="ws-toast__title">Sent to Google Chat</p>
+        <p class="ws-toast__description">Priya Nair's follow-up is with Dana and the two agents who referred her.</p>
+      </div>
+      <button type="button" class="ws-toast__action">View</button>
+    </div>
+  </div>
+
+  <div class="ws-stack" style="width: 360px;" data-live>
+    <span class="ws-muted">Live: press Save. The toast slides up out of .96 on the settle spring, stays 3 s, then fades 4 px down over .12 s, faster than it came</span>
+    <button type="button" class="ws-btn ws-btn--secondary" id="toast-live-go" style="align-self: flex-start;">Save the draft</button>
+    <div class="ws-cluster" id="toast-live" style="min-height: var(--space-2xl);" aria-live="polite"></div>
+  </div>
+  <script>
+    (() => {
+      const slot = document.getElementById('toast-live');
+      let timer = 0;
+      document.getElementById('toast-live-go').addEventListener('click', () => {
+        clearTimeout(timer);
+        slot.replaceChildren();
+        const toast = document.createElement('div');
+        toast.className = 'ws-toast';
+        toast.setAttribute('role', 'status');
+        toast.innerHTML = '<svg class="ws-toast__icon" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg><div class="ws-toast__body"><p class="ws-toast__title">Draft saved</p></div>';
+        slot.append(toast);
+        timer = setTimeout(() => { toast.setAttribute('data-leaving', ''); timer = setTimeout(() => toast.remove(), 120); }, 3000);
+      });
+    })();
+  </script>
+
 </div>
 </body>
 </html>

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

@@ -0,0 +1,25 @@
+/* ---- Toast: a receipt that passes, Seth's navy pill (North css:679): a tick, 13 px words, at most one quiet act ---- */
+/* The act and its words in light (--ws-inverse: a palette's act), the brand navy and white in dark (D12: a floating navy message keeps the navy; in dark the pop shadow
+   carries its faint light rim). One line is a pill (18 px corners on a 34 px line); a second line keeps the same corners. */
+.ws-toast { --ws-toast-radius: calc(var(--space-md) + var(--space-3xs)); /* North's 18 */ display: flex; align-items: center; gap: var(--space-sm); max-width: 100%; padding: var(--space-xs) var(--space-sm-plus); border-radius: var(--ws-toast-radius); background: var(--ws-inverse); color: var(--ws-on-inverse); box-shadow: var(--ws-shadow-pop); font-size: var(--ws-text-control); line-height: var(--ws-leading-control); }
+.ws-toast__icon { flex-shrink: 0; width: var(--ws-icon); height: var(--ws-icon); }
+/* With a detail the tick belongs to the title: it sits on the title's line, as a menu's icon does; the act stays centred. */
+.ws-toast:has(.ws-toast__description) > .ws-toast__icon { align-self: flex-start; margin-block: calc((var(--ws-leading-control) - var(--ws-icon)) / 2); }
+.ws-toast__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-3xs); min-width: 0; }
+.ws-toast__title { font-weight: 500; color: inherit; }
+/* North's quiet words on navy: its words at 76% (8.0:1 on the navy, in either theme). */
+.ws-toast__description { color: color-mix(in srgb, var(--ws-on-inverse) 76%, transparent); }
+/* The one act: words that act, underlined, never a second fill; under a pointer the underline thickens to 2 px. The
+   focus ring turns to the words' colour so it shows on the navy. On touch it is 40 tall and reaches into the pill's padding, so the pill stays 40. */
+.ws-toast__action { flex-shrink: 0; padding: 0 var(--space-xxs); margin-inline: calc(var(--space-xxs) * -1); border: 0; border-radius: var(--ws-radius-control); background: none; color: var(--ws-on-inverse); font-size: var(--ws-text-control); line-height: var(--ws-leading-control); font-weight: 600; text-decoration: underline; text-underline-offset: var(--space-3xs); cursor: pointer; }
+.ws-toast__action:focus-visible { outline-color: var(--ws-on-inverse); }
+@media (hover: hover) { .ws-toast__action:hover { text-decoration-thickness: var(--ws-focus-width); } }
+@media (pointer: coarse) { .ws-toast__action { margin-block: calc(var(--space-xs) * -1); } }
+/* Motion (D7, North's chat toast, js@685658: from y 8 and scale .96 on the settle spring .32 / .1, "Messages and steps
+   settle"): it slides up out of .96 and settles; it leaves by fading 4 px down over .12 s, faster than it came. */
+@keyframes ws-toast-in { from { opacity: 0; transform: translateY(var(--space-xs)) scale(var(--ws-open-scale-toast)); } }
+@keyframes ws-toast-out { to { opacity: 0; transform: translateY(var(--ws-nudge)); } }
+@media (prefers-reduced-motion: no-preference) {
+  .ws-toast { animation: ws-toast-in var(--ws-spring-settle-duration) var(--ws-spring-settle) backwards; }
+  .ws-toast[data-leaving] { animation: ws-toast-out var(--ws-duration-exit) var(--ws-ease-exit) forwards; pointer-events: none; }
+}