sheleg-design-skill 1.23.0 → 1.24.0

package/CHANGELOG.md

@@ -4,6 +4,98 @@ All notable changes to this project are documented in this file. The format
 follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); versions
 follow [SemVer](https://semver.org/spec/v2.0.0.html).
 
+## [1.24.0] - 2026-08-13
+
+A seventeenth style pack, whose whole argument is other people's names — and a reference
+whose `h1` is one pixel wide.
+
+### Added
+
+- **`roster`** — the seventeenth pack, extracted from `babylovegrowth.ai` off the
+  server-rendered HTML of `/en` (1,415,414 bytes), its two shipped stylesheets (466,577
+  bytes, 410 custom properties) and then off **computed styles on the live page** at
+  1440×900, 768×1168 and 390×790 — **5,936 rendered elements** at the widest. A white
+  field in a faint grid of squares, hairlines instead of shadows, the pill as the most
+  frequent shape, and one orange that may never carry a word. For products whose argument
+  is *who already carries them*: AI-search and GEO visibility, SEO and content platforms,
+  agencies, marketplaces. Widened contract, a light-only token layer, a full reference kit,
+  and reciprocal forks written into `scoreboard`, `showroom`, `pigeonhole` and `manpage`.
+- **The fork against `scoreboard` is the pack's reason to exist.** Both serve growth, ads
+  and SEO products, so the category cannot decide it — the **kind of proof** can. One is
+  built around a figure that ticks up; the other around a name that appears. Ask what the
+  page loses if you delete its proof, and the giveaway is that `roster` sets its largest
+  figure (*4,000+*) in the same 16px eyebrow as everything else.
+- **`RESOLVED`, a fourth provenance family.** The reference computes its neutrals in
+  `lab()`, which the palette gate refuses on purpose, so each was resolved to the sRGB the
+  browser actually paints — **34 distinct values**, each painted into a 1×1 canvas and read
+  back as bytes. They turn out to be Tailwind v4's defaults: 7,234 borders at
+  `lab(91.6229 …)` = `#e5e7eb`. The bespoke layer beside them is four near-blacks and two
+  oranges wide, and the pack ships one of each with the criterion written at the
+  declaration.
+- **`IndustryColumn`, the signature element** — a pill-labelled column of other companies'
+  marks, hairline-divided, six across at 1440 — plus `LogoTile`, `Eyebrow` and `StepCard`.
+  Both container breakpoints are **derived from the component's own geometry** (220px for
+  the column's two-up mark grid, 640px for the step card's split) rather than carried over
+  from the viewport, which is what B-032 exists to prevent.
+
+### Fixed
+
+- **The pack refuses the reference's heading structure.** Its `h1` is `.sr-only` — 1×1px,
+  white, `clip-path: inset(50%)` — and the visible 68px line is a `<span>`, while all
+  sixteen `h2`s are small orange eyebrows. So the document outline says *eyebrow* where the
+  page says *section head*, and the largest text on the page is not a heading at all. This
+  pack teaches the opposite and `manpage` now carries the fork from the other end.
+- **The accent may not carry a word.** `#fa5c12` is 3.18:1 on white; white on `#f25533` at
+  the nav pill's 16px/600 is **3.43:1**. The pack ships `--accent-ink` at 4.52:1 for
+  anything read, keeps the accent for fills and large text, and makes the primary button
+  black — 19.66:1, which is what the reference itself does for its hero.
+- **The dominant secondary ink fails on its own band**: `#6a7282` is 4.84:1 on white and
+  **4.35:1** on the `#f0f3f8` band it is painted on. `--ink-soft` is the darkened form and
+  clears both.
+- **No `--warn` is shipped.** The reference paints no amber anywhere, so one here would be
+  invented rather than selected. Stated in the Palette instead of filled in.
+
+### Notes
+
+- **Reduced motion covers six of the reference's animations out of roughly twenty.** Its
+  branch names classes one by one, leaving `arrow-nudge`, `skeleton-blink`, both spinners,
+  `settings-ripple`, `meta-preview-float` and the accordions running — the opposite failure
+  to `pigeonhole`'s reference, which collapsed everything with one `*` rule and strobed its
+  marquee by doing so. This pack collapses unconditionally and pauses its two floats in the
+  component layer.
+- **A claim the measurement refused.** The hero sets a third party's wordmark inline after
+  the word *from*; it was sampled seven times across 5.4 seconds with no change, so the
+  pack specifies **one mark chosen per page** and makes no claim that it rotates.
+- Gates: validate 1938 → 2066, palette 906 → 956, sloplint 436 → 450, floors raised with
+  the reason.
+
+## [1.23.1] - 2026-08-13
+
+Two of the seven answers 1.23.0 shipped told an implementer to do something the same
+release had just described as impossible.
+
+### Fixed
+
+- **`pigeonhole` contradicted the SELF category it shipped beside.** Its new Responsive
+  answer said the labelled row and the FAQ "take `container-type: inline-size` on their
+  wrapper" — but the row's axis and the list's columns are properties of the row and the
+  `<dl>` **themselves**, so neither can query its own width. That is exactly the SELF case
+  the skeleton now defines. The corrected answer is the useful one: both live inside a
+  list the consumer already owns, so **the consumer's list is the container** — a
+  component library may ask for `container-type` on it and may not wrap someone's markup
+  to get it. Descendants inside them (the preview's truncation, the date's visibility)
+  are ordinary CONTAINER cases and need nothing from the consumer.
+- **`showroom` named a wrapper its kit does not ship.** "container-type on the table
+  wrapper" became the **specimen frame**, which is the component that actually holds the
+  table (`Specimen`), so the data row and the column header query something that exists.
+
+### Notes
+
+Found by checking every component named in the seven new answers against the components
+its kit actually ships — a check worth running whenever pack prose starts naming parts.
+Five of the seven were already right; `maquette`'s "agent prompt" is named by the pack and
+absent from the kit, which is a pre-existing pack/kit gap rather than this release's.
+
 ## [1.23.0] - 2026-08-13
 
 A component library that sized itself by the screen, and a contract bullet nobody had

package/README.md

@@ -11,7 +11,7 @@ problem — invented colors, six accent hues, dark mode retrofitted later.
 
 This skill is the taste layer. It gives a coding agent **one motion
 methodology** for cinematic, scroll-driven pages, **a motion doctrine** that
-decides whether to animate before it decides how, and **sixteen locked style
+decides whether to animate before it decides how, and **seventeen locked style
 packs** with ready-made design tokens, so what it builds reads as one system
 instead of a pile of effects.
 
@@ -61,6 +61,7 @@ into the cinematic layer, and says so in its own *Motion flavor* section.
 | `datasheet` | an off-white spec sheet ruled with dashed page guides, a live instrument built from hairline cells at radius zero, one vivid orange, Inter over JetBrains Mono, concentric radii from 16 to 2, and a dark alarm state the instrument enters when it detects the reader is hiding | B2B SaaS whose product is a verdict about the visitor, the request or the device — fraud and bot detection, device intelligence, identity and verification, API products sold on their payload |
 | `manpage` | cream paper under the reader's own system monospace — zero webfont bytes for the display face — a 48px display that never grows louder, a 576px argument column, coral label chips that are real `<h2>`s, `└` tree glyphs in their own grid column, and one dark code frame as the focal point | developer products whose buyer reads code — APIs, SDKs, CLIs, MCP servers, developer infrastructure, where the honest hero is the call itself |
 | `pigeonhole` | a white field ruled by hairlines, a display face that never passes weight 400 with exactly one italic word, and **nine categories in which a hue is the category**, drawn from an eleven-ramp pastel system — each rendered as a two-layer chip, 8px outside and 7px inside, whose label word is mandatory because the hue cannot carry the meaning alone | products whose job is to sort the reader's incoming mess into named categories — email triage, ticket routing, notification digests, file organisers, CRM inboxes |
+| `roster` | a white field in a faint grid of squares, hairlines instead of shadows, a display set in the **body** face while the section heads take another, and one orange that may never carry a word | products whose argument is **who already carries them** — AI-search and GEO visibility, SEO and content platforms, agencies, marketplaces, integration-led tooling |
 
 Each pack locks palette, type, texture, motion tokens, signature motifs and
 bans — and ships a `tokens/<pack>.css` to copy verbatim, so the agent never
@@ -135,7 +136,7 @@ skills.
 | `DESIGN_SYNC_BRIDGE.md` | The Claude Design contract: what a pack sends to claude.ai/design and in what shape, the rule for each of the four reference types, and the border motion does not cross |
 | `FIGMA_BRIDGE.md` | The design↔code contract: how a pack's tokens map onto Figma variable collections and modes, how to implement a design without importing raw values, and what cannot cross the border |
 | `AI_PRODUCT_PATTERNS.md` | The surfaces a model drives: the five states of a call, streaming instead of spinners, latency, provenance and uncertainty, agent confirmations, and the bans that keep it honest |
-| `styles/*.md` | The sixteen style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
+| `styles/*.md` | The seventeen style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
 | `styles/tokens/*.css` | The ready-made token layer per pack, copied verbatim instead of transcribed (`workbench` and `field-notes` each ship a light `:root` plus a `data-theme="dark"` twin) |
 | `styles/STYLE_PACK_TEMPLATE.md` | The pack contract as a skeleton, so a new style is authored against the same headings rather than improvised |
 
@@ -206,7 +207,7 @@ cd ./ds-workbench && npm install && npm run build
 then `/design-sync` in that directory, from Claude Code. Three layers cross: the
 pack's **bans** as the design system's own README, `styles.css` built from
 `tokens/<pack>.css` verbatim, and the components — a six-name spine that is
-identical in all sixteen kits, so switching packs swaps identity rather than API,
+identical in all seventeen kits, so switching packs swaps identity rather than API,
 plus each pack's signature parts. **Motion does not cross**, exactly as it does
 not cross into Figma: a kit is the static half of a pack, and saying so is what
 stops an agent inventing motion to fill the silence.
@@ -252,7 +253,7 @@ a pack's four widened sections used to make two gates *quieter* and still green.
 One honest limit: the npx installer is checked by asserting its runtime bundle
 walker exists, not by reading a file list — it has none by design. What proves
 it ships the right files is CI, which installs the bundle through **both**
-installers and `diff -r`s the result against the source, then builds all sixteen
+installers and `diff -r`s the result against the source, then builds all seventeen
 kits.
 
 `test/scenarios.md` (T1–T19) is the behavioral harness: fresh subagents given a

package/bin/cli.js

@@ -234,7 +234,7 @@ ${c("bold", "What it installs")}
   DESIGN_SYNC_BRIDGE.md   the Claude Design contract (what a pack sends, and
                        what does not cross)
   AI_PRODUCT_PATTERNS.md  chat / agent / streaming surfaces (honest state)
-  styles/              sixteen style packs — instrument-console (dark console),
+  styles/              seventeen style packs — instrument-console (dark console),
                        editorial-luxury (warm editorial), workbench (light/dark
                        product UI), briefing-room (dark 16:9 presentation deck),
                        atrium (warm cream consumer health), orchard (friendly
@@ -249,7 +249,9 @@ ${c("bold", "What it installs")}
                        manpage (a developer landing page set in the reader's
                        own system monospace, cream paper, coral label chips),
                        pigeonhole (a white sorting wall whose nine pastel
-                       categories are a filing scheme, one hue each) —
+                       categories are a filing scheme, one hue each),
+                       roster (a white wall of other people's marks: the proof
+                       is a name rather than a number) —
                        plus a ready-made token CSS per pack and
                        STYLE_PACK_TEMPLATE.md for authoring more
 `);
@@ -331,7 +333,7 @@ function main() {
       `  ${c("dim", "SKILL.md")}            the agent skill\n` +
       `  ${c("dim", "SHELEG_DESIGN.md")}    the full reference\n` +
       `  ${c("dim", "MOTION_DOCTRINE.md")}  whether to animate at all — read before any animation\n` +
-      `  ${c("dim", "styles/")}             style packs + token CSS (instrument-console / editorial-luxury / workbench / briefing-room / atrium / orchard / field-notes / cyclorama / showroom / blueprint / prism / maquette / scoreboard / datasheet / manpage / pigeonhole)\n\n` +
+      `  ${c("dim", "styles/")}             style packs + token CSS (instrument-console / editorial-luxury / workbench / briefing-room / atrium / orchard / field-notes / cyclorama / showroom / blueprint / prism / maquette / scoreboard / datasheet / manpage / pigeonhole / roster)\n\n` +
       `Your Cursor / Claude agent can now discover the skill and build\n` +
       `cinematic, scroll-driven pages — or style product UI (dashboards, admin,\n` +
       `internal tools) from a standalone pack — on its principles.\n\n` +

package/cursor/rules/sheleg-design.mdc

@@ -39,7 +39,11 @@ monospace on cream paper, coral label chips that are real headings and a
 dark code frame as the argument, for APIs, SDKs and CLIs; pigeonhole — a
 white sorting wall whose nine pastel categories are a taxonomy rather than
 a mood, each a two-layer chip whose label word is mandatory, for products
-that file the reader's incoming mess into named categories);
+that file the reader's incoming mess into named categories; roster — a white
+field in a faint grid of squares whose whole argument is other people's
+marks, with client logotypes in pill-labelled industry columns and an
+engine's wordmark inside the headline, for products sold on who already
+carries them);
 otherwise follow the contract below (self-contained on purpose).
 
 ## Whether to animate at all — before how

package/kits/roster/.design-sync/config.json

@@ -0,0 +1,14 @@
+{
+  "pkg": "@sheleg-design/roster",
+  "globalName": "ShelegRoster",
+  "shape": "package",
+  "buildCmd": "npm run build",
+  "srcDir": "src",
+  "tsconfig": "tsconfig.json",
+  "cssEntry": "src/styles.css",
+  "docsDir": "src",
+  "readmeHeader": ".design-sync/conventions.md",
+  "guidelinesGlob": [
+    "guidelines/*.md"
+  ]
+}

package/kits/roster/.design-sync/conventions.md

@@ -0,0 +1,62 @@
+# Roster — the design contract
+
+The reference is <https://www.babylovegrowth.ai/en>, measured 2026-08-13 off computed
+styles at 1440×900 (5,936 rendered elements), 768×1168 and 390×790. The full pack is
+`styles/roster.md`; this file is what a design agent must not get wrong.
+
+## The one thing this pack is
+
+**The proof is a name, not a number.** A white field in a faint grid of squares, hairlines
+instead of shadows, and an argument made entirely of other people's marks: an engine's
+wordmark inside the headline, client logotypes in six pill-labelled industry columns, a
+review score somebody else computed.
+
+## Non-negotiable
+
+- **Never white on the accent below large text.** `#fa5c12` is 3.18:1 on white and the
+  reference's own nav pill puts white on `#f25533` at 16px/600 — **3.43:1**, its one clear
+  failure. The accent is a fill and a large-text colour; `--accent-ink` (4.52:1) carries a
+  word.
+- **The primary action is black.** `--cta` at 19.66:1, which is what the reference itself
+  uses for the hero.
+- **No elevation system.** The reference's shadow slot holds an all-transparent ring
+  composite on 101 elements. Separation is hairline (`--rule`, on 7,234 borders) and pill.
+- **The display is set in the body face** at 68px, and the section heads in the *other*
+  family at 52px. That inversion is the pack.
+- **Body weight is 300.** A very long page (13,627px at 1440) stays light because its
+  paragraphs are.
+- **The display steps, it does not slide** — 36 / 60 / 68 — because neither stylesheet
+  contains a `clamp()`.
+- **Status never by colour alone.** `--accent` and `--danger` are 10.2 apart at full
+  colour against a hard floor of 10; a danger state always carries its word or icon.
+- **`:focus-visible` is `--accent-ink`**, never `--accent`.
+
+## Banned
+
+- White on the accent at body size. A shadow used as elevation. A scroll clock — the
+  reference has none: zero `animation-timeline`, `scroll-behavior: auto`.
+- **An invented `--warn`.** The reference paints no amber anywhere.
+- **A hidden `h1`.** The reference's is `.sr-only` at 1×1px and all sixteen of its `h2`s
+  are eyebrows; this kit keeps the outline and the page in agreement.
+- **A tidied roster.** No equalising logo sizes, no single-colour tinting, no dividerless
+  wall. Greyscale at rest is the only normalisation.
+- **Pixel numerals.** The biggest figure on the reference is set in a 16px eyebrow; a
+  number as the subject is `scoreboard`, not this.
+- A dark theme. None was measured.
+
+## Container queries, not viewport ones
+
+`IndustryColumn` and `StepCard` each set `container-type: inline-size`, and their
+breakpoints are derived from their own geometry rather than carried over: 220px for the
+column's two-up mark grid, 640px for the step card's split. Only the display's three
+steps stay viewport rules, and they are marked `PAGE` at the block.
+
+## Motion
+
+Entrance and hover, plus two floats at 5.5s and 6.5s offset by a second so the pair never
+syncs. Every transition runs on `--ease`. Under `prefers-reduced-motion` the durations
+collapse in the token layer and the floats are **paused** in the component layer — a
+duration cannot stop an infinite animation, it strobes it.
+
+The reference's own reduced-motion branch names six classes and leaves roughly fourteen
+animations running. Do not copy that shape.

package/kits/roster/README.md

@@ -0,0 +1,45 @@
+# @sheleg-design/roster
+
+The React reference kit for the SHELEG **Roster** style pack — a white field in a faint
+grid of squares whose argument is other people's names: an engine's wordmark inside the
+headline, client logotypes in six pill-labelled industry columns, a review score somebody
+else computed.
+
+It is generated from the pack, not authored beside it: `src/styles.css` opens with
+`styles/tokens/roster.css` byte for byte, and the rules the design agent must obey are in
+[`.design-sync/conventions.md`](./.design-sync/conventions.md).
+
+```bash
+npm install && npm run build
+```
+
+Then run `/design-sync` in Claude Code from this directory to push it to
+claude.ai/design.
+
+## The spine, and this pack's five
+
+`Button`, `Card`, `Chip`, `Stat`, `Heading` and `Rule` are identical in name, props and
+types across every SHELEG kit — switching packs swaps identity, not API.
+
+| Component | What it is |
+|---|---|
+| `IndustryColumn` | a pill-labelled column of other companies' marks, hairline-divided — the **signature element** |
+| `LogoTile` | one third-party mark, greyscale at rest, full colour on hover, and it never moves |
+| `Eyebrow` | the only tracked type in the pack, and a `<p>` rather than an `<h2>` |
+| `StepCard` | copy beside a product shot, with a two-digit number in the accent |
+| `FaqList` | a `<dl>` whose answers are always visible |
+
+## Why the accent never carries a word
+
+Both of the reference's oranges fail as a text or label colour: `#fa5c12` is 3.18:1 on
+white, and white on `#f25533` at the nav pill's 16px/600 is **3.43:1**. The kit ships
+`--accent-ink` at 4.52:1 for anything that has to be read, keeps the accent for fills and
+large text, and makes the primary button black — which is what the reference itself does
+for its hero, at 19.66:1.
+
+## Two breakpoints, both derived
+
+`IndustryColumn` goes two-up to one-up below **220px of its own width**; `StepCard`
+collapses its split below **640px of its own**. Neither number is the viewport breakpoint
+the reference used, because a column that is 300px wide on a 1440px screen needs the
+narrow layout and a viewport query cannot see that.

package/kits/roster/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@sheleg-design/roster",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.0",
+    "@types/react": "^18.3.0"
+  }
+}

package/kits/roster/src/Button.md

@@ -0,0 +1,19 @@
+---
+category: Actions
+---
+
+The primary action is **black**, and that is the reference's own choice rather than
+this pack's invention: of its two CTAs, white on `--cta` measures 19.66:1 and white on
+the accent 3.43:1. The page had already answered the question.
+
+The `secondary` variant is the accent fill and it carries **`--ink`, not white**. An
+accent button that must be light-on-dark has to reach large text first (≥24px, or
+≥18.66px bold); below that the contrast is not there.
+
+`:focus-visible` is `--accent-ink`, never `--accent` — 3.18:1 is too little for a ring
+a keyboard user has to find.
+
+```tsx
+<Button>Start 3-day trial</Button>
+<Button variant="secondary">Try free</Button>
+```

package/kits/roster/src/Button.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+
+export interface ButtonProps {
+  /** `primary` is the accent fill — at most one per view. */
+  variant?: 'primary' | 'secondary' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
+  onClick?: () => void;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Button({
+  variant = 'primary',
+  size = 'md',
+  disabled = false,
+  onClick,
+  children,
+  className,
+}: ButtonProps) {
+  return (
+    <button
+      type="button"
+      className={['ro-btn', `ro-btn--${variant}`, `ro-btn--${size}`, className]
+        .filter(Boolean)
+        .join(' ')}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}

package/kits/roster/src/Card.md

@@ -0,0 +1,12 @@
+---
+category: Surfaces
+---
+
+`--surface` at `--radius-card`, one `--rule` hairline, and **no shadow** — the
+reference's shadow slot holds an all-transparent ring composite on 101 elements, so
+this pack has no elevation system at all. `:hover` moves the hairline to
+`--rule-strong`; nothing lifts.
+
+```tsx
+<Card title="Backlinks" meta="weekly">Placements you did not have to pitch.</Card>
+```

package/kits/roster/src/Card.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+
+export interface CardProps {
+  title?: string;
+  /** Right-aligned metadata on the title row: a count, an id, a timestamp. */
+  meta?: string;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Card({ title, meta, children, className }: CardProps) {
+  const head = title !== undefined || meta !== undefined;
+  return (
+    <section className={['ro-card', className].filter(Boolean).join(' ')}>
+      {head && (
+        <div className="ro-card__head">
+          {title !== undefined && <h3 className="ro-card__title">{title}</h3>}
+          {meta !== undefined && <span className="ro-card__meta">{meta}</span>}
+        </div>
+      )}
+      <div className="ro-card__body">{children}</div>
+    </section>
+  );
+}

package/kits/roster/src/Chip.md

@@ -0,0 +1,11 @@
+---
+category: Data
+---
+
+A small bordered label. `accent` carries `--accent-ink` on `--surface` rather than a
+tinted fill, because the accent is a fill colour and not a text colour.
+
+```tsx
+<Chip>Keyword Discovery</Chip>
+<Chip tone="accent" selected>User Prompts</Chip>
+```

package/kits/roster/src/Chip.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+
+export interface ChipProps {
+  children: ReactNode;
+  selected?: boolean;
+  tone?: 'neutral' | 'accent';
+  className?: string;
+}
+
+export function Chip({ children, selected = false, tone = 'neutral', className }: ChipProps) {
+  return (
+    <span
+      className={[
+        'ro-chip',
+        `ro-chip--${tone}`,
+        selected ? 'ro-chip--selected' : undefined,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </span>
+  );
+}

package/kits/roster/src/Eyebrow.md

@@ -0,0 +1,16 @@
+---
+category: Foundations
+---
+
+The small tracked line above a section head — `--track-eyebrow` 0.4px is the only
+tracked type in the pack — in `--accent-ink` rather than `--accent`, because 3.18:1
+is not enough for 16px text.
+
+It renders a `<p>`. The reference marks all sixteen of its eyebrows as `<h2>`, which
+is how a document outline ends up saying "eyebrow" where the page says "section
+head".
+
+```tsx
+<Eyebrow>How it works</Eyebrow>
+<Heading level={2}>Organic growth made simple</Heading>
+```

package/kits/roster/src/Eyebrow.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+
+export interface EyebrowProps {
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * The small tracked line above a section head. It is a `<p>`, never an `<h2>`: the
+ * reference marks all sixteen of its eyebrows as level-two headings and hides its
+ * real `h1`, so its document outline says "eyebrow" where the page says "section
+ * head". This pack keeps the outline and the page in agreement.
+ */
+export function Eyebrow({ children, className }: EyebrowProps) {
+  return <p className={['ro-eyebrow', className].filter(Boolean).join(' ')}>{children}</p>;
+}

package/kits/roster/src/FaqList.md

@@ -0,0 +1,12 @@
+---
+category: Data
+---
+
+A `<dl>`, always open, hairline between rows. The reference animates its accordion
+over 0.7s (`--dur-accordion`); this component does not collapse at all, because an
+answer a crawler cannot read without running JavaScript is an answer that is not
+there.
+
+```tsx
+<FaqList entries={[{ q: 'Does it work for local SEO?', a: 'Yes.' }]} />
+```

package/kits/roster/src/FaqList.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+
+export interface FaqEntry {
+  q: string;
+  a: ReactNode;
+}
+
+export interface FaqListProps {
+  entries: FaqEntry[];
+  className?: string;
+}
+
+/**
+ * A definition list, always open. There is deliberately no `collapsed` prop: the
+ * reference ships seven `dt`/`dd` pairs in served HTML and no `<details>`, and an
+ * answer a crawler cannot read without running JavaScript is an answer that is
+ * not there.
+ */
+export function FaqList({ entries, className }: FaqListProps) {
+  return (
+    <dl className={['ro-faq', className].filter(Boolean).join(' ')}>
+      {entries.map(({ q, a }) => (
+        <div className="ro-faq__row" key={q}>
+          <dt className="ro-faq__q">{q}</dt>
+          <dd className="ro-faq__a">{a}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}

package/kits/roster/src/Heading.md

@@ -0,0 +1,20 @@
+---
+category: Foundations
+---
+
+Level 1 is the display and it is set in the **body** face at `--size-display`; level 2
+is the section head and it is set in `--font-head`. That inversion is the pack: the
+display face only ever appears at 52px, and the body face has to hold a poster.
+
+Level 1 steps at breakpoints — 36px, 60px, 68px — because **neither of the
+reference's stylesheets contains a single `clamp()`**, and a fluid ramp here would be
+an invented value.
+
+**Use the level for the level.** The reference hides its real `h1` in an `.sr-only`
+span and marks all sixteen of its eyebrows as `h2`, so its outline says "eyebrow"
+where the page says "section head". This kit keeps the outline and the page in
+agreement.
+
+```tsx
+<Heading level={1}>Grow organic traffic on autopilot</Heading>
+```

package/kits/roster/src/Heading.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+
+export interface HeadingProps {
+  /** 1 = page title (28px), 2 = section (20px), 3 = card title (15px). */
+  level?: 1 | 2 | 3;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Heading({ level = 2, children, className }: HeadingProps) {
+  const Tag = `h${level}` as 'h1' | 'h2' | 'h3';
+  return (
+    <Tag
+      className={['ro-heading', `ro-heading--${level}`, className].filter(Boolean).join(' ')}
+    >
+      {children}
+    </Tag>
+  );
+}

package/kits/roster/src/IndustryColumn.md

@@ -0,0 +1,25 @@
+---
+category: Signature
+---
+
+**The pack's signature element.** A `--radius-pill` label over a column of other
+companies' marks, divided from its neighbours by a 1px `--rule` — six across at 1440,
+three at 768, two below, and the divider survives every step because the divider is
+what makes it a wall rather than a pile.
+
+It sets `container-type: inline-size`, so the marks inside answer to the column's own
+width. Below **220px** the two-up grid goes to one, and that number is derived rather
+than carried over from a viewport: two tiles at the `--tile` ceiling of 40px plus the
+24px gap plus 24px of padding each side is 152px, and a logotype is wider than its
+tile, so the pair crowds at roughly 220.
+
+**Do not tidy the roster.** Equalising the logos' optical weights, tinting them to one
+colour, or dropping the dividers each turn it into a decoration. Greyscale at rest is
+the only normalisation allowed, and `LogoTile` does that.
+
+```tsx
+<IndustryColumn label="SaaS & Tech">
+  <LogoTile label="ConsentStack"><img src="/consentstack.svg" alt="" /></LogoTile>
+  <LogoTile label="Yardstick"><img src="/yardstick.svg" alt="" /></LogoTile>
+</IndustryColumn>
+```