@felloinnovations/brand-kit 0.4.0 → 0.5.0

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

@@ -1,6 +1,6 @@
 The kit's marketing piece: for a public page, never a product screen.
 
-Three plans side by side, the middle one rung in navy as the one to pick.
+Three plans side by side, the recommended one ringed in navy.
 
 ## Use it when
 
@@ -11,59 +11,58 @@ Three plans side by side, the middle one rung in navy as the one to pick.
 
 - More than three tiers: a fourth plan crowds the row; use a comparison table instead.
 - A single price with no tiers: a `Stat` or a plain sentence does that job without the ceremony of a grid.
-- Any product screen inside a product built on this system: a signed-in workspace has no pricing idea inside the
-  product; this is a sales-page-only pattern.
+- Any product screen: a signed-in workspace has no pricing grid; this is a sales-page-only pattern.
 
 ## Anatomy
 
-- Row: three `KitCard`s, `--layout-col-gap` (24px) apart, equal height (`align-items: stretch`), on the kit's
-  cream page background (`--color-background`).
-- Each card: `--space-lg` (24px) padding, a plan name at `--font-size-lg2` (20px) semibold navy, a price row
-  below it, a feature list, then a full-width `KitButton` at the foot.
-- Price: `--font-size-4xl` (48px) semibold navy figure, with "/month" beside it at `--font-size-sm` (14px) muted.
-- Feature row: `--font-size-sm` (14px) body text in `--color-text-primary`, each with a 16px (`--ws-icon`) line
-  check icon in `--color-stat-positive` (teal) ahead of it.
-- The middle plan: a 2px navy outline (`--ws-ring`, in `--color-brand-navy`) instead of the hairline border, and
-  a "Most popular" badge above its name, built from the kit's own navy `Badge` tone.
-- CTA: `KitButton` `primary` on the middle plan, `secondary` on the outer two, both `large` and full width.
+- Band: the page cream (`--color-bg-page`), `--space-xl` (32px) top and bottom, `--layout-margin` (48px) sides
+  (16px under 40rem).
+- Row (`__grid`): a grid of columns at least 240px wide, `--layout-col-gap` (24px) apart, the plans equal height in
+  each row. Three fit a screen from 864px wide; between that and a phone two sit in a row and the third takes the
+  first column of the next, the same width as the others; on a phone, one column.
+- Plan (`__plan`): 4px corners, a 1px `--color-border-default` edge, `--color-surface`, `--space-lg` (24px) padding.
+- Name (`__name`): an `<h3>`, 20/28 semibold `--color-text-heading`.
+- Price (`__price`): `--space-sm` (12px) under the name; the figure (`__price-value`) 48/56 semibold, tabular, with
+  "/month" (`__price-period`) beside it at 14px `--color-text-muted`, both on one baseline.
+- List (`__list`): a `<ul>` of `<li>` rows, `--space-lg` under the price, rows `--space-sm` apart; each row (`__row`) 14/20
+  `--color-text-primary` with a 16px check in `--color-stat-positive` (teal), `--space-xs` (8px) before the words.
+- CTA (`__cta`): `--space-lg` above it, a `KitButton` `large` and full width, at the plan's foot.
+- Popular (`__plan--popular`): the edge turns `--color-text-heading` and a 2px inset ring (`--ws-ring`) thickens it
+  inward, 3px in all, so the plan's outer edge stays level with its neighbours'. A "Most popular" badge (`__badge`) sits
+  on the ring's top edge, `--space-lg` from the left: 12/18 medium navy words on a 10% navy
+  tint, a pill, `--space-3xs` by `--space-xs-plus` (2 by 10) padding.
 
 ## Variants and sizes
 
-One layout, three columns. The emphasised plan is a state (`popular`), not a separate variant: any of the three
-positions can carry it.
+One layout, up to three columns. Popular is a state, not a variant: any of the plans can carry it.
 
 ## States
 
-- **Default:** the hairline border, no badge, `secondary` CTA.
-- **Popular:** the 2px navy ring, the navy "Most popular" badge, `primary` CTA. Exactly one plan carries this at
-  a time.
-- **Hover / focus:** only the CTA buttons and any plan-level link react; the cards themselves are static.
-- **Selected / pending / disabled / error:** not applicable; a pricing card is not a form control.
-- **Empty:** not applicable; a plan without a price or features is not shown.
-- **Long label:** a longer plan name or feature line wraps; the card's height already matches its neighbours via
-  `align-items: stretch`, so one plan's extra line does not detach it from the row.
-- **Narrow:** below the content width the three plans stack to one column, the popular one keeping its ring and
-  badge so it still reads as the recommended choice in a single column.
+- **Default:** the hairline edge, no badge, a `secondary` CTA.
+- **Popular:** the navy ring, the badge on its edge, a `primary` CTA. One plan at a time.
+- **Hover / focus:** only the CTA reacts (see `KitButton`); the plans are static.
+- **Selected / pending / disabled / error / empty:** not applicable.
+- **Long label:** a longer name or feature line wraps; plans in a row stay equal height and their CTAs stay level. A
+  CTA label too long for its plan wraps to two balanced lines (see `KitButton`).
+- **Narrow:** two to a row on a tablet, then one column on a phone; a plan that wraps never stretches wider than its
+  column. The popular one keeps its ring and badge.
 
 ## Behaviour
 
-- Keyboard: the CTA button in each plan is the only focusable element per card, in document order (first,
-  recommended, then third).
-- Pointer / touch: only the CTA reacts to hover or press.
+- Keyboard: the CTA in each plan is its only focusable element, in document order.
+- Pointer / touch: only the CTA reacts; it is 45px tall.
 - Motion: none of its own.
 
 ## Content
 
-- Plan name: one word or short phrase ("Starter", "Pro", "Team").
+- Plan name: one word or a short phrase ("Starter", "Pro", "Team").
 - Price: a whole number with no decimals unless the real price has them; "/month" always lower case.
-- Feature rows: short phrases, sentence case, no em dash, ordered from most to least persuasive.
-- CTA: "Start free trial" on the two lower tiers, "Talk to sales" on the top tier when it is a custom or
-  high-touch plan.
+- Feature rows: short phrases, sentence case, no em dash, most persuasive first.
+- CTA: "Start free trial" on the lower tiers, "Talk to sales" on a custom or high-touch top tier.
 
 ## Props
 
-Not a kit export; composed from `KitCard`, the kit's `Badge` (navy tone) and `KitButton`. A reusable version
-would take:
+Not a kit export; composed from the kit's card, `Badge` (navy tone) and `KitButton`. A reusable version would take:
 
 | Prop | Type | Meaning |
 | --- | --- | --- |
@@ -71,22 +70,43 @@ would take:
 
 ## Rules
 
-- **Intentional addition, decided from the system (26 Oct 2026):** the kit ships `Card`, `Badge` and `Button` but
-  no pricing pattern; a public pricing page needs exactly this arrangement, built from those three.
-- The ring on the middle plan reuses `--ws-ring` (2px), the system's own border-width step for "a 2px ring," so
-  the emphasis is drawn with an existing stroke token rather than an invented one.
-- The badge is the kit's own navy `Badge` tone exactly: `color-mix(in srgb, var(--color-brand-navy) 10%,
-  transparent)` fill, `--color-brand-navy` text, `--radius-full` pill (`dist/index.js`, `badgeVariants`, tone
-  `navy`). No new badge colour was invented for "Most popular."
-- The check icon is teal (`--color-stat-positive`), the same tone the product uses for "done" and a positive
-  `Stat`, so "included" reads the same way "finished" does everywhere else in the system, never the brand salmon
-  (salmon is reserved for "needs you," the wrong meaning for an included feature).
-- Price size (`--font-size-4xl`, 48px) is the step `$P/tokens.json` itself labels "marketing section heading,"
-  reused here for the one number a pricing card is built around.
+- **A wrapped plan keeps its column** (4 Nov 2026): the row was a wrapping flex row, so at 768px the third plan ran the
+  full width under the other two, its CTA 622px wide. It is a grid now.
+- **The ring sits inside the edge** (4 Nov 2026): it was a 2px spread outside the border, so the popular plan stood 2px
+  past its neighbours on every side and the gap beside it was 22, not 24.
+- **Every plan's rows line up** (4 Nov 2026): the badge used to sit in the popular plan's flow, pushing its name, price
+  and list 34px below its neighbours'. It sits on the ring now, out of the flow.
+- **A plan's name is a heading and its features a list** (WCAG 1.3.1), so a screen reader can jump plan to plan and
+  hears how many rows each has. The classes set the look, not the elements.
+- The ring reuses `--ws-ring` (2px), the system's own stroke for a 2px ring, in the heading colour so it follows the
+  theme.
+- The badge is the kit's navy `Badge` tone, mixed into the surface so it is opaque where it crosses the ring.
+- The check is teal (`--color-stat-positive`), the tone the product uses for "done", never salmon ("needs you").
+- Price size (`--font-size-4xl`, 48px) is the kit's "marketing section heading" step, reused for the one number a plan
+  is built around.
 
 ## Source
 
-- **Derived from**: `KitCard`, the kit's `badgeVariants` (tone `navy`) for the badge, `KitButton` for the CTA,
-  and the system's tokens (`layout-col-gap`, `ws-ring`, `font-size-4xl`, `font-size-lg2`, `ws-icon`), keeping the
-  check icon teal per the system's colour-meaning rule.
+- **Derived from**: the kit's card, its `badgeVariants` (tone `navy`), `KitButton` and the system's tokens
+  (`layout-col-gap`, `ws-ring`, `font-size-4xl`, `font-size-lg2`, `ws-icon`, `space-3xs`, `space-xs-plus`).
 - **Precedent**: an intentional addition decided from the system, 26 Oct 2026.
+
+## Markup
+
+```html
+<section class="ws-pricing-table">
+  <div class="ws-pricing-table__grid">
+    <div class="ws-pricing-table__plan ws-pricing-table__plan--popular">
+      <span class="ws-pricing-table__badge">Most popular</span>
+      <h3 class="ws-pricing-table__name">Pro</h3>
+      <div class="ws-pricing-table__price"><span class="ws-pricing-table__price-value">$129</span><span class="ws-pricing-table__price-period">/month</span></div>
+      <ul class="ws-pricing-table__list">
+        <li class="ws-pricing-table__row"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5 6.5 11.5 12.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Up to 12 agents</li>
+      </ul>
+      <div class="ws-pricing-table__cta"><a class="ws-kit-button ws-kit-button--large ws-kit-button--primary ws-kit-button--full" href="/trial">Start free trial</a></div>
+    </div>
+  </div>
+</section>
+```
+
+Styles: the `PricingTable` block (`components/PricingTable/style.css`), plus `KitButton`.

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

@@ -1,6 +1,6 @@
-<!-- @dsCard group="Marketing" height=463 -->
+<!-- @dsCard group="Marketing" height=435 -->
 <!doctype html>
-<html>
+<html lang="en">
 <head>
 <meta charset="utf-8">
 <title>PricingTable</title>
@@ -13,37 +13,37 @@
   <div class="ws-pricing-table__grid">
 
     <div class="ws-pricing-table__plan">
-      <div class="ws-pricing-table__name">Starter</div>
+      <h3 class="ws-pricing-table__name">Starter</h3>
       <div class="ws-pricing-table__price"><span class="ws-pricing-table__price-value">$49</span><span class="ws-pricing-table__price-period">/month</span></div>
-      <div class="ws-pricing-table__list">
-        <div class="ws-pricing-table__row"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5 6.5 11.5 12.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Up to 3 agents</div>
-        <div class="ws-pricing-table__row"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5 6.5 11.5 12.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Call scripts and live call reviews</div>
-        <div class="ws-pricing-table__row"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5 6.5 11.5 12.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>50 leads</div>
-      </div>
+      <ul class="ws-pricing-table__list">
+        <li class="ws-pricing-table__row"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5 6.5 11.5 12.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Up to 3 agents</li>
+        <li class="ws-pricing-table__row"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5 6.5 11.5 12.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Call scripts and live call reviews</li>
+        <li class="ws-pricing-table__row"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5 6.5 11.5 12.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>50 leads</li>
+      </ul>
       <div class="ws-pricing-table__cta"><button class="ws-kit-button ws-kit-button--large ws-kit-button--secondary ws-kit-button--full">Start free trial</button></div>
     </div>
 
     <div class="ws-pricing-table__plan ws-pricing-table__plan--popular">
       <span class="ws-pricing-table__badge">Most popular</span>
-      <div class="ws-pricing-table__name">Pro</div>
+      <h3 class="ws-pricing-table__name">Pro</h3>
       <div class="ws-pricing-table__price"><span class="ws-pricing-table__price-value">$129</span><span class="ws-pricing-table__price-period">/month</span></div>
-      <div class="ws-pricing-table__list">
-        <div class="ws-pricing-table__row"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5 6.5 11.5 12.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Up to 12 agents</div>
-        <div class="ws-pricing-table__row"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5 6.5 11.5 12.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Live call reviews</div>
-        <div class="ws-pricing-table__row"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5 6.5 11.5 12.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Unlimited leads</div>
-        <div class="ws-pricing-table__row"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5 6.5 11.5 12.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Weekly content drafts</div>
-      </div>
+      <ul class="ws-pricing-table__list">
+        <li class="ws-pricing-table__row"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5 6.5 11.5 12.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Up to 12 agents</li>
+        <li class="ws-pricing-table__row"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5 6.5 11.5 12.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Live call reviews</li>
+        <li class="ws-pricing-table__row"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5 6.5 11.5 12.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Unlimited leads</li>
+        <li class="ws-pricing-table__row"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5 6.5 11.5 12.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Weekly content drafts</li>
+      </ul>
       <div class="ws-pricing-table__cta"><button class="ws-kit-button ws-kit-button--large ws-kit-button--primary ws-kit-button--full">Start free trial</button></div>
     </div>
 
     <div class="ws-pricing-table__plan">
-      <div class="ws-pricing-table__name">Team</div>
+      <h3 class="ws-pricing-table__name">Team</h3>
       <div class="ws-pricing-table__price"><span class="ws-pricing-table__price-value">$249</span><span class="ws-pricing-table__price-period">/month</span></div>
-      <div class="ws-pricing-table__list">
-        <div class="ws-pricing-table__row"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5 6.5 11.5 12.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Unlimited agents</div>
-        <div class="ws-pricing-table__row"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5 6.5 11.5 12.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Everything in Pro</div>
-        <div class="ws-pricing-table__row"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5 6.5 11.5 12.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>A dedicated success manager</div>
-      </div>
+      <ul class="ws-pricing-table__list">
+        <li class="ws-pricing-table__row"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5 6.5 11.5 12.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Unlimited agents</li>
+        <li class="ws-pricing-table__row"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5 6.5 11.5 12.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>Everything in Pro</li>
+        <li class="ws-pricing-table__row"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M3.5 8.5 6.5 11.5 12.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>A dedicated success manager who runs your first ninety days of onboarding</li>
+      </ul>
       <div class="ws-pricing-table__cta"><button class="ws-kit-button ws-kit-button--large ws-kit-button--secondary ws-kit-button--full">Talk to sales</button></div>
     </div>
 

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

@@ -0,0 +1,21 @@
+/* ---- PricingTable: the kit's three plans side by side, the popular one ringed in navy ---- */
+.ws-pricing-table { background: var(--color-bg-page); width: 100%; padding: var(--space-xl) var(--layout-margin); }
+/* A grid of columns at least 240 px wide: a plan that wraps keeps its column's width instead of stretching across the row. */
+.ws-pricing-table__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--space-9xl) + var(--space-2xl))), 1fr)); gap: var(--layout-col-gap); max-width: var(--layout-content-max); margin: 0 auto; }
+.ws-pricing-table__plan { position: relative; min-width: 0; display: flex; flex-direction: column; border-radius: var(--ws-radius-control); border: var(--ws-line) solid var(--color-border-default); background: var(--color-surface); padding: var(--space-lg); }
+/* The ring is drawn inside the edge (the navy border plus a 2 px inset), so the popular plan's outer edge stays on its
+   neighbours' top, bottom and sides. */
+.ws-pricing-table__plan--popular { border-color: var(--color-text-heading); box-shadow: inset 0 0 0 var(--ws-ring) var(--color-text-heading); }
+/* The badge sits on the popular plan's top edge, out of the flow, so every plan's name, price and list start on one line. */
+.ws-pricing-table__badge { position: absolute; top: 0; left: var(--space-lg); transform: translateY(-50%); display: inline-flex; align-items: center; border-radius: var(--radius-full); padding: var(--space-3xs) var(--space-xs-plus); font-size: var(--font-size-2xs); line-height: calc(var(--space-md) + var(--space-3xs)); font-weight: 500; white-space: nowrap; background: color-mix(in srgb, var(--color-text-heading) 10%, var(--color-surface)); color: var(--color-text-heading); }
+.ws-pricing-table__name { font-size: var(--font-size-lg2); line-height: var(--ws-leading-title); font-weight: 600; color: var(--color-text-heading); overflow-wrap: break-word; }
+.ws-pricing-table__price { margin-top: var(--space-sm); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xxs); }
+.ws-pricing-table__price-value { font-size: var(--font-size-4xl); font-weight: 600; color: var(--color-text-heading); line-height: calc(var(--space-3xl) + var(--space-xs)); font-variant-numeric: tabular-nums; }
+.ws-pricing-table__price-period { font-size: var(--font-size-sm); color: var(--color-text-muted); }
+.ws-pricing-table__list { margin-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); flex: 1; }
+.ws-pricing-table__row { display: flex; align-items: flex-start; gap: var(--space-xs); font-size: var(--font-size-sm); line-height: calc(var(--space-md) + var(--space-xxs)); color: var(--color-text-primary); }
+.ws-pricing-table__row svg { width: var(--ws-icon); height: var(--ws-icon); flex-shrink: 0; margin-top: var(--space-3xs); color: var(--color-stat-positive); }
+.ws-pricing-table__cta { margin-top: var(--space-lg); }
+@media (max-width: 40rem) {
+  .ws-pricing-table { padding-inline: var(--space-md); }
+}

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

@@ -13,7 +13,11 @@ A team's share as petals around a centre circle: one wedge a member, each filled
 
 **Anatomy**
 
-- Drawn at a fixed 316 px circle, never larger; a wider card simply centres it.
+- The wheel is 316 px across at most; a wider card centres it, a narrower one shrinks it with the column (the
+  labels are placed in percentages, so they move with it). Never under 240: the hole (48.5 of the 316) must still
+  hold its figure and "OVERALL".
+- Above it, the kind of call is a `Segmented` switch: `role="group"` with an `aria-label`, `aria-current="true"` on
+  the chosen kind.
 - A hole of 48.5 px radius in the middle holds the team's overall percent, 22 px semibold, with "OVERALL" under it in 11 px (`--ws-text-micro`, the floor) uppercase muted; a wedge's name is 11 px too.
 - Each wedge: a full-radius track (the cream, a hairline edge) all the way to 158.5 px, and, when the member has started, a fill from the hole out to their own share of that distance, in one gradient per wedge (pale peach near the hole, deepening to solid salmon at the tip, each wedge's gradient running along its own far edge so one percent looks the same on every member).
 - A wedge's name and percent sit inside the fill when there is room, or in grey on the bare track when the fill is too short to hold them.
@@ -26,12 +30,21 @@ A team's share as petals around a centre circle: one wedge a member, each filled
 | Petals (default) | One gradient (salmon) for every member; length alone carries the share |
 | Rings (an alternate the source also draws) | Ten concentric bands a slice instead of one gradient, coloured by the member's state (finished teal, past halfway purple, under halfway salmon, not started the empty tone) rather than by length |
 
+**Parts and modifiers**
+
+- `.ws-progress-petals__center--small`: the centre total at 16 px, for a small set.
+- `.ws-progress-petals__label--off`: an off slice's name and share in body grey.
+- `.ws-progress-petals__rings-wrap`: the rings variant's frame, which holds the rings and their hole.
+- `.ws-progress-petals__rings`: the rings variant: ten bands a slice, the slices' tones as its conic-gradient background.
+- `.ws-progress-petals__rings-hole`: the hole beside the masked rings (15% in), so its words are never cut into bands.
+
 **States**
 
-- Default: wedges bloom out from the middle one after another (`ws-bloom`), the biggest wedge lifted on a soft shadow.
+- Default: wedges bloom out from the middle one after another (`ws-bloom`). No shadow.
 - Nobody started: every wedge is its bare track, no fill, the centre reads 0%.
 - Everyone finished: every wedge reaches the rim, the centre reads 100%.
-- Disabled / error / hover / focus / pressed / selected / empty / long label / narrow: do not apply; this chart has no interaction, no card-level emptiness beyond "nobody started" (which is itself real data, not hidden), and is drawn at one fixed size regardless of its card's width.
+- Narrow: the wheel shrinks with its column down to 240 (as on a 320 phone, where it is 248).
+- Disabled / error / hover / focus / pressed / selected / empty / long label: do not apply to the wheel; it has no interaction and no card-level emptiness beyond "nobody started" (which is itself real data, not hidden). The switch above it has the `Segmented` states.
 - Reduced motion: every wedge is simply in place, no bloom.
 
 **Behaviour**
@@ -63,3 +76,18 @@ A team's share as petals around a centre circle: one wedge a member, each filled
 - **Derived from**: the system's colour-meaning rules (finished teal, past halfway purple, under halfway salmon,
   not started the empty tone) and its privacy rule for naming a teammate.
 - **Precedent**: the first product built on the system.
+
+**Markup**
+
+```html
+<div class="ws-dots ws-progress-petals__body">
+  <div class="ws-progress-petals__wheel" role="img" aria-label="Team outreach, 48% overall: Priya 100%, Anna 0%">
+    <svg viewBox="0 0 316 316" aria-hidden="true"><!-- one path a person, class="ws-progress-petals__petal" --></svg>
+    <span class="ws-progress-petals__label ws-progress-petals__label--on" style="left: 75%; top: 40%;" aria-hidden="true"><span class="ws-progress-petals__share">100%</span><span class="ws-progress-petals__name">Priya</span></span>
+    <span class="ws-progress-petals__center" aria-hidden="true"><span class="ws-progress-petals__total">48%</span><span class="ws-progress-petals__caption">Overall</span></span>
+  </div>
+</div>
+```
+
+**Styles**: `ProgressPetals/style.css`, in `bundle.css` and `fello.css` as `.ws-progress-petals`. Every value is a token. `.ws-progress-petals` 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/ProgressPetals/preview.html

@@ -20,20 +20,20 @@
         </div>
       </header>
       <div class="ws-dots ws-progress-petals__body">
-        <div class="ws-segmented" role="tablist" aria-label="Which calls" aria-hidden="true">
-          <button type="button" class="ws-segmented__item" aria-selected="true">Cold call</button>
-          <button type="button" class="ws-segmented__item" aria-selected="false">Live transfer</button>
-          <button type="button" class="ws-segmented__item" aria-selected="false">Follow-up</button>
+        <div class="ws-segmented" role="group" aria-label="Which calls">
+          <button type="button" class="ws-segmented__item" aria-current="true">Cold call</button>
+          <button type="button" class="ws-segmented__item">Live transfer</button>
+          <button type="button" class="ws-segmented__item">Follow-up</button>
         </div>
         <div class="ws-progress-petals__wheel" role="img" aria-label="Team outreach, 48% overall: Cassie 0%, Priya 100%, Marcus 100%, Ana 71%, Jon 57%, Josh 43%, Dana 14%, Anna 0%.">
           <svg viewBox="0 0 316 316" aria-hidden="true">
             <defs>
-              <linearGradient id="tpg1" gradientUnits="userSpaceOnUse" x1="224.99" y1="156.83" x2="316.48" y2="155.23"><stop offset="0" stop-color="var(--ws-chart-under-half-tint)"/><stop offset="1" stop-color="var(--color-brand-salmon)"/></linearGradient>
-              <linearGradient id="tpg2" gradientUnits="userSpaceOnUse" x1="206.20" y1="204.54" x2="272.02" y2="268.10"><stop offset="0" stop-color="var(--ws-chart-under-half-tint)"/><stop offset="1" stop-color="var(--color-brand-salmon)"/></linearGradient>
-              <linearGradient id="tpg3" gradientUnits="userSpaceOnUse" x1="159.17" y1="224.99" x2="160.77" y2="316.48"><stop offset="0" stop-color="var(--ws-chart-under-half-tint)"/><stop offset="1" stop-color="var(--color-brand-salmon)"/></linearGradient>
-              <linearGradient id="tpg4" gradientUnits="userSpaceOnUse" x1="111.46" y1="206.20" x2="47.90" y2="272.02"><stop offset="0" stop-color="var(--ws-chart-under-half-tint)"/><stop offset="1" stop-color="var(--color-brand-salmon)"/></linearGradient>
-              <linearGradient id="tpg5" gradientUnits="userSpaceOnUse" x1="91.01" y1="159.17" x2="-0.48" y2="160.77"><stop offset="0" stop-color="var(--ws-chart-under-half-tint)"/><stop offset="1" stop-color="var(--color-brand-salmon)"/></linearGradient>
-              <linearGradient id="tpg6" gradientUnits="userSpaceOnUse" x1="109.80" y1="111.46" x2="43.98" y2="47.90"><stop offset="0" stop-color="var(--ws-chart-under-half-tint)"/><stop offset="1" stop-color="var(--color-brand-salmon)"/></linearGradient>
+              <linearGradient id="tpg1" gradientUnits="userSpaceOnUse" x1="224.99" y1="156.83" x2="316.48" y2="155.23"><stop offset="0" stop-color="var(--ws-chart-under-half-tint)"/><stop offset="1" stop-color="var(--ws-chart-under-half)"/></linearGradient>
+              <linearGradient id="tpg2" gradientUnits="userSpaceOnUse" x1="206.20" y1="204.54" x2="272.02" y2="268.10"><stop offset="0" stop-color="var(--ws-chart-under-half-tint)"/><stop offset="1" stop-color="var(--ws-chart-under-half)"/></linearGradient>
+              <linearGradient id="tpg3" gradientUnits="userSpaceOnUse" x1="159.17" y1="224.99" x2="160.77" y2="316.48"><stop offset="0" stop-color="var(--ws-chart-under-half-tint)"/><stop offset="1" stop-color="var(--ws-chart-under-half)"/></linearGradient>
+              <linearGradient id="tpg4" gradientUnits="userSpaceOnUse" x1="111.46" y1="206.20" x2="47.90" y2="272.02"><stop offset="0" stop-color="var(--ws-chart-under-half-tint)"/><stop offset="1" stop-color="var(--ws-chart-under-half)"/></linearGradient>
+              <linearGradient id="tpg5" gradientUnits="userSpaceOnUse" x1="91.01" y1="159.17" x2="-0.48" y2="160.77"><stop offset="0" stop-color="var(--ws-chart-under-half-tint)"/><stop offset="1" stop-color="var(--ws-chart-under-half)"/></linearGradient>
+              <linearGradient id="tpg6" gradientUnits="userSpaceOnUse" x1="109.80" y1="111.46" x2="43.98" y2="47.90"><stop offset="0" stop-color="var(--ws-chart-under-half-tint)"/><stop offset="1" stop-color="var(--ws-chart-under-half)"/></linearGradient>
             </defs>
             <path d="M158.85 109.51L160.77 -0.48A158.50 158.50 0 0 1 268.10 43.98L191.69 123.11A48.50 48.50 0 0 0 158.85 109.51Z" fill="var(--color-bg-page)" stroke="var(--ws-edge)" stroke-width="1"/>
             <path d="M192.89 124.31L272.02 47.90A158.50 158.50 0 0 1 316.48 155.23L206.49 157.15A48.50 48.50 0 0 0 192.89 124.31Z" fill="var(--color-bg-page)" stroke="var(--ws-edge)" stroke-width="1"/>
@@ -66,18 +66,17 @@
 
   <div class="ws-stack">
     <span class="ws-muted">The rings variant, if the page draws it instead: ten bands a slice, by state not fill</span>
-    <div style="width: 180px;">
-    <div class="ws-progress-petals__rings" style="background: conic-gradient(var(--ws-chart-empty) 0% 12.5%, var(--ws-chart-finished) 12.5% 37.5%, var(--ws-chart-past-half) 37.5% 62.5%, var(--ws-chart-under-half) 62.5% 87.5%, var(--ws-chart-empty) 87.5% 100%);" role="img" aria-label="Team outreach, 48% overall">
+    <div class="ws-progress-petals__rings-wrap" style="width: 180px;">
+      <div class="ws-progress-petals__rings" style="background: conic-gradient(var(--ws-chart-empty) 0% 12.5%, var(--ws-chart-finished) 12.5% 37.5%, var(--ws-chart-past-half) 37.5% 62.5%, var(--ws-chart-under-half) 62.5% 87.5%, var(--ws-chart-empty) 87.5% 100%);" role="img" aria-label="Team outreach, 48% overall"></div>
       <div class="ws-progress-petals__rings-hole">
         <span class="ws-progress-petals__center ws-progress-petals__center--small" aria-hidden="true"><span class="ws-progress-petals__total">48%</span><span class="ws-progress-petals__caption">Overall</span></span>
       </div>
     </div>
-    </div>
   </div>
 
   <div class="ws-stack">
-    <span class="ws-muted">Nobody started: every wedge a ghost track, 0% in the middle</span>
-    <div style="width: 180px;">
+    <span class="ws-muted">Nobody started: every wedge a ghost track, 0% in the middle (240 across, the smallest that holds the hole's words)</span>
+    <div style="width: 240px; max-width: 100%;">
     <div class="ws-progress-petals__wheel" role="img" aria-label="Team outreach, 0% overall">
       <svg viewBox="0 0 316 316" aria-hidden="true">
         <path d="M158.85 109.51L160.77 -0.48A158.50 158.50 0 0 1 268.10 43.98L191.69 123.11A48.50 48.50 0 0 0 158.85 109.51Z" fill="var(--color-bg-page)" stroke="var(--ws-edge)" stroke-width="1"/>

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

@@ -0,0 +1,27 @@
+/* ---- ProgressPetals: a team's shares as petals round a hole, the overall percent in the middle ---- */
+.ws-progress-petals__body { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); padding: var(--space-lg) var(--ws-card-inset) var(--space-xl); }
+/* The wheel: the drawing's own 316, never larger; a wider card centres it. It shrinks with a narrow column, but not
+   under 240, where the hole stops holding its figure and caption. */
+.ws-progress-petals__body > .ws-segmented { align-self: center; }
+.ws-progress-petals__wheel { position: relative; width: 100%; min-width: min(100%, calc(var(--space-9xl) + var(--space-2xl))); max-width: calc(var(--space-9xl) + var(--space-7xl) - var(--space-xxs)); aspect-ratio: 1; margin: calc(var(--space-xxs) * 1.5) 0; }
+.ws-progress-petals__wheel svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
+.ws-progress-petals__petal { transform-box: view-box; transform-origin: 50% 50%; }
+.ws-progress-petals__label { position: absolute; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; }
+.ws-progress-petals__share { font-size: var(--ws-text-body); font-weight: 600; line-height: calc(var(--space-md) + var(--space-xxs)); }
+.ws-progress-petals__name { font-size: var(--ws-text-micro); line-height: calc(var(--space-xs) + var(--space-xxs) * 0.75); }
+.ws-progress-petals__label--on .ws-progress-petals__share { color: var(--color-text-heading); }
+/* Words over a petal take the strongest step: a petal's tint can be any of the tones, light or dark, so the 11 px name
+   is navy (not navy at 75%), and an off label is body grey (muted fails on a peach petal). */
+.ws-progress-petals__label--on .ws-progress-petals__name { color: var(--color-text-heading); }
+.ws-progress-petals__label--off .ws-progress-petals__share, .ws-progress-petals__label--off .ws-progress-petals__name { color: var(--color-text-body); }
+.ws-progress-petals__center { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -50%); }
+.ws-progress-petals__total { font-size: var(--ws-text-title); font-weight: 600; line-height: var(--ws-leading-title); letter-spacing: var(--ws-tracking-title); color: var(--color-text-heading); }
+.ws-progress-petals__center--small .ws-progress-petals__total { font-size: var(--ws-text-value); }
+.ws-progress-petals__caption { font-size: var(--ws-text-micro); line-height: calc(var(--space-xs) + var(--space-xxs) * 1.5); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
+/* The rings variant: ten bands a slice, the slices' tones given as the element's conic-gradient background. */
+.ws-progress-petals__rings { position: relative; width: 100%; aspect-ratio: 1; border-radius: var(--radius-full); -webkit-mask-image: repeating-radial-gradient(circle, var(--color-text-heading) 0 var(--space-xxs), transparent var(--space-xxs) calc(var(--space-xxs) * 1.25)); mask-image: repeating-radial-gradient(circle, var(--color-text-heading) 0 var(--space-xxs), transparent var(--space-xxs) calc(var(--space-xxs) * 1.25)); }
+.ws-progress-petals__rings-wrap { position: relative; }
+/* The hole sits beside the masked rings, not inside them, so its words are never cut into bands. */
+.ws-progress-petals__rings-hole { position: absolute; inset: 15%; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--color-bg-page); }
+.ws-progress-petals__rings-hole .ws-progress-petals__center { position: static; transform: none; }
+

package/design-system/components/README.md

@@ -0,0 +1,151 @@
+# Components
+
+The catalog: 103 components by gallery group, one line each, plus `Cover`, the gallery's cover card (a preview only, no README, nothing to build with). Each folder holds `README.md` (when to use it, its parts, states and the markup to copy), `preview.html` (the gallery card) and `style.css` (its styles; `bundle.css` and `fello.css` carry them all). Choosing components maps a need to a name; the line here says what each one is. Generated by scripts/build-skill.mjs from each README's first paragraph: edit those, not this file.
+
+## Actions
+
+- [Button](Button/README.md): The one control for every act on the page: a click that does something, in one of six looks, never a styled `<button>`.
+- [Chip](Chip/README.md): A small fact in a 24 px tag, in one of six tones, a rating tone or the Example mark; its sibling `ChangeChip` says a number went up, down or stayed.
+- [IconButton](IconButton/README.md): A square button holding one icon and nothing else, for an act that needs no words to be understood.
+- [Segmented](Segmented/README.md): Every switch and tab row on the platform: Seth's grey well with a navy current item, one component so the current item always moves the same way.
+
+## Cards
+
+- [Card](Card/README.md): The one card: Seth's tray card. The page's cream sits inside a 1 px tray rim, 8 px outside and 7 px inside, flat, and every other surface builds on it.
+- [EmptyState](EmptyState/README.md): Nothing here yet: the same plain cream card the place would show, with its mark and the one act that fills it.
+- [Fold](Fold/README.md): The one disclosure: something folded away until wanted, in three looks, built on the browser's native `<details>`.
+- [Morph](Morph/README.md): A thing that changes its place or its size goes there as itself: a card flying to the full screen and back, a figure growing open across its row, the chat moving between its modes. The browser's own view transitions, started by `morph()` from the package, on Seth's curves.
+- [Plate](Plate/README.md): A quiet block set apart inside a card: the cream a shade darker, for a card's facts, a track or an aside.
+- [Skeleton](Skeleton/README.md): A ghost of what is coming, in the shape it will take, with North's shimmer in the chart colours passing over it, so nothing jumps when the real content lands.
+- [Well](Well/README.md): The system's grey well: a plate holding a short list of pressable rows, for every "what to ask" list.
+
+## Charts
+
+- [ActivityGrid](ActivityGrid/README.md): Who reached out, two weeks of day cells a row, a navy dot for a day done and a count at the row's end.
+- [FunnelBars](FunnelBars/README.md): A pipeline's stages as descending horizontal bars in one card, each one's width its share of the first stage, with the conversion between each pair of stages called out as a chip.
+- [GoalBars](GoalBars/README.md): Horizontal goal bars: one pill a row, its fill a tone's gradient, a count and label at the right.
+- [GoalTicks](GoalTicks/README.md): One card's goal as one big number, a run of ticks carrying the gradient, and a short breakdown row under it.
+- [GoalTubes](GoalTubes/README.md): Counts as upright tubes: a rounded outline, a fill rising from the foot, a leader to a dot with the count above, one baseline across.
+- [Heatmap](Heatmap/README.md): North's company health: lanes by their metrics as touching squares, each coloured by how it tracks its pace.
+- [MetricTile](MetricTile/README.md): North's key metric: a rimmed tile with a label, a figure, a pace bar or a mini chart (columns, or a line with dots) and a foot, that opens across its row into its chart.
+- [ProgressPetals](ProgressPetals/README.md): A team's share as petals around a centre circle: one wedge a member, each filled from the hole out by their own percent.
+- [RankBar](RankBar/README.md): The person against their team on one skill: a strip of fine ticks from 0 to 100%, their share filled, a labelled mark for each of them.
+- [ScoreHero](ScoreHero/README.md): A report's score the way Seth draws it: the 96 px figure, a strip of ticks across the page and the rating in words.
+- [ShareBar](ShareBar/README.md): Where a whole goes: one stacked bar of parts in their tones over what stays, a head line above and a key under it.
+- [StatTiles](StatTiles/README.md): A page's answer at a glance: a few rimmed tiles, each a label, a figure with its mark or chip, and an optional foot.
+- [StepLine](StepLine/README.md): A bill or a rate over time as a step line against a dotted reference, the gap between them hatched, its moments named.
+- [StreakCalendar](StreakCalendar/README.md): Eight weeks of activity as rows, Monday to Sunday across: a done day a pill, an empty day a hairline cell, today outlined, days to come dashed.
+- [TrendBars](TrendBars/README.md): A trend over days as thin rising bars, with one day called out as the moment that explains the shape.
+- [TrendLine](TrendLine/README.md): A value over periods against an axis, as a line with its dots and the hatched area under it, or as columns that collapse into the line's points and back.
+
+## Chat
+
+- [ChatCard](ChatCard/README.md): A card the agent brings into the chat (North's chat card: at most 556 px, 20 px inside, the 80 px tray): one kind or one chart, one title, one sentence, its facts on a plate or a breakdown, and the tray holding its one act.
+- [ChatShell](ChatShell/README.md): The chat's frame in three modes: a bar (only the field, over a veiled page), a column docked beside the page, and the full screen with one centred reading column.
+- [ChatTurn](ChatTurn/README.md): One turn of a product's chat (North's thread): the person's question in a white bubble at the right, the answer full width as plain words with no orb, its acts on one line under it, and the quiet receipt of what it did.
+- [Composer](Composer/README.md): The one chat box (North's), drawn once for the home screen and every chat: a square-cornered field that grows upward with what is typed, its tools on the bottom line at the right, and what the question is about riding on top as a tab.
+- [StatusLine](StatusLine/README.md): The working line at the top of an answer in progress: who is working, what it is doing in a moving shimmer, and the step it is on, so a wait never looks like a stall.
+- [SuggestionChip](SuggestionChip/README.md): 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.
+- [TopicRail](TopicRail/README.md): One continuous chat marked by topic: a quiet topic head in the thread where the subject changes, and a rail of small squares at the thread's edge that opens the list of topics.
+
+## Data
+
+- [ActionList](ActionList/README.md): A card's ranked list of next acts: who or what, the reason in words, and the one act at the right of each row. `--brief` is North's "what changed" list on a page's head: one quiet line each, its acts appearing on the line.
+- [CheckRow](CheckRow/README.md): A rimmed list of checks, each row a name, a strip of ticks for its score, the score, a status and a chevron that opens it; or a list of fixes, each row a box to tick, the fix and its effort, its act, and a chevron that opens it in place. Seth's checks list (301:1728) and Fixes checklist (308:2466).
+- [KanbanBoard](KanbanBoard/README.md): Columns of cards for a pipeline: a stage per column, a card per thing moving through it, a count beside each stage's name. `--fill` makes it a board page: the rest of the page's height, every stage scrolling on its own, the sideways bar on screen.
+- [Leaderboard](Leaderboard/README.md): A list that ranks people against one number: a rank, a face and a name, a thin bar for the score, the score itself, with the person's own row lit so they find themselves at once. Every row shares one grid, so the bars start and end on the same lines and no number is ever cut.
+- [ListDetail](ListDetail/README.md): A list and the thing picked from it, side by side: the list one column wide, the open item two, on one three-column grid. Seth's Review inbox (313:2671) and North's board (a chart and the list that drives it), with Tally's vendors.
+- [Matrix](Matrix/README.md): A grid of yes-or-no answers: one row per question, one column per source, each cell lit when the answer is yes. Seth's answers grid (305:2341): which AI assistants named you, for each of the questions a buyer might ask.
+- [SideList](SideList/README.md): Short lists with no card of their own: a few groups down a side column, each with a small head and rows joined by fine lines, an act or a value at the right of each row. Its picker form, `__picks`, sits on a card's surface: rows as soft pills, one of them the current one.
+- [Table](Table/README.md): Rows of records inside one card, read down its columns: a head of muted labels, 40 px rows, a first column that stays while the rest scroll, numbers in fixed right-aligned columns, totals in the foot, columns that fold away by priority and a phone fold. This is the whole wide-table pattern; build every records table from it.
+- [Timeline](Timeline/README.md): A vertical feed of what happened, grouped by day, a coloured dot on a fine line telling what kind of thing each entry was.
+
+## Desk
+
+- [EntryShell](EntryShell/README.md): The frame for every page before the product's main workspace: the wordmark top left, a centred column, and on a wide frame a grey panel beside it holding a sample of the product's own cards.
+- [PageHero](PageHero/README.md): A page's slim hero: a small eyebrow, the page's finding as its headline, a line under it, its one act, and a picture beside them, on the page's own wash rather than inside a card.
+
+## Feedback
+
+- [Badge](Badge/README.md): A small count or mark riding on the corner of a face, an icon or a nav row, saying "there is something here" at a glance.
+- [Banner](Banner/README.md): A full-width notice for a state of the whole page or card, in one of four quiet tones, never a loud one.
+- [Popover](Popover/README.md): A small lifted card beside its control, for the time a tooltip is too thin and a dialog is too much.
+- [StatusScreen](StatusScreen/README.md): 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.
+
+## Fields
+
+- [Checkbox](Checkbox/README.md): A real native checkbox under a skin, drawn with a navy tick when chosen, its label part of the thing you tap.
+- [Combobox](Combobox/README.md): A searchable field for choosing from a long list, matching as you type and offering to create a new value when nothing matches.
+- [DateInput](DateInput/README.md): A date field that works on its own, with a popover month grid for picking a day by eye instead of typing it.
+- [FileUpload](FileUpload/README.md): A drop zone for one or more files, with a row per file showing its progress, a tick when it lands, or why it was rejected.
+- [Input](Input/README.md): A single line of typed text, drawn as a field reads as a field on a cream card: white ground, a fine edge, the mid-blue edge while typing.
+- [NumberInput](NumberInput/README.md): A number field with its figures right-aligned and tabular, an optional unit inside it, and small buttons to step the value.
+- [PasswordInput](PasswordInput/README.md): A password field with a visibility toggle and a strength line, so a person can see what they typed and how strong it is.
+- [Radio](Radio/README.md): A set of mutually exclusive choices, each a native radio under a skin, grouped by a `fieldset` and named by a `legend`.
+- [Select](Select/README.md): A native dropdown that matches `Input`: label above, a chevron inside the field, a hint or an error below.
+- [Slider](Slider/README.md): A value picked by dragging along a range (a team size, a share), drawn by the browser in the house's navy, with the value said in words beside its label.
+- [Switch](Switch/README.md): An on/off setting that applies itself at once, drawn as a sliding track and thumb rather than a box and tick.
+- [TextArea](TextArea/README.md): Several lines of typed text, drawn exactly as `Input` is: white ground, the fine edge, white and mid blue while typing.
+
+## Foundations
+
+- [Motion](Motion/README.md): Every move in Seth's North app on one live page: first a product screen to try them on, a numbered hint at each move and a list of what to notice; then, for developers, each behaviour by Seth's own label, North's values, a kit demo, the token or class to build with, and how close the kit is.
+
+## Layout
+
+- [CardBoard](CardBoard/README.md): Lays a page of cards out as columns side by side, each card at the board's own width, down to one column on a phone in the same order.
+- [Page](Page/README.md): The page itself and the few layout pieces every page is built from: the page container, an area, the board, a stack and a cluster. All in fello.css; with these a page needs no layout CSS of its own.
+- [PageBar](PageBar/README.md): A page's 56 px header, Seth's thread header: the app's face, the page's name and a quiet word of context at the left; its acts and a way back at the right. The page names itself here, once; its answer is the figures and cards below.
+- [Section](Section/README.md): A group of things under a short heading: Seth's 15 / 22 section title, an optional count on its line, a line of context and one act on the right.
+- [Split](Split/README.md): A page's main column and its aside, side by side when both fit and stacked when they do not. It measures its own width, so it is right in the shell's body, a page, a dialog or a pane.
+- [Starter](Starter/README.md): The page every artifact and plain page starts from: the head with the one `<style>` that holds the kit's CSS, the Google Fonts link, a `.ws-page` with its `PageBar`, and a board of two cards in the catalog's own markup. Copy it whole, paste the CSS into the `<style>`, then replace the sample content with the real thing.
+- [Tile](Tile/README.md): One block of a bento grid (an icon, a title, a meta note and its own body, as the one card), and the product tile row: what an app can do, a few tiles joined on the tray, each a door or the step it waits on.
+
+## Marketing
+
+- [FeatureGrid](FeatureGrid/README.md): The kit's marketing piece: for a public page, never a product screen.
+- [Footer](Footer/README.md): The kit's marketing piece: for a public page, never a product screen.
+- [Hero](Hero/README.md): The kit's marketing piece: for a public page, never a product screen.
+- [KitButton](KitButton/README.md): The kit's marketing piece: for a public page, never a product screen.
+- [KitCard](KitCard/README.md): The kit's marketing piece: for a public page, never a product screen.
+- [KitInput](KitInput/README.md): The kit's marketing piece: for a public page, never a product screen.
+- [MarketingNav](MarketingNav/README.md): The kit's marketing piece: for a public page, never a product screen.
+- [PricingTable](PricingTable/README.md): The kit's marketing piece: for a public page, never a product screen.
+- [Stat](Stat/README.md): The kit's marketing piece: for a public page, never a product screen.
+- [Testimonial](Testimonial/README.md): The kit's marketing piece: for a public page, never a product screen.
+
+## Navigation
+
+- [AppShell](AppShell/README.md): A product's frame, drawn from Seth's North app: a 232 px nav of grouped rows on the frame's wash, a glass stage beside it, a 56 px bar at the stage's top and a body that owns the scroll. It folds to a 64 px rail and, on a phone, gives the nav to a drawer.
+- [Breadcrumb](Breadcrumb/README.md): A thin trail of links above a deep page, saying how it was reached and letting a person step back up it. Seth's North crumbs: the trail is the bar's name for the page.
+- [FilterBar](FilterBar/README.md): A page's filters in one row: a period switch at the start and the pickers that scope the page at the end (North's filter bar).
+- [Kbd](Kbd/README.md): A key as it is printed on the keyboard ("Esc", "Enter", "⌘K"), shown beside the act it triggers.
+- [Pagination](Pagination/README.md): The foot of a card that holds more rows than it shows at once: where you are in the list, and the acts that move through it.
+- [Tabs](Tabs/README.md): The underline tab row: five or more sections of a settings or detail page, read one at a time.
+- [ThemeSwitch](ThemeSwitch/README.md): The person's pick of System, Light or Dark, at the foot of the app's nav, kept in their browser and set before the page paints.
+- [TopBar](TopBar/README.md): The 56 px bar alone: a wordmark, up to five page links, a search box, one quiet act and the person, for a product that puts its navigation across the top rather than down the side.
+
+## Overlays
+
+- [ConfirmDialog](ConfirmDialog/README.md): The `Dialog` recipe for the one moment something cannot be undone: name the thing, say what happens, let the person choose.
+- [Dialog](Dialog/README.md): A modal, built on the browser's own `<dialog>`: a short task in the centre of the screen, or a drawer from the right edge.
+- [HoverCard](HoverCard/README.md): What a chart mark holds, shown on hover or focus: Seth's North chart tip, with a caret on the mark it belongs to.
+- [Menu](Menu/README.md): A small panel of rows lifted off the page: the one menu, for an account, a page's "more", or a short list of choices.
+- [Panel](Panel/README.md): The thing opened beside the page or the chat: one pane, holding one thing at a time, as Seth draws the check drawer.
+- [Toast](Toast/README.md): A receipt that passes: something finished in the background, said in one line, with at most one act. Seth's navy pill.
+- [Tooltip](Tooltip/README.md): A name on hover or keyboard focus, for a control that shows less than it is; and Seth's navy note, the full words behind a short one.
+
+## People
+
+- [Avatar](Avatar/README.md): A person's own mark: their photo once it loads, or their initials in navy on a neutral disc before and instead; never coloured, never an app's face.
+
+## Progress
+
+- [LoadBar](LoadBar/README.md): An honest 3 px progress line under something that is loading: it fills toward the end of the expected wait and never claims done until it is.
+- [Meter](Meter/README.md): A count on a thin 4 px track: a running job's progress beside its words, or a share in a row with its name above it.
+- [PaceBar](PaceBar/README.md): Progress toward a goal on a 14 px track, with a dot where it should be by now. North's bar, used in tiles, lanes and lists.
+- [Ring](Ring/README.md): A circle's own share as one arc, or Seth's split ring: 96 radial ticks in each part's tone, the total in the hole, a key beside.
+- [SegmentedProgress](SegmentedProgress/README.md): Progress split by area and by step: Seth's "1 of 6" figure, a line under it, and one bar of segments with each area named.
+- [Stepper](Stepper/README.md): Ordered steps on a line that fills: done is a tick, the one in hand is ringed, the rest wait their turn.
+- [TickRow](TickRow/README.md): One row of fixed-size ticks for a count out of a small whole: the done ticks in one tone, or each its stretch of the gradient.
+- [TickStrip](TickStrip/README.md): A share drawn as equal ticks across the whole width: the done ones in one tone, the rest the plain track. Seth's score strips.