sheleg-design-skill 1.20.0 → 1.22.0

package/CHANGELOG.md

@@ -4,6 +4,136 @@ 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.22.0] - 2026-08-13
+
+The palette gate learns two colour forms it had been refusing, and the refusal turns
+out to have been the reason eight token layers restate a token's channels by hand.
+
+### Added
+
+- **`color-mix()` and relative colour are computable, so they are no longer banned.**
+  The gate parses `color-mix(in srgb | srgb-linear | oklab | oklch, A p%, B q%)` —
+  premultiplied, shorter hue arc — and `rgb(from <colour> r g b / a)`, with `var()`
+  now resolved **inside** a value rather than only as a whole value. Verified against
+  Chrome 151's own computed values across eleven cases at a **worst ΔE of 0.004**,
+  which is the browser's six-digit serialisation rather than a disagreement.
+- **Four self-test plants, two of which prove the new paths are checked rather than
+  tolerated.** A `color-mix()` and a relative colour whose ink misses AA must fail on
+  the *ratio* — only possible if the parser really computed them. The other two prove
+  the refusals still refuse: an unimplemented mix space, and a `calc()` inside a
+  channel. Half-implemented CSS maths is worse than an honest refusal.
+- **Rule 5 in the pack skeleton** replaces the ban with the limits and one migration
+  rule: relative colour is Baseline 2024, so where a token feeds an
+  accessibility-critical property — a focus ring above all — the literal ships first
+  and the derived value second, because a dropped declaration on a focus ring is an
+  invisible focus indicator.
+- **`docs/audit/2026-08-13-modern-css-audit.md`** — the whole measurement: what the
+  library is ahead on (OKLab dichromacy checks, `color-scheme` in 16/16,
+  `text-wrap: balance` in 13/16 kits, `tabular-nums` in 10/16), what is a deliberate
+  position rather than a gap, and ten findings with counts.
+
+### Fixed
+
+- **`showroom`'s focus ring now tracks its accent.** `rgba(38, 109, 240, 0.35)` was
+  the accent's channels written out by hand; it is now
+  `rgb(from var(--accent) r g b / 0.35)`, measured **ΔE 0.00** from the literal, with
+  the literal kept as the preceding declaration. Re-tinting `--accent` used to leave
+  the ring on the old blue silently — the live mechanism behind B-023/B-024.
+- **A blind spot closed in the same commit that opened its cause.** `themes()` decided
+  whether a block was a theme by testing for a `#` or an `oklch(` prefix, so a dark
+  theme written in `color-mix()` would have been read as "overrides no colour" and
+  skipped entirely. It asks `COLOR_SHAPED` now.
+
+### Notes
+
+- **The migration itself is not in this release.** 42 declarations across eight token
+  layers are ΔE 0.00 from a token in their own file and could migrate with no visible
+  change; 13 more sit within ΔE 2 without equalling one, and *near is not drift* — a
+  white at 80% beside an off-white field may be deliberately white. The first set is
+  B-027 and needs a per-property support decision; the second is B-028 and needs its
+  author, not a script.
+- Also filed: B-029 (container queries in the kits — 0 of 16, against 7 viewport
+  blocks), B-030 (`text-box-trim`, measure in `ch`, metric-matched fallbacks,
+  `@property`, fluid spacing), B-031 (a DTCG export for the Figma seam).
+
+## [1.21.0] - 2026-08-12
+
+A sixteenth style pack, whose eleven pastel hues are a filing scheme rather than a
+mood — and a taxonomy that fails its own contrast floor eight times out of nine.
+
+### Added
+
+- **`pigeonhole`** — the sixteenth pack, extracted from `getinboxzero.com` off the
+  server-rendered HTML of `/` (399,558 bytes), its two shipped stylesheets
+  (599,990 bytes, 152 custom properties) and then off **computed styles on the
+  live page** at 1440×900, 768×1024 and 390×844 — 912 rendered elements. A white
+  field ruled by hairlines, one blue that only ever appears as a two-stop
+  gradient, a display face that never passes weight 400, one italic word in the
+  headline, and nine categories in which a hue *is* the category, drawn from an
+  eleven-ramp pastel system. For products
+  whose job is to sort the reader's incoming mess into named categories — email
+  triage, ticket routing, digests, organisers, CRM inboxes. Widened contract, a
+  light-only token layer, a full reference kit, and reciprocal forks written into
+  `cyclorama`, `showroom`, `orchard`, `workbench` and `manpage`.
+- **The signature element is a chip with two layers.** The outer carries the
+  deeper tint pair at radius 8px, the inner the paler pair at 7px with one pixel
+  between them — the one place in the reference where radius-by-subtraction
+  happens to hold exactly. `CategoryChip`'s label word is a **required** prop, not
+  an optional one, and the reason is measured: see below.
+- **Nine category inks, eight of them derived.** The reference paints its chip
+  inks on tints of their own hue and eight of nine fail WCAG AA against those very
+  tints — `#49d1fa` at 1.53:1, `#d8a40c` at 1.65:1, `#e65707` at 2.71:1, `#17a34a`
+  at 2.72:1, `#c942b2` at 2.79:1, `#c94244` at 3.09:1, `#124dff` at 3.89:1,
+  `#6410ff` at 4.28:1. Only the neutral `#525252` clears it. Each is re-derived
+  along OKLab lightness with hue and chroma held, and each derivation is marked at
+  its declaration.
+- **The label word is mandatory, and the number says why.** Darkening those inks
+  to clear 4.5:1 compresses them: the worst deuteranopic pair (Marketing against
+  Notification) falls from ΔE 4.42 to **1.24**, far under the palette gate's hard
+  floor of 10. Eleven hues cannot be simultaneously AA-compliant and mutually
+  distinguishable to a dichromatic reader, so the hue is declared a *redundant*
+  channel and the category tokens sit deliberately outside the gate's semantic
+  peer set — with the reason written at the declaration, so a future widening
+  reads it rather than assuming an oversight.
+- **`LabelledRow`, `WashCard` and `FaqList`** join the six-component spine. A
+  wash card's shadow is mixed toward its own hue rather than toward black, which
+  is why the page reads coloured while the field stays white.
+
+### Fixed
+
+- **The primary button's ramp is reversed against the reference.** White on its
+  upper gradient stop measures 5.04:1 and on its lower stop 3.29:1 — the label
+  passes at the top of the button and fails at the bottom of the same button. The
+  pack and the kit run the gradient light-to-dark so the worst case is the passing
+  colour.
+- **The focused CTA gets a ring.** The reference computes `outline-style: none` on
+  its focused primary button with no compensating shadow. The kit ships 2px of
+  `--accent-strong` at 2px offset.
+- **The lede ink.** `#848484` at 3.74:1, painted at 18px regular, replaced by the
+  reference's own `#6b7280` at 4.83:1.
+- **Two counts that reached no check** are corrected in passing:
+  `SURFACE_COMPOSITION.md`'s accent-role tally (thirteen → fourteen, recounted
+  from the token layers rather than incremented) and the kit-count claims in
+  `README.md`. The class stays open on the board as B-016.
+- **B-015 is closed.** `.tmp-fp-hero.png` leaves the tree and `.gitignore` gains
+  the `.tmp*` rule that would have stopped it entering.
+
+### Notes
+
+- **Two claims from the screenshots were refuted by the DOM and are recorded
+  rather than dropped.** There is no rotation anywhere on the page — zero
+  elements carry a rotation term in `transform` or the individual `rotate`
+  property, at three viewports — so a scattered, tilted pile is explicitly not
+  this pack. And the before/after diptych is not built from DOM rows: the words
+  `Before` and `After` appear zero times in the served HTML and zero times in the
+  live DOM after a full scroll pass. The section is raster art, and the pack
+  specifies it as art direction with an aspect ratio rather than as a component.
+- **No dark theme.** The reference's stylesheet carries a `.dark` block, but it
+  belongs to the application's stock shadcn slate theme and nothing on the
+  marketing page consumes it. Shipping an undocumented dark twin is a defect this
+  library already carries once (board B-018), so the pack is light only and says
+  so.
+
 ## [1.20.0] - 2026-08-12
 
 A fifteenth style pack, whose display typeface costs zero bytes — and three

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 **fifteen locked style
+decides whether to animate before it decides how, and **sixteen locked style
 packs** with ready-made design tokens, so what it builds reads as one system
 instead of a pile of effects.
 
@@ -60,6 +60,7 @@ into the cinematic layer, and says so in its own *Motion flavor* section.
 | `cyclorama` | a pale field cycling through six pastel stops on a 32s loop under near-black ink that never moves with it, a monospaced typewriter serif over mono, one orange used only as a fill, a particle organ that holds then redeploys, no shadows anywhere | enterprise AI transformation, applied-AI services, technical consultancies — where what is sold is a change of state and there is no screenshot worth showing |
 | `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 |
 
 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
@@ -134,7 +135,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 fifteen style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
+| `styles/*.md` | The sixteen 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 |
 
@@ -205,7 +206,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 fifteen kits, so switching packs swaps identity rather than API,
+identical in all sixteen 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.
@@ -251,7 +252,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 fifteen
+installers and `diff -r`s the result against the source, then builds all sixteen
 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/              fifteen style packs — instrument-console (dark console),
+  styles/              sixteen 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
@@ -247,7 +247,9 @@ ${c("bold", "What it installs")}
                        datasheet (an off-white spec sheet whose live instrument
                        goes dark when it catches the reader hiding),
                        manpage (a developer landing page set in the reader's
-                       own system monospace, cream paper, coral label chips) —
+                       own system monospace, cream paper, coral label chips),
+                       pigeonhole (a white sorting wall whose nine pastel
+                       categories are a filing scheme, one hue each) —
                        plus a ready-made token CSS per pack and
                        STYLE_PACK_TEMPLATE.md for authoring more
 `);
@@ -329,7 +331,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)\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)\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

@@ -36,7 +36,10 @@ which re-skins itself dark when it detects the reader is hiding, for B2B
 SaaS whose product is a verdict about the visitor or the device;
 manpage — a developer landing page set in the reader's own system
 monospace on cream paper, coral label chips that are real headings and a
-dark code frame as the argument, for APIs, SDKs and CLIs);
+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);
 otherwise follow the contract below (self-contained on purpose).
 
 ## Whether to animate at all — before how

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

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

@@ -0,0 +1,59 @@
+# Pigeonhole — the design contract
+
+The reference is <https://www.getinboxzero.com/>, measured 2026-08-12 off its
+computed styles at 1440×900, 768×1024 and 390×844. The full pack is
+`styles/pigeonhole.md`; this file is what a design agent must not get wrong.
+
+## The one thing this pack is
+
+**The label system is the design system.** A white wall, hairlines instead of
+borders, a display face that never passes weight 400, and nine pastel categories in
+which a hue *is* the category — each rendered as a two-layer chip: the deeper tint
+pair outside at 8px, the paler pair inside at 7px, one pixel between them.
+
+## Non-negotiable
+
+- **A category chip always carries its word.** The component's type requires it.
+  Darkened to clear WCAG AA, the worst deuteranopic pair among the nine inks sits
+  **1.24 ΔE** apart — under the palette gate's hard floor of 10 — so hue is a
+  redundant channel and the label is the real one. Status, likewise, is never by
+  colour alone.
+- **Weight 400 for the display, always.** Level 1 is
+  `clamp(34px, 5.6vw, 60px)` on line-height exactly 1. A 600 display is a
+  different pack.
+- **One italic word per page**, inside the headline, same face, same weight.
+- **The primary button's gradient runs light-to-dark.** White on the reference's
+  lower stop measures 3.29:1 and on its upper stop 5.04:1; the kit reverses the
+  ramp so the label's worst case passes.
+- **`:focus-visible` is 2px `--accent-strong` at 2px offset.** The reference ships
+  `outline-style: none` on its focused primary CTA. Do not copy that.
+- **A tinted card's shadow is tinted to its own hue**, never to black.
+- **Elevation is a hairline.** One soft shadow (`--shadow-card`) is a hint, not a
+  hierarchy; `--shadow-hero` belongs to the product frame alone.
+
+## Banned
+
+- A chip with no label word. A hue-only category. A status told by colour alone.
+- A bolder display, or a second accent hue.
+- Any scroll clock: no scrubbing, no parallax, no sticky nav, no
+  `animation-timeline`. The reference has none of these, measured.
+- **Rotation.** Zero rotated elements at three viewports. A scattered, tilted pile
+  is not this pack, however much a screenshot suggests it.
+- `<details>` for an answer a crawler should read — the FAQ is a `<dl>`.
+- A dark theme. None was measured, and inventing one invents values.
+- Black shadows under tinted cards.
+
+## Art direction, not components
+
+The page's set pieces are **raster art** on the reference: the chaos-to-order
+diptych at 1152×703 (≈1.64:1), the hero frame at 1150×631, the next section at
+1152×539. Compose them as art with a subject, an aspect ratio and a treatment.
+`LabelledRow` is the component; the pile is a picture.
+
+## Motion
+
+Entrance and hover only. The one motion worth copying is the headline's
+**word-by-word blur-in** — each word its own element, entering on opacity and
+`filter: blur()` at `--stagger-word`, settling at `blur(0px)`. `--ease-overshoot`
+is spent on exactly one element, as the reference spends it. Everything collapses
+under `prefers-reduced-motion`, which the reference honours globally.

package/kits/pigeonhole/README.md

@@ -0,0 +1,53 @@
+# @sheleg-design/pigeonhole
+
+The React reference kit for the SHELEG **Pigeonhole** style pack — a white wall
+ruled by hairlines, a display face that never passes weight 400, one italic word
+in the headline, and nine pastel categories in which a hue *is* the category.
+
+It is generated from the pack, not authored beside it: `src/styles.css` opens with
+`styles/tokens/pigeonhole.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 four
+
+`Button`, `Card`, `Chip`, `Stat`, `Heading` and `Rule` are identical in name, props
+and types across every SHELEG kit — switching packs swaps identity, not API.
+
+The four that are this pack's own:
+
+| Component | What it is |
+|---|---|
+| `CategoryChip` | the two-layer chip — deeper tint outside at 8px, paler inside at 7px — and the **signature element**. Its label word is required by its type |
+| `LabelledRow` | one row of the product, labelled: the atom the pack is built from |
+| `WashCard` | a feature card in its category's palest pair, its shadow tinted to its own hue |
+| `FaqList` | a `<dl>` whose answers are always visible, so a machine can quote them |
+
+## Why the label word is a required prop
+
+Nine category inks were measured on the reference and eight of them fail 4.5:1
+against the very tints it paints them on — `#49d1fa` at 1.53:1 is the worst. The
+kit ships derived inks that clear the floor, and derivation has a cost: pushing
+lightness down compresses the hues in OKLab, so the worst deuteranopic pair
+(Marketing against Notification) ends up **1.24 ΔE** apart, well under the palette
+gate's hard floor of 10.
+
+Nine hues cannot be simultaneously AA-compliant and mutually distinguishable to a
+dichromatic reader — and they were not distinguishable before the derivation either:
+the reference's own worst pair measures 4.42 ΔE against the same floor of 10. The
+derivation makes it worse rather than causing it. So the hue is the second channel
+and the word is the first, which is why `children` on `CategoryChip` is not
+optional.
+
+## What this kit deliberately does not contain
+
+The page's set pieces are **raster art** on the reference — the chaos-to-order
+diptych at 1152×703, the hero frame at 1150×631 — so they are art direction rather
+than components. And nothing here rotates: the measured page has zero rotated
+elements at three viewports.

package/kits/pigeonhole/package.json

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

@@ -0,0 +1,20 @@
+---
+category: Actions
+---
+
+The primary is the only accent fill on a view, and its gradient runs
+**light-to-dark** — `--accent-2` at the top into `--accent` at the foot. The
+reference runs it the other way, where its white label clears 5.04:1 against the
+upper stop and 3.29:1 against the lower one; reversing the stops puts the label's
+worst case on the passing colour and changes nothing a reader would notice.
+
+Its shadow is tinted to the accent (`--shadow-cta`), never to black. `:hover`
+lifts the shadow and translates 1px; `:focus-visible` draws a 2px
+`--accent-strong` ring at 2px offset — the reference computes `outline-style:
+none` here and adds no compensating shadow, so this ring is the kit's correction
+rather than its copy.
+
+```tsx
+<Button>Get started</Button>
+<Button variant="secondary">Talk to sales</Button>
+```

package/kits/pigeonhole/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={['pg-btn', `pg-btn--${variant}`, `pg-btn--${size}`, className]
+        .filter(Boolean)
+        .join(' ')}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}

package/kits/pigeonhole/src/Card.md

@@ -0,0 +1,16 @@
+---
+category: Surfaces
+---
+
+The neutral panel: `--surface` at `--radius-panel` (32px), a `--rule` hairline,
+and the one soft shadow this pack spends on 40 elements. Elevation here is a
+hairline, not a stack — the seven-layer framing shadow belongs to `showroom`.
+
+For a feature card that belongs to a category, use `WashCard`: it fills with that
+hue's palest pair and tints its own shadow to match.
+
+```tsx
+<Card title="Bulk unsubscribe" meta="2 min">
+  Every list you never read, in one screen.
+</Card>
+```

package/kits/pigeonhole/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={['pg-card', className].filter(Boolean).join(' ')}>
+      {head && (
+        <div className="pg-card__head">
+          {title !== undefined && <h3 className="pg-card__title">{title}</h3>}
+          {meta !== undefined && <span className="pg-card__meta">{meta}</span>}
+        </div>
+      )}
+      <div className="pg-card__body">{children}</div>
+    </section>
+  );
+}

package/kits/pigeonhole/src/CategoryChip.md

@@ -0,0 +1,44 @@
+---
+category: Signature
+---
+
+**The pack's signature element.** Two nested chips: the outer carries the deeper
+tint pair at `--radius-chip` (8px), the inner the paler pair at
+`--radius-chip-inner` (7px) with 1px of padding between them — exactly the step
+the reference uses, and the one place in it where radius-by-subtraction happens
+to hold.
+
+`children` is **required**, and that is a design decision enforced by the type.
+Neither set of inks clears the bar: as the reference paints them, the worst
+deuteranopic pair (Marketing against Notification) is **4.42 ΔE** against the
+palette gate's hard floor of 10, so these hues were never distinguishable to that
+reader. Deriving them to clear WCAG AA makes it worse rather than causing it — the
+same pair falls to **1.24**. Nine hues cannot be simultaneously AA-compliant and
+mutually distinguishable to a dichromatic reader, so the word carries the category
+and the hue reinforces it. A chip without its label is not a quieter chip, it is an
+unreadable one.
+
+Each ink clears 4.5:1 against the deepest tint of its own ramp. All nine are
+derived from the reference's values, which fail that floor in eight cases out of
+nine; the numbers are in the pack's Gotchas.
+
+## Selected, for categories that are filters
+
+A chip is a label, so it has no pressed state — but where the product's categories
+*are* filters, the reader needs to know which one is on. Add `pg-cat--selected` (or
+`aria-pressed="true"`, which the stylesheet matches): the inner layer takes its
+category's `-150` step instead of `-50` and the ink marks a 2px inset. That inset is
+the one border a chip may carry.
+
+## Two of the nine do not render two layers
+
+`--cat-cold-150` and `--cat-cold-100` are the same measured literal, and
+`--cat-step-50` is the page white — so on Cold Email and on STEP the 8px→7px step
+is invisible against `--surface`. Both are faithful to the reference. Where those
+two must read as two layers, put them on `--surface-2`.
+
+```tsx
+<CategoryChip category="reply">To Reply</CategoryChip>
+<CategoryChip category="newsletter">Newsletter</CategoryChip>
+<CategoryChip category="marketing" className="pg-cat--selected">Marketing</CategoryChip>
+```

package/kits/pigeonhole/src/CategoryChip.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+
+/** The nine categories measured on the reference. `step` is the neutral. */
+export type Category =
+  | 'reply'
+  | 'newsletter'
+  | 'marketing'
+  | 'calendar'
+  | 'notification'
+  | 'cold'
+  | 'team'
+  | 'urgent'
+  | 'step';
+
+export interface CategoryChipProps {
+  category: Category;
+  /**
+   * The label word, and it is required rather than optional on purpose: the hue
+   * alone cannot carry the category. The reference's own inks leave the worst
+   * deuteranopic pair 4.42 ΔE apart against a floor of 10, and deriving them to
+   * clear WCAG AA drops that pair to 1.24 — so a reader with deuteranopia cannot
+   * tell Marketing from Notification by colour either way. The word is the
+   * channel; the hue reinforces it.
+   */
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * The pack's signature element: two nested chips. The outer carries the deeper
+ * tint pair at radius 8px, the inner the paler pair at 7px, one pixel inside its
+ * parent — the step the reference itself uses.
+ */
+export function CategoryChip({ category, children, className }: CategoryChipProps) {
+  return (
+    <span
+      className={['pg-cat', `pg-cat--${category}`, className].filter(Boolean).join(' ')}
+    >
+      <span className="pg-cat__inner">{children}</span>
+    </span>
+  );
+}

package/kits/pigeonhole/src/Chip.md

@@ -0,0 +1,16 @@
+---
+category: Data
+---
+
+The generic tag. For a **category**, use `CategoryChip` instead — that one is the
+two-layer construction this pack is remembered by, and its label word is required
+by its type.
+
+`neutral` is `--surface-2` under `--ink-soft`. `accent` is `--accent-wash` under
+`--accent-strong` at 5.04:1 on the field. `selected` adds an `--accent-edge`
+border rather than a second fill.
+
+```tsx
+<Chip>Open source</Chip>
+<Chip tone="accent" selected>Free for 7 days</Chip>
+```

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

package/kits/pigeonhole/src/FaqList.md

@@ -0,0 +1,11 @@
+---
+category: Data
+---
+
+A `<dl>`, always open. There is no `collapsed` prop on purpose: 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.
+
+```tsx
+<FaqList entries={[{ q: 'Which providers?', a: 'Gmail and Outlook.' }]} />
+```

package/kits/pigeonhole/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={['pg-faq', className].filter(Boolean).join(' ')}>
+      {entries.map(({ q, a }) => (
+        <div className="pg-faq__row" key={q}>
+          <dt className="pg-faq__q">{q}</dt>
+          <dd className="pg-faq__a">{a}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}