@felloinnovations/brand-kit 0.4.0 → 0.5.0

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

@@ -0,0 +1,23 @@
+/* ---- TickRow: a count out of a small whole as a row of ticks (also inside StatTiles, GoalTicks, Leaderboard) ---- */
+/* The row shrinks with its column (it never clips a tile or squeezes its label): each tick gives way down to 2 px.
+   A done tick is one solid tone (style="--tone: ..." on the row, teal by default), or its own stretch of the gradient
+   (an inline background on the tick). An empty tick is the plain track, no edge (Seth). */
+.ws-tick-row { --tone: var(--ws-chart-finished); display: flex; flex-shrink: 1; min-width: 0; gap: var(--space-xxs); }
+.ws-tick-row__tick { flex: 0 1 auto; width: var(--space-xs-plus); min-width: var(--space-3xs); height: calc(var(--space-md) + var(--space-3xs)); border-radius: var(--ws-radius-bar); background: var(--tone); transform-origin: bottom; }
+.ws-tick-row__tick--empty { background: var(--ws-track); }
+/* Fine: 6 x 18, 2 apart, up to 20 (a first-open card). Tall: 10 x 28, 3 apart, up to 20 (Seth's "Need a reply"). */
+.ws-tick-row--fine { gap: var(--space-3xs); }
+.ws-tick-row--fine .ws-tick-row__tick { width: var(--space-xxs-plus); }
+.ws-tick-row--tall { gap: calc(var(--space-3xs) + var(--ws-line)); }
+.ws-tick-row--tall .ws-tick-row__tick { height: calc(var(--space-lg) + var(--space-xxs)); }
+/* The row on a line with its label before it and its count after it. The count takes the rest of the line and wraps
+   there (a sentence after the figure), so the ticks keep their size; only when the count's longest word no longer fits
+   do the ticks give way, never over the count. Keep the figure whole with no-break spaces ("2.9 of 4"). */
+.ws-tick-row__line { display: flex; align-items: center; gap: var(--space-sm); }
+.ws-tick-row__label { width: var(--space-6xl); flex-shrink: 0; font-size: var(--ws-text-body); line-height: var(--ws-leading-row); color: var(--color-text-heading); }
+.ws-tick-row__count { flex: 1 1 0; font-size: var(--ws-text-value); font-weight: 600; line-height: var(--ws-leading-row); color: var(--color-text-heading); font-variant-numeric: tabular-nums; }
+/* Build-in (North): ticks rise from their foot one after another, each on the settle curve, over a share of the draw.
+   Set --i (0, 1, 2 ...) on each tick and --n (the tick count) on the row. */
+@media (prefers-reduced-motion: no-preference) {
+  .ws-tick-row--draw .ws-tick-row__tick { animation: ws-grow-up calc(var(--ws-duration-draw) * 0.45) var(--ws-ease-settle) backwards; animation-delay: calc(var(--ws-build-at, 0s) + var(--ws-duration-draw) * 0.55 * var(--i, 0) / max(var(--n, 2) - 1, 1)); }
+}

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

@@ -0,0 +1,95 @@
+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.
+
+**Use it when**
+
+- A score or a share should read at a glance across a row or a card ("72", "39 of 100", "10 of 16 named you").
+- Several rows each carry their own share and line up as one column (a list of checks, each with its strip).
+- Time runs in steps you can count (Tally's months, a quarter a group).
+
+**Not for**
+
+- A count out of a small whole beside a label, ticks of a fixed size: use `TickRow`.
+- One card's goal with the gradient strip and a breakdown: use `GoalTicks`.
+- A score with its 96 px figure and rating word: use `ScoreHero`, which holds this strip.
+- Progress split by area with labels under each part: use `SegmentedProgress`.
+
+**Anatomy**
+
+- Strip: `display: flex`, ticks `flex: 1 0 0` so they divide the width, at least 1 px each, 1 px corners (`--ws-radius-bar`).
+- A tick is `--ws-track` until it is `--on`, then `--tone` (teal `--ws-rating-strong` by default). No edge, no gradient.
+- Lit count: `round(value / of * n)`. Seth: 72 of 100 is 36 of 50; 39 is 16 of 40; 75 is 30; 92 is 37; 100 is 40.
+- The gap gives way on a narrow strip: it is the size's gap or a third of a tick's share of the width, whichever is less,
+  rounded down to a whole pixel. Set `--n` (the tick count) on the strip for this and for the draw.
+
+| Size | Height | Gap | Seth's use |
+| --- | --- | --- | --- |
+| default (md) | 32 | 3 | a check's row, 40 ticks |
+| `--lg` | 40 | 4 | the overall score (50 ticks), one tick an answer (16) |
+| `--sm` | 32 | 2 | a pane's score beside its 44 px figure |
+| `--xs` | 24 | 2 | a score inside a detail, 50 ticks |
+| `--xl` | 96 | 3 | Tally's months, 13 a quarter |
+| `--bar` | 12 | 4 | one segment a step, 2 px corners |
+
+- Groups (`.ws-tick-strip__groups`): strips 16 apart, each with a label 6 under it (11/14, `--color-text-muted`) and an
+  optional marker over the tick that turns: an 8 px salmon dot and 11/14 medium words in `--ws-word-needs`, 6 apart,
+  placed with `style="--at: 0%"`. The strip starts 24 down (Seth draws 22, the marker's 14 line and 8; snapped to the
+  grid), so the marker sits 10 over it.
+
+**Tones**
+
+| Modifier | Mark | The word beside it |
+| --- | --- | --- |
+| default, strong | `--ws-rating-strong` (teal) | `--ws-word-positive` |
+| `--middle`, getting there | `--color-text-interactive` (mid blue, lifted in dark) | `--color-text-interactive` |
+| `--needs-work` | `--ws-rating-needs-work` (pink #F370A4) | `--ws-word-needs-work` |
+| `style="--tone: ..."` | any chart tone, on the strip or one tick | its AA word token |
+
+**Parts and modifiers**
+
+- `.ws-tick-strip__label`: a group's label under its strip, 11/14 muted, one line with an ellipsis.
+- `.ws-tick-strip__marker`: a salmon dot (`--ws-chart-under-half` (chart tone 3, so a palette that sets it moves it)) and its word over the tick that turns, at `style="--at: 40%"` in the group.
+
+**States**
+
+- Default: the lit ticks and the track.
+- Draw (`--draw`): one 900 ms draw (`--ws-duration-draw`); tick i starts at its share of the first 55% and rises from
+  its foot on `--ws-ease-settle`. Set `--i` on each lit tick.
+- Not checked or zero: every tick the track; the figure beside it says so in words (a dash, "Could not check").
+- Loading (`--loading`): the ticks as a still ghost with the chart colours' sweep (`--ws-shimmer`, 1.8 s). The ticks
+  inside are hidden, so the ghost has the strip's exact shape.
+- Hover (`--hover`, opt in): the tick under the pointer grows to 116% from its foot on `--ws-ease-lift`, its two
+  neighbours half as much 4 ms later, the rest dim to 30%. Only with a hovering pointer.
+- Reduced motion: no draw, no sweep, no grow; the ghost stays still.
+- Focus, pressed, disabled: do not apply; the strip is a picture, not a control.
+
+**Behaviour**
+
+- Always `aria-hidden="true"`. The figure next to it is the words ("72", "39 of 100"); a group of strips sits in a
+  `<figure aria-label="...">` that says the whole story in one sentence.
+- Inside a row that is a target, the row takes the pointer and the focus; the strip never does.
+
+**Rules**
+
+- One tone a strip (Seth). The tone's word takes its AA step; the tick keeps the exact mark colour.
+- The empty tick is the track with no edge; it means nothing alone, so the figure always says the number.
+- Rows of strips use one count and one size, so every strip in a list is the same length and the numbers line up.
+- A target tick is named in Seth's Fixes frame but drawn like the rest: its look is unknown, so there is no target part.
+
+**Source**
+
+**Derived from**: Seth's Grow audit (301:1671, 301:1732, 301:2027, 305:2323), Fixes (308:2538) and Tally (319:3474 to
+319:3532) frames; hover and draw from North's motion config. **Precedent**: Ignite's `TickStrip` (60 ticks overall there;
+Seth's frame has 50, and the kit follows the frame).
+
+**Markup**
+
+```html
+<p class="ws-figure ws-figure--row">39</p>
+<div class="ws-tick-strip ws-tick-strip--needs-work" style="--n: 40;" aria-hidden="true">
+  <span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span>
+  <!-- 16 lit in all, then the rest -->
+  <span class="ws-tick-strip__tick"></span>
+</div>
+```
+
+**Styles**: `TickStrip/style.css`, in `bundle.css` and `fello.css` as `.ws-tick-strip`. Every value is a token.

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

@@ -0,0 +1,88 @@
+<!-- @dsCard group="Progress" height=980 -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>TickStrip</title>
+<link rel="stylesheet" href="../../tokens.css">
+<link rel="stylesheet" href="../bundle.css">
+</head>
+<body>
+<div class="ws-stage ws-stage--column">
+
+  <div class="ws-stack">
+    <span class="ws-muted">Large (40 tall, 4 apart): the overall score, 72 of 100 as 36 of 50 ticks, strong teal, drawn in once</span>
+    <div class="ws-tick-strip ws-tick-strip--lg ws-tick-strip--draw" style="--n: 50;" aria-hidden="true"><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 0;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 1;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 2;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 3;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 4;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 5;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 6;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 7;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 8;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 9;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 10;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 11;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 12;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 13;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 14;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 15;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 16;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 17;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 18;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 19;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 20;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 21;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 22;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 23;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 24;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 25;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 26;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 27;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 28;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 29;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 30;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 31;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 32;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 33;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 34;"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on" style="--i: 35;"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div>
+  </div>
+
+  <div class="ws-stack">
+    <span class="ws-muted">Default (32 tall, 3 apart): a check's row, 39 of 100 as 16 of 40, needs work pink</span>
+    <div class="ws-tick-strip ws-tick-strip--needs-work" style="--n: 40;" aria-hidden="true"><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div>
+  </div>
+
+  <div class="ws-stack">
+    <span class="ws-muted">The middle band, "Getting there": 55 of 100 as 22 of 40, mid blue</span>
+    <div class="ws-tick-strip ws-tick-strip--middle" style="--n: 40;" aria-hidden="true"><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div>
+  </div>
+
+  <div class="ws-stack" style="width: 380px; max-width: 100%;">
+    <span class="ws-muted">Small (32 tall, 2 apart): a pane's score beside its figure</span>
+    <div class="ws-tick-strip ws-tick-strip--sm ws-tick-strip--needs-work" style="--n: 40;" aria-hidden="true"><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div>
+  </div>
+
+  <div class="ws-stack" style="width: 590px; max-width: 100%;">
+    <span class="ws-muted">Extra small (24 tall, 2 apart): 83 of 100 in a detail, 42 of 50</span>
+    <div class="ws-tick-strip ws-tick-strip--xs" style="--n: 50;" aria-hidden="true"><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div>
+  </div>
+
+  <div class="ws-stack">
+    <span class="ws-muted">One tick a unit: 10 of 16 answers named you</span>
+    <div class="ws-tick-strip ws-tick-strip--lg" style="--n: 16;" aria-hidden="true"><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div>
+  </div>
+
+  <div class="ws-stack">
+    <span class="ws-muted">Not checked: every tick the track, the figure beside says it in words</span>
+    <div class="ws-tick-strip" style="--n: 40;" aria-hidden="true"><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div>
+  </div>
+
+  <div class="ws-stack">
+    <span class="ws-muted">Loading: the ticks as a ghost with the chart colours' sweep (still with reduced motion)</span>
+    <div class="ws-tick-strip ws-tick-strip--lg ws-tick-strip--loading" style="--n: 50;" aria-hidden="true"><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div>
+  </div>
+
+  <div class="ws-stack">
+    <span class="ws-muted">Hover (opt in): the tick under the pointer grows from its foot, the rest dim</span>
+    <div class="ws-tick-strip ws-tick-strip--hover" style="--n: 40;" aria-hidden="true"><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div>
+  </div>
+
+  <div class="ws-stack">
+    <span class="ws-muted">Extra large in groups (96 tall, quarters 16 apart): a tool paid for, then off from Q1 2027</span>
+    <figure class="ws-tick-strip__groups" aria-label="Paid every month until Q1 2027, then off">
+      <div class="ws-tick-strip__group">
+        <div class="ws-tick-strip ws-tick-strip--xl" style="--n: 13; --tone: var(--ws-chart-past-half);" aria-hidden="true"><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span></div>
+        <span class="ws-tick-strip__label" aria-hidden="true">Today</span>
+      </div>
+      <div class="ws-tick-strip__group">
+        <span class="ws-tick-strip__marker" aria-hidden="true">Off Q1 2027</span>
+        <div class="ws-tick-strip ws-tick-strip--xl" style="--n: 13; --tone: var(--ws-chart-under-half);" aria-hidden="true"><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div>
+        <span class="ws-tick-strip__label" aria-hidden="true">Q1 27</span>
+      </div>
+      <div class="ws-tick-strip__group">
+        <div class="ws-tick-strip ws-tick-strip--xl" style="--n: 13;" aria-hidden="true"><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div>
+        <span class="ws-tick-strip__label" aria-hidden="true">Q2 27</span>
+      </div>
+      <div class="ws-tick-strip__group">
+        <div class="ws-tick-strip ws-tick-strip--xl" style="--n: 13;" aria-hidden="true"><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div>
+        <span class="ws-tick-strip__label" aria-hidden="true">Q3 27</span>
+      </div>
+    </figure>
+  </div>
+
+  <div class="ws-stack">
+    <span class="ws-muted">Bar (12 tall, 4 apart, 2 px corners): one segment a step, 1 of 6 done</span>
+    <div class="ws-tick-strip ws-tick-strip--bar" style="--n: 6;" aria-hidden="true"><span class="ws-tick-strip__tick ws-tick-strip__tick--on"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span><span class="ws-tick-strip__tick"></span></div>
+  </div>
+
+</div>
+</body>
+</html>

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

@@ -0,0 +1,42 @@
+/* ---- TickStrip: a share as equal ticks across the whole width, the done ones in one tone (Seth's score strips) ---- */
+/* Set --n (the tick count) on the strip; mark each done tick --on. The gap gives way on a narrow strip, so 50 ticks
+   still read as ticks at 320 px: it is the size's gap, or a third of a tick's share of the width if that is less,
+   rounded down to a whole pixel. */
+.ws-tick-strip { --n: 40; --gap: calc(var(--space-3xs) + var(--ws-line)); --g: round(down, min(var(--gap), 100% / (var(--n) * 3)), var(--ws-line)); --tone: var(--ws-rating-strong); display: flex; gap: var(--g); height: var(--space-xl); }
+.ws-tick-strip__tick { flex: 1 0 0; min-width: var(--ws-line); border-radius: var(--ws-radius-bar); background: var(--ws-track); transform-origin: bottom; }
+.ws-tick-strip__tick--on { background: var(--tone); }
+/* Sizes (Seth): md 32 / 3 (a check row, 40 ticks) is the default; lg 40 / 4 (the overall score, 50; one an answer);
+   sm 32 / 2 (a pane); xs 24 / 2 (a score in a detail, 50); xl 96 / 3 (Tally's quarters); bar 12 / 4 with 2 px corners. */
+.ws-tick-strip--lg { --gap: var(--space-xxs); height: var(--space-2xl); }
+.ws-tick-strip--sm { --gap: var(--space-3xs); }
+.ws-tick-strip--xs { --gap: var(--space-3xs); height: var(--space-lg); }
+.ws-tick-strip--xl { --gap: calc(var(--space-3xs) + var(--ws-line)); height: var(--space-6xl); }
+.ws-tick-strip--bar { --gap: var(--space-xxs); height: var(--space-sm); }
+.ws-tick-strip--bar .ws-tick-strip__tick { border-radius: var(--ws-radius-chip); }
+/* Rating tones (D10): strong teal, middle mid blue, needs work pink. The words beside take their AA step. The middle
+   mark is --ws-rating-middle: the mid blue in light, its lifted step in dark. */
+.ws-tick-strip--middle { --tone: var(--ws-rating-middle); }
+.ws-tick-strip--needs-work { --tone: var(--ws-rating-needs-work); }
+/* Groups (Tally's vendor quarters): strips 16 apart, a label under each, a marker over the tick that turns. The
+   strips start 24 down (Seth's 22, the marker's 14 line and 8, on the grid: D3), so the marker sits 10 over them. */
+.ws-tick-strip__groups { display: flex; gap: var(--space-md); }
+.ws-tick-strip__group { position: relative; display: flex; flex: 1; min-width: 0; flex-direction: column; gap: var(--space-xxs-plus); padding-top: var(--space-lg); }
+.ws-tick-strip__label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--ws-text-micro); line-height: var(--space-sm-plus); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
+.ws-tick-strip__marker { position: absolute; top: 0; left: var(--at, 0%); display: flex; align-items: center; gap: var(--space-xxs-plus); white-space: nowrap; font-size: var(--ws-text-micro); font-weight: 500; line-height: var(--space-sm-plus); color: var(--ws-word-needs); }
+.ws-tick-strip__marker::before { content: ""; width: var(--space-xs); height: var(--space-xs); border-radius: var(--radius-full); background: var(--ws-chart-under-half); }
+/* Loading (North): the ticks as a still ghost, the chart colours' sweep passing over them. */
+.ws-tick-strip--loading { --pitch: calc((100% + var(--g)) / var(--n)); background: var(--ws-shimmer); background-size: 300% 100%; -webkit-mask-image: repeating-linear-gradient(90deg, var(--ws-mask) 0 calc(var(--pitch) - var(--g)), transparent 0 var(--pitch)); mask-image: repeating-linear-gradient(90deg, var(--ws-mask) 0 calc(var(--pitch) - var(--g)), transparent 0 var(--pitch)); }
+.ws-tick-strip--loading > * { visibility: hidden; }
+@media (prefers-reduced-motion: no-preference) {
+  .ws-tick-strip--loading { animation: ws-shimmer var(--ws-loop-shimmer) var(--ws-ease-shimmer) infinite; }
+  /* Build-in (North): one draw; tick i starts at its share of 55% of it and rises on the settle curve. Set --i on each. */
+  .ws-tick-strip--draw .ws-tick-strip__tick--on { animation: ws-grow-up calc(var(--ws-duration-draw) * 0.45) var(--ws-ease-settle) backwards; animation-delay: calc(var(--ws-build-at, 0s) + var(--ws-duration-draw) * 0.55 * var(--i, 0) / max(var(--n) - 1, 1)); }
+  .ws-tick-strip--hover .ws-tick-strip__tick { transition: transform var(--ws-duration-settle) var(--ws-ease-lift), opacity var(--ws-duration-hover) var(--ws-ease-soft); }
+}
+/* Hover (North, opt in with --hover on a strip people read tick by tick): the tick under the pointer grows from its
+   foot, its neighbours half as much a ripple later, the rest dim. Colour and scale only; nothing moves around it. */
+@media (hover: hover) {
+  .ws-tick-strip--hover:hover .ws-tick-strip__tick { opacity: var(--ws-dim); }
+  .ws-tick-strip--hover .ws-tick-strip__tick:hover { opacity: 1; transform: scaleY(var(--ws-grow-scale)); }
+  .ws-tick-strip--hover .ws-tick-strip__tick:hover + .ws-tick-strip__tick, .ws-tick-strip--hover .ws-tick-strip__tick:has(+ .ws-tick-strip__tick:hover) { opacity: 1; transform: scaleY(calc((1 + var(--ws-grow-scale)) / 2)); transition-delay: var(--ws-ripple); }
+}

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

@@ -1,10 +1,13 @@
-One block of a bento grid: an icon, a title, a meta note and its own body, as the one card.
+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.
 
 ## Use it when
 
 - Several independent small facts or mini-charts sit together on a dashboard in a grid of tiles (`.ws-board--4`, see `Page`).
 - Each block has one clear job and a short name (a count, a small chart, a short list), not a whole page's worth of content.
 - The page's layout should answer to different widths (12 columns wide, 6 on a tablet, one on a phone) without a bespoke breakpoint per screen.
+- An app's first open ends with what it can do: two or three product tiles (`ws-tiles`), each opening a part of the
+  app or naming the step it waits on (issue #9).
 
 ## Not for
 
@@ -14,12 +17,18 @@ One block of a bento grid: an icon, a title, a meta note and its own body, as th
 
 ## Anatomy
 
-- The tile is the one `Card`, `--space-9xl`-stepped width spans (`span`, in twelfths of a wide screen), overflow hidden.
-- Header: `--space-3xl` (48 px) minimum height, `--ws-card-padding-lg` (16 px) sides, an icon disc before the title where given.
-- Icon disc: 24 px (`--space-lg`) circle (`ws-disc`, the sunk ground), its icon 12 px (`--space-sm`) inside, navy.
-- Title: 16 px semibold navy (`--ws-text-value`, `ws-tracking-title`), truncated to one line; a meta note sits beside it on the same baseline, muted, also truncated.
-- Body: below the header, `--space-sm` (12 px) gap between its own children, `--ws-card-padding-lg` (16 px) on the remaining sides.
-- The whole tile rises in on arrival (`ws-rise`, `--ws-duration-settle`).
+- The bento tile is the one `Card` (the tray rim, 8 / 7 corners). It is not clipped, so a menu or tip inside it shows.
+- Header: 48 px tall at least (`--space-3xl`), 16 px sides, a 24 px icon disc (`ws-disc`, its icon 12 px, navy) before
+  the title, 8 px apart; the title is `ws-section` (15 / 22 semibold navy) and wraps; a meta note sits beside it.
+- Body: 4 px under the header, 16 px on the other sides, its parts 8 px apart (Seth's tile).
+- Figure (`ws-tile__figure`): Seth's tile figure, 32 / 38 regular navy, tight tracking, tabular. A figure not there
+  yet ("Not connected") is muted (`ws-tile__figure--none`).
+- The product tile row (`ws-tiles`): the tray (`--ws-tray`) 1 px round and 2 px between the tiles, 8 px corners. Each
+  tile (`ws-tiles__tile`, 7 px corners) is the whole target: a cream surface (`ws-tiles__surface`, 16 px inside, 12
+  between its parts, 108 px tall at least) holding a 24 px navy line icon, a 14 / 20 medium navy title and a 13 / 18
+  medium line in `--color-text-body`; under it, on the grey, the card's foot (`ws-card__foot`, 36 px, 16 px sides):
+  a door (`--door`: navy words and a 16 px chevron) or the step it waits on (`--waits`: muted, and the tile is not a
+  link). Tiles share the row and wrap under 168 px each.
 
 ## Variants and sizes
 
@@ -36,18 +45,25 @@ The spans are the first product's twelve-column grid. On a page built on fello.c
 
 ## States
 
-- **Default**: the card at rest, its icon and title in place.
-- **Long title or meta**: both truncate with an ellipsis rather than wrapping the header taller.
-- **No icon**: the header's leading disc is simply omitted; the title sits flush left.
-- **No meta**: the title alone fills the header's text area.
-- **Empty body**: a tile with nothing to show is not placed in the grid at all, the same rule as any other card.
+- **Default**: the card at rest.
+- **Hover** (a tile row's door, a pointer that hovers): the tray under the tile darkens to `--ws-well-hover` and the
+  door's words underline. A bento tile that is a link takes `Card`'s hover (the rim darkens).
+- **Pressed**: the tile's cream tints to `--ws-surface-press` at once.
+- **Focus**: the 2 px navy ring, drawn inside a row tile so it never covers its neighbour.
+- **Waiting**: a tile that waits on a step is not a link; its foot says the step in muted words.
+- **Long title or line**: both wrap; nothing is cut off.
+- **No icon**: the header's disc is left out; the title sits flush left.
+- **Empty body**: a tile with nothing to show is not placed, the same rule as any card.
+- **Narrow**: the bento goes one across; the tile row wraps, the last tile taking the whole line.
+- **Dark**: the tray, the cream and the hover follow the theme.
 
 ## Behaviour
 
 - Keyboard: the tile's title is a real `h2`, naming the tile as a region (`aria-labelledby`) for a screen reader; no interaction of its own unless its body adds one.
-- Pointer and touch: the tile itself is not pressable; any pressable content lives inside its body.
-- Motion: the tile rises in on first paint (`ws-rise`, `--ws-duration-settle` on `--ws-ease-soft`), the same stagger pattern as a board's cards.
-- Reduced motion: it appears in place without rising.
+- Pointer and touch: a bento tile is not pressable unless it is a link card; a row tile is the whole target.
+- Motion: tiles settle in on first paint (`ws-settle`, 22 ms apart with `--ws-i`); hover is colour only, over
+  `--ws-duration-hover`.
+- Reduced motion: everything appears in place.
 
 ## Content
 
@@ -69,9 +85,54 @@ The spans are the first product's twelve-column grid. On a page built on fello.c
 
 - The tile is the one `Card`: never a hand-drawn rectangle with its own border and radius.
 - One job per tile: a dashboard's bento never crowds two unrelated facts into one block to save space.
-- 16 px padding, 16 px between tiles, in line with the system's compact spacing rule.
+- 16 px padding, 16 px between bento tiles; product tiles are joined on one tray, 2 px apart.
+- A product tile never shows made-up numbers: it says what the app does and opens it, or names the step it waits on.
 
 ## Source
 
-**Derived from**: the system's one-card, one-job rule and its compact spacing (16px padding, 16px between tiles).
-**Precedent**: the first product built on the system.
+**Derived from**: the system's one-card, one-job rule; Seth's tile figure (Inbox 313:2687: 32 / 38, the 8 px gap) and
+the tray foot; issue #9 (Ignite AppIntro.tsx:91-150, Seth's first open 282:892) for the tile row. **Precedent**: the
+first product built on the system.
+
+## Markup
+
+```html
+<ul class="ws-tiles" aria-label="What Coach can do">
+  <li>
+    <a class="ws-tiles__tile" href="/coach/practice">
+      <span class="ws-tiles__surface">
+        <svg class="ws-tiles__icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><!-- a 24 px line icon --></svg>
+        <span class="ws-tiles__words">
+          <span class="ws-tiles__title">Practice a call</span>
+          <span class="ws-tiles__line">Role-play a seller who wants to wait.</span>
+        </span>
+      </span>
+      <span class="ws-card__foot ws-card__foot--door">
+        <span>Start practice</span>
+        <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      </span>
+    </a>
+  </li>
+  <li>
+    <div class="ws-tiles__tile">
+      <span class="ws-tiles__surface"><!-- icon, title, line --></span>
+      <span class="ws-card__foot ws-card__foot--waits"><span>After your first practice</span></span>
+    </div>
+  </li>
+</ul>
+
+<div class="ws-card ws-tile">
+  <header class="ws-tile__head">
+    <span class="ws-disc ws-tile__disc" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none"><!-- icon --></svg></span>
+    <h2 class="ws-section">Calls</h2>
+    <span class="ws-muted">this week</span>
+  </header>
+  <div class="ws-tile__body"><p class="ws-tile__figure">26</p></div>
+</div>
+```
+
+## Styles
+
+`Tile/style.css` (the bento tile and the tile row); the foot is `Card`'s (`ws-card__foot`). Tokens: `--ws-tray`,
+`--ws-rim`, `--space-3xs`, `--ws-radius-card`, `--ws-radius-card-inner`, `--ws-well-hover`, `--ws-surface-press`,
+`--ws-text-figure`, `--ws-leading-figure`, `--ws-tracking-display`, `--ws-text-control`.

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

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Layout" height=144 -->
+<!-- @dsCard group="Layout" height=376 -->
 <!doctype html>
 <html>
 <head>
@@ -8,48 +8,99 @@
 <link rel="stylesheet" href="../bundle.css">
 </head>
 <body>
-<div class="ws-stage ws-stage--grey">
-  <div style="display: grid; grid-template-columns: repeat(auto-fill, var(--space-9xl)); width: 100%; gap: var(--ws-gap-component);">
-
-    <div class="ws-card ws-tile">
-      <header class="ws-tile__head">
-        <span class="ws-disc ws-tile__disc" aria-hidden="true">
-          <svg viewBox="0 0 16 16" fill="none"><path d="M2 12l3-4 3 2 3-5 3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
-        </span>
-        <h2 class="ws-section">Calls</h2>
-        <span class="ws-muted">this week</span>
-      </header>
-      <div class="ws-tile__body">
-        <p class="ws-tile__figure">26</p>
-      </div>
-    </div>
-
-    <div class="ws-card ws-tile">
-      <header class="ws-tile__head">
-        <span class="ws-disc ws-tile__disc" aria-hidden="true">
-          <svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3l2 1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
-        </span>
-        <h2 class="ws-section">On pace</h2>
-        <span class="ws-muted">for October</span>
-      </header>
-      <div class="ws-tile__body">
-        <p class="ws-tile__figure">65%</p>
-      </div>
-    </div>
-
-    <div class="ws-card ws-tile">
-      <header class="ws-tile__head">
-        <span class="ws-disc ws-tile__disc" aria-hidden="true">
-          <svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="5.5" r="2.5" stroke="currentColor" stroke-width="1.5"/><path d="M3 13c0-2.5 2.2-4 5-4s5 1.5 5 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
-        </span>
-        <h2 class="ws-section">Leads</h2>
-        <span class="ws-muted">in pipeline</span>
-      </header>
-      <div class="ws-tile__body">
-        <p class="ws-tile__figure">9</p>
+<div class="ws-stage ws-stage--column">
+  <div class="ws-stack">
+    <span class="ws-muted">Bento tiles: an icon disc, a title and a note, one figure; a figure not there yet is muted</span>
+    <div class="ws-area">
+      <div class="ws-board--4" style="display: grid; gap: var(--ws-gap-component);">
+        <div class="ws-card ws-tile">
+          <header class="ws-tile__head">
+            <span class="ws-disc ws-tile__disc" aria-hidden="true">
+              <svg viewBox="0 0 16 16" fill="none"><path d="M2 12l3-4 3 2 3-5 3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            </span>
+            <h2 class="ws-section">Calls</h2>
+            <span class="ws-muted">this week</span>
+          </header>
+          <div class="ws-tile__body"><p class="ws-tile__figure">26</p></div>
+        </div>
+        <div class="ws-card ws-tile">
+          <header class="ws-tile__head">
+            <span class="ws-disc ws-tile__disc" aria-hidden="true">
+              <svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="5" stroke="currentColor" stroke-width="1.5"/><path d="M8 5v3l2 1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+            </span>
+            <h2 class="ws-section">On pace</h2>
+            <span class="ws-muted">for October</span>
+          </header>
+          <div class="ws-tile__body"><p class="ws-tile__figure">65%</p></div>
+        </div>
+        <div class="ws-card ws-tile">
+          <header class="ws-tile__head">
+            <span class="ws-disc ws-tile__disc" aria-hidden="true">
+              <svg viewBox="0 0 16 16" fill="none"><circle cx="8" cy="5.5" r="2.5" stroke="currentColor" stroke-width="1.5"/><path d="M3 13c0-2.5 2.2-4 5-4s5 1.5 5 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+            </span>
+            <h2 class="ws-section">Leads in the pipeline</h2>
+          </header>
+          <div class="ws-tile__body"><p class="ws-tile__figure">9</p></div>
+        </div>
+        <div class="ws-card ws-tile">
+          <header class="ws-tile__head">
+            <span class="ws-disc ws-tile__disc" aria-hidden="true">
+              <svg viewBox="0 0 16 16" fill="none"><path d="M8 2l1.8 3.7 4 .6-2.9 2.8.7 4L8 11.2 4.4 13.1l.7-4L2.2 6.3l4-.6z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
+            </span>
+            <h2 class="ws-section">Google reviews</h2>
+          </header>
+          <div class="ws-tile__body"><p class="ws-tile__figure ws-tile__figure--none">Not connected</p></div>
+        </div>
       </div>
     </div>
+  </div>
 
+  <div class="ws-stack" style="max-width: var(--ws-column-width);">
+    <span class="ws-muted">Product tile row (first open): each tile a door, or the step it waits on</span>
+    <ul class="ws-tiles" aria-label="What Coach can do">
+      <li>
+        <a class="ws-tiles__tile" href="#" onclick="return false;">
+          <span class="ws-tiles__surface">
+            <svg class="ws-tiles__icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 6.5h14a1.5 1.5 0 0 1 1.5 1.5v7a1.5 1.5 0 0 1-1.5 1.5h-8.5L7 19.5v-3H5A1.5 1.5 0 0 1 3.5 15V8A1.5 1.5 0 0 1 5 6.5z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/></svg>
+            <span class="ws-tiles__words">
+              <span class="ws-tiles__title">Practice a call</span>
+              <span class="ws-tiles__line">Role-play a seller who wants to wait.</span>
+            </span>
+          </span>
+          <span class="ws-card__foot ws-card__foot--door">
+            <span>Start practice</span>
+            <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          </span>
+        </a>
+      </li>
+      <li>
+        <a class="ws-tiles__tile" href="#" onclick="return false;">
+          <span class="ws-tiles__surface">
+            <svg class="ws-tiles__icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 18l4.5-5 3.5 3 6-7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 8.5h4v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            <span class="ws-tiles__words">
+              <span class="ws-tiles__title">See your week</span>
+              <span class="ws-tiles__line">Calls, follow-ups and who is next, from your own log.</span>
+            </span>
+          </span>
+          <span class="ws-card__foot ws-card__foot--door">
+            <span>Open your week</span>
+            <svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M6.6 5.2L9.4 8l-2.8 2.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          </span>
+        </a>
+      </li>
+      <li>
+        <div class="ws-tiles__tile">
+          <span class="ws-tiles__surface">
+            <svg class="ws-tiles__icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="12" cy="12" r="7.5" stroke="currentColor" stroke-width="1.5"/><path d="M12 8v4.5l3 1.8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            <span class="ws-tiles__words">
+              <span class="ws-tiles__title">Get scored on every call</span>
+              <span class="ws-tiles__line">What went well and the one thing to try next time.</span>
+            </span>
+          </span>
+          <span class="ws-card__foot ws-card__foot--waits"><span>After your first practice</span></span>
+        </div>
+      </li>
+    </ul>
   </div>
 </div>
 </body>