@felloinnovations/brand-kit 0.4.0 → 0.5.0

package/design-system/17-decisions.md

@@ -128,7 +128,7 @@ Where the system was broadened beyond its first product. Each row is a rule chan
 
 ## Open, for the owners to rule (27 Oct 2026)
 
-1. **`KitInput` is 40 px tall** against the public page's 44 px floor for acts. Interim: fields stay 40 with their label
+1. **Resolved 4 Nov 2026** (kit 0.5.0: 44 px with 16 px words on touch). **`KitInput` is 40 px tall** against the public page's 44 px floor for acts. Interim: fields stay 40 with their label
    above; every button and link that acts is 44 or more.
 2. **A field's edge** (#D3D3D3 at 0.5 px) is about 1.5:1 on white, under the 3:1 this system asks of a meaningful edge;
    the white ground on the cream adds almost nothing. Options: a darker field edge token, or rule that the label and
@@ -138,3 +138,359 @@ Where the system was broadened beyond its first product. Each row is a rule chan
 4. **The website's dot grid** (a 24 px pitch) has no token; `ws-dots` is the product's chart field.
 5. **`color-text-primary`** (#353E5A) is named the kit's marketing body colour, while the kit's house rules and the website
    use `color-text-body` for body copy. This system uses `color-text-body`; whether the other stays is the owners'.
+
+## Rulings added 4 Nov 2026 (kit 0.5.0)
+
+Set for the 0.5.0 upgrade while Amit was away, each open to his veto. The designer is Seth. His sources: six Fia frames in
+Figma file biC5oQ7r5wApQRwYyObyMY (the Grow report 301:1630, its platforms view 305:2280 and hover 305:2143, Fixes
+308:2466, the review inbox 313:2671, the Tally report 319:3302) and his North app (cited `css:<line>` for its style1.css
+and by the name of its motion config). The field: GitHub issues #5 to #12, Ignite's shipped overrides, the Campfire
+shared bundle and Aryan's Revenue OS mockup on 0.4.0.
+
+| Date | By | Decision | Where it bites |
+| --- | --- | --- | --- |
+| 4 Nov 2026 | Amit (via Claude, open to veto) | D1: Seth wins every conflict on layout, spacing, sizes, structure, radii, surfaces, motion and component anatomy. Each kit rule he overturns is logged below with its source | every chapter, every component |
+| 4 Nov 2026 | Amit (via Claude, open to veto) | D2: words stay WCAG AA (4.5:1; 3:1 at 24 px or 18.66 px bold). Marks keep Seth's exact tone; a word in that tone takes its AA step on the ground it sits on (cream, white, the tray, the plate and the rest). Never a word below AA | Colour, Type, every word token |
+| 4 Nov 2026 | Amit (via Claude, open to veto) | D3: build from Seth's base values on the grid (16, 12, 40, 32), not Figma's scaled fractions (17.5, 13.12, 43.74). North's 72 px bottom inset is its tuning panel's timeline: the stage sits 13 from the top and 12 from the right and the bottom | Space and layout, the frame |
+| 4 Nov 2026 | Amit (via Claude, open to veto) | D4: the scale gains a token only for a value Seth uses in two or more places (2, 6, 10, 14 as half steps); a one-off snaps to the nearest step. The Fixes and Inbox frames' nudged chat layer is a slip: the gutter is 32 both sides, as Tally shows | Space and layout |
+| 4 Nov 2026 | Amit (via Claude, open to veto) | D5: the product card is Seth's rimmed construction: the #EDEDED tray as a 1 px rim, concentric corners (8 and 7; a drawer 12 and 11), the cream surface, an optional foot on the rim, rows joined by 0.5 px full-width dividers, no outline and no shadow at rest. The class names stay | Card, every component built on it |
+| 4 Nov 2026 | Amit (via Claude, open to veto) | D6: type gains Seth's steps: figures 96/96, 44/48, 32/38, 28/32; control words 13/18 medium; section and row titles 15/22 semibold, row names 15/20 medium; descriptions 14/20; 11/13 sub-lines only where they pass AA | Type |
+| 4 Nov 2026 | Amit (via Claude, open to veto) | D7: motion follows North's tuned config: role-named durations, curves and springs; hover is a colour, never a lift; opens grow from their slot, then details settle; loading is a shimmer in the chart colours over ghost shapes. Under reduced motion everything is still; North's gaps there are a prototype's, not the rule | Motion, every component's motion |
+| 4 Nov 2026 | Amit (via Claude, open to veto) | D8: focus is a 2 px navy outline 2 px outside on `:focus-visible` everywhere (North's rule); inside a dense row or a clipped container, an inset 2 px navy ring. Never `outline: none` without a visible replacement | Accessibility, every control |
+| 4 Nov 2026 | Amit (via Claude, open to veto) | D9: Seth's v7 Tally ring is canonical (radial ticks, a key) for issue #6; GoalBars (#5, #11), TickRow (#7), the Chip Example tag (#8), the product tile row (#9), the snug chart card (#10) and the first-open recipe (#12) are all done | Ring, GoalBars, TickRow, Chip, Tile, Card, Page recipes |
+| 4 Nov 2026 | Amit (via Claude, open to veto) | D10: rating tones: strong is teal, needs work is Seth's pink #F370A4 as a mark (its words #B42D68, Ignite's AA step), the middle band ("getting there") is mid blue, the kit's working and secondary meaning. Salmon stays "needs you" for acts and alerts | Colour, Charts |
+| 4 Nov 2026 | Amit (via Claude, open to veto) | D11: `fello.css` stops leaking: every rule in the kit's cascade layers nested in Tailwind's (`theme.fello`, `base.fello`, `components.fello`); resets touch only kit elements; `fello.scoped.css` and a JS string (`@felloinnovations/brand-kit/scoped`) put everything under a `.fello` root; Tailwind's radius names stay the host's; shadcn-compat comes in the host's colour format | How Claude decides, AGENTS.md, brand-adopt |
+| 4 Nov 2026 | Amit (via Claude, open to veto) | D12: a dark theme, opt-in: night by default (gtm-ai-impact's), the navy ground by `data-ground="navy"`, on with `data-theme="dark"` or `"system"`; a page that sets nothing stays light. Brand colours stay literal; semantic tokens carry the swap; every pair AA, computed | Colour, every component |
+| 4 Nov 2026 | Amit (via Claude, open to veto) | D13: every kit fault in the Revenue OS audit (K1 to K17) and every confirmed geometry finding is fixed in the kit | Scrolling, Space and layout, the house styles |
+| 4 Nov 2026 | Amit (via Claude, open to veto) | D14: the catalog previews are the test bed: each shows its default, hover and press where they matter, long labels, empty, loading and error where it has them, and passes the geometry check at 320, 390 and 1440 | Checklist, every preview |
+| 4 Nov 2026 | Amit | D15: palettes, one kit for many apps, each with its own slightly different colours. A palette sets only the contract: 33 existing semantic tokens in `design-tokens.json` ("palette"), each with a group and a meaning; everything else derives from them and recomputes inside the element that sets the palette. Palettes are named for how they look, never for an app: `default` (no attribute), `cool`, `warm`. They work on any element, light or dark, nested either way, in `fello.css` and the scoped build, and never change layout. Component styles hold no colour literal (`build-bundle --check` fails on one). `check-palette.mjs` gates every palette, the built-ins in CI and any app's own file: contract only, every word AA on every ground, the focus ring and the act fill 3:1, chart tones CIEDE2000 10 apart, in light, night and navy. The first product's shipped tally navy (#093555) is 7.4 from the default's #2C4870; Seth's tally #2C4870 wins (D1) and the product adopts it, so it has no palette of its own | Palettes, Colour, every component, tokens.md, AGENTS.md, brand-adopt |
+| 4 Nov 2026 | Amit (via Claude, open to veto) | D15, how a palette holds everywhere. Every colour a component paints follows the contract, in light, night and the navy ground. An app ships its palette as `check-palette --emit` writes it (the built-ins' own form), so it nests anywhere (`<html>` or any container, either way round with a theme, light or dark, both builds) and load order no longer matters: the kit's contract values sit at no specificity. A contract token the kit derives (the focus ring from the heading, the raised ground, the alert and positive words, the rating and agent tones) recomputes on a container unless the palette sets it. A dark value left out falls back to the kit's derived dark, never the light value. The dark tints and fades are their tone over the dark page (within CIEDE2000 3.5 of the old literals), so an app's dark page moves them; the dark alert tone #FF5A5A became #FF5470 (CIEDE2000 6.1 from salmon, a chart could not tell them apart; now 12.3). New tokens carry what was constant: `--ws-ink` and `--ws-shade` (washes, rings, drops), `--ws-inverse` and `--ws-on-inverse`, `--ws-control-off`, `--ws-shimmer-ground`, `--ws-glow-rose`, `--ws-glow-pink`, `--ws-glow-blue`, `--ws-orb`; `--ws-ink-rgb` and `--ws-shade-rgb` stay as legacy and do not follow a palette. Kit aliases: `--color-border-default` is `--ws-edge`, the hairline `--ws-edge-card`, `--color-stat-positive` `--ws-chart-finished`, `--color-text-brand-strong` `--ws-word-needs`. The exception on `:root`: the chart fades, tints and empty cell are literal there (SVG gradients cannot blend in sRGB) and derive on every palette or theme element, so a bare `:root { --ws-chart-under-half: X }` override without `data-palette` no longer moves them. Still not movable, by ruling: the Toast, the note tip and the footer keep the brand navy with white words in dark (D12); `KitButton`'s salmon and navy acts and the `Cover` logo; the navy ground's fields. Proof: `check-palette` finds a leftover statically (its self-test plants one), and `check-scope` runs the poison test in CI (`scripts/palette-poison.mjs`: each contract token set wild on `<html>` and on a container around every preview, light and dark; 0 stale, 0 leaked, 0 constant) | Palettes, Colour, tokens.md, AGENTS.md, the skills, Toast, Tooltip, Footer, Switch, StatusScreen |
+| 4 Nov 2026 | Amit (via Claude, open to veto) | Wiring, refining the 27 Oct row: an artifact inlines `fello-core.css` (unlayered) and the blocks of the components it uses (`Starter`), never the whole `fello.css`: at 0.5.0 that is over 400 kB and layered, and in an artifact its base layer loses to the page's own unlayered `body` rule. A page links the pinned `fello.css`; an app installs the package | How Claude decides, README, the skill |
+| 4 Nov 2026 | Amit | White words on every salmon button (`KitButton` primary and the React `Button` primary), as fello.ai draws them: "it should be white on salmon... the salmon button should not have dark text." Reverses the D2 navy words. White on the gradient is 2.44 to 2.65:1, so this is the kit's one logged exception to D2: the act is large, semibold and a few words long. | colour |
+
+## Kit rules overturned for 0.5.0 (4 Nov 2026)
+
+One row per kit rule that Seth's work (or a later ruling) overturned, by Amit (via Claude, open to veto) under D1 unless
+the row says otherwise. Where a drawing breaks a firm rule (words AA, no em dashes, nothing under 11 px, nothing on hover
+alone), the firm rule holds and the new rule says how.
+
+### Colour
+
+| Old rule | New rule | Source |
+| --- | --- | --- |
+| Muted words are #6E6E6E (AA on the cream) | Muted words are #666666 (`color-text-muted`), AA on all eight grounds; #6E6E6E stays the placeholder. Seth's #7F7F7F, #8A8A8A, #929292 words map to it (D2) | Ignite's #666666; 301:1638, 313:2705, 319:3542, css:163 |
+| Needs-you and under-halfway marks are salmon; no other warm tone | A "needs work" rating tone: pink #F370A4 marks (`ws-chart-needs-work`), #B42D68 words (`ws-word-needs-work`), its tag on `ws-tint-needs-work` (D10) | 301:1733, 301:2018 |
+| Teal is for marks only; positive words #09787F | Positive words are `ws-word-positive` (#09717A, AA on every ground); Seth's teal words keep his hue at that step (D2) | 301:1723, 308:2623, css:84 |
+| Navy fills only the thumb, a selected toggle and the one button | Navy also fills a checked box, a count in the nav, the tooltip's navy note and a floating message (a toast, a selection's ask); still no navy chips or badges in content | 305:2273, css:482, css:679, css:683 |
+| Tick strips carry the salmon to purple to teal goal gradient | A strip that shows a rating or a count is one solid tone; the gradient stays on `GoalTicks` and `TickRow`'s gradient form | 301:1671, 301:1732, 305:2323 |
+| An empty tick is cream with a 1 px #E2E2E2 edge | An empty tick is the track (`ws-track`), no edge | 301:1708, 301:1749 |
+| No gradient text anywhere | Two exceptions in the chart colours: the status line's word while an answer works and the loading shimmer (D7). North's Ask sheen and conic glass are not taken | css:1458-1475 |
+| Contrast measured on the cream alone | Every word token computed on eight grounds in light, night and navy; the build stops on a fail (D2) | dark-tokens; the generator |
+| Dark mode is a decided no | Dark is opt-in (D12) | Amit's 0.5.0 brief; gtm-ai-impact, Ignite and Usher's shipped dark |
+| The product is flat: an edge, not a float (in every theme) | In dark, floating things sit on `ws-raised` with a 0.5 px light rim and a black shadow; cards stay flat | gtm-ai-impact ds-dark.css |
+
+### Type
+
+| Old rule | New rule | Source |
+| --- | --- | --- |
+| The product never goes above 72 px | A report's score is 96/96, -3% (`ws-figure--score`), one per report; Tally's 90/100 takes the same step | 301:1670, 305:2321, 319:3319 |
+| One 72 px number per card; a second big number is a second card | One hero figure per card or report; rows (28/32) and a pane (44/48) carry their own figures beside it, each in its column | 301:1773, 301:2026 |
+| A big figure is 40/40 | Adds a tile figure 32/38, a pane figure 44/48 and a row figure 28/32; 40/40 stays the stat figure | 313:2691, 308:2484, 301:1773 |
+| A row's title 14/20 semibold; a button's words 14/16; a section 16/20 | A row's name 15/20 medium; control words 13/18 medium; a section, a finding and a column name 15/22 semibold (D6) | 301:1731, 301:1647, 301:1727 |
+| Nothing under 11 px; 11 only for an axis letter | Still nothing under 11; an 11/13 sub-line under a name or figure is allowed where it passes AA. North's 9.5 to 10.5 px heads, counts and notes take 11 | 319:3542, css:38, css:707 |
+| The home greeting is 24/32 | A dashboard home's greeting takes the hero step, 40/48 (North's 40 on a 33 line); the chat-first home keeps 24/32 | css:102 |
+
+### Space, layout and surfaces
+
+| Old rule | New rule | Source |
+| --- | --- | --- |
+| A 4 px grid with named gaps | The 4 px grid plus the half steps 2, 6, 10, 14; every other value snaps (D4) | 301:1644, 301:2016, 301:1633, 308:2502 |
+| The page gutter is 24 on every side and the page is centred | An app page in the stage: 32 at both sides, the content 16 under its 56 px header, left-anchored, filling the stage. North's 43 right and 50 top snap to the one gutter (D4). A single `Page` takes the same 32 (16 on a phone) | 301:1630, 319:3316, css:96 |
+| The shell is the grey with 8 px padding and gap; the stage cream with a 0.5 px outline | The frame gradient (`ws-frame`), a glass stage (`ws-glass`, a 4 px blur), a 1 px edge, 16 corners, 13 from the top and 12 from the right and bottom (D3) | css:12-14, css:22, css:76-78 |
+| The app page's bar is 56 with its name at 26 px; no page heading in the canvas | The thread header is 56 with 32 sides and the page's name at 16/22, the app's name beside it, "Back to the chat" at the right; a page may carry a hero and area headings in its canvas | 301:1632, 308:2468, 319:3317, css:405-408 |
+| A card is the cream with a 0.5 px #D3D3D3 outline | The rimmed card (D5) | 308:2506, 313:2687, css:128-133 |
+| A card's band is 80 tall with 28 px sides and an inset shade | A rimmed card's foot sits on the tray: one line, no fill or shade of its own; the band stays for a chart card's one act | 313:2703, 319:3404, 319:3533 |
+| A hairline between rows is 1 px | Dividers are 0.5 px (`ws-divider`) and full width; the two beside a selected inset row drop | 301:1729, 308:2507, 319:3546, css:195 |
+| Proximity before lines: the line between groups is the gap | Still the default; a rule between groups where it orients (the sidebar's groups, a chat's topics, a report's lanes) | css:33, css:607, css:1020 |
+| Hover is the sunk surface | Hover is a navy wash (.03 a row, .05 a nav or menu row, .06 an icon button), an outlined edge darkening, a rimmed card's rim darkening | css:198, css:54, css:29, css:81, css:268 |
+| Corners 1, 2, 4, 6, 8, 12, 16 | The same ladder as literal lengths, with the card's inner 7, the drawer's and the dialog's 12 and inner 11; North's 10 for a menu (8 + 2, his menus, flyouts and panels) and 14 for the chat bubble (12 + 2, a 4 px tail corner) are kept, as is his 18 px toast pill; the 3 px day cell snaps to 4 | css:130, css:308, css:554, css:644, css:657, css:679 |
+| Floating things lift on two positive layers (`ws-shadow-lift`) | One family of single soft drops: `ws-shadow-pop`, `-menu`, `-tip`, `-float`, each with a light rim in dark | css:87, css:209, css:388, css:657 |
+| Only menus, popovers, tooltips, dialogs and toasts lift | Also a tile opened out of its slot and a floating chat (`ws-shadow-float`); North's lifting brief rows are not taken | css:886, css:511 |
+| Inside a card, a pane or a dialog: 20 at the sides | 20 stays the card's inset; a drawer's sections are 28 at the sides and 20 top and bottom; a tile 16; a report's item card 32 and 28 | 301:2013, 313:2926, css:270 |
+| Rows are 32 to 40 tall | A list's rows follow their content (28 in the sidebar, 48 in a matrix, 56 for checks) and share one min-height within the list | css:47, 305:2357, 301:1729 |
+| Board columns 556; four stat tiles from `lg`, two below | Boards keep 556; a page may use the design's fixed columns (`Split`); tiles go four, two or one by their own width, five or six three across | css:180, css:263-264, css:818 |
+| Buttons in a band or a dialog foot sit right | In a drawer two acts may fill the width as equal halves, the primary last; in an item's act row (the inbox) the primary comes first, as drawn | 301:2099, 313:2957 |
+| A big number is pulled 4 px left | Align the ink: pull a big figure until its glyph meets the edge, measured per size (Seth's 96 needs none) | 301:1669, css:697 |
+| Container steps at 40, 48, 60 and 76 rem | Components switch where their content stops fitting; North's 820, 940 and 1120 px (a page) and 470 (a chat card) are where his layouts switch; the named areas stay | css:224, css:734, css:1056 |
+| Filters live inside the one chart or list they filter | A page-level `FilterBar` for a period or a scope, docking into the bar as the page scrolls | css:417, css:802-812 |
+| Home: the greeting, the composer, Needs you, starters; no dashboard | A dashboard home is a recipe beside the chat-first home | css:255-306 |
+| A chosen thing opens in a side pane the panel's width | An inbox's item spans two thirds of the page on the tiles' grid (`ListDetail`); a report's check opens in a 440 drawer 24 beside it | 313:2925, 301:2011 |
+| Charts never scroll; nothing scrolls sideways | A wide heatmap may scroll sideways inside its own card; the page never does | css:901, css:1086 |
+
+### Components
+
+| Old rule | New rule | Source |
+| --- | --- | --- |
+| Segmented: a cream track with the hairline, 28 px items, 12 px words | Segmented gains Seth's well track (items with a figure, 13/18 words, 32 or 40 tall) and his edgeless filter track; the thumb stays navy | 301:1658, 313:2737, css:804 |
+| Tooltip: one line, a cream card, centred, no caret | Tooltip gains the navy note (a cell's full words, wrapping, a caret, left-anchored); a chart's reading is `HoverCard` (eyebrow, title, rows, a caret, edge-aware) | 305:2272, css:208-220, css:386-398 |
+| Button: 4 px corners, 14 px words, an 8 px icon gap; primary hover dims to 90% | 6 px corners (a button and a square icon button, as Seth's Grow, Fixes and Inbox frames draw; North and Tally's one act draw 4; fields, tags and checkboxes keep 4); control words 13/18 and a 6 px icon gap; a pane's acts 40 tall; primary hover goes a shade brighter with a soft light under the pointer, no lift | 301:1644, 308:2514, 313:2941, 313:2957, 319:3347, css:355, css:1430-1455 |
+| The secondary button is cream with the hairline | A quiet secondary on the tray grey with no edge joins it; words on the navy fill are `ws-on-act` | 301:2100, 308:2514 |
+| IconButton is a disc | A square on the tray grey for a close, previous and next; the round voice button stays round | 301:2021, 313:2941, css:28 |
+| A panel closes with the word Close | `Panel` and `Dialog` close with a labelled x: a 32 px square on the tray (6 px corners, a 16 px navy x) on the title's first line; the word Close is gone, beside the chat too | 301:2021 |
+| A panel docks to the edge with a hairline, a lift and an eyebrow head | `Panel` gains the rimmed drawer: floating inside the stage, 12 and 11 corners, no shadow, its head the title, a tag, a line and its figure | 301:2011, 301:2013 |
+| The Well: 4 px inside and 4 px apart; the only grey plate of cream rows | The Well's rows sit 2 px in and 2 px apart; rimmed lists of rows joined by dividers are the rimmed `Card`'s | 15:708 via Ignite, 301:1728 |
+| A chip: 2 px corners, 12 px words | Every chip (a rating's tag too) has 4 px corners and 13/18 words; the tones add middle (mid blue), needs work (D10) and the dashed Example mark (issue #8) | 301:2018 |
+| The composer is the one box, never in a pane | A drawer may carry the compact ask field (`Composer`'s compact look); it asks the same chat | 301:2105 |
+| A table: a 32 px head, 40 px rows | A yes or no grid is `Matrix` (one template for head and rows); ratings and fixes are `CheckRow`s; `Table` keeps records | 305:2342, 301:1729 |
+| A fold row: 16 at the sides, a 12 px muted chevron; open changes only the chevron | Inside a rimmed list a row takes the list's insets and a 16 px navy chevron; an open row fills sunk, its act turns primary, its detail starts on the words' column | 305:2405, 308:2508, 308:2528 |
+| Checkbox: 16 px, 2 px corners, a 1 px grey edge | 18 px, 4 px corners, a 1.5 px navy edge at rest (3:1); Seth's grey status box is not taken (1.45:1) | 308:2509, 313:2746 |
+| A selected row: the sunk tint and a 2 px navy inset bar | A selected row is its ground and its weight only; its words never grow (Seth's 14 to 15 px is not taken) | 313:2799 |
+| TickRow: one size, gradient only | `TickRow` gains fine (6 by 18) and tall (10 by 28) ticks in one tone; full-width strips are `TickStrip` | 313:2711, issue #7 |
+| GoalBars' count sits in a 56 px box | One grid; the count column as wide as its widest count | issue #5, Ignite GoalBars |
+| The week-split ring: 72 ticks, 200 px | Seth's v7 Tally ring (D9) | issue #6, 282:1101 |
+| The band button is the house large (open item 7) | Resolved for Seth's band button (15 px words, wider sides, 6 px corners), sized on the scale in Card's README | css:733, css:2004 |
+| Kbd: a pill with a 1 px edge on the sunk cream | North's key: 4 px corners, a 0.5 px edge, white, 11 px medium navy | css:601 |
+| Menu: 8 px corners, 14 px items, sunk hover | Items 13 px medium with an 11 px sub-line, 6 px corners, the `ws-hover` wash | css:657-660 |
+| The sidebar: 32 px navy rows, the current row a wash, a needs-tint count, uppercase group labels, no flyouts | North's sidebar: 28 px rows 2 apart, the current row a sliding white pill, a navy count, sentence-case group heads that fold, the folded rail's groups flying out (on focus too); folded to 64; words AA, nothing under 11 | css:24-73, css:531-560 |
+| Fields take the mid-blue focus edge; the composer a live ring | Every field shows the 2 px navy focus ring (D8); North's ring-less chat field is not taken | css:1408, css:2120 |
+| The focus ring is a 3 px salmon halo at 20% | A 2 px navy outline 2 px outside (D8) | css:17 |
+| The chat: one 656 column, a 56 header, turns 22 apart, the person's bubble sunk with 12 corners, the agent 15/24 | `ChatShell` and `ChatTurn` take North's chat: a docked column, a wider full-screen reading column, a shorter header, wider turns, a white bubble with a tail corner; values on the scale in their READMEs | css:644, css:652, css:1299-1372 |
+| StatTiles: a 3 px tone stripe, a 12 px label, 40/40 | Seth's tile: no stripe, rimmed, a 13/18 label, the figure, a foot on the tray | 313:2686, css:262-280 |
+| Select: 32 px, white, a muted chevron | A chip select for a filter inside a card: cream, a 0.5 px edge, 12 px words, a navy chevron | 319:3460 |
+| Chevrons are muted grey | Chevrons are navy, a 1.5 px stroke | 301:1775 |
+| A section's title is 14 px, 12 above its body | `Section`'s title is 15/22 semibold with its count inline (13/18 muted, 10 after it), 12 above its rows; an area heading over a page's cards is a `ws-title` (22/28), 10 above its card | 308:2502, 308:2611 |
+
+### Components, from the build packages
+
+The rules the eight build packages logged that the tables above do not already carry, deduplicated against them (4 Nov
+2026, Amit (via Claude, open to veto), under D1 unless the row says otherwise). Each component's README has the values.
+
+| Old rule | New rule | Source |
+| --- | --- | --- |
+| TopBar: a hairline under the bar, always | The bar's edge shows only once the body scrolls under it (`__bar--scrolled`) | css:79, css:109-112 |
+| Section rows: a 1 px rule, 8 px sides, 6 px corners | Rows on the title's edge, joined by 0.5 px dividers, no sides or corners of their own | 301:1725, 308:2611 |
+| Breadcrumb: 13 px mid-blue links, 12 px chevrons between them | 14/20 body-grey links, a muted "/" between them, the current page navy medium; 28 px hover boxes bled 6 px with the navy wash; the root never shrinks | css:791-796 |
+| PageHero: 16 px lines, columns 40 apart, sized from the nearest page or area | It measures itself: a 40/48 headline and two columns 64 apart from 60 rem of its own width; lines 14/22, words 6 apart | 319:3317; K3 |
+| A page inside `AppShell` is a `.ws-page` (the two READMEs disagreed) | The shell's body is the page: its gutter, gap and size container; no `.ws-page` inside it | K3 |
+| Dialog: 8 px corners, the lift shadow, its content clipped, head and content 20 from the sides | A 1 px tray rim, 12 and 11 corners, `ws-shadow-float`, one 28 px inset for the head, content and foot; nothing clipped (the foot rounds its own corners) | 301:2011; K4, K9 |
+| A drawer is flush to the window's right edge, full height, square | It floats 12 in from the window's top, right and bottom, with 12 px corners; the whole screen below 40 rem | 301:2011; K5 |
+| A centre dialog rises 6 px from 98%; a drawer has no motion | A dialog rises 14 px out of .98 over `settle` and leaves 8 px over 120 ms; a drawer slides from its edge; the scrim fades | North's config |
+| A panel has no exit | `--leaving` (or `data-leaving`) runs its open backwards over 120 ms | North's config |
+| Popover: 12 inside on the lift shadow, no placement rule | The hairline and `ws-shadow-pop`, 200 to 300 wide, 8 from its control, right edges flush, flipping to stay on screen, in the top layer | css:87; K9 |
+| Tooltip: a cream card, 8 px corners, 8 inside, 4 above, centred | 6 by 10 inside, 6 px corners, the hairline and `ws-shadow-tip`, 8 above; shown on hover (after 40 ms) or keyboard focus, never at rest; start, end and below placements; Escape dismisses it | css:386-398, css:484-486 |
+| Toast: a white card, a 1 px border, 4 px corners, a filled action | A navy pill: the act fill with `ws-on-act` words, 18 px corners, 8 by 14 inside, 13/18 words, `ws-shadow-pop`, its act as underlined words; it rises 8 px out of .96 | css:679 |
+| Table: a 32 px head of 12 px muted labels; 40 px rows with no padding; the first column 12 in | Head and body rows at least 40, every cell 8 above and below; head labels 13/18 medium muted; the first and last cells on the card's 20 px edge | K8; D6 |
+| Leaderboard: the name a fixed 108 px box, the score 34 | One subgrid: the name column up to 40% (at least 108), the score column as wide as the widest score, every bar the same length | K13 |
+| Kanban and Timeline group heads are 12 px uppercase eyebrows | Sentence case, 13/18 medium (Kanban: a navy title and a muted count; Timeline: a muted day) | 301:1660 |
+| ActionList: the title 14 medium, the reason 13, parts 12 apart | The row's name 15/20 medium, the reason 14/20, parts 16 apart | 308:2466 |
+| A dragged kanban card lifts on `ws-shadow-lift` | `ws-shadow-pop`, which carries the dark rim | North's shadows |
+| A button never wraps, even when its label is wider than its whole column (it runs out of it) | One line by default, never shrinking beside its row's words; a label that can be wider than its column opts in with `ws-btn--wrap` (balanced lines; a link, text or ghost reads from its start). A wrap-by-default draft was reversed in QA round 1: buttons in table cells and fact rows broke into one-word columns | the geometry check at 320; QA round 1 |
+| A ghost button forces 8 px sides | It takes its size's padding | Ignite controls.tsx:52-53 |
+| A pending button's dot sits in the flow, so the button grows | The dot sits in the left padding; the size and the words stay put | Ignite pending.tsx |
+| Word acts (link, text) are 24 px tall at every pointer | 24 px on touch only; on a mouse the words alone, which pass WCAG 2.5.8 by spacing | the geometry check: a 24 px box round a 20 px line put every head 2 px off |
+| North's buttons are 34 tall with 20 px sides | Not taken: Seth's Fia frames' 32 and 40 sit on the control ladder | css:355 (D3) |
+| Segmented's count is a small pill at 70% | The count is the item's own words, 8 after the label | 313:2737, 301:2069 |
+| Badge: 2 px corners, 16 tall, two tones | An 18 px pill with a navy count tone; a corner badge stays 16 with a 2 px ring of the page | css:482 |
+| Radio: 16 px with a 1 px grey edge | 18 px with a 1.5 px navy ring, as Checkbox | Seth's checkbox (D1) |
+| Switch: a cream track with the hairline, 120 ms, the thumb off-centre | A filled track: off #7F7F7F (Seth's #DCD6CF taken to 3:1), on navy; the thumb centred; the track over 200 ms, the thumb 320 on `grow`; `--sm` is North's 28 by 16 | css:2049-2052 |
+| A field's error edge is the raw salmon, its edge drawn outside | A 1 px error edge in the AA salmon step (`ws-word-needs`); the edge drawn inside, darker under the pointer | D8; North H2 |
+| DateInput's today is a 0.5 px salmon ring (2.6:1) | A 1 px ring in the AA salmon step; days touch within a row, so a range reads as one band | the 3:1 floor for marks |
+| PasswordInput's strength runs a salmon to teal gradient | One tone a level: weak salmon, fair and good purple, strong teal; the eye button drops `aria-pressed` | 301:1671 |
+| North's page switches at 820 and 1120 px | `FilterBar` snaps them to the kit's 48 and 76 rem steps | D4 |
+| Meter's track is a pill | A 4 px track with 2 px corners; a seat row puts the name and value above the track and a caption under it | 319:3426-3432 |
+| Ticks have 2 px corners | 1 px (`ws-radius-bar`) | 301:1732 |
+| GoalTicks' caption sits 14 px off the baseline; StatTiles' chip on neither line | A caption, a chip and a unit share the figure's last baseline | the geometry check (StatTiles, GoalTicks) |
+| A selected card has a 2 px navy ring at 55% | Its rim darkens and a 2 px navy tab sits 8 under the card, 16 in from each side | css:1032-1033 |
+| A card's list rows: a 1 px cell edge between rows, 16 at the sides | Rows at least 48, joined by full-width 0.5 px dividers, 20 at the left and 16 at the right; the open row takes the sunk cream | 301:1729; K17 |
+| Plate: 12 all round, its facts centred against each other | 14 by 16 inside; facts on the baseline with the value right-aligned; label-over-value stats; a cream foot inside a 1 px sunk rim | 301:2080-2093; K17 |
+| Tile: clipped, its figure 24/28 semibold | Not clipped; the figure 32/38 regular (Seth's tile figure); a product tile row joins tiles on the tray, 1 in and 2 apart (issue #9) | 313:2687; K1, K9 |
+| Composer: one fixed 52 px box with the app's lead; round 32 px tools | A field that grows from 52 with its tools on the bottom line; no lead by default (it stays a variant); square 36 px tools 2 apart before the round act; a context tab on top; a 40 px tray-grey look for panes; words 16/24 (Seth's 16/22 snapped to the grid) | css:1376-1392, css:1553-1560; 301:2104 |
+| A drawing, or a comparison of three or more rows, goes whole into the side panel, never the chat | A chart answer may sit in the chat as a `ChatCard` at most 556 wide: 20 inside, a full-bleed dotted graph, 44 px breakdown rows, an 80 px tray (64 under 470, its second line hidden), North's 0.5 px edge on the glass | North 733:325166; css:688-733 |
+| North's thread is 22 in beside an 18 px head | `ChatShell`'s thread and head share one 20 px content edge; the head's right edge is 12, as the composer's | D3: one content edge |
+| North's status word shimmers through navy, coral, purple and teal over a #8A8A8A step | The shimmer passes only through the AA word steps and the step is `color-text-muted`, so no letter is ever under AA | css:1471-1475; D2 |
+| `KitButton` has fixed heights and never wraps | 45, 36 and 28 are floors; a label too long for its column wraps to two balanced, centred lines | the geometry check at 320 |
+| `KitButton` medium and small miss the public 44 px floor | On a coarse pointer they keep their look and take a 44 px hit area | Accessibility; the geometry check at 390 |
+| White words on the salmon `KitButton` (2.44 to 2.65:1) | Navy words (4.79 to 5.21:1, Ignite's onAccent pair), literal in every theme. A visible brand change, made under D2. Reversed 4 Nov 2026 by Amit: white words, see the log | D2 |
+| `KitButton`'s hover deepens the shadow; clean hover turns the words salmon | Primary and navy brighten 4%; navy and shadowed buttons also deepen their shadow; clean underlines; tertiary fills navy with `ws-on-act` words; a press still drops 2 px | D2, D7 |
+| `KitInput`: a salmon edge and halo on focus; 40 px with 14 px words on every pointer | The house ring, the edge unchanged; on touch 44 px with 16 px words (no phone zoom); error words `color-text-error-strong` | D8 |
+| `KitCard` tinted is gray-1; an interactive card raises a shadow on hover | Tinted is `ws-surface-sunk` in both themes; an interactive card takes the hover wash, never a shadow | the dark theme; D7 |
+| `MarketingNav` folds only with `--phone`; a 40 px menu button and 36 px links on touch | It folds by itself below 60 rem (`--phone` still forces it); the CTA stays in the folded bar; the menu opens a sheet of 44 px rows; button and links 44 on touch | the geometry check at 390 (316 px sideways scroll); Public pages |
+| `Hero`'s headline is 56/64 at every width, with 48 px phone margins | Below 40 rem: 40/48, 16 px margins, its acts full width and stacked | the geometry check at 390 |
+| `Stat`: a 10 px label, salmon words for the brand tone, a 28 px value at 1.05 | A 12/16 label; the brand tone `color-text-brand-strong`; the value 28/32 in CSS and React; pending a shimmer ghost | Sizing profiles; D2, D6, D7 |
+| `PricingTable`'s "Most popular" badge sits in the plan's flow | It sits on the plan's top edge, so name, price and list line up across the plans | screenshot review: the plan's rows 34 px low |
+| `Footer` links take the navy ring | The footer turns the ring white on its band; 44 px link rows on touch; two columns from the left on a phone | D8; the geometry check at 390 |
+| `Testimonial` is a div and a p, the person right after the quote | `figure`, `blockquote` and `figcaption`, the person pinned to the card's foot; the avatar on `ws-surface-sunk` with navy initials | Accessibility (native first) |
+| The React `Checkbox`, `Radio` and `Tabs` choose in salmon; the `Toaster`'s act is salmon with white words | Chosen is navy with the tick in `ws-on-act`; `Tabs` a navy 2 px rule; the `Toaster`'s act the navy pair on `ws-raised` | the Checkbox and Radio READMEs' reported gap; Toast |
+
+### Motion
+
+| Old rule | New rule | Source |
+| --- | --- | --- |
+| Soft everywhere, no overshoot | Curves by role (settle, grow, shift, morph, sweep, commit, shimmer); overshoot curves only on marks under 24 px and indicators; Seth's springs keep their small bounce | North's config; css:1096-1106 |
+| One working beat (1.2 s); nothing else loops | Working loops at 1 s, the status word at 1.6 s, a shimmer at 1.8 s, at most one 6 s ambient sheen; nothing that carries data loops | css:1449, css:1461, css:1473, css:1635 |
+| No UI motion over 400 ms | Budgets by role: grow 550, shift 550, morph 450; draws 900 in a card, 1500 in the chat, up to 2300 on a page; a page's build at most 2400, first paint only | North's config |
+| Nothing slides across the screen | A thing may cross the screen as itself (a shared element), never as a copy | css:1259-1505 |
+| A stagger only on first paint, at most 6, 30 ms | Staggers on arrival and on an open (22, 45, 70 ms by role; chart marks by share; a 4 ms hover ripple); never on a re-filter | North's config; css:1216 |
+| Hover over `instant` (120 ms) | Hover over 200 ms; a press goes in over 120 and releases over 200 | css:28, css:80, css:197 |
+| The sidebar's current row slides over 200 ms | On `springs.nav` | North's config |
+| Rows never scale; a tint | Kept, and on press too; a sidebar's hover wash may grow from the pointer. North's one lifting row and Ignite's 0.98 press (owner, 31 Oct) are not taken | css:2104-2106; Ignite design-system.md |
+| A side panel's width on `glide` over 400 ms | On `shift` over 550 ms | css:531, css:1296 |
+| A panel slides in 24 px over `settle` | A docked chat arrives at 0.97 out of an 8 px blur on `springs.panel` and the page reflows over `shift`; a drawer or the panel still comes from its own edge over `settle` | North's config |
+| Things arrive rising 6 px | Details rise 6 px out of a 3 px blur; a greeting or a placeholder drops 12; a menu comes 4 from its anchor | North's config |
+| Only transform, opacity, colour and shadow move | Also a blur up to 8 px on arrival; size and type move only in a shared-element open, a dock or a fold | North's config; css:1261-1266 |
+| Every press scales to 0.97 | A round control to 0.94 | North's config |
+| A tooltip fades in over 120 ms after a 120 ms delay | It pops on `springs.pop`, follows on `springs.follow`, stays 180 ms after the pointer leaves; a hover-opened tile waits 40 ms | North's config |
+| The skeleton breathes | A shimmer in the chart colours over ghost shapes; still under reduced motion | css:1458-1469 |
+| Rings draw over 420 ms; bars over 420; ticks over 220 | A ring fills over 900; a draw is one progress over 900 (card), 1500 (chat) or up to 2300 (page), marks staggered by share on `settle` | North's config |
+| A figure counts up from nought | A headline figure shows its value; only values inside a chart follow its draw | North's config |
+| Cards rise in, 30 ms apart | Cards settle in (`.ws-settle`), staggered; North's 1.15 scale intro is its own moment | North's config |
+
+### Charts and patterns
+
+| Old rule | New rule | Source |
+| --- | --- | --- |
+| No line chart; no stacked bars | A `StepLine` and one `ShareBar` where the designer draws them | 319:3302 |
+| Every chart is a card on the dotted field | The dots sit only behind the drawing and bleed to the card's edges; the first-open example card stands with no edge and no dots | css:1154-1160, 282:892 |
+| Empty, first use: the card with the app's face on the dots | `EmptyState` is a plain cream card; the dotted field is a chart's ground only (owner, 2 Nov) | Ignite design-system.md |
+| A StatTiles line is cut with an ellipsis | It wraps, never cut (owner, 27 Oct) | Ignite design-system.md |
+
+### Seth's drawing kept to a firm rule
+
+| Seth draws | The kit does | Why |
+| --- | --- | --- |
+| Words in raw teal, salmon, pink and greys under AA | Each word takes its AA step (D2) | words AA |
+| A long dash as a missing score | No figure: a short drawn muted rule holds the score's place (no dash character ships, its words are for a screen reader) and the status says "Could not check" | no em dashes |
+| The full question only in a hover tooltip | Also on focus and on a tap | no hover-only content |
+| Ring-less focus on some acts, tiles and the chat field | The 2 px navy ring everywhere (D8) | focus visible |
+| A falling number in red #B1042F | A falling number stays mid blue (the owner's earlier ruling); the red is the alert tone, a mark with its word | colour means something |
+| Every link in navy | A link that goes somewhere stays mid blue; a quiet act is navy, as before | colour means something |
+| The current page's nav label in coral | The coral is the mark; the words take their AA step | words AA |
+| A field's label beside it (one handoff screen) | Labels sit above fields | patterns |
+| The view tabs' thumb and Tally's tone in #2C4870 | Kept as `--ws-agent-tally` (the figure tabs' current cell, a seat meter's fill, the StepLine hatch; the act itself in dark) until Seth says it is drift (open item 3) | one token, easy to turn back to navy |
+| A list that moves above its detail by CSS order on a phone | The list comes first in the DOM, so the reading order and the phone agree | reading order |
+
+### Changed in QA round 1 (4 Nov 2026)
+
+The kit-wide QA pass after the build packages (seven reviews: two by eye, geometry, integrity, North, Seth and Revenue
+OS) changed these rules; Amit (via Claude, open to veto), under D1 and D2 unless the row says otherwise. Bug fixes that
+only made a component do what its README already said are not listed. Each component's README has the values.
+
+| Old rule (the 0.5 build) | New rule | Source |
+| --- | --- | --- |
+| A card head's aside, a close included, drops under the title when it would squeeze it | The aside (a switch, a select, controls grouped in one element such as a `ws-cluster`) drops under the title as one piece below 200 px of title; icon acts (a close, an expand) never drop: they stay top right, centred on the title's first line, and the title wraps | QA round 1: a dialog's close fell under its title at 320 |
+| Titles and sections track -0.5% | Untracked, as Seth draws them; a long title or section balances its lines. Figures keep -3%; the pane's 44 is untracked | Seth's frames (the Seth review) |
+| A stack's and a cluster's gap is `--ws-gap`, so a value a parent sets leaks in | 8 apart, the step itself; modifiers take the named gaps, and a stack adds `--block` (32, Seth's report blocks) and `--section` (56, between page sections) | 301:1657, 305:2307, 319:3302 |
+| The house styles' hovers fire on every pointer | Every hover sits in `@media (hover: hover)`, so a tap never leaves one stuck; previews picture the states with `is-hover`, `is-pressed`, `is-focus` | the geometry check's sticky-hover run on touch; D14 |
+| A band is 80 tall with 28 px sides and an inset shade | Inside a card the band is the flat foot on the tray, its words on the head's 20 px rail (snug 16); a drawer's sections keep 28 | D5; the eye review: the 28 broke every chart card's left rail by 8 |
+| Marketing pieces and React exports round with Tailwind's `--radius-*` | Every kit piece rounds with `--ws-radius-*`, so a host's shadcn `--radius` never moves a kit corner (`KitButton` large went 10 px in a shadcn app) | QA round 1, in a shadcn host |
+| In a Tailwind v4 app `fello.css` brings its own font | The Instrument Sans `@import` goes first, before `@import "tailwindcss"`, or a `<link>` in the head: compiled into one sheet, `fello.css`'s own `@import` lands after rules and a browser drops it. `check-scope` compiles that recipe and checks the face loads | the integrity review |
+| Two acts in a pane's foot stack only where a half would be under 160 | They also stack where a half would be narrower than either label on one line, so a label never breaks: full width, the primary at the bottom (`ws-btn-split`, Dialog and Panel feet) | Seth's pane foot, 301:2099 |
+| Two word acts side by side bleed their hover boxes into each other | The second keeps 4 px before its box, so their words sit 16 apart and one's focus ring never covers the other's first letter | D8 |
+| A checkbox row is a full-width line, padded to 40 on touch | The row is its label's 20 px line, as wide as its words, with a 24 px hit area (40 on touch) that moves nothing; `Checkbox --step` (14 / 20, muted once done) and `--control` (13 / 18 medium); Radio and Switch labels hug their words too | Seth's Steps (308) and "Mark as replied" (313) |
+| A switch has no hover | Off steps toward navy, on takes North's brighter navy | North's switch |
+| A field's marks (the chevrons, the calendar, the eye, the steppers) take the heading ink | They read `--ws-field-mark`, so they stay navy on the navy ground's white field instead of turning light | the dark review |
+| A long combobox option scrolls its panel sideways | It wraps; the panel caps at 8 rows and grows from its top left; a chip's remove x is 40 on touch | the North review at 390 |
+| A dialog's head and foot stay at every size while the content scrolls between them | Under 40 rem of window height or width the whole pane scrolls under its sticky head and the foot comes at the end; a drawer's foot still sits on the bottom when the content is short (K6) | the Revenue OS review: a crowded head left a third of the phone |
+| A menu or popover flips and shifts to stay on screen | Right edges flush under its control; a tall one caps to the room below and scrolls; it flips only when under 200 px fits below; wider than either side of its control, it centres in the window (K9) | the Revenue OS review |
+| A drawer's two acts are the secondary and the primary | Seth's well button (`ws-btn--well`), then the navy primary | 301:2100 |
+| The shell's body is always capped at two board columns (1128) | The default; `ws-app-shell__body--wide` runs a Fia app page to Seth's full width (1350 in a 1416 stage) | 301:1630, 308:2466, 313:2671, 319:3302 |
+| A report and its drawer scroll with the page | `ws-split--fill`: both parts take the column's height, the report scrolls on its own, the drawer's foot sits on the bottom and the page ends 24 above the stage's foot | 301:2011 |
+| `PageHero` opens with its headline | An optional `__figure` above it, the finding as a number (96 / 96, never cut); `__aside--top` for Tally's status; `--ws-page-hero-aside` for its 600 width | 319:3317 |
+| An area heading is a bare `ws-title` | `Section --area`: Seth's 22 / 28 heading with its count on the title's baseline, 10 to its card | 308:2611 |
+| A narrow `PageBar` drops its acts under its words | Its fact takes its own line, so the acts and the way back share one, the way back on the right rail | QA round 1 at 390 |
+| A done fix row centres its box and chevron on its two-line block, as Seth draws it | Every part of a fix row sits on the title's first line at every width, so a row reads the same open, done and narrow: a departure from Seth | 308:2466; the Seth review |
+| A fix row's act is a small `Button` | Seth's grey act: a 32 px `Button --well` (the primary while the row is open); the tick is Checkbox's 12 px one | 308:2514 |
+| Row lines sit between rows and add to their height | Drawn inside the row, so `CheckRow`, `Matrix` and `ListDetail` rows are 56, 48 and 66 exactly | the geometry check |
+| `ListDetail`'s list is always one third of its grid | The default; `--ws-list-detail-list` sets a fixed list width (362) and the detail takes the rest | Tally 319:3536; North's 757fr / 362fr |
+| `TrendBars`' bars sit a fixed 4 px apart from the plot's start, the axis a day's letter | The bars spread across the whole plot (at least 4 px apart), the axis names each week's start date, and the moment's chip slides along its bar so it never leaves the plot | the eye review: two thirds of the plot was empty |
+| `TickRow`'s count sits after its ticks, which can draw over it | It takes the rest of the line and wraps there; the ticks keep their size | issue #7; QA round 1 |
+| 0.4 `StatTiles` markup lays out by the nearest container (the app shell's body) | It measures its own width: as many tiles of at least 14 rem as fit | the Revenue OS review (K3) |
+| Linked heatmap squares fade as a whole, words and all | The other squares fade their heat and status bar only; their words step to muted grey and stay AA (North fades them to 1.6:1). `Matrix` still dims its other rows to 20% | D2 |
+| An activity grid's day cells grow with the card | They cap at 32 px in a wide card and the count stays beside them | QA round 1 at 1440 |
+| `StepLine`'s end figure has no room above the top rule | 32 px of head room (Seth's 34 snapped, D4), a 224 px grid, 24 under it for the quarters | 319:3355 |
+| `ShareBar`'s key figures are 600 navy | One tone: the figures keep the words' weight and colour, only their numerals tabular | 319:3302 |
+| A plate's stats sit 8 under its title (the plate's stack) | 16; a new `ws-plate--draft` (the agent's face, a title, Edit, then the draft) holds the inbox's reply | 301:2084, 313:2671 |
+
+## Kit faults fixed in 0.5.0 (4 Nov 2026, D13)
+
+From Aryan's Revenue OS mockup on 0.4.0 (his words: "it breaks a lot of things there, alignment, scrolling, space
+utilization"). Most of it was the kit.
+
+| Fault | Fix |
+| --- | --- |
+| K1: the shell's scroll region squashed its children to 0 px | A height-bound column's children never shrink; a child that scrolls says so |
+| K2: screen-reader words stretched the window past the shell | Every kit scroller is positioned; `.ws-sr` is clipped |
+| K3: stat tiles stayed two across in a wide shell | Adaptive pieces are their own size containers |
+| K4: a dialog never scrolled; its foot was clipped | A dialog is at most the window less 32; its content scrolls |
+| K5: a 440 drawer on a 390 phone | Below 40 rem (640 px) a drawer is the whole screen |
+| K6: a drawer's sticky head and foot left a third of the phone for content | Only the title line sticks; the foot holds one row |
+| K7: tab rows hid their overflow and the chosen tab | An edge fade, the chosen tab scrolled into view; over four on a phone, a `Select` |
+| K8: the wide table's header scrolled away; columns hid with no cue | A sticky header cell, an edge fade, the card's inset on the outer cells, a totals row |
+| K9: menus and popovers clipped by cards and dialogs | The top layer, flipping and shifting to stay on screen |
+| K10: touch floors only for buttons and fields | One coarse-pointer block: 40 px boxes, 24 px words |
+| K11: the wordmark off the bar's line; the person scrolled away | The wordmark keeps its size; the nav's foot is pinned |
+| K12: the board centred itself apart from the rest | Content is left-anchored on one start edge |
+| K13: single-line slots truncated numbers | Tile lines wrap; a number never truncates |
+| K14: a button act centred its words | Text alignment inherits |
+| K15: an unsized icon grew to 300 px | `ws-icon` and default icon sizes in controls and words |
+| K16: the kanban's sideways bar sat below the fold | A board page fills the room left; columns scroll |
+| K17: a plate's label centred on a wrapped value; list rows 4 px off the title; bare pages did not fill the window | Labels on the baseline; one card inset; EntryShell and StatusScreen fill and centre |
+
+## Open items resolved (4 Nov 2026)
+
+- 26 Oct, item 5 (dark mode a decided no): reversed, dark is opt-in (D12). Right-to-left is still not supported.
+- 26 Oct, item 7 (the band button): Seth's band button.
+- 21 Oct (the salmon focus a reported gap): the 2 px navy ring (D8).
+- 26 Oct, Panel header 48 against 56: a drawer's sticky head is its one title line (`ws-header-h`, 56).
+- 27 Oct, item 1 (`KitInput` 40 px against the public 44 px floor): on touch it is 44 px with 16 px words, so a phone
+  does not zoom; a mouse keeps 40.
+- 4 Nov, white on the salmon `KitButton` (2.65:1, open since 0.3.0): its words are navy (4.79 to 5.21:1), literal in every theme.
+  A visible brand change, open to Amit's veto.
+- 4 Nov, an app's own palette across elements (open item 16): `check-palette --emit` writes it in the built-ins' own
+  form, so it nests every way, in both builds, before or after the kit (D15).
+
+## Open, for the owners to rule (4 Nov 2026)
+
+1. **The stage's bottom inset**: 12, like the right (D3). Seth to confirm.
+2. **The sidebar on a phone**: North has no phone frame; the kit's AppShell drawer stands in. The sidebar label's start
+   (46 by North's CSS, 52 by its comment) also needs Seth's number.
+3. **#2C4870**: Seth's view-tab thumb and Tally's tone. The kit keeps it and the first product adopts it (D1, D15);
+   Seth to confirm it is a tone of its own, not drift from navy.
+4. **The ambient sheen**: North's 6 s brand sheen on its ask chip. Every Fello app, or North's own?
+5. **The undo window**: 5 s (the kit and North's tuner) or 10 s (North's CSS fallback). The kit keeps 5.
+6. **A page's intro**: North's runs to 3.75 s; the kit caps a build at 2.4 s. A dashboard default, or North's moment?
+7. **Guest apps** (Campfire): a vendored scoped copy pins the kit in that app; or load the pinned file at run time.
+   Whether the host's CSP allows the fonts and the gallery host is not known.
+8. **The Example tag** (issue #8): kept only for a card that genuinely shows sample data; a first open on real numbers
+   carries none (the owner, 3 Nov).
+9. **Seth's outlined navy button** for ending a live call: not in the catalog yet; End call stays secondary.
+10. **The glass, the frame gradient and the header band in dark**: a flat interim derived from the night tokens; Seth has
+    drawn no dark frames.
+11. **The 90% desk zoom**: Seth's frames read right in Ignite at 90%; the kit's sizes are his at 100%.
+12. **A field's edge** (#D3D3D3 at 0.5 px, about 1.5:1; 27 Oct item 2): still open. The focus ring is now visible; the
+    resting edge is not 3:1.
+13. **The navy ground's acts**: Ignite and Usher made links and the checked box salmon on navy; the kit keeps the lifted
+    mid blue for links and the act pair for a check.
+14. **`Matrix`'s linked dim**: while one row is hovered or focused, the other rows' words drop to 20% (North's), under
+    AA for that moment; `Heatmap` now steps its words to muted grey instead (QA round 1). The same step for `Matrix`, or
+    a ruling that the moment is allowed.
+15. **A drawer's head full of facts** (Revenue OS's deal drawer: editors, chips, five buttons, 456 px of a 390 phone):
+    the kit pins the whole head so a full-screen drawer keeps its close; Scrolling's rule (only the title line in the
+    head, facts in the content) is the app's markup to follow.
+
+## Rulings added 5 Nov 2026 (the dashboard build-in)
+
+Amit looked at North's Home: "there are four charts, and they look really nice... Even for the card title list...
+there are beautiful graphs that are growing and filling. I don't see any of those in our kit", and asked that whatever
+the team builds on the kit gets them, not North alone.
+
+| Date | By | Decision | Where it bites |
+| --- | --- | --- | --- |
+| 5 Nov 2026 | Amit | The dashboard build-in on arrival is a kit default, not North-only. Everything stays generic: class and token names say what a thing is, never an app's name. Resolves open item 6 of 4 Nov (a page's intro: a dashboard default) and overturns "North's 1.15 scale intro is its own moment" (Motion, 4 Nov) for the build itself | Motion (Build-in), Page recipes 1, 19 and what every recipe shares, MetricTile, SideList, every chart's draw |
+| 5 Nov 2026 | Amit (via Claude, open to veto) | How it builds: `.ws-build` on a page or section, `.ws-build__card` with `--ws-i` on each card. Cards rise in 70 ms apart (`--ws-stagger-part`, North's 71 ms); every chart draw in the kit adds its card's start (`--ws-build-at`), so a chart draws as its card lands. It plays once, as the card scrolls into view, on a scroll trigger (`timeline-trigger` on the card's `view()`, `animation-trigger: play-once`), so it plays in time and is never scrubbed; without that support it plays on first paint and a card below the fold shows its final state. Reduced motion: the final state | Motion, `_house.css`, the draw rules of PaceBar, GoalBars, GoalTicks, GoalTubes, Heatmap, Ring, ShareBar, StepLine, TickRow, TickStrip, TrendBars |
+| 5 Nov 2026 | Amit (via Claude, open to veto) | North's cards arrive at 1.15 and shrink to their place; the kit leaves the scale out and keeps the curve, the stagger and the draws. A card larger than its column overflows the page sideways for that moment on a phone, and clipping it would cut focus rings and a selected tile's tab | Motion |
+| 5 Nov 2026 | Amit (via Claude, open to veto) | `MetricTile` gains North's Home mini charts: a column strip (the period in progress lighter, fine scale cuts) and a line with dots (the end dot marks now), 36 tall in the bar's place (North's 40 at its 1.09 scale, D3), grey at rest and woken on hover or focus like a preview. Their marks are the tile's tone (navy is the heading navy, not North's #1F4B70 fill, since components hold no colour literal, D15). A tile's line with dots is allowed beside Charts' "no free line chart", which still holds for a card | MetricTile, Charts |
+| 5 Nov 2026 | Amit (via Claude, open to veto) | North's goal rows are `SideList`'s measure rows (North's "you" column is the side list; GoalBars, SegmentedProgress and PaceBar are other shapes): `__row--over` (teal, its AA word) and `__row--behind` (alert red), a 1.5 px pace cut, and the fill on arrival in order | SideList |
+| 5 Nov 2026 | Amit (via Claude, open to veto) | `--ws-duration-fill-page` (1700 ms, North's "Metric + goal bars fill") is a token: the tiles' charts and the goal bars both use it (D4). A tile's foot figure rises in after the draw; it does not count up (the 4 Nov rule: a headline figure shows its value) | tokens, Motion |
+| 5 Nov 2026 | Amit (via Claude, open to veto) | `TrendLine`: North's revenue chart and its NRR line become one kit chart, a value over periods on an axis as a line (dots, the hatched area under it) or as columns, with the Bars / Line morph (`--ws-spring-morph-chart`), the hovered column band and the hovered dot. Overturns 09-charts' "a free line chart: make it thin bars" for one series on an axis; two series stay two cards. Its columns start at zero (North's ARR chart starts at $20M: the kit does not) | Charts, `TrendLine`, `TrendBars`, `StepLine` |
+

package/design-system/18-checklist.md

@@ -11,41 +11,48 @@ Before a screen, card or flow is called done. Every line is a yes.
 
 ## Look (product face)
 
-- Your own code has no raw colour, size, radius, shadow or spacing: tokens only (`fello.css` and copied catalog markup
-  are the kit's).
-- The page and every card are the cream; edges 0.5 px; corners by size (Space and layout); no float shadow on a card.
-- Every text on its role's step (Type); nothing bold, nothing under 11 px.
-- Navy only on words, the one button and the tab thumb; salmon only as a dot, a tint or a data tone; no AI colours.
+- Your own code has no raw colour, size, radius, shadow, spacing or duration: tokens only (`fello.css` and copied
+  catalog markup are the kit's). Never `--radius-xl` or `--radius-2xl` in product CSS.
+- The page is the cream; every card is rimmed (the tray's 1 px rim, concentric corners, no outline and no shadow at
+  rest); dividers 0.5 px and full width; corners by size (Space and layout).
+- Every text on its role's step (Type) and in Instrument Sans (in a Tailwind app the font `@import` comes before
+  `@import "tailwindcss"`, or a `<link>`); nothing bold, nothing under 11 px.
+- Navy only on words, the one button and its named fills; salmon only as a dot, a tint or a data tone; no AI colours.
 - One title that says the answer, one sentence, at most one band with one primary; one navy button on the page.
-- Icons follow Iconography (the front page).
-- Marks exact, words AA: every text pair passes on the surface it sits on (Colour); meaningful marks, edges and focus
-  3:1.
+- Icons follow Iconography (the front page); an inline icon is `ws-icon`, never unsized.
+- Marks exact, words AA: every word uses a word token and passes on the ground it sits on (Colour); meaningful marks,
+  edges and focus 3:1.
 
 ## Layout
 
-- The gaps, insets and gutter of Space and layout.
+- The gaps, insets and gutter of Space and layout, every one on the scale.
+- One content edge per surface; numbers in fixed right-aligned columns; rows in one list share one min-height.
 - Fits at the panel width (440) and the page width without clipping or sideways scroll; the panel shows the essentials.
-- One scroll region unless two things must be compared; sticky elements cover nothing and sit above the keyboard.
-- Stacks to one column on a phone in DOM order; controls 40 px on touch; words that act 24 px.
+- The shell's body owns the scroll; nothing squashed; one scroll region unless two things must be compared; sticky
+  elements cover nothing, show their line only once scrolled under, and sit above the keyboard.
+- Stacks to one column on a phone in DOM order; it re-lays out rather than shrinks.
 - Works at 200% zoom and 320 px wide; every region holding more than it shows scrolls; every field has a white ground.
 
 ## States
 
 - Every state in How Claude decides, step 6, is drawn; data that does not exist leaves the card out.
+- Every control and row draws rest, hover, press, focus, selected, pending, loading and disabled where it has them
+  (Patterns, Interaction states); no state changes a thing's size; a hover sits in `@media (hover: hover)`.
 - A figure shown comes from the function the system acts with; a control's words come from its own definition.
 - Long labels wrap or truncate with their full words available; a number never truncates.
 
 ## Behaviour
 
-- Native elements; every icon button labelled; focus visible; Escape closes and returns focus; arrow keys in tab rows,
-  switches, menus and radios; errors wired with `aria-describedby`.
-- Motion keeps Motion's rules and is still under reduced motion.
+- Native elements; every icon button labelled; focus visible as the 2 px navy ring; Escape closes and returns focus;
+  arrow keys in tab rows, switches, menus and radios; errors wired with `aria-describedby`.
+- Motion comes from the kit's classes, springs and role tokens (Motion), with no hand-rolled transition, and is
+  still under reduced motion (the motion lines under Senior QA).
 - A screen reader hears a chart's answer and numbers, a figure at its value, a card as a region with its title.
 
 ## Content
 
-- Sentence case; a verb and its object on every button; what happened and what to do in every error; no em dashes; no
-  developer words; each fact said once; numbers tabular with their period named.
+- Sentence case; a verb and its object on every button; what happened and what to do in every error; no em dashes, also
+  not as a missing value; no developer words; each fact said once; numbers tabular with their period named.
 
 ## Public pages (marketing face)
 
@@ -55,8 +62,64 @@ Before a screen, card or flow is called done. Every line is a yes.
 - 44 px acts, 16 px body, `tel:` links, short forms, no hover-only reveal, one way to book on screen.
 - One `h1`, a title and description, a canonical URL, JSON-LD for the page type, alt text.
 
+## The geometry check
+
+The kit's own measure of what a designer catches by eye, in the kit's repo (`scripts/` is not in the package). Run it on
+every catalog component you add or change; in an app, the senior QA list below is the same check by eye:
+
+```sh
+node scripts/check-geometry.mjs --only Name1,Name2 --widths 320,390,1440
+node scripts/check-geometry.mjs --only Name1,Name2 --theme dark
+node scripts/check-geometry.mjs --only Name1,Name2 --palette cool   # any built-in palette, with or without --theme
+node scripts/check-geometry.mjs --only Name1,Name2 --hover          # rest, hover and focus shots; focus, lift, reduced motion
+node scripts/check-geometry.mjs --only Name1,Name2 --hover --motion # the same with motion on: a lift that only plays then
+node scripts/check-geometry.mjs --fail-on bug                       # exit 1 on any finding that is a bug (CI)
+```
+
+It measures alignment (siblings and rails that miss a shared edge by under 4 px), spacing off the scale, uneven rhythm,
+icons and text off their line, descenders cut, ellipses without a `title`, clipping and sideways scroll, targets under the
+floors, a focus that looks like rest, a hover that lifts and anything still moving under reduced motion. Open every
+screenshot it writes (`<out>/shots/`, and `shots/marked/` with each finding outlined and numbered) and look. A
+finding is fixed, or written down as a false positive with the reason.
+
+## Senior QA, by eye
+
+What the check cannot judge alone. Look at each, at each size and in each theme:
+
+- **Gaps are uniform and on the scale**: like things are equally apart; nothing is 1 or 2 px off its neighbours.
+- **Nothing overlaps** another thing, and nothing is hidden under a sticky head, a foot or the keyboard.
+- **Edges align**: every block in a surface starts on one edge; numbers line up in their column; headings sit on the card
+  edge or the content edge, never between.
+- **Text and icons are centred** in their boxes and on their lines; a big figure's ink meets its edge.
+- **Nothing clips**: no word, descender, focus ring, menu or edge cut by its container.
+- **Floating things sit where they belong**: a menu, tip or hover card opens at its anchor and flips or shifts to stay on
+  screen (Scrolling).
+- **Long labels** (a name twice as long, a translation) wrap or truncate with their full words; a button stays on one
+  line (the words beside it give way) unless it opts in with `ws-btn--wrap`.
+- **Widths**: 320, 390 and 1440, plus the panel (440) and a short laptop (1280 by 720); no sideways scroll at any.
+- **Dark** (a catalog component always; a page when it opts in): run with `data-theme="dark"`; every surface, word and
+  edge right, nothing white that should not be.
+- **Palette** (an app that sets one): its own palette passes `check-palette` and ships as `check-palette --emit`
+  writes it; the screen looks right in it, light and dark, with no stray default colour (Palettes).
+- **Reduced motion**: everything still and every state still reachable.
+- **Motion** (Motion):
+  - Every state change moves with the kit's motion (the component's own, a `--ws-spring-*` or a role token), never a
+    hand-rolled transition, and nothing that should move jumps.
+  - Hover is a tint, never a lift: no rise, grow or shadow under the pointer.
+  - Opens grow from their source (a menu from its corner, a dialog from where it sits, a card out of its slot) and
+    every exit is quicker than its entrance; nothing mounted vanishes without its exit.
+  - Under reduced motion nothing moves: each change lands in its final state at once.
+  - Side by side with the Motion card's playground and reference: the same move, the same spring, the same timing.
+  - `check-geometry --hover` and `--hover --motion` are clean on every catalog component you touched.
+- **Keyboard**: tab through everything; focus is always visible, in order, and never lost when a thing opens or closes.
+- **Targets**: 40 for a boxed control on touch, 24 for words that act at every pointer (44 on a public page).
+- **Seth's frames**: where he drew it, side by side with his PNG at the frame's size; every difference is either fixed or
+  logged in Decisions.
+
 ## Verification done
 
 - Checked in a browser at the sizes in How Claude decides, step 7: no console errors, no failed requests, nothing
   clipped; an app crawled as each role.
+- The geometry check clean (or each remaining finding justified) at 320, 390 and 1440, light and dark, with `--hover`
+  and `--hover --motion`.
 - A keyboard walk, a 200% zoom, a reduced-motion run and a screen-reader pass on anything new.

package/design-system/19-public-pages.md

@@ -9,8 +9,8 @@ arrives cold and reads once. The product's rules on honesty, words, accessibilit
 | Piece | Rule | Token or component |
 | --- | --- | --- |
 | Page | warm cream, never pure white for a large surface | `color-bg-page` |
-| Card | white, 4 px corners, a 1 px hairline, flat; only a clickable card raises a shadow, on hover | `KitCard`, `radius-sm`, `shadow-card-hover` |
-| The one act | the salmon gradient with a 3 px lift edge; hover deepens the shadow only; a press drops 2 px and the lift collapses | `KitButton` large (45 px), `color-button-grad-start`, `color-button-border` |
+| Card | white, 4 px corners, a 1 px hairline, flat; a clickable card takes the hover wash, never a shadow | `KitCard`, `radius-sm`, `KitCard` interactive |
+| The one act | the salmon gradient with white words (2.65:1, the one logged exception to D2) and a 3 px lift edge; hover brightens the fill 4%; navy and shadowed buttons also deepen their shadow; a press drops 2 px and the lift collapses | `KitButton` large (45 px), `color-button-grad-start`, `color-button-border` |
 | A second act | warm white outline, mid blue words | `KitButton` secondary |
 | Headings | navy semibold, slightly negative tracking, the kit's big steps | `color-text-heading`, `kit-4xl` for a section, `kit-5xl` or `kit-6xl` for a hero |
 | Felix | the orb is the hero's or the closing band's mark; the AI gradient lives only in the orb or a thin accent, never a wash | `gradient-ai`, `color-ai-*` |
@@ -20,7 +20,9 @@ arrives cold and reads once. The product's rules on honesty, words, accessibilit
 | Footer | the navy band | `Footer`, `color-bg-dark` |
 
 No photographic full-bleed hero, no noisy gradient, no heavy glass. A product screen shown on a public page is a
-picture or a framed light mock, never the page's own layout. The product's
+picture or a framed light mock, never the page's own layout. A public page is light unless it opts in; a brand or event
+page drawn dark takes the navy ground (`data-theme="dark"` with `data-ground="navy"`, Colour), its cards `color-surface`
+with the hairline, its footer still the navy band. The product's
 cream 8 px card, solid navy button and 14 px body stay in the product.
 
 ## Layout
@@ -41,7 +43,7 @@ WebGL; a still mark stands in its place.
 
 ## The reader's hands
 
-- Every act 44 px or more (Accessibility, targets).
+- Every act 44 px or more (`ws-touch-public`; Accessibility, targets).
 - Phone numbers are `tel:` links, emails `mailto:`; an address is text with structured data.
 - Forms are short (three fields where possible) and progressive: a label above each field, `autocomplete` and the right
   `type`, errors under the field. A button that leads to a form scrolls to it and focuses its first field.