sheleg-design-skill 1.54.1 → 1.55.0

package/CHANGELOG.md

@@ -6,6 +6,80 @@ follow [SemVer](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [1.55.0] - 2026-08-30
+
+### The thirty-ninth pack — somebody else's question, on a sheet that never stops being ruled
+
+`chorus`, extracted from `crowdreply.io`. Warm off-white paper under a construction
+grid that never switches off — two 1px verticals at `x=162` and `x=1278` of 1440,
+crossed by horizontals carrying a small plus at each intersection, 63 rule elements in
+the census, and the same grid continued across the dark band. The set piece is a
+**cut-corner bubble**: 24px on three corners and 0 on the top right, measured on all 24
+instances of one object, holding a stranger's question in the display face.
+
+Named for the register per ADR-0001, with `switchboard`, `soapbox`, `quorum` and
+`earshot` weighed and rejected — the record is in the ADR.
+
+**Measured, not restated.** The site is Framer, and the token dump and the render
+disagree: of its 52 declared `--token-<uuid>` properties, 15 are referenced once and
+reach no painted surface, so an area-weighted census over all 2,439 elements of an
+11,750px page decided every value. Read through CDP at 1440×900, an emulated
+768×1024×2 and an emulated 390×844×2. Ratios computed by importing this repository's
+own palette gate.
+
+**Six corrections, each a number the reference produces and the pack refuses.**
+
+- The primary CTA fails AA and no size saves it — `#ffffff` on `#f96f4b` is **2.84:1**,
+  under the 3:1 large floor too. The fix keeps the brand hue exactly and changes the
+  label: `#1b181c` on `#f96f4b` is **6.20:1**. Darkening the coral was rejected.
+- The coral cannot be a word: `#f96f4b` on `#fbfaf9` is **2.72:1**, the link token
+  `#ff5d30` is **2.94:1**. `--coral-ink` at 4.59:1 is derived at hue 35.7°.
+- A card is separated from the field by **1.04:1** and nothing else — no border and no
+  shadow on any card over 250×150px in the census. Every card gains a 1px `--line`.
+- **Zero `:focus` rules and zero `:focus-visible` rules** across 274,355 bytes, plus two
+  `outline: none` declarations. The whole mechanism is the pack's, including the
+  dark-surface re-declaration: the ink ring is 1.00:1 against `--slab`.
+- The muted step does not read: `#8a8692` on `#fbfaf9` is **3.41:1** at 14px/400, 38
+  instances.
+- **Zero reduced-motion rules against 383 script-set inline transforms** and 1,057
+  script-set opacities. The media query the pack adds cannot reach them, so the JS half
+  of the contract is stated in the pack rather than implied.
+
+Two more facts recorded because they will surprise an implementer: the controls are
+36px and miss the 44px tap floor, so the kit pads the hit area rather than resizing the
+button; and the declared amber `#ffc300` paints nothing at any of the three widths,
+which is why this pack has three status roles rather than four and says so.
+
+**The mint is dark-only, and that is a constraint rather than an omission.** `#36ff94`
+is 13.31:1 in a well and reaches AA on paper only at near-black, which is a different
+colour rather than a step — so the light ladder is a separate answer, not a
+translation.
+
+### Also in this release
+
+- Reciprocal forks: `chorus` ↔ `surveyor` (the AI-visibility collision — a reading
+  against a conversation) and `chorus` ↔ `deskmate` (the speech-bubble collision —
+  whose bubble it is).
+- `kits/chorus`: the six-name spine plus `Bubble`, `GridFrame`, `Slab`, `Well`,
+  `Delta`, `NavPill`, `Sweep`, `Field`, `Empty`, `Skeleton`, `Capsule`. Rendered at
+  1440 / 768 / 390 and its computed values read back against the pack's claims before
+  the tag; the log is in `docs/evidence/plans/2026-08-30-chorus-pack-acceptance.md`.
+- The kit's button carries no border on any variant: the reference's control is 36px
+  with 8px/16px padding and no edge, and a 1px border measured 38px. The ghost
+  variant's line is an inset ring instead, so no variant shifts when it swaps.
+- Counted claims moved 38 → 39 across eleven files, and the widened-contract remainder
+  moved 32 → 33 — the number that had been stale in two consecutive releases.
+- `SURFACE_COMPOSITION.md`: `chorus` joins the status map, and the accent-role
+  paragraph gains the fourth pack that names its accent itself (`--coral`).
+
+### Shipped with a stated debt
+
+Scenario **T37** (`chorus` against `surveyor`, with its negative branch) is **written,
+not yet run** — the filing session was instructed not to spawn subagents, so the two
+blind branches could not execute before the tag. Per standing instruction 3 the debt
+ships in the same commit as the artifact and is on the board. The render check behind
+REQ-8 is *not* part of that debt: it ran in full.
+
 ## [1.54.1] - 2026-08-29
 
 ### The installer refuses the shadow it documents

package/README.md

@@ -31,7 +31,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 **thirty-eight locked style
+decides whether to animate before it decides how, and **thirty-nine locked style
 packs** with ready-made design tokens, so what it builds reads as one system
 instead of a pile of effects.
 
@@ -78,6 +78,7 @@ into the cinematic layer, and says so in its own *Motion flavor* section.
 | `deskmate` | a warm beige working day lit from **one source above the top edge** — every gradient origin in the reference sits at or above `y=0` — where a single four-stop ramp (peach, lilac, violet, deep navy) washes the field, fills a panel and fills one word of a heading, and everything a hand touches is a 56px pill against 32px slabs | **products sold as a colleague rather than a tool** — AI employees and chat-native agents, assistants living in Slack or Teams, delegation and approval surfaces (standalone) |
 | `test-drive` | warm paper and white cards where **the live product runs inside drawn browser chrome** — traffic-light dots, a real address, the engine on — one coral in two tokens (the brand hue lights, fills and blinks; a darker step carries every body-size word), every control lit by a four-layer shadow in its own hue, a handwritten face and a yellow marker annotating from the margin | **self-serve SaaS sold by handing over the running product** — analytics, dashboards, developer tools with a visible console, indie SaaS (standalone) |
 | `surveyor` | peach paper where **an unseen terrain is mapped** — fine contour lines as the one texture, flat white and tinted cards with no shadow anywhere, a teal whose text-bearing steps are the reference's own hover ladder, a pink that answers but may not speak, and the product appearing only as flat portraits | **visibility, monitoring and benchmark tools** — AI-search and SEO trackers, share-of-voice and brand-listening platforms sold to marketing teams (standalone) |
+| `chorus` | warm off-white paper under **a construction grid that never switches off** — two 1px verticals crossed by horizontals with a small plus at every intersection, continued across the dark band — where the set piece is **somebody else's question** in a cut-corner bubble, 24px on three corners and 0 on the top right, set in the display face; white cards with a hairline and no shadow, near-black slabs cut 30px into the sheet, one coral that fills but may never be a word | **AI-search visibility, brand monitoring and community marketing** — answer-engine and share-of-voice trackers, social listening, review and reputation tools whose proof is other people's conversations (standalone) |
 | `outrank` | white field with one violet that carries text in both directions, a 5px light ring standing in for a button shadow, and two type families split by how long a thing is read | SEO and growth SaaS, agent-run back-office — the pack for a product that ships a landing and a dashboard at once |
 | `orchard` | warm oat field of rounded slabs, sage brand + one candy-orange action, rounded geometric display, soft-3D pills built from inset light | friendly consumer biotech, DTC wellness, testing kits & supplements |
 | `field-notes` | warm green-cast paper ruled by hairlines, one rust accent, a hero that dissolves into the page instead of ending, numbered mono eyebrows, crop marks, colour that encodes how a claim is known | open-source & developer tools sold on auditability — code intelligence, provenance, evals, agent memory |
@@ -178,7 +179,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 thirty-eight style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
+| `styles/*.md` | The thirty-nine 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 |
 
@@ -249,7 +250,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 thirty-eight kits, so switching packs swaps identity rather than API,
+identical in all thirty-nine 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.
@@ -299,7 +300,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 thirty-eight
+installers and `diff -r`s the result against the source, then builds all thirty-nine
 kits.
 
 `test/scenarios.md` (T1–T34) is the behavioral harness: fresh subagents given a

package/bin/cli.js

@@ -241,7 +241,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/              thirty-eight style packs — instrument-console (dark console),
+  styles/              thirty-nine 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), patchbay (dark live
@@ -265,6 +265,10 @@ ${c("bold", "What it installs")}
                        contour lines, flat shadowless cards, a teal that
                        states and a pink that answers, and the product
                        shown only as portraits),
+                       chorus (warm paper under a crosshair grid, a
+                       cut-corner bubble carrying somebody else's
+                       question, near-black slabs cut into the sheet, one
+                       coral that fills but never writes),
                        babylove (white +
                           one orange, seven tokens over Tailwind defaults),
                           outrank (white +

package/cursor/rules/sheleg-design.mdc

@@ -138,6 +138,14 @@ detached nav, one teal whose text-bearing steps climb the reference's own hover
 ladder, a pink that answers but may not speak, TT Fors at a 600 ceiling with tabular
 numerals, and the product shown only as flat portraits, for visibility, monitoring
 and benchmark tools sold to marketing teams;
+chorus — warm off-white paper under a construction grid that never switches off, two
+1px verticals crossed by horizontals with a small plus at every intersection and
+continued across the dark band; the set piece is somebody else's question in a
+cut-corner bubble (24px on three corners, 0 on the top right) set in the display face,
+white cards with no shadow and a hairline edge, near-black slabs cut 30px into the
+sheet, one coral that fills but may never be a word, and a periwinkle that only exists
+in a gradient or on the dark, for AI-search visibility, brand monitoring, social
+listening and community marketing whose proof is other people's conversations;
 otherwise follow the contract below (self-contained on purpose).
 
 ## Whether to animate at all — before how

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

@@ -0,0 +1,14 @@
+{
+  "pkg": "@sheleg-design/chorus",
+  "globalName": "ShelegChorus",
+  "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/chorus/.design-sync/conventions.md

@@ -0,0 +1,50 @@
+# Chorus — conventions for a design agent
+
+This kit is the built form of the Chorus style pack. Read these before generating
+anything with it; they are the pack's bans, stated where a design tool will see them.
+
+## Colour
+
+- **The coral fills and never writes.** `--coral` (#f96f4b) is a fill, a flat block, a
+  gradient stop and an icon beside a label that carries the meaning. As a word it is
+  2.72:1 on the field; under a white label it is 2.84:1. Both are below the 3:1
+  large-text floor, so no size rescues either. A coral word takes `--coral-ink`
+  (#cb441f, 4.59:1 on the field).
+- **The primary button's label is INK**, `--on-coral` at 6.20:1. This is the pack's
+  correction to the reference and it keeps the brand hue exactly rather than darkening
+  it.
+- **The mint lives only on the dark.** `--good-on-dark` (#36ff94) is 13.31:1 in a
+  well and does not exist on paper — held at its own hue it reaches AA on paper only
+  at near-black. A green figure on a card takes `--good` (#198400).
+- **Status is never by colour alone.** `--good` and `--danger` are 6.2 apart under
+  deuteranopia. Every delta ships its arrow and its number, both.
+- **There is no warn.** Three status roles. The reference declares an amber that paints
+  nothing; a fourth severity here would be invented.
+- The periwinkle is a gradient stop and a series line on the dark. It is not a second
+  button colour and never carries a word on paper.
+
+## Surface and edge
+
+- A card is `--surface` at `--r-card` with a 1px `--line` — **32px padding and 32px
+  gap at every width**, including 390. Do not tighten it on narrow screens.
+- Four objects carry a shadow and nothing else may: the bubble, the floating panel,
+  the hero deck, the nav. Everything else takes `--line` for its edge.
+- The construction grid never switches off, and it continues across the dark slab.
+  The plus at each intersection is part of it.
+- The dark slab is a **surface**, not a theme. The page never inverts.
+
+## Type
+
+- Outfit sets two things: the display, and the question inside a bubble. Nothing else.
+- Display tracking **relaxes** as the type shrinks. Do not tighten a small display.
+- Body line-height is 1.7. No italic anywhere; nothing above weight 700.
+
+## Geometry and motion
+
+- `--r-bubble` is 24px on three corners and 0 on the top right. It is the pack's whole
+  geometry, and it belongs to one object.
+- Nothing lifts, scales or parallaxes; there is no scroll clock; gradients do not move.
+- Loading is a static skeleton, never a spinner and never a shimmer.
+- The reduced-motion contract has a JavaScript half: a reveal observer must read
+  `matchMedia('(prefers-reduced-motion: reduce)')` and mount at the final transform.
+  The media query in the token layer cannot reach a transform a script sets.

package/kits/chorus/README.md

@@ -0,0 +1,36 @@
+# @sheleg-design/chorus
+
+The React reference kit for the **Chorus** style pack — warm off-white paper under a
+construction grid that never switches off, where the set piece is somebody else's
+question in a cut-corner bubble.
+
+The pack itself is the authority:
+[`styles/chorus.md`](../../plugins/sheleg-design/skills/sheleg-design/styles/chorus.md).
+This kit is one built reading of it, not a second source of truth. `src/styles.css`
+opens with the pack's token layer copied byte for byte from
+`styles/tokens/chorus.css`; everything below the `/* ── components ── */` marker
+consumes `var(--…)` and contains no colour literal.
+
+## Build
+
+```bash
+npm install
+npm run build        # tsc only — no bundler, no runtime dependency but React
+```
+
+## What is here
+
+The six-name spine every SHELEG kit shares — `Button`, `Card`, `Chip`, `Stat`,
+`Heading`, `Rule` — with identical props everywhere, so switching packs swaps identity
+rather than API. Then this pack's own: `Bubble` (the signature element), `GridFrame`,
+`Slab`, `Well`, `Delta`, `NavPill`, `Sweep`, `Field`, `Empty`, `Skeleton`, `Capsule`.
+
+Each component carries a `.md` beside it with its category and the numbers that
+license its colours.
+
+## The three rules that are easiest to break
+
+1. `--coral` may not be a word, at any size, and its button's label is ink.
+2. `--r-bubble`'s cut corner belongs to one object and may not be restyled.
+3. The reduced-motion contract has a JavaScript half — see
+   `.design-sync/conventions.md`.

package/kits/chorus/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@sheleg-design/chorus",
+  "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/chorus/src/Bubble.md

@@ -0,0 +1,23 @@
+---
+category: Signature
+---
+
+**The pack's signature element, and the one component that may not be restyled.**
+
+`--r-bubble` is 24px on three corners and **0 on the top right** — a speech-bubble
+tail drawn by subtraction, measured on all 24 instances of this object in the
+reference. The question is 24px/600 in `--font-display` at 18.88:1 on `--surface`;
+`--shadow-bubble` is its own three-stop shadow and belongs to nothing else.
+
+`surface="slab"` is the same object on the dark side of a pair, `--on-slab` at
+16.54:1. `mirrored` swaps the cut to the top left for the answering side and for RTL
+— the reference ships only one direction, so the mirror is the pack's decision and is
+labelled as one.
+
+Change its corner, its face or its shadow and the pack is gone. If the page has no
+stranger's words to put in it, the page does not want this pack.
+
+```tsx
+<Bubble question="Best CRM for B2B companies?" source="r/sales · 18 Mar" />
+<Bubble question="Have you tried it?" surface="slab" mirrored />
+```

package/kits/chorus/src/Bubble.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+
+export interface BubbleProps {
+  /** The quoted question. Set in the display face — that is the point. */
+  question: string;
+  /** Where it was asked: a platform name, a subreddit, a date. */
+  source?: string;
+  /** `paper` is a stranger's card; `slab` is the answering side of a pair. */
+  surface?: 'paper' | 'slab';
+  /** Mirrors the cut corner for the answering side and for RTL. */
+  mirrored?: boolean;
+  children?: ReactNode;
+  className?: string;
+}
+
+export function Bubble({
+  question,
+  source,
+  surface = 'paper',
+  mirrored = false,
+  children,
+  className,
+}: BubbleProps) {
+  return (
+    <div
+      className={[
+        'ch-bubble',
+        `ch-bubble--${surface}`,
+        mirrored ? 'ch-bubble--mirrored' : null,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      <p className="ch-bubble__q">{question}</p>
+      {source && <p className="ch-bubble__src">{source}</p>}
+      {children}
+    </div>
+  );
+}

package/kits/chorus/src/Button.md

@@ -0,0 +1,23 @@
+---
+category: Actions
+---
+
+36px tall at `--r-control`, 8px/16px padding on a 14px/500 label, and a fill that
+only ever changes colour — nothing lifts, scales or travels.
+
+`primary` is the reference's own coral with the pack's correction: `--coral` fill and
+an `--on-coral` label at 6.20:1. **A white label here measures 2.84:1 and is banned at
+every size** — that is the whole reason this variant exists in this shape. `secondary`
+is `--ink-strong` with `--on-slab`. `ghost` is `--surface` with a 1px `--line`.
+
+Hover steps the fill one value; active repeats hover. Focus paints a 2px
+`--focus-color` ring **and** keeps the fill step. On a slab the ring resolves to
+`--focus-color-on-dark`, because the ink ring is 1.00:1 there.
+
+The 36px height is measured and misses the 44px tap floor: the hit area is padded to
+`--tap-min` on touch rather than the button being resized.
+
+```tsx
+<Button>Start free trial</Button>
+<Button variant="secondary">Book a demo</Button>
+```

package/kits/chorus/src/Button.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+
+export interface ButtonProps {
+  /** `primary` is the coral fill with an INK label — never a white one. */
+  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={['ch-btn', `ch-btn--${variant}`, `ch-btn--${size}`, className]
+        .filter(Boolean)
+        .join(' ')}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}

package/kits/chorus/src/Capsule.md

@@ -0,0 +1,20 @@
+---
+category: Signature
+---
+
+The closing band's scatter: stadium-radius pills at `--r-pill`, some outlined in
+`--line-on-slab`, some filled `--coral`, `--periwinkle` or `--parchment`, jumbled at
+angles between platform marks. Many voices, one page — it is the pack's name made
+visible.
+
+The tilt is a static transform, not an animation: nothing in this pack moves on
+scroll. Keep it under about 12 degrees, which is the range the reference's own scatter
+occupies.
+
+Decorative by construction — a capsule carrying a word would be a coral or periwinkle
+label, and neither may be text.
+
+```tsx
+<Capsule tone="coral" tilt={-6} />
+<Capsule tone="outline" tilt={3} />
+```

package/kits/chorus/src/Capsule.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+
+export interface CapsuleProps {
+  /** `outline` is the drawn one; the three fills are the measured set. */
+  tone?: 'outline' | 'coral' | 'periwinkle' | 'parchment';
+  /** Degrees of tilt. The reference scatters them; keep it under 12. */
+  tilt?: number;
+  children?: ReactNode;
+  className?: string;
+}
+
+export function Capsule({ tone = 'outline', tilt = 0, children, className }: CapsuleProps) {
+  return (
+    <span
+      className={['ch-capsule', `ch-capsule--${tone}`, className].filter(Boolean).join(' ')}
+      style={{ transform: tilt ? `rotate(${tilt}deg)` : undefined }}
+    >
+      {children}
+    </span>
+  );
+}

package/kits/chorus/src/Card.md

@@ -0,0 +1,20 @@
+---
+category: Surfaces
+---
+
+`--surface` at `--r-card` with **32px padding and a 32px internal gap, unchanged at
+every width** — that constancy is measured, and halving it at 390 makes a different
+pack.
+
+The one correction the pack applies to the reference: a 1px `--line` edge. The
+reference draws none, and `--surface` is 1.04:1 on `--bg`, which is a value step
+rather than an edge.
+
+No shadow. Only four objects in this pack carry one — the bubble, the floating panel,
+the hero deck and the nav — and a card is none of them.
+
+```tsx
+<Card title="Prompt Tracking" meta="ChatGPT">
+  Which prompts trigger your brand in AI answers.
+</Card>
+```

package/kits/chorus/src/Card.tsx

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

package/kits/chorus/src/Chip.md

@@ -0,0 +1,15 @@
+---
+category: Actions
+---
+
+The eyebrow and the tab: `--surface` at `--r-chip` with a 1px `--line`, 8px/10px
+padding and a 14px/500 label in `--ink-body` at 9.15:1.
+
+`accent` does **not** paint the label coral — `--coral` may not be a word. It moves
+the label to `--coral-ink` at 4.59:1 on `--bg` and tints the border. Selected adds a
+1px `--coral` ring, which is a mark rather than text and is legal at that role.
+
+```tsx
+<Chip>AI Search</Chip>
+<Chip tone="accent" selected>Ranked</Chip>
+```

package/kits/chorus/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={[
+        'ch-chip',
+        `ch-chip--${tone}`,
+        selected ? 'is-selected' : null,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </span>
+  );
+}

package/kits/chorus/src/Delta.md

@@ -0,0 +1,19 @@
+---
+category: Data
+---
+
+**Status here is never by colour alone**, and this component is why the rule is
+enforceable: it always renders the arrow *and* the number, plus a screen-reader word.
+
+`--good` and `--danger` sit 32.4 apart at full colour and **6.2** apart under
+deuteranopia — green against red is the classic collision, and no re-stepping of this
+hue pair fixes it. The arrow is the separation.
+
+`surface="dark"` switches to `--good-on-dark` / `--danger-on-dark`. That is a
+different ladder rather than a translation: the mint reaches AA on paper only at
+near-black, which is a different colour.
+
+```tsx
+<Delta value="0.48%" direction="up" />
+<Delta value="3 places" direction="down" surface="dark" />
+```

package/kits/chorus/src/Delta.tsx

@@ -0,0 +1,24 @@
+export interface DeltaProps {
+  /** The signed change, already formatted: "0.48%", "12". */
+  value: string;
+  direction: 'up' | 'down';
+  /** `dark` picks the on-slab ladder; the mint does not exist on paper. */
+  surface?: 'paper' | 'dark';
+  className?: string;
+}
+
+export function Delta({ value, direction, surface = 'paper', className }: DeltaProps) {
+  return (
+    <span
+      className={['ch-delta', `ch-delta--${direction}`, `ch-delta--${surface}`, className]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      <span aria-hidden="true" className="ch-delta__arrow">
+        {direction === 'up' ? '\u2191' : '\u2193'}
+      </span>
+      <span className="ch-delta__value">{value}</span>
+      <span className="ch-delta__sr">{direction === 'up' ? 'up' : 'down'}</span>
+    </span>
+  );
+}

package/kits/chorus/src/Empty.md

@@ -0,0 +1,18 @@
+---
+category: Surfaces
+---
+
+The reference has no empty state, because every surface on it is a canned demo — so
+this is derived from the parts it does have, and it is stated here so it is not
+invented twice.
+
+A `--paper` well at `--r-well`, a centred 18px/600 title in `--ink`, a 16px/400
+explanation in `--ink-body`, one `--coral` button. **No illustration.** The only thing
+above the text is an empty bubble at `--r-bubble` drawn hollow in `--line-quiet` with
+no shadow — the page's own object with nothing in it, which is exactly what an empty
+state means here.
+
+```tsx
+<Empty title="No threads yet" body="We are watching four platforms."
+       action={<Button>Add a keyword</Button>} />
+```

package/kits/chorus/src/Empty.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+
+export interface EmptyProps {
+  title: string;
+  body?: string;
+  action?: ReactNode;
+  className?: string;
+}
+
+export function Empty({ title, body, action, className }: EmptyProps) {
+  return (
+    <div className={['ch-empty', className].filter(Boolean).join(' ')}>
+      <span aria-hidden="true" className="ch-empty__bubble" />
+      <p className="ch-empty__title">{title}</p>
+      {body && <p className="ch-empty__body">{body}</p>}
+      {action && <div className="ch-empty__action">{action}</div>}
+    </div>
+  );
+}

package/kits/chorus/src/Field.md

@@ -0,0 +1,16 @@
+---
+category: Actions
+---
+
+The reference paints exactly one input — a search field inside a demo well — and this
+is it: `--surface` at `--r-control` with a 1px `--line`, a 16px/400 value in
+`--ink-body`, the placeholder in `--ink-ghost`, and a filled `--coral` action seated
+inside the right edge with its label in `--on-coral`.
+
+Focus paints the ring **and** keeps the border. There is no other field type on the
+page: a select or a checkbox built here takes this geometry and the Palette's colours
+rather than a new value.
+
+```tsx
+<Field label="Prompt" placeholder="best online payment methods" action="Monitor" />
+```