@felloinnovations/brand-kit 0.4.0 → 0.5.0

package/design-system/09-charts.md

@@ -1,66 +1,109 @@
 # Charts
 
-Every chart is a card: a title that says the answer, one sentence, the drawing on the dotted field, the band with one act.
-First name the question; the question picks the chart; the chart uses the approved piece.
+Every chart answers one question. On a page or in the chat it is a card: a title that says the answer, one sentence, the
+drawing, the band or the foot with one act. Inside a report it may be a block of the report (a score, a strip, a share
+bar) under the report's own heading. First name the question; the question picks the chart; the chart uses the approved
+piece.
 
 ## Question to chart
 
 | The question | Chart | Piece |
 | --- | --- | --- |
-| How far along a goal, and what made it up | the goal card: one 72 px number, its change chip, a strip of ticks, rows of ticks by kind | `GoalTicks` |
-| How many of a whole (3 of 5 met, issues done) | a row of ticks carrying a stretch of the one gradient | `TickRow` |
+| What is the score, and is it good | the 96 px score, a strip of ticks in the rating's tone, the rating word and one sentence | `ScoreHero` (new) |
+| How much of a whole, across the width (a score of 100, 10 of 16 answers) | equal ticks filling the width, the lit ones in one tone, the rest on the track | `TickStrip` (new) |
+| How many of a small whole (3 of 5 met, 10 waiting) | a short row of ticks | `TickRow` |
+| How far along a goal, and what made it up | the goal card: one 72 px number, its change chip, the gradient strip, rows of ticks by kind | `GoalTicks` |
+| How far along, by area (fixes done per area) | one bar split into groups, one segment a step, labels under | `SegmentedProgress` (new) |
+| Ahead or behind a pace | a track with its fill and a pace mark | `PaceBar` (new) |
+| A key number that opens into its story | a tile: label, figure, pace bar or a mini chart (columns of the periods behind it, or a line with dots), foot; it grows across its row into a chart and a side column | `MetricTile` (new) |
+| Where a whole goes (a bill, a team's time) | one stacked bar, 1 px cuts between parts, a key under it | `ShareBar` (new) |
+| How a value changes over time, against a reference | a step line, the reference dotted, the gap between them hatched, events marked | `StepLine` (new) |
+| How a value moves over periods (a month's ARR, a week's calls), read on an axis | a line with its dots and the hatched area under it, or columns, switching between the two by a morph; a plan as a dotted salmon line | `TrendLine` (new) |
+| How several groups do on several measures | lanes by measures, each cell a tone and a figure | `Heatmap` (new) |
 | Compare a few categories (calls by kind) | horizontal bars with a fade, the number and label at the right | `GoalBars` |
 | Compare a few categories where height reads better (a hero) | vertical tubes with the number on a stalk | `GoalTubes` |
 | Where one value stands against others on a scale (you, team average, the best) | a strip of fine ticks with labelled markers | `RankBar` |
-| A share of a whole, one or three parts | a ring (one arc) or a ring of radial ticks with a legend | `Ring` |
+| A share of a whole, one or three parts | a ring (one arc) or a ring of radial ticks with a key beside it (under on a phone) | `Ring` |
 | Who did what, day by day | a people-by-days grid of dots | `ActivityGrid` |
 | A run of days (a streak) | a weeks-by-days calendar of pills | `StreakCalendar` |
-| Several numbers that answer a page | stat tiles, four across | `StatTiles` |
+| Several numbers that answer a page | stat tiles | `StatTiles` |
 | Each person's progress around a team total | petals or ring segments around a centre figure | `ProgressPetals` |
-| A trend over days with a moment that explains it | thin 2 px bars rising to purple, the moment a salmon bar with a label chip | `TrendBars` |
+| A trend over days with a moment that explains it | thin 2 px bars rising to purple, spread across the plot, the moment a salmon bar with a label chip, the axis naming dates | `TrendBars` |
 | How a pipeline narrows, stage by stage | horizontal bars descending with the conversion between them as chips | `FunnelBars` |
+| Yes or no across a few sources | a matrix of tone cells | `Matrix` (new) |
 | A sequence or a wait | steps on a line that fills | `Stepper` |
 
-Do not use: a pie with more than three parts (make it bars), a line chart (make it thin bars), an axis or a grid where thin
-bars suffice, stacked bars (make two rows), a donut for a single number (make it the goal card), a sparkline inside a row
-(make it a change chip).
+Do not use: a pie with more than three parts (make it bars or a `ShareBar`), a free line chart (two series or more, or a
+line with no axis: make it thin bars, a `TrendLine` of one series over periods, or a `StepLine` where a designer draws
+a bill or a level over time; a `MetricTile`'s mini line with dots for a rate that holds near its target), an axis or a
+grid where thin bars suffice, stacked bars
+across categories (make two rows; one `ShareBar` for one whole is fine), a donut for a single number (make it the goal
+card), a sparkline inside a row (make it a change chip).
+
+## Tick strips
+
+Seth draws most shares as ticks. The rules every strip follows:
+
+- **Ticks fill the width**: equal ticks (`flex: 1`), 1 px corners (`ws-radius-bar`), the lit count is the value's share of
+  the ticks, rounded. Empty ticks are the track (`ws-track`) with no edge.
+- **One tone a strip** for a rating or a count: the rating's mark (Colour, Rating tones) or the tone of what it counts.
+  The goal gradient stays on `GoalTicks` and `TickRow`'s gradient form.
+- **Sizes**: an overall score 50 ticks, 40 tall, 4 apart; a row's 40 ticks, 32 tall, 3 apart; a drawer's 40 ticks, 32
+  tall, 2 apart; a fine score 50 ticks, 24 tall, 2 apart. `TickStrip`'s README names each size.
+- **A target tick** is drawn distinctly, never the same grey as the rest.
+- **Not checked**: every tick on the track, no figure, and the words "Could not check". Never a dash character for a missing value; `CheckRow` holds the score's place
+  with a short drawn muted rule and words for a screen reader.
+- **The figure says it in words** beside the strip; the strip itself is hidden from screen readers.
+- **A count beside a row of ticks** (`TickRow`) takes the rest of the line and wraps there; the ticks keep their size
+  and never draw over it.
 
 ## The card language for charts
 
 - The title says the answer ("On pace for 40 calls by Oct 22"); the sentence says why ("Nine days early. Cold calls did
   most of the work.").
-- The drawing sits on the dotted field (`ws-dots`), 20 px at the sides; each chart's own top and bottom room is in
-  `CHART_BODY` (bars 20 under the head, tubes 36, rings and petals 24).
-- The four tones only (Colour), each with its fade for a bar's tail and its tint for a ring's outer track; empty parts are
-  the cream with the slot edge or `ws-chart-empty`.
-- Marks keep the exact tone; the number and label beside a mark are navy or the AA step of the tone; a legend's dot is the
-  tone and its words navy.
-- A chart's words take Type's `chart`, `micro` and `value` steps.
-- No axis, no gridlines, no tooltips as the only way to read a value: the value is written beside the mark.
-- One chart per card; one 72 px number per card; a change is a `ChangeChip` (in `Chip`).
+- **The dotted field sits only behind the drawing** and bleeds to the card's edges (`ws-dots`); never behind the head, a
+  breakdown or a list. A breakdown under a chart runs full width with a divider above, its rows in a `1fr auto` grid with
+  the figure in a fixed right column.
+- Each chart's own top and bottom room is in its README (bars 20 under the head, tubes 36, rings and petals 24).
+- The tones only (Colour), each with its fade for a bar's tail and its tint for a ring's outer track; empty parts are the
+  track or `ws-chart-empty`.
+- **Marks keep the exact tone; words take the AA step.** The number and label beside a mark are navy or the tone's word
+  token; a key's swatch is the tone and its words body grey or navy.
+- A chart's words take Type's `chart`, `micro` and `value` steps; an axis label is 11 px and AA on its ground.
+- No axis and no gridlines where thin bars suffice; a `StepLine` keeps 0.5 px quarter lines and right-aligned value
+  labels, 12 before the plot; a `TrendLine` keeps 0.5 px value rules and right-aligned value labels, 12 before the plot,
+  its columns starting at zero.
+- **A hover card may add detail, never be the only reading**: the value is written beside the mark.
+- One chart per card; one hero figure per card; a change is a `ChangeChip` (in `Chip`).
 
 ## Data rules
 
 - **Zero** is drawn (an empty tick, a 0 beside an empty bar), never omitted.
 - **Negative** values do not occur in these charts; a change is shown as a chip, not a bar below an axis.
-- **Missing** data leaves the card out, never a greyed chart; a partial week shows the days to come dashed.
-- **Many categories** (over 6) become a list card with a tick row per row, sorted by the number.
+- **Missing** data leaves the card out, never a greyed chart; a partial week shows the days to come dashed; a check that
+  could not run says so in words.
+- **Many categories** (over 6) become a list card with a strip per row, sorted by the number.
 - **Long labels** wrap under the bar or truncate with the full words in `title`; a number never truncates.
-- **Unusually large values** keep the scale honest: the strip's 60 ticks represent the target; a value past the target fills
+- **Unusually large values** keep the scale honest: the strip's ticks represent the target; a value past the target fills
   every tick and says so in the chip ("↗ 112% of goal").
 
 ## States
 
-Loading and empty follow Patterns (a skeleton of the chart's shape; the same card with its act).
+Loading and empty follow Patterns (a shimmer in the chart colours over the chart's ghost; the same card with its act).
 
 | State | How |
 | --- | --- |
-| Arriving, live, changed | as Motion's table says for bars, ticks, petals, rings and figures; nothing slides in from an edge |
-| Narrow (480 or the panel) | labels wrap, legends stack, a 72 px number stays 72 |
+| Arriving, live, changed | as Motion's Charts section says: one draw, marks staggered by share, nothing sliding in from an edge; a chart builds in when it arrives, on first paint or as it scrolls into view (a kit default, 5 Nov 2026) |
+| Hovered | the hovered part stays, the rest dims to `ws-dim`; a hover card reads the mark; a matrix dims its other rows; a heatmap fades its other squares' heat and status bars while their words step to muted grey, still AA |
+| Narrow (480 or the panel) | labels wrap, keys stack under, a ring's key goes under it; a hero figure keeps its size |
+| Not checked, unavailable | the strip on the track and the words that say why |
 | Screen reader | the figure as text: a `figure` with an `aria-label` that says the answer and the numbers, rows as a list |
 
 ## Interaction
 
-A chart is read, not operated: no hover tooltips as the only reading, no click targets smaller than 24 px. Choosing a person
-in a team chart dims the others and opens the person beside the chart; the chart keeps its size and glides aside. A filter sits
-inside the card it filters (Patterns).
+A chart is read, not operated: no click targets smaller than 24 px, and nothing shown only on hover. Hovering or
+focusing a part dims the rest and may open a `HoverCard` with a caret to it; the same reading is reachable by keyboard
+and on a tap. Choosing a person in a team chart dims the others and opens the person beside the chart; the chart keeps
+its size and glides aside. A filter sits inside the card it filters, or in the page's `FilterBar` when it filters the
+whole page (Patterns). A `Heatmap` cell opens in place (a second cell tall) after a short hover intent, and on focus or a
+press.

package/design-system/10-patterns.md

@@ -36,25 +36,46 @@ departs from one writes why in its rationale.
 
 ## Actions and feedback
 
-- **Latency**: under 100 ms, nothing; 100 ms to 1 s, the pending state; over 1 s, a Stepper or a Meter with words; over 10 s,
-  a background job that comes back as a chat card.
+- **Latency**: under 100 ms, nothing; 100 ms to 1 s, the pending state; over 1 s, a `Stepper`, a `Meter` or a `LoadBar`
+  with words (an agent's answer shows its `StatusLine`); over 10 s, a background job that comes back as a chat card.
 - **Confirmation** is a receipt line in the chat (AI experiences) or a toast elsewhere; never a dialog that only says
   "Done".
-- **Dismissal**: a chip has an x; a dialog closes on Escape,
-  the scrim and its secondary; a panel closes with the word Close.
+- **Dismissal**: a chip has an x; a dialog closes on Escape, the scrim and its secondary; a drawer beside a report closes
+  with its labelled x; the panel beside the chat does too. Each closes on Escape and returns focus.
 - **Instant feedback** on every press; a pending control refuses a second press and says so to a screen reader
   (`aria-busy`).
 
+## Interaction states
+
+Every control, row and card that acts draws each of these. The table says what each looks like; Motion says how each
+moves. A state never changes a thing's size, its type size or its place, so nothing around it moves.
+
+| State | What it looks like | Rules |
+| --- | --- | --- |
+| Rest | the component's own look; a control's edge drawn inside it | |
+| Hover | a colour, never a lift: a navy wash on a row (`ws-hover-faint`), a nav or menu row (`ws-hover`), an icon button or a quiet act (`ws-hover-strong`); an outlined control's edge darkens; a rimmed card's rim darkens (`ws-well-hover`); the navy button a shade brighter | only where a pointer hovers (`@media (hover: hover)`); whatever a hover reveals (a close, an arrow, a row's acts, a label) also shows on focus and on a tap |
+| Press | a control scales a little (`ws-press-scale`, round ones `ws-press-scale-round`); a row, a list row or a card a step darker (`ws-surface-press`), never scaled | answered at once; on touch the press is the feedback, a hover never sticks |
+| Focus | a 2 px navy ring 2 px outside (`ws-focus-color`); inside a dense row, a well, a list or a clipped container the same ring drawn inside (`ws-focus-inset`) | `:focus-visible` only; never `outline: none` without the ring (Accessibility) |
+| Selected, open, current | the ground changes (the sunk cream, or the well for a pill in an inset list), the words go navy or 600; a list's selected fill slides from the row it left; the dividers beside an inset pill drop | the row keeps its height and type size; `aria-selected`, `aria-current` or `aria-expanded` says it |
+| Pending | the control keeps its width and its words; the working dot sits in its padding on the one beat; it stays focusable (`aria-disabled`, `aria-busy`) and refuses a second press | from 100 ms (Latency above); words that say what is happening ("Saving") |
+| Loading | the region's ghost in the chart colours' shimmer, the size of what it stands for; its head shows at once | never a spinner for content; still under reduced motion, with a word |
+| Disabled | dimmed (the component's own opacity), no pointer events, the reason said nearby | prefer leaving the act out, or keeping it focusable and saying why |
+| Others step back | while one row, part or tile is in focus, the rest dim (a matrix's other rows to 20%, a chart's other parts to `ws-dim`); the dimmed keep their grounds and dividers. A word that must stay readable steps to muted grey instead of fading (a heatmap's other squares fade their heat and status bar, their words stay AA) | the focused one never changes |
+
+The geometry check's `--hover` run shoots each control at rest, hovered and focused and fails a focus that looks the same
+as rest (Checklist).
+
 ## Loading, empty, error, stale
 
 | State | Default |
 | --- | --- |
-| First load | the card's head at once; the body a skeleton of its shape (`Skeleton`), the band waits; content replaces it over `calm` |
+| First load | the card's head at once; the body a ghost of its shape in the shimmer (`Skeleton`), the band waits; content replaces it over `calm` |
 | Partial results | show what has come, a muted line saying more is coming, the working beat on the band's words |
-| Empty, first use | the same card with the app's face on the dots and the act that fills it in the band |
+| Empty, first use | the same card, plain cream (the dotted field is a chart's ground only), with the app's face, one line and the act that fills it in the band |
 | Empty, no matches | the same card, "No candidates match", the act clears the filter |
 | Empty, unavailable | the card is left out, or one line in the chat saying what is missing |
 | Failed | the card with its head, one line saying what failed in plain words and a Retry act in the band; never a status code |
+| Could not check | the row or chart stays, its marks on the track, no figure (never a dash character; a `CheckRow` draws a short muted rule in its place) and the words "Could not check" |
 | Offline | a muted line at the top of the stage; acts that need the network pend until it is back |
 | Stale | "as of Friday" in the sentence; the band's act refreshes |
 
@@ -62,15 +83,17 @@ departs from one writes why in its rationale.
 
 - A search box is an `Input` with the search icon, 36 px, inside the card whose list it searches; results replace the rows
   with a cross-fade, never a re-stagger.
-- Filters live inside the one chart or list they filter, as a `Segmented` switch or chips; nothing that changes the page
-  looks like a filter.
+- Filters live inside the one chart or list they filter, as a `Segmented` switch or chips. A filter for the whole page
+  (a period, a scope) is the page's one `FilterBar`, under its head, docking into the bar as the page scrolls.
 - Sorting is a column header's act in a table or a small Select beside a list; the sort is stated in words ("by score").
 - The empty result is the same card with the act that clears the filter.
 
 ## Selection and bulk acts
 
-Choosing a row dims the others (names included) and opens the thing beside; several chosen show a count chip and the acts
-in a band at the card's foot ("Nudge all 7"), never a floating toolbar.
+Choosing a row opens the thing beside it and marks the row: its ground (the sunk cream, or a pill in an inset list) and
+navy words, nothing else; in a team view the others dim (names included). Several chosen show a count chip and the acts in
+a band at the card's foot ("Nudge all 7"), never a floating toolbar. A checkbox for bulk acts sits before the row's
+target, outside it.
 
 ## Permissions and read-only
 

package/design-system/11-page-recipes.md

@@ -5,32 +5,50 @@ The approved compositions. Start from one; adapt it in the rationale.
 ## 1. Home (an AI product)
 
 The greeting ("Morning, Ryan."), one sentence saying what matters today, the composer, then **Needs you** (one `Well`: a
-mark, the ask in navy, the state word at the right in its AA tone) and a few starters. No dashboard, no second copy of a
-card. Fits the window; the list grows down if it must.
+mark, the ask in navy, the state word at the right in its AA tone) and a few starters (`SuggestionChip`). No second copy
+of a card. Fits the window; the list grows down if it must.
+
+**When the home is a dashboard** (Seth's North): the greeting at the `hero` step with the ask field under it and a few
+starters, their lines on the greeting's visible edge; then what changed (a short list of one-line rows), the key metrics
+as `MetricTile`s (two by two beside a short column of the person's own acts and goals), a chart with its side column
+(`Split`), and the work as a list. Sections 56 apart; a section's head 12 above its cards; cards 16 apart. Each tile
+carries its mini chart (a column strip of the periods behind the figure, or a line with dots) and its pace in the foot;
+the column beside them is a `SideList`: what needs the person (rows that act), then their goals (goal rows, the bar
+navy, teal past the goal, alert red behind). The page builds in on arrival, the kit's default for a dashboard (Motion,
+Build-in): `.ws-build` on the content, `.ws-build__card` and `--ws-i` on each tile and on the column, `--draw` on
+each chart.
 
 ## 2. Chat
 
-One centred 656 px column: the agent's words as plain text, the person's in a sunk bubble (AI experiences), cards flat on
-the thread (`ChatCard`), short act lines as receipts, the composer at the foot 24 px above the edge. The header is
-one 56 px line (the assistant's name, the thread's title). Never a full page beside it.
+One centred column in its shell (`ChatShell`): the agent's words as plain text, the person's in a bubble (AI
+experiences), cards flat on the thread (`ChatCard`), short act lines as receipts, the composer at the foot. The header is
+one line (the assistant's name, the thread's title). The same chat can sit as a bar over a page, docked beside it (the
+page steps aside, never covered) or full screen; `ChatShell` holds each mode's widths and insets. A long conversation is
+marked by topic (`TopicRail`). Never a full page beside it.
 
 ## 3. Panel beside the chat
 
-`Panel`: the thing's name and Close in its header, the thing's own view (the same component its page's side pane uses),
+`Panel`: the thing's name and a labelled x in its header, the thing's own view (the same component its page's side pane uses),
 its acts in a band at the foot. On a phone it is the screen; below 1280 px it slides over the chat.
 
 ## 4. App page: a board of cards
 
-Full screen in place of the chat, the sidebar beside it. A 56 px header: the product area and the page's name, the way
-back at the right. No tab row, no page heading in the canvas (the first card says what the page is). A `CardBoard`, one
-card per question, the key cards first; only a page whose answer is numbers opens with `StatTiles`. Filters inside the
-card they filter. A chosen thing dims the others and opens in a side pane the same width as the panel.
+Full screen in place of the chat, the sidebar beside it. The 56 px thread header (`PageBar`): the app's face, the page's
+name and the app's name at the left; its quiet acts and "Back to the chat" at the right; 32 at both sides; no divider
+under it. The content starts 16 under the header with the same 32 gutters. No tab row of its own styles. The canvas may
+open with a hero (a report's score or headline) and group its cards under area headings (a `ws-title`, 10 above its card; `Section` is a small group inside one); otherwise the first
+card says what the page is. A `CardBoard`, one card per question, the key cards first; only a page whose answer is
+numbers opens with `StatTiles`. Filters inside the card they filter, or the page's `FilterBar`. A chosen thing opens in a
+drawer beside it (recipe 23) or in a side pane the panel's width. In `AppShell` the body caps its content at two board
+columns (1128); a Fia app page drawn to Seth's full width (Grow, Fixes, Inbox, Tally: 1350 in a 1416 stage) adds
+`ws-app-shell__body--wide`.
 
 ## 5. List with a detail
 
 One card holds the list (a search box in its head); choosing a row opens the thing in the side pane; the list keeps its
-scroll and the chosen row stays lit. On a phone the detail is its own screen with Back. Over about 50 rows, paginate; a
-pipeline is a `KanbanBoard`.
+scroll and the chosen row stays lit. When choosing is the page's whole job (an inbox), the list and the item share the
+page's grid instead (`ListDetail`, recipe 24). On a phone the detail is its own screen with Back. Over about 50 rows,
+paginate; a pipeline is a `KanbanBoard`.
 
 ## 6. Form or settings
 
@@ -49,7 +67,8 @@ wide window the grey panel beside it with a few sample cards rising in one after
 ## 9. A live session (a call, a voice session)
 
 A panel at 440: a 56 px head with its acts, the line's state after a small square, the other side's name as the title, a
-talk card (mirrored bars growing as each second passes), the transcript as a list, End as the outlined navy button. The
+talk card (mirrored bars growing as each second passes), the transcript as a list, End as the secondary button (Seth's
+outlined navy one is open, Decisions). The
 microphone passes to the session and back to the assistant after. (A live session is a product's own view built from the pieces here, not a shared component.)
 
 ## 10. A guide or a long read (comfortable profile)
@@ -63,8 +82,9 @@ See 17 and Public pages.
 
 ## 12. A conventional app page (not chat-first)
 
-`AppShell`: the left nav, a top bar with the page's name, a search box and the page's one navy button, the stage. Inside
-it any of the recipes above.
+`AppShell`: the sidebar on the frame, the stage beside it (13 from the top, 12 from the right and the bottom), a top bar
+with the crumbs, a search box and the page's one navy button. The shell's body owns the scroll (Scrolling). Inside it any
+of the recipes above.
 
 ## 13. An admin or records page
 
@@ -85,9 +105,10 @@ on every step; the last step a summary `Plate` and the act that finishes. On the
 
 ## 16. A report
 
-A `PageHero` with the period and one line, `StatTiles` for the four numbers, then a board of chart cards each answering one
-question (`TrendBars`, `FunnelBars`, `GoalBars`, a `Leaderboard`), a `Timeline` of what happened, the one act to share or
-export in the hero. Printable: no sticky, no motion, the cards in one column.
+A `PageHero` with the period and one line (or a `ScoreHero` when one score answers the report), `StatTiles` for the
+four numbers, then a board of chart cards each answering one question (`TrendBars`, `FunnelBars`, `GoalBars`,
+`ShareBar`, a `Leaderboard`), a `Timeline` of what happened, the one act to share or export in the hero. Its sections 56
+apart (Space and layout). Printable: no sticky, no motion, the cards in one column.
 
 ## 17. A landing or campaign page
 
@@ -105,10 +126,12 @@ where possible). On a phone it follows Public pages' layout.
 ## 19. A dashboard or a console (internal tools, staff views)
 
 The frame: `AppShell` when the dashboard is one page of a multi-page product (it has a nav to other pages); `Page` with a
-`PageBar` and its board when it is a single-page artifact or report (no shell). Then at most four `StatTiles` when the
-answer is numbers, each naming its period and opening its filtered list; then the work: an `ActionList` (a ranked list of next acts, each row's reason in words, its act at the right) or a `Table`; a record opens
+`PageBar` and its board when it is a single-page artifact or report (no shell). A period or scope that filters the whole
+page is the one `FilterBar` under the head. Then at most four `StatTiles` (or `MetricTile`s) when the answer is numbers, each naming its period and opening its filtered list; then the work: an `ActionList` (a ranked list of next acts, each row's reason in words, its act at the right) or a `Table`; a record opens
 in a side pane. A console acting on someone's account sits beside that person's own view, so staff see what they see.
-Every figure comes from the function the acts use; one with no source is left out, not shown as a dash.
+Every figure comes from the function the acts use; one with no source is left out, not shown as a dash. It builds in
+on arrival (`.ws-build`, Motion's Build-in): its cards rise in 70 ms apart and their charts draw as each lands, once,
+as each scrolls into view; under reduced motion it shows its final state.
 
 ## 20. An email or a one-pager
 
@@ -124,7 +147,71 @@ Claude's Slides with this system. One idea a slide, its title the answer; the ki
 titles; one salmon highlight a slide at most; charts from Charts. The
 first slide states the point, the last makes the one ask.
 
+## 22. First open of an AI app's new thread
+
+What a person sees the first time they open an app's thread (issue #12, Seth's v7 first open, the owner's 3 Nov ruling).
+
+1. **The app's face and one line** saying what it does for this person, on the column's start edge.
+2. **One example card on the team's own numbers**, never made up: a snug chart card (its head 12 in, its band 16 all
+   round, sized to its content, no dotted field and no edge when it stands alone on the thread). Its one step (connect
+   a source, set a goal) sits in its band until it is done; the card stays after. A card that genuinely shows sample
+   data says so with the `Chip` Example tag; a card on real numbers never carries it.
+3. **What the app can do, as a row of tiles** on the well (`Tile`'s tile row): 2 px apart in a 1 px rim, each tile a door
+   (a 24 px line icon, a title, one line, its foot naming where it goes) or the step it waits on (muted, not
+   interactive). The row wraps; a tile is never narrower than 168.
+4. **The composer** at the foot, with a few starters (`SuggestionChip`).
+
+Nothing proactive arrives on a first open; the agent speaks when asked.
+
+## 23. A report with its drawer
+
+Seth's Grow audit report (Figma 301:1630): a score, its checks, and one check's detail beside them.
+
+- **The thread header** (recipe 4): the face, "Audit report", the app's name; at the right when it last ran, two quiet
+  acts (secondary, 32) and "Back to the chat".
+- **The report column**, 16 under the header, 32 gutters, its blocks 32 apart and 16 inside each: the view tabs
+  (`Segmented` well, one figure per tab, full width), the `ScoreHero` (the 96 score, its strip, the rating word in its
+  word token and one sentence), then the list's heading (`ws-section`) and one rimmed `Card` of `CheckRow`s: a name
+  column, a tick strip, the figure and the status in fixed right-aligned columns, a chevron.
+- **Choosing a row opens its drawer**: a rimmed `Panel` drawer, 440 wide (`ws-thing-width`), 24 from the report, inside
+  the stage and 24 above its foot; the report narrows to give it room. The open row takes the sunk ground and navy status
+  words, nothing else.
+- **The markup**: the report and its drawer are a filled `Split` straight in the wide body, so the report scrolls on its
+  own, the drawer's foot sits on the bottom and the page ends 24 above the stage's foot:
+  `<main class="ws-app-shell__body ws-app-shell__body--wide"><div class="ws-split ws-split--fill">` holding
+  `ws-split__main` (the report column) and `ws-split__aside` (holding the `Panel` drawer). No `.ws-page` inside the body.
+- **The drawer**, its sections split by full-width dividers, each 20 top and bottom and 28 at the sides: the head (the
+  check's name as the title with its rating tag, one line, a labelled x at the top right, then the 44 px figure with its
+  strip); its own tabs (a small `Segmented` well); the finding (`ws-section`); a facts `Plate` (label over value pairs,
+  a foot with a link); a spacer; the next fix (its label, its title, two acts as equal halves, the primary last); the
+  ask field at the foot (the compact `Composer`).
+- **A check that could not run** keeps its row: the strip on the track, no figure, "Could not check"; it still opens.
+- **Narrower**: below 1280 the drawer slides over the report; on a phone it is the screen, with the x and Back.
+
+## 24. An inbox: a list and the item it opens
+
+Seth's Grow review inbox (Figma 313:2671).
+
+- **The thread header** (recipe 4), then one three-column grid, 8 apart, in the wide body
+  (`ws-app-shell__body ws-app-shell__body--wide`); the list and the item are `ws-list-detail ws-list-detail--apart
+  ws-list-detail--fill`, so the list scrolls inside its column and the item's acts sit at its foot.
+- **Three tiles across the top**: rimmed `Card`s with a foot on the tray. Each: a label (`ws-control-words`), the figure
+  (`ws-figure--tile`) with its marks beside it, and a foot saying where it came from. A source not connected shows the
+  words "Not connected" in muted words at the figure's size, and its foot is the door ("Connect Google").
+- **The list**, exactly one column wide (`ListDetail`), so its right edge meets the first tile's: a rimmed card; its head
+  holds the select-all box and the filter (`Segmented`, each item with its count); each row a status box before its
+  target, a top line (the stars, the date, the source) and the review's one line, truncated with its full words in
+  `title`. The chosen row takes the sunk ground and 600 words at the same size; the list keeps its scroll.
+- **The item**, spanning the other two columns: a rimmed card, 32 at the sides and 28 at the top and bottom. Its head:
+  the stars, the source and date, "4 of 10", Previous and Next as icon buttons. Then the quote, the agent's draft on a
+  sunk plate (its face, what it did, Edit), a spacer, the acts (the primary, then the secondary; "Mark as replied" as a
+  checkbox at the right) and one muted line on what the agent will never do.
+- **Keyboard**: arrow keys move through the list; Previous and Next move the item and the chosen row together.
+- **On a phone** the tiles stack, the list is the screen and the item is its own screen with Back.
+
 ## What every recipe shares
 
-One primary per page (navy in a product, the salmon gradient on a public page). The gutter is the canvas's. Cards rise in
-one after another on first paint (at most 6 staggered). Focus and scroll are restored on return.
+One primary per page (navy in a product, the salmon gradient on a public page). The gutter is the stage's; one content
+edge per surface. Cards settle in one after another on first paint; a dashboard's cards build in (`.ws-build`), their
+charts drawing as each card lands. Focus and scroll are restored on return. Every
+recipe works at 320, 390 and 1440, light and dark, and under reduced motion (Checklist).

package/design-system/12-content.md

@@ -17,7 +17,8 @@ no "Oops", no jokes in an error.
 - No trailing period on a title, a label, a button or a chip (a public two-beat headline may stop each beat with one); a
   full sentence under a title ends with one.
 - **No em dashes and no emoji anywhere a person reads**, including model output. Use a comma, a colon, a full stop or
-  parentheses.
+  parentheses. A dash never stands in for a missing value either: leave the figure out and say why in words ("Could
+  not check", "Not connected").
 - A middle dot separates short facts in a meta line ("Cold call · 6 min").
 - Numbers as digits (3, not three) except at the start of a title ("Three of seven reached out").