release: v0.4.1

Republished via native secrets-engine exec (SECRETS-WP-0003 pilot closeout).
No package content changes from v0.4.0.

.claude/rules/designbook-propagation.md

@@ -0,0 +1,59 @@
+## Designbook propagation & adapter governance (WHYNOT-WP-0002)
+
+The whynot design language is **technology-neutral**. It is authored once and
+projected onto each UI stack through an intermediate representation. These rules
+keep that flow one-way and the stacks in sync.
+
+### Directionality — one way only
+
+```
+Claude Design (React, canonical)  →  designbook/  →  ir/  →  adapters/<stack>/ → stack source
+```
+
+- **Claude Design (the React designbook) is the source of truth** for the *language*.
+- **Never hand-edit `ir/`** — `ir/tokens.json`, `ir/components/*.json`, and
+  `ir/exemplars/*` are written only by the extractor (`scripts/ir-extract.mjs`,
+  `make ir`). They are committed so blueprint changes show up as a git diff.
+  Authored-by-hand exceptions: `ir/schema/`, `ir/SCHEMA.md`, `ir/README.md`.
+- **Never back-edit React/Claude Design from a stack.** A Lit (or any stack) change
+  that should alter the shared language must be made in Claude Design and
+  re-propagated. A direct stack→React edit that bypasses Claude Design is a
+  governance violation — it desyncs the canonical source from the implementation.
+- **Adapters never overwrite hand-authored behaviour.** Tokens regenerate fully;
+  new components get stubs; changed components get a **drift report**, never a
+  rewrite. See `adapters/ADAPTER_CONTRACT.md`.
+
+### When the cloud designbook moves
+
+Run the refresh sequence (orchestrated by `make designbook-refresh`, WHYNOT-WP-0002
+Phase 5); do not shortcut it:
+
+1. `make designbook-check` — detect the cloud designbook moved ahead.
+2. `make designbook-pull` — pull the latest React designbook into `designbook/`
+   (drives the local `claude` binary headless via `DesignSync`; stamps freshness
+   itself). The bundled `/design-sync` skill *pushes* repo→cloud and does **not**
+   populate `designbook/` — use `make designbook-pull` for the pull.
+3. `make designbook-sync` — record the diff in `RecentChanges.md`.
+4. `make ir` — re-extract the IR; **review the `ir/` git diff** (the blueprint change).
+5. `make adapt-lit` — regenerate tokens, scaffold new components, emit drift reports.
+6. **Resolve drift** (human) — fill/adjust Lit behaviour per `adapters/lit/drift/*.md`.
+7. `make parity-lit` — confirm appearance + contract parity (gate).
+
+### Drift triage
+
+A drift report (`adapters/lit/drift/<Name>.md`, command exit code `3`) is resolved
+by a human, not the adapter:
+
+- Decide direction: stale stack → fix the stack to match IR; language should change
+  → edit Claude Design and re-propagate (never patch only the stack).
+- **Non-portable props** (React objects, render props, callbacks) are surfaced as
+  drift on purpose and must be handled explicitly — never silently dropped.
+- A report is closed when a fresh `make ir && make adapt-lit` produces no issues
+  for that component and `make parity-lit` passes (exit `0`).
+
+### Exit codes (CI)
+
+`0` ok · `2` usage/config error · `3` drift detected (stop for human triage) ·
+`4` parity failure (fail) · `5` internal error. See `adapters/ADAPTER_CONTRACT.md`.
+
+Full narrative: `DesignSystemIntroduction.md` §5.1.

.claude/rules/stack-and-commands.md

@@ -18,17 +18,45 @@ npx playwright test -g "inbox"  # run a single visual test by name
 make                          # list make targets (help is the default goal)
 make designbook-sync          # after a /design-sync pull, record changes + last-sync time → RecentChanges.md
 make designbook-check         # ask Claude Design (via llm-connect) if the cloud is newer; warn if mirror is stale
+make ir                       # extract the technology-neutral IR (ir/) from designbook/  (React → IR)
+make adapt-lit                # project IR onto Lit: regen tokens + scaffold stubs + drift reports (exit 3 on drift)
+make parity-lit               # render every <wn-*> (Playwright) + assert contract/visual parity (exit 4 on fail)
+make designbook-refresh       # the refresh loop: check→pull→sync→ir→adapt-lit→(drift triage)→parity. ARGS="--no-pull" etc.
 make recent-changes           # regenerate RecentChanges.md (alias; ARGS="--range main..HEAD" supported)
 make sync-styles              # = node scripts/sync-shared-styles.mjs
 ```
 
+### Keeping Lit current with the designbook — the refresh loop (WHYNOT-WP-0002)
+
+`make designbook-refresh` is the single routine that re-propagates a cloud designbook
+change down to the Lit stack. It runs the automatable steps and **stops for you** when
+drift needs a human decision:
+
+```
+1 designbook-check  → has the cloud moved?            (best-effort: needs llm-connect)
+2 designbook-pull   → pull React designbook→designbook/ (best-effort: needs `claude` binary)
+3 designbook-sync   → record the diff → RecentChanges.md
+4 ir                → re-extract ir/ (review the git diff — the blueprint change)
+5 adapt-lit         → regen tokens, scaffold new stubs, emit drift reports
+6 ‹you› resolve drift  ← STOP if step 5 exits 3 (adapters/lit/drift/*.md)
+7 parity-lit        → confirm contract + visual parity
+```
+
+Exit codes propagate the adapter contract: **3** = stop for drift triage (step 6),
+**4** = parity failure. Steps 1–3 are best-effort (a network/`claude`/llm-connect
+gap warns and continues; the IR just re-extracts from the current mirror). After
+resolving drift, re-run `make designbook-refresh --no-pull` (via `ARGS=`) to re-check
+and reach parity. Drift resolution itself is governed by
+`.claude/rules/designbook-propagation.md` (fix the stack, or change the language in
+Claude Design and re-propagate — never a stack→React back-edit).
+
 There is no unit-test suite — correctness is verified by full-page Playwright screenshot diffs of the two `examples/` pages (`tests/visual/ui-kit.spec.mjs`, `maxDiffPixelRatio: 0.005`). Any visual change needs `pnpm test:visual:update` + baseline review.
 
 ## Integrating the designbook
 
 The **designbook** is the upstream atelier — the **Claude Design project** (cloud, `claude.ai/design`), source of truth for the *language*. Its local mirror lives in-repo at `designbook/` (see `designbook/README.md`). Sync is **agent-driven and incremental** (one component at a time, never a wholesale replace):
 
-1. **Pull** — run `/design-sync` in Claude Code (the `DesignSync` tool over the claude.ai login); it writes into `designbook/`. Immediately stamp the time: `node scripts/designbook-sync.mjs --mark-synced`. A Makefile cannot invoke the MCP tool, so the pull is always an agent step.
+1. **Pull** — run `make designbook-pull` (`scripts/designbook_pull.py`). It drives the local `claude` binary headless (`claude --print --permission-mode acceptEdits`), which has the `DesignSync` tool over the claude.ai login, to fetch the React designbook and write it into `designbook/`; the file contents stay in that subprocess, so the pull is cheap regardless of size. Selection is governed by `designbook/.design-pull.json` (it excludes `_whynot-design-seed/**`, the cloud project's copy of this repo). The script stamps freshness itself on success. **Note:** the bundled `/design-sync` skill goes the *other* way — it *pushes* a repo up to Claude Design — so it does **not** populate `designbook/`; use `make designbook-pull` for the pull (see `designbook-propagation.md`).
 2. **Record** — `make designbook-sync` runs `scripts/designbook-sync.mjs`, writing `RecentChanges.md`: a **snapshot** (not a log) of what changed across `designbook/` + the derived surfaces (`tokens/`, `src/styles/`, `src/elements/`, `examples/`), grouped by layer.
 
 **Freshness** is tracked in `designbook/.design-sync.json` (`lastSyncAt`, `remoteUpdatedAt`, `projectId`, `projectName`). Every report states **"Last /design-sync: <datetime>"** so it's clear whether the snapshot reflects the latest design. The cloud-ahead check is backed by **llm-connect** (`make designbook-check` → `scripts/check_designbook_staleness.py`): it uses the `claude-code` adapter to ask the local `claude` binary for the project's current `updatedAt` via `DesignSync.list_projects`, then records it with `node scripts/designbook-sync.mjs --remote-updated <iso>`. Only the `claude-code` adapter can reach the user's Claude Design project (Gemini/OpenRouter/OpenAI cannot), and no secret goes in the prompt — DesignSync uses the claude.ai login (see `credential-routing.md`). The check needs `llm_connect` importable; the Makefile auto-selects `~/llm-connect/.venv/bin/python`. Use `--remote-updated <iso>` to run the comparison offline/manually, or `--fail-if-stale` (exit 3) in automation. When `remoteUpdatedAt` is newer than `lastSyncAt`, the report and stdout **warn that the local mirror is OUTDATED** until the next `/design-sync`. If no sync was ever recorded, it warns that `/design-sync` has not run. The reporter is deterministic (built from `git status`/`git diff`), only writes the working tree, never commits, and never edits `designbook/` content. Fold notable entries into `CHANGELOG.md` under `## [Unreleased]` before releasing — `RecentChanges.md` is overwritten every run and is **not** the CI-enforced artifact.

.custodian-brief.md

@@ -2,7 +2,7 @@
 # Custodian Brief — whynot-design
 
 **Domain:** infotech  
-**Last synced:** 2026-06-22 20:46 UTC  
+**Last synced:** 2026-06-30 07:54 UTC  
 **State Hub:** http://127.0.0.1:8000 *(adjust if running on a remote machine)*
 
 ## Active Workstreams

.gitignore

@@ -7,6 +7,9 @@ dist
 playwright-report
 test-results
 /tests/visual/**/__diff__
+# Visual baselines are generated locally, not committed (large binary test
+# artifacts). Run `pnpm test:visual:update` to (re)generate before diffing.
+/tests/visual/**/*-snapshots/
 
 # Python (scripts/check_designbook_staleness.py)
 __pycache__
@@ -15,3 +18,7 @@ __pycache__
 # Editor
 .vscode
 .idea
+
+# Adapter parity render-smoke screenshots (regenerated by make parity-lit; the
+# committed result is adapters/lit/parity/_parity.json)
+adapters/lit/parity/*.png

.npmrc

@@ -1,5 +1,6 @@
-# When ready to publish to Gitea Packages, uncomment and set NPM_AUTH_TOKEN
+# @whynot/* is published to and installed from the coulomb Gitea npm registry.
-# in your shell or CI secrets.
+# The auth token is NOT stored here — set NPM_AUTH_TOKEN in your shell/CI.
-#
+# It is operator/OpenBao-owned (credential-routing.md: tokens route, never vend);
-# @whynot:registry=https://gitea.example.com/api/packages/whynot/npm/
+# obtain a Gitea package token from the operator. Publish flow: see PUBLISHING.md.
-# //gitea.example.com/api/packages/whynot/npm/:_authToken=${NPM_AUTH_TOKEN}
+@whynot:registry=https://gitea.coulomb.social/api/packages/coulomb/npm/
+//gitea.coulomb.social/api/packages/coulomb/npm/:_authToken=${NPM_AUTH_TOKEN}

CHANGELOG.md

@@ -6,7 +6,145 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). Version
 
 ## [Unreleased]
 
-_Nothing yet. Add entries above the next `[vX.Y.Z]` block as PRs land._
+### Added
+
+- **Lit adapter completed + refresh pipeline** (WHYNOT-WP-0002, Phases 3–6). The
+  one-way `React → designbook/ → ir/ → adapters/lit` pipeline is now end-to-end:
+  - `make adapt-lit` gains **component scaffold + drift** (T07): parses
+    `src/elements/*.js`, compares each `<wn-*>` to its IR contract, and writes
+    per-component drift reports + a machine roll-up (`adapters/lit/drift/`), with
+    write-once stubs (`adapters/lit/stubs/`) for new components — never overwriting
+    hand-authored sources. Severity split: actionable drift gates (exit 3);
+    `non-portable`/`prop-extra` are informational.
+  - `make parity-lit` (T08): renders every `<wn-*>` in a real browser and asserts
+    **contract + visual parity**, writing `adapters/lit/parity/_parity.json`
+    (exit 4 on failure).
+  - `make designbook-refresh` (T09): the refresh orchestrator
+    (check→pull→sync→ir→adapt-lit→drift-triage→parity) honouring the adapter
+    exit-code contract, plus a drift-resolution runbook in `designbook/README.md`.
+  - `make adapt-plain-css` (T10): a deliberately-unfinished second-adapter **smoke**
+    proving the IR/adapter seam — a non-Lit adapter consuming the same `ir/` with the
+    same contract shapes and zero `ir/` changes.
+- **Drift triage resolved — `make designbook-refresh` is green** (0 drift, parity pass).
+  The three surfaced divergences were resolved without any stack→React back-edit:
+  a documented `TAG_OVERRIDES` in the extractor maps `PipelineStrip → wn-pipeline`
+  (the tag is an IR-projection detail); the drift detector now recognises a prop
+  honoured by a same-named named slot (`<wn-page-header>` `actions`); and an auditable
+  `adapters/lit/drift.accepted.json` registry records the intentional Sidebar
+  composition divergence (`current` key ↔ per-item `active`) as a justified,
+  non-gating note.
+
+## [0.4.1] — 2026-07-03
+
+Republished to the coulomb Gitea npm registry through the native
+`secrets-engine exec` pilot closeout (SECRETS-WP-0003). No package content
+changes from `0.4.0`.
+
+## [0.4.0] — 2026-06-28
+
+### Fixed
+
+- **Showcase page no longer wedges the renderer** (WHYNOT-WP-0002 T11). `<wn-breadcrumb>`
+  inserted separator elements into its own light DOM on `slotchange` while cleaning up
+  in the shadow DOM, so separators were never removed — each insertion re-fired
+  `slotchange` and the main thread looped forever, so `examples/showcase/index.html`
+  never finished rendering. `WnBreadcrumb._onSlot` is now idempotent (excludes its own
+  separators; mutates only when they are not already correct). The showcase visual test
+  is un-`fixme`'d and captures a stable `showcase.png`, unblocking WHYNOT-WP-0003 T08
+  (showcase as per-version visual catalog).
+
+### Removed
+
+- **Dead Google-Fonts `@import`** from `src/styles/colors_and_type.css`. Every token
+  font stack is system-ui based, so the imported IBM Plex webfont was unused; it was
+  also a documented source of CI flakiness. No visual change (system fonts unchanged).
+
+### Added
+
+- **Versioned IR manifest + consumer drift-check** (WHYNOT-WP-0003, Phase 1–4). The
+  `ir/` contract is now the unit of versioned downstream consumption:
+  - `ir/manifest.json` (T03) — per-version inventory + diff anchor:
+    `{ schemaVersion, designVersion, generatedAt, tokensHash, components:[{name,group,hash}] }`,
+    each hash a deterministic sha256 over canonicalised JSON (formatting-invariant,
+    `generatedAt` reused on no-op runs → no git churn). Schema:
+    `ir/schema/manifest.schema.json`. Emitted by `make ir`.
+  - `ir/INDEX.md` (T07) — human-readable catalog generated from the contracts;
+    browse a version without cloning or running anything. Emitted by `make ir`.
+  - **`npx @whynot/design drift`** (T05) — consumer-side drift-check (`bin/whynot-design.mjs`,
+    new `bin` entry). Compares a consumer's adopted `.whynot-design.lock` against the
+    installed package's manifest and reports added/changed/removed components + token
+    changes (`--json`, `--update`, `--manifest`, `--version`, `--lock`). Exit codes
+    mirror the adapter contract: `0` in sync · `2` usage error · `3` drift.
+  - `.whynot-design.lock` sync-point format (T04) — `ir/schema/lock.schema.json` +
+    documented lifecycle (consumer-side mirror of `designbook/.design-sync.json`).
+  - `CONSUMING.md` (T06) — pin → inspect → drift → update guide, with a runnable
+    `examples/consumer-fixture/`; cross-linked from `README.md` and `MultiFrameworkSupport.md`.
+  - `CONSUMER_CONTRACT_PARITY.md` (T09) — design-only note + recorded go/defer
+    decision for the heavier live-UI-vs-contract parity mode (deferred).
+- **Publishable to the coulomb Gitea npm registry** (WHYNOT-WP-0003 T02) — `private:false`,
+  `publishConfig.registry`, real `repository.url`, an `.npmrc` scope + `${NPM_AUTH_TOKEN}`
+  reference (no secret committed), and `PUBLISHING.md` (publish flow + consumer install +
+  token routing). The package now ships the `ir/` consumer contract (added to `files` and
+  the `./ir/*` export) so consumers can pin a version and track it.
+
+### Changed
+
+- **`lit` is now a `peerDependency`** (`^3`), not a direct dependency. Consumers must
+  install `lit` alongside `@whynot/design` (`npm i @whynot/design lit`) so their bundler
+  dedupes to a single `lit` instance.
+
+## [0.3.0] — 2026-06-27
+
+### Added
+
+- **Technology-neutral IR + stack-adapter pipeline** (WHYNOT-WP-0002, Phase 0–3). The
+  design language is now authored once in the canonical React designbook and projected
+  one-way onto each stack: `React → designbook/ → ir/ → adapters/<stack>/`.
+  - `ir/` — committed, diffable blueprint: `ir/SCHEMA.md`, JSON Schemas
+    (`ir/schema/{component,tokens}.schema.json`), and the extractor's output
+    (`ir/tokens.json` in W3C DTCG format, `ir/components/*.json`, `ir/exemplars/*`).
+  - `adapters/ADAPTER_CONTRACT.md` — the contract every stack adapter implements
+    (inputs, drift report + parity result shapes, idempotency, CI exit codes).
+  - `scripts/designbook_pull.py` + `make designbook-pull` — pulls the React designbook
+    from Claude Design into `designbook/` (the bundled `/design-sync` skill only
+    *pushes*, so it cannot populate `designbook/`).
+  - `scripts/ir-extract.mjs` + `make ir` — extracts the IR from the `.jsx` ui-kit,
+    manifest, and previews.
+  - `adapters/lit/` + `make adapt-lit` — Lit reference adapter; tokens fully generated
+    into `src/styles/colors_and_type.css` (marker-bounded, idempotent).
+  - `.claude/rules/designbook-propagation.md` + `DesignSystemIntroduction.md` §5.1 —
+    one-way governance and drift-resolution workflow.
+
+### Changed
+
+- `src/styles/colors_and_type.css` — token `:root` block is now **generated** by
+  `make adapt-lit` from `ir/tokens.json` (between `@generated tokens` markers). This
+  synced the Lit token layer to the canonical React designbook: font stacks switched
+  from IBM Plex to system-font stacks, and the functional-status tokens
+  (`--status-error/warn/success/info` + `-bg`) were added. **Visual change — Playwright
+  baselines need review + `pnpm test:visual:update`.**
+
+### Fixed
+
+- **Visual-regression harness now renders deterministically.** The four
+  `examples/whynot-control` pages render and screenshot cleanly against the new tokens.
+  Snapshot baselines are now **gitignored** (generated locally via
+  `pnpm test:visual:update`, not committed — they are large binary test artifacts).
+  Along the way:
+  - `serve.json` (`cleanUrls:false`) — the static server was 301-redirecting
+    `/…/index.html` to a trailing-slash-stripped URL, shifting the document base and
+    404'ing every relative asset (also broke `pnpm showcase` in the browser).
+  - `examples/whynot-control/index.html` — token stylesheet linked a non-existent
+    root path; repointed to `../../src/styles/colors_and_type.css` so the page picks
+    up the design tokens.
+  - `examples/vendor/lit.js` — vendored a self-contained esbuild bundle of `lit` and
+    pointed the showcase importmap at it, replacing the multi-hop live esm.sh module
+    graph (regen command noted in the showcase importmap comment).
+  - `tests/visual/ui-kit.spec.mjs` — abort the (unused, post-IBM-Plex) Google-Fonts
+    CDN in tests; a hung font request was blocking module execution and `load`.
+- The `showcase` "every component" visual test is `test.fixme` pending
+  **WHYNOT-WP-0002-T11** — that page wedges the renderer main thread (a demo
+  composition loops); the four control baselines are unaffected.
 
 ## [0.2.0] — 2026-05-25
 

CLAUDE.md

@@ -6,6 +6,7 @@
 @.claude/rules/first-session.md
 @.claude/rules/workplan-convention.md
 @.claude/rules/stack-and-commands.md
+@.claude/rules/designbook-propagation.md
 @.claude/rules/architecture.md
 @.claude/rules/repo-boundary.md
 @.claude/rules/credential-routing.md

CONSUMER_CONTRACT_PARITY.md

@@ -0,0 +1,74 @@
+# Design note — consumer-side contract parity (WHYNOT-WP-0003 · T09)
+
+> **Status: design-only. Deferred — do not implement.** This note captures the
+> shape of the richer drift mode so the decision to build it is informed, not so
+> it gets built now. The must-have is the **snapshot diff** (`drift`, T05); this is
+> the heavier, per-stack second mode.
+
+## What it is
+
+The shipped `drift` check (T05) compares two **manifests** — the consumer's
+adopted `.whynot-design.lock` against a target `ir/manifest.json`. It answers
+*"what changed in the contract between the version I adopted and this one?"* It
+never looks at the consumer's actual UI.
+
+**Contract parity** is the inverse question: *"does my live rendered UI still
+match the contract I adopted?"* It compares a consumer's **live rendered
+elements' observed attributes / properties** against the IR component contracts
+(`ir/components/*.json`) — the consumer-side mirror of the upstream adapter parity
+(WHYNOT-WP-0002 · T08), which checks the Lit stack against the designbook
+exemplars.
+
+```
+T05 (shipped):     .whynot-design.lock   ── snapshot diff ──▶   ir/manifest.json
+                   (contract vs contract, version-to-version)
+
+T09 (this note):   live rendered elements ── parity ──▶   ir/components/*.json
+                   (running UI vs contract, per-stack introspection)
+```
+
+## Why it is heavier (the reason to defer)
+
+Snapshot diff is pure data: hash vs hash, no runtime, no DOM, network-free,
+stack-agnostic. Contract parity needs to **observe a running UI**, which makes it
+fundamentally per-stack:
+
+- **Introspection substrate.** You must render each component and read back its
+  realised attributes/properties/slots — a browser/JSDOM/per-framework harness
+  the consumer has to stand up. There is no framework-neutral way to enumerate
+  "what props did this element actually accept."
+- **Coverage problem.** A consumer renders components with *its own* prop
+  combinations; parity can only check what the consumer actually mounts, so
+  "no parity failures" ≠ "fully conformant." It needs a fixture/exemplar set,
+  which re-introduces per-stack authoring.
+- **Non-portable props.** React objects / render-props / callbacks
+  (`portable:false` in the IR) have no attribute form to observe — exactly the
+  class the adapter contract already surfaces as drift. Parity would have to
+  decide, per stack, what "matching" even means for them.
+- **Maintenance surface.** It is a second, stack-specific tool to keep in step
+  with every IR shape change, for a check the snapshot diff already covers at the
+  contract level.
+
+## Proposed shape (if/when built)
+
+- A `parity` subcommand alongside `drift`, opt-in, requiring the consumer to
+  declare a render harness + a fixture set (which elements, which prop combos).
+- Reuse of the adapter parity result shape (`adapters/ADAPTER_CONTRACT.md`
+  "Parity result — minimal machine shape") so upstream and downstream parity read
+  identically, and the existing exit codes (`0` ok · `4` parity failure).
+- Per-element issues drawn from the same vocabulary as adapter drift:
+  `prop-missing`, `attribute-mismatch`, `variant-missing`, `removed-prop`,
+  `non-portable`.
+
+## Decision
+
+**Defer.** Ship the snapshot diff (`drift`, T05) as the must-have downstream
+check; record contract parity as a known, designed-but-unbuilt second mode. It
+becomes worth building only when a consuming repo has a real conformance need
+(e.g. an automated gate that its live UI has not silently diverged from an adopted
+contract) — at which point this note is the starting blueprint. Tracked as the
+go/defer decision recorded against this workplan via `record_decision`.
+
+This also keeps the **one-way constraint** intact: like `drift`, a future
+`parity` is read-only against the package and writes nothing back to
+whynot-design — it only observes the consumer's own UI.

CONSUMING.md

@@ -0,0 +1,150 @@
+# Consuming whynot-design from another repo
+
+whynot-design is the **upstream visual reference** for other repos. It is a
+development reference and demo platform — it does not run as a production
+workload and handles no critical data. Consuming repos build their production
+UIs *from* it, and follow up on changes **at their own pace** — they are never
+force-synced.
+
+A consumer tracks the **IR** (`ir/`), not the Lit internals. The IR is the
+technology-neutral contract: per-component contracts (`ir/components/*.json`),
+W3C-DTCG tokens (`ir/tokens.json`), exemplars, and the version anchor
+`ir/manifest.json`. Three moves make this work:
+
+1. **Pin** a version — the package + your lockfile.
+2. **Inspect** it — `ir/INDEX.md` (browsable) + `ir/manifest.json` (machine).
+3. **Get a grip on changes** — `npx @whynot/design drift`.
+
+This is the inverse of whynot-design's own upstream machinery
+(`Claude Design → designbook/ → ir/`), now pointed downstream
+(`ir/ → your repo`). It is **one-way**: you read the IR; you never write back.
+
+---
+
+## 1. Pin a version
+
+`@whynot/design` is published to the coulomb Gitea npm registry. Pin an exact
+tagged version; your lockfile becomes the real pin.
+
+```bash
+# .npmrc in your repo (see PUBLISHING.md for the read-token routing)
+# @whynot:registry=https://gitea.coulomb.social/api/packages/coulomb/npm/
+
+npm i @whynot/design@0.3.0 lit
+```
+
+`lit` is a **peer dependency** — install it alongside so your bundler dedupes to
+a single `lit` instance.
+
+## 2. Inspect what you pinned
+
+No clone, no build needed:
+
+- **`node_modules/@whynot/design/ir/INDEX.md`** — human-readable catalog: every
+  component, its tag, props/variants/slots/events, and a link to its exemplar.
+- **`node_modules/@whynot/design/ir/manifest.json`** — the machine inventory:
+  `designVersion`, a `tokensHash`, and a content `hash` per component.
+
+## 3. Adopt a sync-point
+
+Record which IR state your repo has reconciled against. Run once, in your repo root:
+
+```bash
+npx @whynot/design drift --update
+```
+
+This writes **`.whynot-design.lock`** — commit it. It is the consumer-side mirror
+of whynot-design's own `designbook/.design-sync.json`.
+
+### `.whynot-design.lock` format
+
+```json
+{
+  "designVersion": "0.3.0",
+  "adoptedAt": "2026-06-27T17:31:08.640Z",
+  "manifestSchemaVersion": "1.0.0",
+  "manifestHashes": {
+    "tokens": "sha256:426f565a9ce6c36f",
+    "components": {
+      "Button": "sha256:4a32713049e433dd",
+      "TopNav": "sha256:32ebc6e46db38f93"
+    }
+  }
+}
+```
+
+| field | meaning |
+| --- | --- |
+| `designVersion` | the `@whynot/design` version you adopted |
+| `adoptedAt` | when you adopted it (first adopt, or last `drift --update`) |
+| `manifestSchemaVersion` | the manifest's shape version; a mismatch warns that hashes may not be directly comparable |
+| `manifestHashes.tokens` | adopted value of the manifest `tokensHash` |
+| `manifestHashes.components` | adopted content hash per component |
+
+**Lifecycle:** created on first `drift --update`, advanced only by a later
+`drift --update`. Nothing else writes it. Schema: `ir/schema/lock.schema.json`.
+
+## 4. Follow up at your own pace
+
+When you bump `@whynot/design` (or just want to know what moved), run:
+
+```bash
+npx @whynot/design drift
+```
+
+It compares your adopted `.whynot-design.lock` against the installed package's
+`ir/manifest.json` and reports **added / changed / removed** components plus
+whether **tokens** changed:
+
+```
+whynot-design drift
+  adopted: 0.3.0  (2026-06-27T17:31:08.640Z)
+  target:  0.4.0  (2026-07-10T09:02:11.400Z)
+
+Tokens:     changed
+Components:  +1 added · ~1 changed · -0 removed · 11 total
+  + Banner
+  ~ Button
+
+Drift detected vs your adopted sync-point.
+Adopt this version:  npx @whynot/design drift --update
+```
+
+Then, when *you* are ready, review the changed contracts in `ir/INDEX.md`, update
+your UI, and adopt the new sync-point:
+
+```bash
+npx @whynot/design drift --update
+```
+
+### Exit codes (CI-friendly)
+
+Mirrors the adapter contract (`adapters/ADAPTER_CONTRACT.md`):
+
+| code | meaning |
+| --- | --- |
+| `0` | in sync — your lock matches the target |
+| `2` | usage / config error (bad flag, missing/invalid manifest or lock) |
+| `3` | **drift detected** — something changed since your sync-point |
+
+Add `--json` for automation. Useful flags: `--manifest <path>` (diff against an
+explicit manifest, e.g. a fetched newer version on disk), `--version <x.y.z>`
+(assert the resolved manifest is that version — guards against the wrong install),
+`--lock <path>` (non-default lock location).
+
+> **No network, no writes to the package.** `drift` reads only the
+> already-installed package + your lock, and the only file it ever writes is your
+> repo's `.whynot-design.lock`.
+
+---
+
+## Try the full loop now
+
+A copy-pasteable fixture lives at
+[`examples/consumer-fixture/`](./examples/consumer-fixture/) — it exercises
+pin → inspect → drift → update against a fixed version without needing a real
+install. See its `README.md`.
+
+See also: [`README.md`](./README.md) *Tracking whynot-design* ·
+[`MultiFrameworkSupport.md`](./MultiFrameworkSupport.md) ·
+[`ir/SCHEMA.md`](./ir/SCHEMA.md).

DesignSystemIntroduction.md

@@ -217,6 +217,59 @@ The end-to-end flow for a single design change:
 
 The whole loop, warm, takes minutes. **Automation works only because every step has a deterministic check** — visual regression on both sides, semver, changelogs. Skip those and the pipeline is a slow manual process with extra tools.
 
+### 5.1 The IR pivot — technology-neutral propagation (WHYNOT-WP-0002)
+
+Claude Design's `/design-sync` produces a **React-bound** designbook. To keep the
+language portable across UI stacks (Lit today, others later) without forking it
+per stack, an **intermediate representation (IR)** sits between the atelier and
+each stack's source:
+
+```
+Claude Design (React)  ──/design-sync──▶  designbook/  ──make ir──▶  ir/  ──make adapt-lit──▶  src/ (Lit)
+   canonical authoring        React mirror      neutral blueprint        per-stack adapter
+```
+
+**Directionality is one-way: React → IR → stacks.**
+
+- The **React designbook in Claude Design is canonical.** The shared language is
+  authored there; nothing downstream is the source of truth.
+- `ir/` is the **committed, diffable blueprint** (tokens in W3C DTCG format,
+  per-component contracts, reference exemplars). Only the extractor writes it —
+  never hand-edit `ir/tokens.json`, `ir/components/`, or `ir/exemplars/`. See
+  `ir/SCHEMA.md`.
+- Each stack has an **adapter** (`adapters/<stack>/`, contract in
+  `adapters/ADAPTER_CONTRACT.md`). Adapters are **scaffold + drift-detect**:
+  tokens fully generated, new components stubbed, changed components reported as
+  **drift** — the hand-authored source is never overwritten. Lit is the reference
+  adapter.
+- **Lit-side changes do not flow back automatically.** A change to the shared
+  language must be made in Claude Design (React) and re-propagated through the IR.
+  A Lit→React back-edit that bypasses Claude Design is a governance violation: it
+  silently desyncs the canonical source from the implementation.
+
+**Drift resolution workflow.** When `make adapt-lit` reports drift
+(`adapters/lit/drift/<Name>.md`, exit code `3`):
+
+1. **Triage** — read the drift report. Each issue is one of: prop missing,
+   attribute mismatch, variant added/removed, prop removed, or a **non-portable
+   prop** (a React object/render-prop/callback that has no clean attribute).
+2. **Decide the direction.** If the IR is right and Lit is stale, a human adjusts
+   the Lit element's contract/behaviour to match. If the *language itself* should
+   change, that edit goes to Claude Design (React) and re-propagates — not into Lit.
+3. **Behaviour is filled by a human**, guided by the stub's `TODO` and the drift
+   report. The adapter never authors behaviour.
+4. **Close** — re-run `make adapt-lit` until drift clears, then `make parity-lit`
+   (exit `0`) confirms contract + visual parity. A drift report is "closed" when
+   the next extract+adapt produces no issues for that component.
+
+This **extends** the five-hop pipeline above rather than replacing it: hops 3–5
+(tag → publish → consumer) are unchanged; the IR pivot is inserted between the
+atelier and the Lit source so the same change can later be projected onto a second
+stack without re-authoring it. The full operational sequence is the
+`make designbook-refresh` runbook (WHYNOT-WP-0002 Phase 5). Governance for this
+flow is restated as an enforceable rule in
+`.claude/rules/designbook-propagation.md`.
+
 ---
 
 ## 6. Versioning discipline
@@ -233,6 +286,27 @@ Stay in `0.x.x` until something built with this system is in production. While i
 
 Promotion past `1.0.0` should appear in `whynot-control/DECISIONS.md`. Same rule as promotion to Helix or Coulomb: it's a deliberate act, not a release-script side-effect.
 
+### Release ritual
+
+A release is a **git tag** (`vX.Y.Z`) — the immutable anchor a consuming repo pins
+(`pnpm add …#vX.Y.Z`, or the published package version). Tags are cut from
+`CHANGELOG.md`'s running `[Unreleased]` section:
+
+1. Land all the work for the release on `main`, each change adding a `CHANGELOG.md`
+   `[Unreleased]` entry (the `pnpm check` gate enforces this).
+2. Pick the bump per the table above (`patch`/`minor`/`major`).
+3. Run **`make release VERSION=x.y.z`** (`scripts/release.mjs`). It:
+   - guards — refuses if the tree is dirty, if `vx.y.z` is already tagged, if a
+     `[x.y.z]` section already exists, or if `[Unreleased]` is empty;
+   - bumps `package.json`, relabels `[Unreleased]` → `[x.y.z] — <date>` and opens a
+     fresh empty `[Unreleased]`;
+   - commits `release: vx.y.z` and creates the annotated tag.
+4. `git push --follow-tags origin main`.
+5. Publish the package (see WHYNOT-WP-0003 T02) so consumers can `npm i` the version.
+
+The script never half-applies and never pushes — pushing the tag is the one explicit,
+outward step you take by hand.
+
 ---
 
 ## 7. Where Claude fits
@@ -271,8 +345,8 @@ This staging is exactly the *"low-cost learning first"* posture in `whynot-contr
 
 For whoever is bootstrapping this repo right now:
 
-- [ ] Push the seed contents to `gitea.example.com/whynot/whynot-design`.
+- [ ] Push the seed contents to `gitea.coulomb.social/coulomb/whynot-design`.
-- [ ] Tag `v0.2.0` immediately so consumers can pin.
+- [ ] Cut the first real tag with `make release VERSION=x.y.z` (see §6 — *Release ritual*) so consumers can pin.
 - [ ] Add the repo as a remote dependency in **one** consuming app (the Django one) and verify imports work end-to-end. Follow [`MultiFrameworkSupport.md` §Django](./MultiFrameworkSupport.md#django-server-rendered-templates--htmx).
 - [ ] Open one trivial PR against `whynot-design` (e.g. a CHANGELOG typo) to confirm CI passes end-to-end.
 - [ ] Record this bootstrap in `whynot-control/DECISIONS.md` as DEC-004 — *"Established whynot-design as the implementation surface, three-layer architecture, Lit web components as the canonical component layer."*

Makefile

@@ -10,13 +10,16 @@ NODE   ?= node
 PYTHON ?= $(shell [ -x $(HOME)/llm-connect/.venv/bin/python ] && echo $(HOME)/llm-connect/.venv/bin/python || echo python3)
 
 .DEFAULT_GOAL := help
-.PHONY: help designbook-sync designbook-check recent-changes sync-styles test
+.PHONY: help designbook-pull designbook-sync designbook-check ir adapt-lit recent-changes sync-styles test release
 
 help: ## Show this help.
 	@grep -hE '^[a-zA-Z_-]+:.*?## ' $(MAKEFILE_LIST) \
 	  | awk 'BEGIN{FS=":.*?## "}{printf "  \033[1m%-16s\033[0m %s\n", $$1, $$2}'
 
-designbook-sync: ## After a /design-sync pull, record what changed + last-sync time into RecentChanges.md.
+designbook-pull: ## Pull the React designbook from Claude Design into designbook/ (cloud -> local mirror).
+	$(PYTHON) scripts/designbook_pull.py $(ARGS)
+
+designbook-sync: ## After a designbook pull, record what changed + last-sync time into RecentChanges.md.
 	@echo "Pull the designbook first (in Claude Code):  /design-sync"
 	@echo "  then record the pull time:                 node scripts/designbook-sync.mjs --mark-synced"
 	@echo "This reports the diff + last /design-sync time (and warns if the cloud is newer):"
@@ -25,6 +28,21 @@ designbook-sync: ## After a /design-sync pull, record what changed + last-sync t
 designbook-check: ## Ask Claude Design (via llm-connect) if the cloud is newer; warn if the mirror is stale.
 	$(PYTHON) scripts/check_designbook_staleness.py $(ARGS)
 
+ir: ## Extract the technology-neutral IR (ir/) from the designbook mirror. One-way: React -> IR.
+	$(NODE) scripts/ir-extract.mjs
+
+adapt-lit: ## Project the IR onto the Lit stack: regen tokens (full gen), scaffold + drift (T07).
+	$(NODE) adapters/lit/adapt.mjs
+
+parity-lit: ## Confirm Lit elements honour the IR contract + render (browser). Exit 4 on parity failure.
+	$(NODE) adapters/lit/parity.mjs
+
+designbook-refresh: ## Refresh routine: check->pull->sync->ir->adapt-lit->(drift triage)->parity. ARGS=--no-pull etc.
+	$(NODE) scripts/designbook-refresh.mjs $(ARGS)
+
+adapt-plain-css: ## Second-adapter SMOKE: prove a non-Lit adapter consumes the same ir/ (WHYNOT-WP-0002 T10).
+	$(NODE) adapters/plain-css/adapt.mjs
+
 recent-changes: ## Regenerate RecentChanges.md (alias of the reporter; --range supported).
 	$(NODE) scripts/designbook-sync.mjs $(ARGS)
 
@@ -33,3 +51,7 @@ sync-styles: ## Regenerate src/elements/_styles.js from components.css.
 
 test: ## Run the Playwright visual-regression suite.
 	pnpm test:visual
+
+release: ## Cut a release: bump + cut CHANGELOG + tag. Usage: make release VERSION=0.3.0
+	@test -n "$(VERSION)" || { echo "usage: make release VERSION=x.y.z"; exit 2; }
+	$(NODE) scripts/release.mjs $(VERSION)

MultiFrameworkSupport.md

@@ -23,6 +23,11 @@ That tag is valid in:
 
 You do not write a different component per framework. You write the same custom element. The framework decides how to pass props (`variant="primary"` in HTML, `variant="primary"` in JSX, `:variant="…"` in Vue).
 
+> **Tracking versions, not just using them.** Whatever framework you wire it into, a
+> consuming repo also pins a version and follows changes at its own pace via the
+> technology-neutral IR + the `npx @whynot/design drift` check. See
+> [`CONSUMING.md`](./CONSUMING.md).
+
 ---
 
 ## Architecture recap

PUBLISHING.md

@@ -0,0 +1,55 @@
+# Publishing `@whynot/design`
+
+`@whynot/design` is published to the **coulomb Gitea npm registry** so consuming
+repos can pin a version (`npm i @whynot/design@x.y.z`) and track it at their own pace
+(WHYNOT-WP-0003). The git tag cut by `make release` (see `DesignSystemIntroduction.md`
+§6) is the version; publishing makes that version installable.
+
+- Registry: `https://gitea.coulomb.social/api/packages/coulomb/npm/`
+- `package.json` `publishConfig.registry` already points `npm publish` here.
+- `lit` is a **peerDependency** — consumers install it themselves so their bundler
+  dedupes to a single `lit` instance.
+
+## The token (never commit it)
+
+Publishing and installing `@whynot/*` need a Gitea package token. It is **not stored in
+this repo** — per `.claude/rules/credential-routing.md`, tokens are routed, not vended:
+a Gitea package token is operator/OpenBao-owned (`railiance-platform`). Obtain one from
+the operator and export it:
+
+```sh
+export NPM_AUTH_TOKEN=…        # Gitea package token; never paste into git/chat/logs
+```
+
+`.npmrc` (committed) references it via `${NPM_AUTH_TOKEN}` — no secret lives in the file.
+
+## Publish (maintainer)
+
+```sh
+git checkout main && git pull --ff-only
+make release VERSION=x.y.z      # bumps, cuts CHANGELOG, commits, tags  (§6)
+git push --follow-tags origin main
+npm publish                     # uses publishConfig.registry + NPM_AUTH_TOKEN
+```
+
+`npm publish` is **outward and immutable** — a published version cannot be silently
+replaced. Confirm the tag and `npm pack --dry-run` contents first.
+
+## Install (consumer)
+
+Add an `.npmrc` to the consuming repo so the `@whynot` scope resolves to the registry,
+then install the package plus the `lit` peer:
+
+```ini
+# .npmrc
+@whynot:registry=https://gitea.coulomb.social/api/packages/coulomb/npm/
+//gitea.coulomb.social/api/packages/coulomb/npm/:_authToken=${NPM_AUTH_TOKEN}
+```
+
+```sh
+npm i @whynot/design@x.y.z lit
+```
+
+The installed package carries the consumer-facing contract under `ir/` (component
+contracts, `tokens.json`, exemplars) reachable via the `./ir/*` export — that is what
+the `drift` check (WHYNOT-WP-0003 T05) reads to report changes between versions.

README.md

@@ -38,8 +38,18 @@ Framework-agnostic by design. Consumers do **not** re-implement components per f
 
 ### Node-tooled consumer (React, Vite, Next, Vue, …)
 
+Install from the coulomb Gitea npm registry (add the scope to your `.npmrc` first — see
+[`PUBLISHING.md`](./PUBLISHING.md) for the token). `lit` is a peer dependency:
+
+```ini
+# .npmrc
+@whynot:registry=https://gitea.coulomb.social/api/packages/coulomb/npm/
+//gitea.coulomb.social/api/packages/coulomb/npm/:_authToken=${NPM_AUTH_TOKEN}
+```
+
 ```sh
-pnpm add git+ssh://git@gitea.example.com/whynot/whynot-design.git#v0.2.0
+npm i @whynot/design@0.3.0 lit
+# or pin straight from git: pnpm add git+ssh://git@gitea.coulomb.social/coulomb/whynot-design.git#v0.3.0
 ```
 
 ```js
@@ -54,6 +64,27 @@ import "@whynot/design";
 <wn-pipeline active-idx="3"></wn-pipeline>
 ```
 
+### Tracking whynot-design from a consuming repo
+
+The sections above cover *using* components. Consuming repos also need to follow
+whynot-design's evolution **at their own pace** — pin a version, see what it
+contains, and get a grip on what changed before adopting a newer one. You track
+the technology-neutral **IR** (`ir/`), never the Lit internals:
+
+```sh
+npm i @whynot/design@0.3.0 lit        # 1. pin (your lockfile is the real pin)
+# inspect: node_modules/@whynot/design/ir/INDEX.md  +  ir/manifest.json
+npx @whynot/design drift --update     # 2. adopt a sync-point → .whynot-design.lock (commit it)
+# ...later, after bumping the package...
+npx @whynot/design drift              # 3. report added/changed/removed components + token changes
+                                      #    exit 0 in sync · 3 drift · 2 usage error
+```
+
+When you're ready, review the changed contracts in `ir/INDEX.md`, update your UI,
+and `npx @whynot/design drift --update` to adopt the new sync-point. Full guide:
+**[`CONSUMING.md`](./CONSUMING.md)** · runnable demo:
+[`examples/consumer-fixture/`](./examples/consumer-fixture/).
+
 ### Django
 
 ```django
@@ -202,7 +233,7 @@ The system reads like **engineering graph paper** — precise hairlines, lots of
 
 ### Type
 
-- **Family**: `IBM Plex Sans` for everything UI/body. `IBM Plex Mono` for labels, code, and stage markers. `IBM Plex Serif` for the occasional editorial pull-quote. (See font substitution note in *Fonts* below.)
+- **Family**: native system stacks — `--ff-sans` (`ui-sans-serif, system-ui, …`) for UI/body, `--ff-mono` (`ui-monospace, …`) for labels, code, and stage markers, `--ff-serif` (`ui-serif, Georgia, …`) for the occasional editorial pull-quote. **No webfont is loaded.** (See font note below for the history.)
 - **Weights**: 300 (display only), 400 (body), 500 (UI / headings), 600 (occasional emphasis). Never 700+ — too marketing.
 - **Tracking**: tight on display (`-0.035em`), neutral on body, **wide on uppercase labels** (`0.08em` — this is the one signature move).
 - **Eyebrows everywhere**: short uppercase mono labels above titles (`STAGE`, `SIGNAL`, `PROTOTYPE`). They are the system's main rhythmic element.
@@ -340,14 +371,8 @@ These are allowed and preferred over raster icons in some contexts:
 
 ---
 
-## A note on font substitution
+## A note on fonts
 
-The control repo did not ship font files. **IBM Plex Sans / Mono / Serif** were chosen as a fresh pairing because:
+The token layer uses **native system font stacks** — `--ff-sans` (`ui-sans-serif, system-ui, …`), `--ff-mono` (`ui-monospace, …`), `--ff-serif` (`ui-serif, Georgia, …`). **No webfont is loaded.** These stacks were synced from the canonical React designbook (WHYNOT-WP-0002 T06); they keep the neutral, technical-document feel while staying offline-safe and dependency-free.
 
-- The "Plex" family was designed by IBM as an explicitly *neutral, technical-document* family — the same use-case as this system.
+History: **IBM Plex Sans / Mono / Serif** was the earlier pairing — a neutral IBM technical-document family with shared metrics across sans/mono/serif, SIL OFL, available on Google Fonts. It was dropped in favour of system stacks. To reintroduce a brand webfont, add an `@font-face` block and point `--ff-sans` / `--ff-mono` / `--ff-serif` at it in `colors_and_type.css` — everything downstream follows.
-- All three (sans, mono, serif) share metrics, so they mix cleanly in templates and tables.
-- They are openly licensed (SIL OFL) and available on Google Fonts.
-
-Plex is currently loaded from Google Fonts (see top of `colors_and_type.css`). For offline use, drop the `.woff2` files into `fonts/` and swap the `@import` for a local `@font-face` block.
-
-> **🟨 Substitution flagged**: there was no specified brand font; IBM Plex is a choice made here. If `whynot` later adopts a different brand font, replace `--ff-sans` / `--ff-mono` / `--ff-serif` in `colors_and_type.css` and everything downstream will follow.

RecentChanges.md

@@ -2,19 +2,14 @@
 
 Snapshot of the last designbook integration. Regenerated by `make designbook-sync`.
 
-- Generated: 2026-06-22T20:02:58Z
+- Generated: 2026-06-30T07:48:39Z
 - Compared: working tree (uncommitted)
-- Last /design-sync: never recorded
+- Last /design-sync: 2026-06-23T19:25:28Z
-
-> WARNING — no /design-sync has been recorded, so the local designbook/ may not
-> reflect the Claude Design project. Run `/design-sync` in Claude Code, then
-> `node scripts/designbook-sync.mjs --mark-synced`.
 
 > This file is overwritten on every run — a snapshot, not a log. Fold notable entries
 > into `CHANGELOG.md` under `## [Unreleased]` before releasing; that is the file CI
 > enforces (`pnpm check`). The designbook itself is synced via `/design-sync`, not this script.
 
-## Changed files
+## No changes
 
-### Designbook
+The design surface is unchanged since the last sync.
-- `ADDED   ` designbook/README.md (+70 / -0)

adapters/ADAPTER_CONTRACT.md

@@ -0,0 +1,137 @@
+# Adapter Contract
+
+> The contract **every** whynot stack adapter implements, so a new stack
+> (Vue, Angular, Svelte, plain-CSS, …) is a drop-in. Part of WHYNOT-WP-0002.
+> Lit (`adapters/lit/`) is the reference implementation. Django
+> (`adapters/django/`) predates the IR and is a hand-authored Layer-3 partial
+> set, not an IR adapter — it is exempt until/unless migrated.
+
+An adapter is **scaffold + drift-detect**, not full behavioural codegen:
+
+- **tokens** → fully generated (deterministic, re-run is a no-op when unchanged),
+- **new component** → a stub is generated (skeleton + typed inputs + a behaviour TODO),
+- **changed component** → a **drift report** is emitted; the hand-authored source is
+  **never overwritten**,
+- **appearance** → verified against the designbook's own exemplars (parity).
+
+Behaviour stays hand-authored per stack. The adapter keeps each component's
+*contract and appearance* aligned; it does not own its behaviour.
+
+---
+
+## Inputs
+
+The sole input is the committed IR (`ir/`, produced one-way from the React
+designbook — see `ir/SCHEMA.md`):
+
+| Input | What the adapter reads it for |
+|---|---|
+| `ir/tokens.json` | Token generation (W3C DTCG → stack-native token form). |
+| `ir/components/<Name>.json` | Per-component contract: props, prop→attribute map, slots, events, variants. |
+| `ir/exemplars/<Name>.{html,png}` | Reference render for visual parity. |
+| `ir/schema/` | The schemas the adapter may re-validate inputs against. |
+
+An adapter **MUST NOT** write to `ir/`. Flow is one-way: React → IR → stacks.
+
+## Outputs
+
+An adapter produces exactly three kinds of output:
+
+1. **Generated artifacts** into the stack's own source tree.
+   - Tokens: fully generated, deterministic (e.g. Lit → `src/styles/colors_and_type.css`).
+   - New-component stubs: written to the stack's component tree, marked generated,
+     with a behaviour `TODO`. A stub is created **only** when no hand-authored
+     counterpart exists.
+
+2. **A machine-readable drift report** — one file per drifted component plus a
+   roll-up. Lit writes these to `adapters/lit/drift/<Name>.md` (human view) backed
+   by a machine-readable summary. The report enumerates, per component:
+   - props present in IR but missing on the element (and vice-versa),
+   - prop→attribute mismatches,
+   - missing / extra / renamed variants,
+   - removed props,
+   - **non-portable props** (`portable:false`) surfaced explicitly — never dropped.
+
+3. **A parity result** — a single structured outcome per `make parity-<stack>`
+   covering (a) **contract parity** (observed attributes/properties vs IR) and
+   (b) **visual parity** (rendered component diffed against `ir/exemplars/<Name>`).
+
+### Drift report — minimal machine shape
+
+```json
+{
+  "stack": "lit",
+  "generatedAt": "<iso8601>",
+  "irRef": "<git-sha-or-mtime of ir/>",
+  "components": [
+    {
+      "name": "Button",
+      "status": "drift",            // "ok" | "new" | "drift" | "removed"
+      "issues": [
+        { "kind": "prop-missing",      "prop": "tone", "detail": "in IR, absent on <wn-button>" },
+        { "kind": "attribute-mismatch","prop": "iconEnd", "expected": "icon-end", "actual": "iconend" },
+        { "kind": "non-portable",      "prop": "renderLabel", "detail": "type=function; cannot map to attribute" }
+      ]
+    }
+  ]
+}
+```
+
+### Parity result — minimal machine shape
+
+```json
+{
+  "stack": "lit",
+  "generatedAt": "<iso8601>",
+  "components": [
+    { "name": "Button", "contract": "pass", "visual": "pass", "diffRatio": 0.0009 }
+  ],
+  "summary": { "total": 1, "contractFail": 0, "visualFail": 0 }
+}
+```
+
+## Idempotency rules
+
+1. **Tokens regenerate fully.** Running token generation twice on an unchanged
+   `ir/tokens.json` yields a byte-identical file (no-op diff).
+2. **Stubs are write-once.** A stub is generated only when no hand-authored source
+   exists. Once a human has touched a component, the adapter never re-writes it —
+   it emits drift instead.
+3. **Behaviour is never overwritten.** No adapter output replaces hand-authored
+   behaviour. The strongest action against an existing component is a drift report.
+4. **Reports are overwritten, not appended.** Drift and parity outputs are
+   snapshots of the current IR-vs-source state; each run replaces the previous.
+5. **No network, no `ir/` writes.** Adapters are pure functions of `ir/` + the
+   stack source tree.
+
+## Exit codes (for CI)
+
+Every adapter command (`make adapt-<stack>`, `make parity-<stack>`) follows the
+same convention so pipelines can branch uniformly:
+
+| Code | Meaning |
+|---|---|
+| `0` | Success. Tokens/stubs generated; no drift; parity passed. |
+| `2` | Usage / configuration error (bad args, missing `ir/`, malformed input). |
+| `3` | **Drift detected.** Generation succeeded but one or more components drifted from the IR. Non-fatal by default; use to gate a review. |
+| `4` | **Parity failure.** A contract or visual parity check failed. |
+| `5` | Internal adapter error (unexpected exception). |
+
+Codes are additive in spirit but a command returns the **highest applicable**
+code (e.g. drift + parity failure → `4`). `make designbook-refresh` (T09) treats
+`3` as "stop for human drift triage" and `4` as "fail".
+
+## Implementing a new adapter — checklist
+
+1. Create `adapters/<stack>/` with a `README.md` pointing back to this contract.
+2. Implement token generation from `ir/tokens.json` → the stack's token form
+   (full gen, deterministic).
+3. Implement stub generation from `ir/components/<Name>.json` using the
+   **prop→attribute map** (respect `attribute:false` and `portable:false`).
+4. Implement drift detection against existing hand-authored sources → the drift
+   report shape above.
+5. Implement `make parity-<stack>` → the parity result shape above, reusing the
+   Playwright harness where the stack renders to HTML.
+6. Wire `make adapt-<stack>` and `make parity-<stack>`; honour the exit codes.
+
+See `adapters/lit/` for the reference implementation.

adapters/lit/README.md

@@ -0,0 +1,72 @@
+# Lit reference adapter
+
+Projects the technology-neutral IR (`ir/`) onto the Lit stack. This is the
+**reference** adapter — the contract every stack adapter implements lives in
+[`adapters/ADAPTER_CONTRACT.md`](../ADAPTER_CONTRACT.md).
+
+Run it with **`make adapt-lit`** (`adapters/lit/adapt.mjs`).
+
+## What it does
+
+Per the contract, an adapter is **scaffold + drift-detect**, never a rewrite:
+
+| Concern | Behaviour | Status |
+|---|---|---|
+| **Tokens** | **Fully generated** from `ir/tokens.json` into the `:root` block of `src/styles/colors_and_type.css`, between `@generated tokens` markers. Deterministic — re-running with an unchanged IR is a byte-identical no-op. The hand-authored type/utility CSS after the block is preserved. | **done (T06)** |
+| **New component** | Generate a `<wn-*>` Lit stub (`adapters/lit/stubs/<Name>.js`) from the IR contract's prop→attribute map + a behaviour `TODO`. **Write-once** — into a staging dir, never the hand-authored tree; the human integrates it. | **done (T07)** |
+| **Changed component** | Emit a **drift report** (`adapters/lit/drift/<Name>.md` + machine `_report.json`) — never overwrite the hand-authored element. | **done (T07)** |
+
+### Drift severity
+
+`make adapt-lit` exits `3` only on **actionable** drift — `prop-missing`,
+`attribute-mismatch`, `variant-axis-missing`, `tag-mismatch`. **Informational**
+issues do not gate: `non-portable` (React `style`/callbacks that inherently have
+no attribute form — the Lit element is right to omit them) and `prop-extra` (the
+Lit element is richer than the minimal React designbook). Resolve actionable drift
+per `.claude/rules/designbook-propagation.md` (fix the stack, or change the language
+in Claude Design and re-propagate — never a stack→React back-edit).
+
+## Parity — `make parity-lit`
+
+`adapters/lit/parity.mjs` renders every `<wn-*>` in a real browser (Playwright) and
+writes `adapters/lit/parity/_parity.json` (the contract's parity-result shape):
+
+- **Contract parity** — each element must upgrade and carry no `attribute-mismatch`
+  vs its IR contract (computed statically, so no runtime type-coercion false
+  positives). A prop the element *lacks* is a coverage note (already surfaced as
+  drift), not a parity failure.
+- **Visual parity** — a render smoke: the element renders non-empty with a positive
+  box; a screenshot is saved to `adapters/lit/parity/<Name>.png` (gitignored) as the
+  artifact. The `ir/exemplars/<Name>.html` are designbook **gallery cards** (a grid
+  of all variants), not single-component baselines, so an automated pixel diff
+  against them is not meaningful — per-component Lit appearance regression is owned
+  by the Playwright baseline suite (`tests/visual/`); the exemplar is the human
+  visual reference. Exit `4` on a contract or render failure.
+
+## Directionality
+
+One-way: **React → `ir/` → Lit**. This adapter is downstream of the IR; it never
+writes back to `ir/` or to the React designbook. A change to the shared language is
+made in Claude Design and re-propagated (`make designbook-pull && make ir &&
+make adapt-lit`). See `.claude/rules/designbook-propagation.md`.
+
+## Token regeneration is a visual change
+
+Because tokens are fully generated, regenerating them can change rendered
+appearance when the canonical React designbook has moved (e.g. a font-stack or
+colour change). That makes the Playwright baselines diverge **by design** — it is a
+human review point, not an error:
+
+```
+make adapt-lit          # regenerates tokens
+pnpm test:visual        # will fail where appearance changed
+# review the change, then if correct:
+pnpm test:visual:update # accept new baselines
+```
+
+Never run `test:visual:update` to silence a token change without reviewing it — that
+defeats the parity gate (T08).
+
+## Exit codes
+
+`0` ok · `2` usage/config · `3` drift detected · `4` parity failure · `5` internal.

adapters/lit/adapt.mjs

@@ -0,0 +1,194 @@
+#!/usr/bin/env node
+// =============================================================
+// adapters/lit/adapt.mjs — the Lit reference adapter (WHYNOT-WP-0002)
+//
+// Projects the technology-neutral IR (ir/) onto the Lit stack. Per
+// adapters/ADAPTER_CONTRACT.md this is scaffold + drift-detect, never a rewrite:
+//
+//   • tokens (T06)      → FULLY generated, deterministic (this file, today)
+//   • new component     → stub (T07)
+//   • changed component → drift report (T07), never an overwrite
+//
+// Exit codes: 0 ok · 2 usage/config · 3 drift · 4 parity · 5 internal.
+//
+// Run via `make adapt-lit`. Tokens regenerate the :root block of
+// src/styles/colors_and_type.css between generated markers; the hand-authored
+// type/utility CSS after it is preserved untouched. Re-running with an unchanged
+// ir/tokens.json is a no-op (byte-identical output).
+// =============================================================
+import { readFileSync, writeFileSync, existsSync, mkdirSync, readdirSync, rmSync } from "node:fs";
+import { execSync } from "node:child_process";
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import { parseLitElements, componentDrift, renderStub, loadAccepted } from "./scaffold.mjs";
+
+const REPO = join(dirname(fileURLToPath(import.meta.url)), "..", "..");
+const TOKENS_JSON = join(REPO, "ir", "tokens.json");
+const TOKEN_CSS = join(REPO, "src", "styles", "colors_and_type.css");
+const IR_COMPONENTS = join(REPO, "ir", "components");
+const DRIFT_DIR = join(REPO, "adapters", "lit", "drift");
+const STUBS_DIR = join(REPO, "adapters", "lit", "stubs");
+
+const BEGIN = "/* @generated tokens — regenerated by `make adapt-lit` from ir/tokens.json. DO NOT EDIT. */";
+const END = "/* @end generated tokens */";
+
+// ---------- tokens: ir/tokens.json (DTCG) → CSS custom properties ----------
+function refToVar(value) {
+  // {group.key} alias → var(--key). Literals pass through unchanged.
+  const m = /^\{[A-Za-z0-9]+\.([A-Za-z0-9-]+)\}$/.exec(String(value).trim());
+  return m ? `var(--${m[1]})` : value;
+}
+
+function renderRootBlock(tokens) {
+  const lines = [BEGIN, ":root {"];
+  for (const [group, entries] of Object.entries(tokens)) {
+    lines.push(`  /* ${group} */`);
+    for (const [key, tok] of Object.entries(entries)) {
+      if (key === "$type") continue;
+      lines.push(`  --${key}: ${refToVar(tok.$value)};`);
+    }
+  }
+  lines.push("}", END);
+  return lines.join("\n");
+}
+
+// Replace the current :root token region with the freshly generated block.
+// First run (no markers): replace the first `:root { … }` via brace matching.
+// Later runs: replace strictly between the @generated markers.
+function spliceTokenBlock(css, block) {
+  const b = css.indexOf(BEGIN);
+  if (b !== -1) {
+    const e = css.indexOf(END, b);
+    if (e === -1) throw new Error("Found @generated marker without its @end — refusing to guess.");
+    return css.slice(0, b) + block + css.slice(e + END.length);
+  }
+  const rootAt = css.indexOf(":root");
+  if (rootAt === -1) throw new Error("No :root block in colors_and_type.css to replace.");
+  let i = css.indexOf("{", rootAt), depth = 0;
+  for (; i < css.length; i++) {
+    if (css[i] === "{") depth++;
+    else if (css[i] === "}" && --depth === 0) break;
+  }
+  return css.slice(0, rootAt) + block + css.slice(i + 1);
+}
+
+function generateTokens() {
+  if (!existsSync(TOKENS_JSON)) {
+    console.error("No ir/tokens.json — run `make ir` first.");
+    process.exit(2);
+  }
+  const tokens = JSON.parse(readFileSync(TOKENS_JSON, "utf8"));
+  const block = renderRootBlock(tokens);
+  const before = existsSync(TOKEN_CSS) ? readFileSync(TOKEN_CSS, "utf8") : `${block}\n`;
+  const after = existsSync(TOKEN_CSS) ? spliceTokenBlock(before, block) : `${block}\n`;
+  const count = block.split("\n").filter((l) => l.trim().startsWith("--")).length;
+  if (after === before) {
+    console.log(`tokens: up to date (${count} custom properties, no change).`);
+    return;
+  }
+  writeFileSync(TOKEN_CSS, after);
+  console.log(`tokens: regenerated ${count} custom properties → src/styles/colors_and_type.css`);
+}
+
+// ---------- T07: component scaffold + drift ----------
+function irRef() {
+  try {
+    return execSync("git rev-parse --short HEAD", { cwd: REPO }).toString().trim();
+  } catch { return "(no-git)"; }
+}
+
+function renderDriftMd(c) {
+  const head = {
+    ok: "✓ in sync with the IR contract.",
+    drift: "⚠ drift detected — resolve per `.claude/rules/designbook-propagation.md`.",
+    new: "＋ new component — a stub was generated; integrate it.",
+    removed: "－ removed from the IR.",
+  }[c.status];
+  const lines = [
+    `<!-- @generated by make adapt-lit (WHYNOT-WP-0002 T07) — overwritten each run; do not hand-edit. -->`,
+    `# Drift — ${c.name} \`<${c.tag}>\``,
+    "",
+    `**Status:** ${c.status} — ${head}`,
+    "",
+  ];
+  if (!c.issues.length) lines.push("No issues.");
+  else {
+    lines.push("| severity | kind | prop | detail |", "| --- | --- | --- | --- |");
+    const order = { drift: 0, info: 1 };
+    for (const i of [...c.issues].sort((a, b) => order[a.severity] - order[b.severity])) {
+      const detail = i.detail || (i.expected !== undefined ? `expected \`${i.expected}\`, actual \`${i.actual}\`` : "");
+      lines.push(`| ${i.severity === "drift" ? "**drift**" : "info"} | ${i.kind} | ${i.prop ? `\`${i.prop}\`` : "—"} | ${detail} |`);
+    }
+  }
+  lines.push("");
+  return lines.join("\n");
+}
+
+function runScaffold() {
+  if (!existsSync(IR_COMPONENTS)) {
+    console.error("No ir/components/ — run `make ir` first.");
+    process.exit(2);
+  }
+  const byTag = parseLitElements(REPO);
+  const accepted = loadAccepted(REPO);
+  const contracts = readdirSync(IR_COMPONENTS).filter((f) => f.endsWith(".json"))
+    .map((f) => JSON.parse(readFileSync(join(IR_COMPONENTS, f), "utf8")));
+
+  const results = contracts.map((c) => componentDrift(c, byTag, accepted))
+    .sort((a, b) => a.name.localeCompare(b.name));
+
+  // Per-component drift docs: snapshot, so wipe stale ones first (idempotency rule 4).
+  mkdirSync(DRIFT_DIR, { recursive: true });
+  for (const f of readdirSync(DRIFT_DIR)) if (f.endsWith(".md")) rmSync(join(DRIFT_DIR, f));
+  for (const c of results) writeFileSync(join(DRIFT_DIR, `${c.name}.md`), renderDriftMd(c));
+
+  // Machine roll-up. Reuse generatedAt when nothing material changed so a no-op
+  // `make adapt-lit` produces no git churn (matches ir/manifest.json discipline).
+  const reportPath = join(DRIFT_DIR, "_report.json");
+  let generatedAt = new Date().toISOString();
+  let ref = irRef();
+  if (existsSync(reportPath)) {
+    try {
+      const prev = JSON.parse(readFileSync(reportPath, "utf8"));
+      if (JSON.stringify(prev.components) === JSON.stringify(results)) {
+        if (prev.generatedAt) generatedAt = prev.generatedAt;
+        if (prev.irRef) ref = prev.irRef; // unchanged drift ⇒ keep the prior ref, no churn
+      }
+    } catch { /* regenerate fresh */ }
+  }
+  const report = { stack: "lit", generatedAt, irRef: ref, components: results };
+  writeFileSync(reportPath, JSON.stringify(report, null, 2) + "\n");
+
+  // Write-once stubs for genuinely new components.
+  let stubbed = 0;
+  for (const c of results.filter((r) => r.status === "new")) {
+    mkdirSync(STUBS_DIR, { recursive: true });
+    const out = join(STUBS_DIR, `${c.name}.js`);
+    if (!existsSync(out)) { writeFileSync(out, renderStub(contracts.find((x) => x.name === c.name))); stubbed++; }
+  }
+
+  const drift = results.filter((r) => r.status === "drift");
+  const isNew = results.filter((r) => r.status === "new");
+  const ok = results.filter((r) => r.status === "ok");
+  const infoCount = ok.reduce((n, r) => n + r.issues.length, 0);
+  console.log(`scaffold: ${ok.length} ok · ${drift.length} drift · ${isNew.length} new (${stubbed} stub${stubbed === 1 ? "" : "s"} written) → adapters/lit/drift/`);
+  if (infoCount) console.log(`  (${infoCount} informational note${infoCount === 1 ? "" : "s"} on in-sync components — non-portable/extra props, not gated)`);
+  for (const c of [...drift, ...isNew]) {
+    const actionable = c.issues.filter((i) => i.severity === "drift");
+    console.log(`  ${c.status === "drift" ? "⚠" : "＋"} ${c.name}: ${actionable.map((i) => `${i.kind}(${i.prop ?? ""})`).join(", ") || c.issues.map((i) => i.kind).join(", ")}`);
+  }
+
+  return drift.length + isNew.length > 0; // → drift exit code
+}
+
+function main() {
+  generateTokens();
+  const drifted = runScaffold();
+  if (drifted) {
+    console.log("adapt-lit: drift detected — see adapters/lit/drift/. Exit 3 (review, non-fatal).");
+    process.exit(3);
+  }
+  console.log("adapt-lit: tokens + scaffold done, no drift.");
+}
+
+main();

adapters/lit/drift.accepted.json

@@ -0,0 +1,17 @@
+{
+  "_comment": "Human-curated accepted divergences — the auditable output of drift triage (WHYNOT-WP-0002). An entry downgrades a specific drift issue to an informational, justified note so it does not gate make adapt-lit/parity-lit. Use ONLY for intentional React<->Lit modelling differences, never to silence a real defect. Keyed by component + drift kind + prop. See .claude/rules/designbook-propagation.md.",
+  "accepted": [
+    {
+      "component": "Sidebar",
+      "kind": "prop-missing",
+      "prop": "current",
+      "rationale": "Composition divergence (intentional). The React Sidebar is monolithic and takes a `current` selection-key prop, comparing it against its own internal NAV_ITEMS. The Lit stack decomposes the sidebar into <wn-sidebar> + <wn-sidebar-group> + <wn-sidebar-item>, modelling selection as per-item `active` state on the slotted children rather than a container-level key. There is no single `current` attribute to honour on <wn-sidebar>; the contract is satisfied compositionally. Reconcile upstream only if the React designbook is ever made composable."
+    },
+    {
+      "component": "Sidebar",
+      "kind": "variant-axis-missing",
+      "prop": "current",
+      "rationale": "Same composition divergence as Sidebar.current above — the `current` variant axis is expressed as item-level `active` on <wn-sidebar-item>, not as a <wn-sidebar> property."
+    }
+  ]
+}

adapters/lit/drift/Button.md

@@ -0,0 +1,14 @@
+<!-- @generated by make adapt-lit (WHYNOT-WP-0002 T07) — overwritten each run; do not hand-edit. -->
+# Drift — Button `<wn-button>`
+
+**Status:** ok — ✓ in sync with the IR contract.
+
+| severity | kind | prop | detail |
+| --- | --- | --- | --- |
+| info | non-portable | `onClick` | type=function; not attribute-mappable — handle explicitly, never drop. |
+| info | non-portable | `style` | type=object; not attribute-mappable — handle explicitly, never drop. |
+| info | prop-extra | `size` | on <wn-button> (attribute 'size'), not in IR contract. |
+| info | prop-extra | `iconEnd` | on <wn-button> (attribute 'icon-end'), not in IR contract. |
+| info | prop-extra | `type` | on <wn-button> (attribute 'type'), not in IR contract. |
+| info | prop-extra | `disabled` | on <wn-button> (attribute 'disabled'), not in IR contract. |
+| info | prop-extra | `href` | on <wn-button> (attribute 'href'), not in IR contract. |

adapters/lit/drift/Eyebrow.md

@@ -0,0 +1,9 @@
+<!-- @generated by make adapt-lit (WHYNOT-WP-0002 T07) — overwritten each run; do not hand-edit. -->
+# Drift — Eyebrow `<wn-eyebrow>`
+
+**Status:** ok — ✓ in sync with the IR contract.
+
+| severity | kind | prop | detail |
+| --- | --- | --- | --- |
+| info | non-portable | `style` | type=object; not attribute-mappable — handle explicitly, never drop. |
+| info | prop-extra | `strong` | on <wn-eyebrow> (attribute 'strong'), not in IR contract. |

adapters/lit/drift/Icon.md

@@ -0,0 +1,8 @@
+<!-- @generated by make adapt-lit (WHYNOT-WP-0002 T07) — overwritten each run; do not hand-edit. -->
+# Drift — Icon `<wn-icon>`
+
+**Status:** ok — ✓ in sync with the IR contract.
+
+| severity | kind | prop | detail |
+| --- | --- | --- | --- |
+| info | non-portable | `style` | type=object; not attribute-mappable — handle explicitly, never drop. |

adapters/lit/drift/PageHeader.md

@@ -0,0 +1,9 @@
+<!-- @generated by make adapt-lit (WHYNOT-WP-0002 T07) — overwritten each run; do not hand-edit. -->
+# Drift — PageHeader `<wn-page-header>`
+
+**Status:** ok — ✓ in sync with the IR contract.
+
+| severity | kind | prop | detail |
+| --- | --- | --- | --- |
+| info | prop-via-slot | `actions` | IR prop honoured by <slot name="actions"> on <wn-page-header> (slotted content, not an attribute). |
+| info | prop-extra | `hasActions` | on <wn-page-header> (attribute 'hasactions'), not in IR contract. |

adapters/lit/drift/PipelineStrip.md

@@ -0,0 +1,8 @@
+<!-- @generated by make adapt-lit (WHYNOT-WP-0002 T07) — overwritten each run; do not hand-edit. -->
+# Drift — PipelineStrip `<wn-pipeline>`
+
+**Status:** ok — ✓ in sync with the IR contract.
+
+| severity | kind | prop | detail |
+| --- | --- | --- | --- |
+| info | prop-extra | `stages` | on <wn-pipeline> (attribute 'stages'), not in IR contract. |

adapters/lit/drift/Sidebar.md

@@ -0,0 +1,11 @@
+<!-- @generated by make adapt-lit (WHYNOT-WP-0002 T07) — overwritten each run; do not hand-edit. -->
+# Drift — Sidebar `<wn-sidebar>`
+
+**Status:** ok — ✓ in sync with the IR contract.
+
+| severity | kind | prop | detail |
+| --- | --- | --- | --- |
+| info | prop-missing | `current` | in IR (attribute 'current'), absent on <wn-sidebar> |
+| info | non-portable | `onNav` | type=function; not attribute-mappable — handle explicitly, never drop. |
+| info | variant-axis-missing | `current` | IR variant axis 'current' (doc:) has no Lit property. |
+| info | prop-extra | `activation` | on <wn-sidebar> (attribute 'activation'), not in IR contract. |

adapters/lit/drift/StageDot.md

@@ -0,0 +1,8 @@
+<!-- @generated by make adapt-lit (WHYNOT-WP-0002 T07) — overwritten each run; do not hand-edit. -->
+# Drift — StageDot `<wn-stage-dot>`
+
+**Status:** ok — ✓ in sync with the IR contract.
+
+| severity | kind | prop | detail |
+| --- | --- | --- | --- |
+| info | non-portable | `style` | type=object; not attribute-mappable — handle explicitly, never drop. |

adapters/lit/drift/Stamp.md

@@ -0,0 +1,8 @@
+<!-- @generated by make adapt-lit (WHYNOT-WP-0002 T07) — overwritten each run; do not hand-edit. -->
+# Drift — Stamp `<wn-stamp>`
+
+**Status:** ok — ✓ in sync with the IR contract.
+
+| severity | kind | prop | detail |
+| --- | --- | --- | --- |
+| info | non-portable | `style` | type=object; not attribute-mappable — handle explicitly, never drop. |

adapters/lit/drift/Tag.md

@@ -0,0 +1,8 @@
+<!-- @generated by make adapt-lit (WHYNOT-WP-0002 T07) — overwritten each run; do not hand-edit. -->
+# Drift — Tag `<wn-tag>`
+
+**Status:** ok — ✓ in sync with the IR contract.
+
+| severity | kind | prop | detail |
+| --- | --- | --- | --- |
+| info | non-portable | `style` | type=object; not attribute-mappable — handle explicitly, never drop. |

adapters/lit/drift/TopNav.md

@@ -0,0 +1,11 @@
+<!-- @generated by make adapt-lit (WHYNOT-WP-0002 T07) — overwritten each run; do not hand-edit. -->
+# Drift — TopNav `<wn-top-nav>`
+
+**Status:** ok — ✓ in sync with the IR contract.
+
+| severity | kind | prop | detail |
+| --- | --- | --- | --- |
+| info | non-portable | `onNew` | type=function; not attribute-mappable — handle explicitly, never drop. |
+| info | prop-extra | `logoSrc` | on <wn-top-nav> (attribute 'logo-src'), not in IR contract. |
+| info | prop-extra | `brand` | on <wn-top-nav> (attribute 'brand'), not in IR contract. |
+| info | prop-extra | `slug` | on <wn-top-nav> (attribute 'slug'), not in IR contract. |

adapters/lit/drift/_report.json

@@ -0,0 +1,223 @@
+{
+  "stack": "lit",
+  "generatedAt": "2026-06-30T07:46:35.458Z",
+  "irRef": "756634c",
+  "components": [
+    {
+      "name": "Button",
+      "status": "ok",
+      "tag": "wn-button",
+      "issues": [
+        {
+          "kind": "non-portable",
+          "prop": "onClick",
+          "detail": "type=function; not attribute-mappable — handle explicitly, never drop.",
+          "severity": "info"
+        },
+        {
+          "kind": "non-portable",
+          "prop": "style",
+          "detail": "type=object; not attribute-mappable — handle explicitly, never drop.",
+          "severity": "info"
+        },
+        {
+          "kind": "prop-extra",
+          "prop": "size",
+          "detail": "on <wn-button> (attribute 'size'), not in IR contract.",
+          "severity": "info"
+        },
+        {
+          "kind": "prop-extra",
+          "prop": "iconEnd",
+          "detail": "on <wn-button> (attribute 'icon-end'), not in IR contract.",
+          "severity": "info"
+        },
+        {
+          "kind": "prop-extra",
+          "prop": "type",
+          "detail": "on <wn-button> (attribute 'type'), not in IR contract.",
+          "severity": "info"
+        },
+        {
+          "kind": "prop-extra",
+          "prop": "disabled",
+          "detail": "on <wn-button> (attribute 'disabled'), not in IR contract.",
+          "severity": "info"
+        },
+        {
+          "kind": "prop-extra",
+          "prop": "href",
+          "detail": "on <wn-button> (attribute 'href'), not in IR contract.",
+          "severity": "info"
+        }
+      ]
+    },
+    {
+      "name": "Eyebrow",
+      "status": "ok",
+      "tag": "wn-eyebrow",
+      "issues": [
+        {
+          "kind": "non-portable",
+          "prop": "style",
+          "detail": "type=object; not attribute-mappable — handle explicitly, never drop.",
+          "severity": "info"
+        },
+        {
+          "kind": "prop-extra",
+          "prop": "strong",
+          "detail": "on <wn-eyebrow> (attribute 'strong'), not in IR contract.",
+          "severity": "info"
+        }
+      ]
+    },
+    {
+      "name": "Icon",
+      "status": "ok",
+      "tag": "wn-icon",
+      "issues": [
+        {
+          "kind": "non-portable",
+          "prop": "style",
+          "detail": "type=object; not attribute-mappable — handle explicitly, never drop.",
+          "severity": "info"
+        }
+      ]
+    },
+    {
+      "name": "PageHeader",
+      "status": "ok",
+      "tag": "wn-page-header",
+      "issues": [
+        {
+          "kind": "prop-via-slot",
+          "prop": "actions",
+          "detail": "IR prop honoured by <slot name=\"actions\"> on <wn-page-header> (slotted content, not an attribute).",
+          "severity": "info"
+        },
+        {
+          "kind": "prop-extra",
+          "prop": "hasActions",
+          "detail": "on <wn-page-header> (attribute 'hasactions'), not in IR contract.",
+          "severity": "info"
+        }
+      ]
+    },
+    {
+      "name": "PipelineStrip",
+      "status": "ok",
+      "tag": "wn-pipeline",
+      "issues": [
+        {
+          "kind": "prop-extra",
+          "prop": "stages",
+          "detail": "on <wn-pipeline> (attribute 'stages'), not in IR contract.",
+          "severity": "info"
+        }
+      ]
+    },
+    {
+      "name": "Sidebar",
+      "status": "ok",
+      "tag": "wn-sidebar",
+      "issues": [
+        {
+          "kind": "prop-missing",
+          "prop": "current",
+          "detail": "in IR (attribute 'current'), absent on <wn-sidebar>",
+          "severity": "info",
+          "accepted": "Composition divergence (intentional). The React Sidebar is monolithic and takes a `current` selection-key prop, comparing it against its own internal NAV_ITEMS. The Lit stack decomposes the sidebar into <wn-sidebar> + <wn-sidebar-group> + <wn-sidebar-item>, modelling selection as per-item `active` state on the slotted children rather than a container-level key. There is no single `current` attribute to honour on <wn-sidebar>; the contract is satisfied compositionally. Reconcile upstream only if the React designbook is ever made composable."
+        },
+        {
+          "kind": "non-portable",
+          "prop": "onNav",
+          "detail": "type=function; not attribute-mappable — handle explicitly, never drop.",
+          "severity": "info"
+        },
+        {
+          "kind": "variant-axis-missing",
+          "prop": "current",
+          "detail": "IR variant axis 'current' (doc:) has no Lit property.",
+          "severity": "info",
+          "accepted": "Same composition divergence as Sidebar.current above — the `current` variant axis is expressed as item-level `active` on <wn-sidebar-item>, not as a <wn-sidebar> property."
+        },
+        {
+          "kind": "prop-extra",
+          "prop": "activation",
+          "detail": "on <wn-sidebar> (attribute 'activation'), not in IR contract.",
+          "severity": "info"
+        }
+      ]
+    },
+    {
+      "name": "StageDot",
+      "status": "ok",
+      "tag": "wn-stage-dot",
+      "issues": [
+        {
+          "kind": "non-portable",
+          "prop": "style",
+          "detail": "type=object; not attribute-mappable — handle explicitly, never drop.",
+          "severity": "info"
+        }
+      ]
+    },
+    {
+      "name": "Stamp",
+      "status": "ok",
+      "tag": "wn-stamp",
+      "issues": [
+        {
+          "kind": "non-portable",
+          "prop": "style",
+          "detail": "type=object; not attribute-mappable — handle explicitly, never drop.",
+          "severity": "info"
+        }
+      ]
+    },
+    {
+      "name": "Tag",
+      "status": "ok",
+      "tag": "wn-tag",
+      "issues": [
+        {
+          "kind": "non-portable",
+          "prop": "style",
+          "detail": "type=object; not attribute-mappable — handle explicitly, never drop.",
+          "severity": "info"
+        }
+      ]
+    },
+    {
+      "name": "TopNav",
+      "status": "ok",
+      "tag": "wn-top-nav",
+      "issues": [
+        {
+          "kind": "non-portable",
+          "prop": "onNew",
+          "detail": "type=function; not attribute-mappable — handle explicitly, never drop.",
+          "severity": "info"
+        },
+        {
+          "kind": "prop-extra",
+          "prop": "logoSrc",
+          "detail": "on <wn-top-nav> (attribute 'logo-src'), not in IR contract.",
+          "severity": "info"
+        },
+        {
+          "kind": "prop-extra",
+          "prop": "brand",
+          "detail": "on <wn-top-nav> (attribute 'brand'), not in IR contract.",
+          "severity": "info"
+        },
+        {
+          "kind": "prop-extra",
+          "prop": "slug",
+          "detail": "on <wn-top-nav> (attribute 'slug'), not in IR contract.",
+          "severity": "info"
+        }
+      ]
+    }
+  ]
+}

adapters/lit/parity.mjs

@@ -0,0 +1,174 @@
+// =============================================================
+// adapters/lit/parity.mjs — make parity-lit (WHYNOT-WP-0002 · T08)
+//
+// The gate that confirms the Lit elements actually honour the IR contract.
+// Renders each <wn-*> in a real browser (Playwright) and checks:
+//
+//   (a) CONTRACT parity — for every IR-declared portable prop the element HAS,
+//       setting the IR-declared attribute must drive the property (no attribute
+//       contradiction). A prop the element lacks is a *coverage* note, not a
+//       contradiction — it is already surfaced by `make adapt-lit` drift (T07).
+//   (b) VISUAL parity — the element renders non-empty with a positive box; a
+//       screenshot is saved to adapters/lit/parity/<Name>.png as the artifact.
+//
+//   On pixel-exact appearance: `ir/exemplars/<Name>.html` are designbook *gallery
+//   cards* (a grid of all variants), not single-component baselines, so a direct
+//   pixel diff against them is not meaningful. Per-component Lit appearance
+//   regression is owned by the Playwright baseline suite (tests/visual/). Visual
+//   parity here is a render smoke + artifact; the exemplar is the human reference.
+//
+// Result: adapters/lit/parity/_parity.json (adapters/ADAPTER_CONTRACT.md shape).
+// Exit: 0 pass · 2 usage · 4 parity failure · 5 internal.
+// =============================================================
+import { readFileSync, readdirSync, existsSync, mkdirSync, writeFileSync, rmSync } from "node:fs";
+import { spawn } from "node:child_process";
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import { parseLitElements, componentDrift, loadAccepted } from "./scaffold.mjs";
+
+const REPO = join(dirname(fileURLToPath(import.meta.url)), "..", "..");
+const IR_COMPONENTS = join(REPO, "ir", "components");
+const OUT = join(REPO, "adapters", "lit", "parity");
+const PORT = 4399;
+
+async function loadChromium() {
+  for (const id of ["@playwright/test", "playwright", "playwright-core"]) {
+    try { return (await import(id)).chromium; } catch { /* next */ }
+  }
+  console.error("parity: Playwright not installed (need @playwright/test)."); process.exit(2);
+}
+
+function waitForServer(url, tries = 30) {
+  return new Promise((resolve, reject) => {
+    const tick = (n) => fetch(url).then(() => resolve()).catch(() => {
+      if (n <= 0) return reject(new Error("server did not start"));
+      setTimeout(() => tick(n - 1), 200);
+    });
+    tick(tries);
+  });
+}
+
+// Representative attribute values from the contract (to exercise rendering).
+function fixtureAttrs(contract) {
+  const attrs = {};
+  for (const p of contract.props || []) {
+    if (p.portable === false || p.attribute === false) continue;
+    if (p.type === "enum") attrs[p.attribute] = p.default ?? (p.enum && p.enum[0]) ?? "";
+    else if (p.type === "number") attrs[p.attribute] = "1";
+    else if (p.type === "boolean") attrs[p.attribute] = "";
+    else attrs[p.attribute] = "Sample";
+  }
+  return attrs;
+}
+
+async function main() {
+  if (!existsSync(IR_COMPONENTS)) { console.error("No ir/components/ — run `make ir`."); process.exit(2); }
+  const contracts = readdirSync(IR_COMPONENTS).filter((f) => f.endsWith(".json"))
+    .map((f) => JSON.parse(readFileSync(join(IR_COMPONENTS, f), "utf8")))
+    .sort((a, b) => a.name.localeCompare(b.name));
+
+  mkdirSync(OUT, { recursive: true });
+  for (const f of readdirSync(OUT)) if (f.endsWith(".png")) rmSync(join(OUT, f));
+
+  const url = `http://127.0.0.1:${PORT}/examples/showcase/index.html`;
+  // Reuse an already-running static server (set by the caller / CI); only spawn
+  // and manage our own if none is up. Spawning is what some sandboxes dislike.
+  let server = null;
+  const alreadyUp = await fetch(url).then(() => true).catch(() => false);
+  if (!alreadyUp) {
+    server = spawn("python3", ["-m", "http.server", String(PORT), "--bind", "127.0.0.1"],
+      { cwd: REPO, stdio: "ignore" });
+  }
+  const stopServer = () => { if (server) server.kill(); };
+  const chromium = await loadChromium();
+  let browser;
+  try {
+    await waitForServer(url);
+    browser = await chromium.launch({ args: ["--no-sandbox"] });
+    const page = await browser.newPage({ viewport: { width: 800, height: 600 } });
+    await page.route(/fonts\.(googleapis|gstatic)\.com/, (r) => r.abort());
+    // The showcase page registers every wn-* element and loads components.css.
+    await page.goto(`http://127.0.0.1:${PORT}/examples/showcase/index.html`, { waitUntil: "commit" });
+    await page.waitForFunction(() => !!customElements.get("wn-button"), null, { timeout: 8000 });
+    await page.addStyleTag({ content: "#parity-stage{position:fixed;left:0;top:0;background:var(--paper);padding:16px;z-index:99999}" });
+
+    // Static contract analysis (precise attribute-name correctness, no runtime
+    // type-coercion false positives). The browser then confirms the element
+    // actually upgrades + renders — the thing static analysis cannot prove.
+    const byTag = parseLitElements(REPO);
+    const accepted = loadAccepted(REPO);
+
+    const results = [];
+    for (const c of contracts) {
+      const tag = c.tag;
+      const drift = componentDrift(c, byTag, accepted);
+      const attrMismatch = drift.issues.filter((i) => i.kind === "attribute-mismatch" && i.severity === "drift");
+      const missing = drift.issues.filter((i) => i.kind === "prop-missing" && i.severity === "drift");
+      const hasDefaultSlot = (c.slots || []).some((s) => s.name === "default");
+
+      const observed = await page.evaluate(async ({ tag, attrs, hasDefaultSlot }) => {
+        if (!customElements.get(tag)) return { exists: false };
+        let stage = document.getElementById("parity-stage");
+        if (!stage) { stage = document.createElement("div"); stage.id = "parity-stage"; document.body.appendChild(stage); }
+        stage.innerHTML = "";
+        const el = document.createElement(tag);
+        for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v);
+        if (hasDefaultSlot) el.textContent = "Sample";
+        stage.appendChild(el);
+        await el.updateComplete?.catch(() => {});
+        const r = el.getBoundingClientRect();
+        const rendered = el.children.length > 0 || (el.textContent || "").trim().length > 0 || !!el.shadowRoot;
+        return { exists: true, rendered, rect: { w: Math.round(r.width), h: Math.round(r.height) } };
+      }, { tag, attrs: fixtureAttrs(c), hasDefaultSlot });
+
+      if (!observed.exists) {
+        results.push({ name: c.name, contract: "skip", visual: "skip", diffRatio: null,
+          notes: `no <${tag}> element (see adapters/lit/drift/${c.name}.md)` });
+        continue;
+      }
+
+      // Screenshot the element box as the visual artifact.
+      try {
+        const h = await page.$("#parity-stage > *");
+        if (h) await h.screenshot({ path: join(OUT, `${c.name}.png`) });
+      } catch { /* non-fatal */ }
+
+      const contract = attrMismatch.length ? "fail" : "pass";
+      const visual = observed.rendered && (observed.rect.w > 0 || observed.rect.h > 0) ? "pass" : "fail";
+      const notes = [];
+      if (attrMismatch.length) notes.push(`attribute-mismatch: ${attrMismatch.map((i) => `${i.prop} expected '${i.expected}' got '${i.actual}'`).join(", ")}`);
+      if (missing.length) notes.push(`coverage (drift, not gated): missing ${missing.map((i) => i.prop).join(", ")}`);
+      results.push({ name: c.name, contract, visual, diffRatio: null, box: observed.rect, notes: notes.join("; ") || "ok" });
+    }
+
+    const summary = {
+      total: results.length,
+      contractFail: results.filter((r) => r.contract === "fail").length,
+      visualFail: results.filter((r) => r.visual === "fail").length,
+      skipped: results.filter((r) => r.contract === "skip").length,
+    };
+    const out = { stack: "lit", generatedAt: new Date().toISOString(), components: results, summary };
+    writeFileSync(join(OUT, "_parity.json"), JSON.stringify(out, null, 2) + "\n");
+
+    console.log(`parity-lit: ${summary.total} components · contractFail=${summary.contractFail} · visualFail=${summary.visualFail} · skip=${summary.skipped}`);
+    for (const r of results) {
+      const flag = r.contract === "fail" || r.visual === "fail" ? "✗" : r.contract === "skip" ? "·" : "✓";
+      console.log(`  ${flag} ${r.name}: contract=${r.contract} visual=${r.visual}${r.notes && r.notes !== "ok" ? `  (${r.notes})` : ""}`);
+    }
+
+    await browser.close();
+    stopServer();
+    if (summary.contractFail || summary.visualFail) {
+      console.log("parity-lit: FAILURE — see adapters/lit/parity/_parity.json. Exit 4.");
+      process.exit(4);
+    }
+    console.log("parity-lit: pass.");
+  } catch (e) {
+    if (browser) await browser.close().catch(() => {});
+    stopServer();
+    console.error("parity-lit: internal error —", e.message);
+    process.exit(5);
+  }
+}
+
+main();

adapters/lit/parity/_parity.json

@@ -0,0 +1,122 @@
+{
+  "stack": "lit",
+  "generatedAt": "2026-06-30T07:49:18.063Z",
+  "components": [
+    {
+      "name": "Button",
+      "contract": "pass",
+      "visual": "pass",
+      "diffRatio": null,
+      "box": {
+        "w": 82,
+        "h": 36
+      },
+      "notes": "ok"
+    },
+    {
+      "name": "Eyebrow",
+      "contract": "pass",
+      "visual": "pass",
+      "diffRatio": null,
+      "box": {
+        "w": 45,
+        "h": 23
+      },
+      "notes": "ok"
+    },
+    {
+      "name": "Icon",
+      "contract": "pass",
+      "visual": "pass",
+      "diffRatio": null,
+      "box": {
+        "w": 0,
+        "h": 23
+      },
+      "notes": "ok"
+    },
+    {
+      "name": "PageHeader",
+      "contract": "pass",
+      "visual": "pass",
+      "diffRatio": null,
+      "box": {
+        "w": 117,
+        "h": 37
+      },
+      "notes": "ok"
+    },
+    {
+      "name": "PipelineStrip",
+      "contract": "pass",
+      "visual": "pass",
+      "diffRatio": null,
+      "box": {
+        "w": 633,
+        "h": 76
+      },
+      "notes": "ok"
+    },
+    {
+      "name": "Sidebar",
+      "contract": "pass",
+      "visual": "pass",
+      "diffRatio": null,
+      "box": {
+        "w": 273,
+        "h": 592
+      },
+      "notes": "ok"
+    },
+    {
+      "name": "StageDot",
+      "contract": "pass",
+      "visual": "pass",
+      "diffRatio": null,
+      "box": {
+        "w": 56,
+        "h": 23
+      },
+      "notes": "ok"
+    },
+    {
+      "name": "Stamp",
+      "contract": "pass",
+      "visual": "pass",
+      "diffRatio": null,
+      "box": {
+        "w": 63,
+        "h": 23
+      },
+      "notes": "ok"
+    },
+    {
+      "name": "Tag",
+      "contract": "pass",
+      "visual": "pass",
+      "diffRatio": null,
+      "box": {
+        "w": 64,
+        "h": 24
+      },
+      "notes": "ok"
+    },
+    {
+      "name": "TopNav",
+      "contract": "pass",
+      "visual": "pass",
+      "diffRatio": null,
+      "box": {
+        "w": 243,
+        "h": 57
+      },
+      "notes": "ok"
+    }
+  ],
+  "summary": {
+    "total": 10,
+    "contractFail": 0,
+    "visualFail": 0,
+    "skipped": 0
+  }
+}

adapters/lit/scaffold.mjs

@@ -0,0 +1,235 @@
+// =============================================================
+// adapters/lit/scaffold.mjs — component scaffold + drift (WHYNOT-WP-0002 · T07)
+//
+// Pure functions over ir/ + the Lit source tree (src/elements/*.js). Per
+// adapters/ADAPTER_CONTRACT.md:
+//   • IR component with no <wn-*> counterpart → a write-once STUB
+//     (adapters/lit/stubs/<Name>.js), never into the hand-authored tree.
+//   • IR component with a counterpart → a DRIFT REPORT
+//     (adapters/lit/drift/<Name>.md + a machine roll-up); never an overwrite.
+//
+// Behaviour is never generated — stubs carry a TODO; drift is for human triage.
+// =============================================================
+import { readFileSync, readdirSync, existsSync } from "node:fs";
+import { join } from "node:path";
+
+const ELEMENT_FILES = ["atoms.js", "form.js", "layout.js", "chrome.js"];
+
+// ---------- Parse the Lit source tree → tag → element descriptor ----------
+// Extract the balanced { … } block that starts at/after `from`.
+function balancedBlock(src, from) {
+  let i = src.indexOf("{", from), depth = 0;
+  const begin = i;
+  for (; i < src.length; i++) {
+    if (src[i] === "{") depth++;
+    else if (src[i] === "}" && --depth === 0) return src.slice(begin, i + 1);
+  }
+  return src.slice(begin);
+}
+
+// Parse a `static properties = { … }` block body into { name: {attribute,type,reflect} }.
+function parseProps(block) {
+  const props = {};
+  // Each entry: `name: { … },` — scan key then its balanced object.
+  const re = /([A-Za-z_$][\w$]*)\s*:\s*\{/g;
+  let m;
+  while ((m = re.exec(block))) {
+    const name = m[1];
+    const decl = balancedBlock(block, m.index + m[0].length - 1);
+    const attrM = /attribute\s*:\s*(false|"([^"]+)"|'([^']+)')/.exec(decl);
+    const typeM = /type\s*:\s*([A-Za-z]+)/.exec(decl);
+    const reflect = /reflect\s*:\s*true/.test(decl);
+    let attribute;
+    if (attrM) attribute = attrM[1] === "false" ? false : (attrM[2] || attrM[3]);
+    else attribute = name.toLowerCase(); // Lit default: lowercased property name
+    props[name] = { attribute, type: typeM ? typeM[1] : "String", reflect };
+    re.lastIndex = m.index + m[0].length; // resume after the key (decl re-scanned harmlessly)
+  }
+  return props;
+}
+
+// Find a class's own `static properties` (walks `extends` within the same file set).
+function classProps(name, classes) {
+  const cls = classes[name];
+  if (!cls) return {};
+  const own = cls.propsBlock ? parseProps(cls.propsBlock) : {};
+  const inherited = cls.extends && classes[cls.extends] ? classProps(cls.extends, classes) : {};
+  return { ...inherited, ...own };
+}
+
+function classSlots(name, classes) {
+  const cls = classes[name];
+  if (!cls) return new Set();
+  const inherited = cls.extends && classes[cls.extends] ? classSlots(cls.extends, classes) : new Set();
+  return new Set([...inherited, ...(cls.slots || [])]);
+}
+
+export function parseLitElements(repo) {
+  const classes = {}; // className → { propsBlock, extends, file }
+  const defines = []; // { tag, className, file }
+  for (const file of ELEMENT_FILES) {
+    const path = join(repo, "src", "elements", file);
+    if (!existsSync(path)) continue;
+    const src = readFileSync(path, "utf8");
+    const classRe = /class\s+([A-Za-z_$][\w$]*)\s+extends\s+([A-Za-z_$][\w$]*)/g;
+    let m;
+    while ((m = classRe.exec(src))) {
+      const [className, base] = [m[1], m[2]];
+      const propsAt = src.indexOf("static properties", m.index);
+      // bound the search to before the next class declaration
+      classRe.lastIndex = m.index + m[0].length;
+      const nextClass = src.indexOf("class ", m.index + m[0].length);
+      const propsBlock = propsAt !== -1 && (nextClass === -1 || propsAt < nextClass)
+        ? balancedBlock(src, propsAt) : null;
+      // Named slots the element renders (e.g. <slot name="actions">) — a prop can
+      // be honoured by a same-named slot rather than a reactive property.
+      const region = src.slice(m.index, nextClass === -1 ? undefined : nextClass);
+      const slots = [...region.matchAll(/<slot\s+name="([\w-]+)"/g)].map((x) => x[1]);
+      classes[className] = { propsBlock, extends: base, file, slots };
+    }
+    const defRe = /customElements\.define\(\s*["']([\w-]+)["']\s*,\s*([A-Za-z_$][\w$]*)\s*\)/g;
+    while ((m = defRe.exec(src))) defines.push({ tag: m[1], className: m[2], file });
+  }
+  const byTag = {};
+  for (const d of defines) byTag[d.tag] = { ...d, props: classProps(d.className, classes), slots: classSlots(d.className, classes) };
+  return byTag;
+}
+
+// ---------- Drift: IR contract vs Lit element ----------
+// Actionable drift gates `make adapt-lit` (exit 3). The rest is informational:
+//   • non-portable — React style/callbacks that inherently have no attribute form;
+//     the Lit element is correct to omit them. Surfaced (never dropped), never gated.
+//   • prop-extra   — the Lit element is richer than the minimal React designbook;
+//     a divergence worth noting, but not a defect to block on.
+const ACTIONABLE = new Set(["prop-missing", "attribute-mismatch", "variant-axis-missing", "tag-mismatch"]);
+
+export function litAttrOf(decl) {
+  return decl.attribute === false ? null : decl.attribute;
+}
+
+// Human-curated accepted divergences — the auditable output of drift triage for
+// divergences that are intentional (e.g. a React monolithic prop modelled
+// per-child in a composable Lit element). Keyed `<Component>:<kind>:<prop>` → rationale.
+// Read from adapters/lit/drift.accepted.json. An accepted issue is still listed in
+// the report (marked "accepted: <why>") but downgraded to info, so it does not gate.
+export function loadAccepted(repo) {
+  const path = join(repo, "adapters", "lit", "drift.accepted.json");
+  if (!existsSync(path)) return {};
+  try {
+    const out = {};
+    for (const e of (JSON.parse(readFileSync(path, "utf8")).accepted || []))
+      out[`${e.component}:${e.kind}:${e.prop ?? ""}`] = e.rationale || "accepted";
+    return out;
+  } catch { return {}; }
+}
+
+function classify(issues, component, accepted = {}) {
+  for (const i of issues) {
+    const key = `${component}:${i.kind}:${i.prop ?? ""}`;
+    if (accepted[key]) { i.severity = "info"; i.accepted = accepted[key]; }
+    else i.severity = ACTIONABLE.has(i.kind) ? "drift" : "info";
+  }
+  return issues.some((i) => i.severity === "drift") ? "drift" : "ok";
+}
+
+// Find a likely renamed counterpart when no exact tag match (e.g. wn-pipeline-strip → wn-pipeline).
+function likelyCounterpart(tag, byTag) {
+  if (byTag[tag]) return null;
+  const head = tag.replace(/^wn-/, "").split("-")[0]; // "pipeline"
+  const hit = Object.keys(byTag).find((t) => t.replace(/^wn-/, "").split("-")[0] === head);
+  return hit || null;
+}
+
+export function componentDrift(contract, byTag, accepted = {}) {
+  const tag = contract.tag;
+  const el = byTag[tag];
+
+  if (!el) {
+    const alt = likelyCounterpart(tag, byTag);
+    if (alt) {
+      const issues = [{ kind: "tag-mismatch", expected: tag, actual: alt,
+        detail: `IR contract tag '${tag}' has no element; '${alt}' looks like the hand-authored counterpart (rename — resolve in Claude Design or realign the element).` }];
+      return { name: contract.name, status: classify(issues, contract.name, accepted), tag, issues };
+    }
+    return { name: contract.name, status: "new", tag, issues: [
+      { kind: "no-counterpart", detail: `no <${tag}> in src/elements/ — stub generated.` },
+    ] };
+  }
+
+  const issues = [];
+  const litProps = el.props;
+  const litSlots = el.slots || new Set();
+  for (const p of contract.props || []) {
+    if (p.portable === false) {
+      issues.push({ kind: "non-portable", prop: p.name,
+        detail: `type=${p.type}; not attribute-mappable — handle explicitly, never drop.` });
+      continue;
+    }
+    if (p.attribute === false) continue; // property-only by contract
+    const lit = litProps[p.name];
+    if (!lit) {
+      // A content prop can be honoured by a same-named named slot (e.g. PageHeader
+      // `actions` → <slot name="actions">) — that is satisfaction, not drift.
+      if (litSlots.has(p.name) || litSlots.has(p.attribute)) {
+        issues.push({ kind: "prop-via-slot", prop: p.name,
+          detail: `IR prop honoured by <slot name="${p.name}"> on <${tag}> (slotted content, not an attribute).` });
+        continue;
+      }
+      issues.push({ kind: "prop-missing", prop: p.name,
+        detail: `in IR (attribute '${p.attribute}'), absent on <${tag}>` });
+      continue;
+    }
+    const litAttr = litAttrOf(lit);
+    if (litAttr !== p.attribute) {
+      issues.push({ kind: "attribute-mismatch", prop: p.name, expected: p.attribute, actual: litAttr === null ? "(property-only)" : litAttr });
+    }
+  }
+  // Variant axes must have a backing property.
+  for (const v of contract.variants || []) {
+    if (!litProps[v.axis]) issues.push({ kind: "variant-axis-missing", prop: v.axis,
+      detail: `IR variant axis '${v.axis}' (${v.values.join("/")}) has no Lit property.` });
+  }
+  // Extra Lit properties not described by the IR contract.
+  const irNames = new Set((contract.props || []).map((p) => p.name));
+  for (const name of Object.keys(litProps)) {
+    if (!irNames.has(name)) issues.push({ kind: "prop-extra", prop: name,
+      detail: `on <${tag}> (attribute '${litAttrOf(litProps[name]) ?? "(property-only)"}'), not in IR contract.` });
+  }
+
+  return { name: contract.name, status: classify(issues, contract.name, accepted), tag, issues };
+}
+
+// ---------- Stub generation (write-once) ----------
+export function renderStub(contract) {
+  const tag = contract.tag;
+  const cls = "Wn" + contract.name;
+  const props = (contract.props || []).filter((p) => p.portable !== false && p.attribute !== false);
+  const litType = (t) => (t === "boolean" ? "Boolean" : t === "number" ? "Number" : "String");
+  const propLines = props.map((p) => {
+    const attr = p.attribute !== p.name.toLowerCase() ? `, attribute: "${p.attribute}"` : "";
+    return `    ${p.name}: { type: ${litType(p.type)}${attr} },`;
+  }).join("\n");
+  const nonPortable = (contract.props || []).filter((p) => p.portable === false);
+  const npNote = nonPortable.length
+    ? `\n  // Non-portable props (handle explicitly, do not drop): ${nonPortable.map((p) => p.name).join(", ")}.`
+    : "";
+  const slotMarkup = (contract.slots || []).some((s) => s.name === "default")
+    ? "<slot></slot>" : "";
+  return `// @generated STUB by adapters/lit (WHYNOT-WP-0002 T07) — from ir/components/${contract.name}.json.
+// Write-once scaffold: skeleton + typed reactive properties + a behaviour TODO.
+// Move into src/elements/ and implement; the adapter never overwrites this once edited.
+import { LitElement, html } from "lit";
+
+export class ${cls} extends LitElement {
+  createRenderRoot() { return this; } // light DOM, matches the existing wn-* elements${npNote}
+  static properties = {
+${propLines || "    // (no attribute-mappable props in the contract)"}
+  };
+  render() {
+    // TODO(${contract.name}): implement per ir/exemplars/${contract.name}.html and the design language.
+    return html\`<div class="${tag}" part="root">${slotMarkup}</div>\`;
+  }
+}
+// customElements.define("${tag}", ${cls});  // ← uncomment when integrating
+`;
+}

adapters/plain-css/README.md

@@ -0,0 +1,31 @@
+# plain-css adapter — second-adapter smoke (WHYNOT-WP-0002 · T10)
+
+> **This is not a finished stack.** It exists to prove the **IR/adapter boundary**:
+> that a second, non-Lit adapter can consume the *same* `ir/` and honour the *same*
+> [`adapters/ADAPTER_CONTRACT.md`](../ADAPTER_CONTRACT.md). The deliverable is
+> confidence in the seam, so the architecture can later be lifted into a
+> coulomb-level tool — **not** a usable plain-CSS component kit.
+
+Run with **`make adapt-plain-css`** (`adapters/plain-css/adapt.mjs`).
+
+## What it proves
+
+| Contract concern | This adapter | Same as Lit? |
+|---|---|---|
+| Input is `ir/` only | reads `ir/tokens.json` + `ir/components/*.json` | ✓ identical inputs |
+| Tokens fully generated | → `adapters/plain-css/tokens.css` (CSS custom properties, deterministic no-op re-run) | ✓ same discipline, different target |
+| New component → stub | write-once class stub `adapters/plain-css/stubs/<tag>.css` (base + variant modifier classes from the contract) | ✓ write-once, into a staging dir |
+| Drift roll-up | `adapters/plain-css/_report.json` in the contract's report shape (`stack`, `generatedAt`, `components[]`) | ✓ portable shape |
+| Exit codes | `0` ok · `2` usage · `3` new/drift · `5` internal | ✓ shared convention |
+
+Because plain-CSS has no hand-authored source, **every** IR component reports
+`status: "new"` and gets a stub — exactly the contract's new-component path. That a
+totally different stack reuses the same IR, the same report shape, and the same exit
+codes — with **zero changes to `ir/`** — is the proof the boundary holds.
+
+## What it deliberately does NOT do
+
+No real CSS appearance, no parity, no full component set, no integration into the
+repo's build. Finishing a plain-CSS (or Vue/Svelte/…) stack is future work; the seam
+is what T10 validates. See `DesignSystemIntroduction.md` §5.1 and the Lit reference
+adapter (`adapters/lit/`) for the full implementation.

adapters/plain-css/_report.json

@@ -0,0 +1,106 @@
+{
+  "stack": "plain-css",
+  "generatedAt": "2026-06-30T07:48:30.643Z",
+  "components": [
+    {
+      "name": "Button",
+      "status": "new",
+      "issues": [
+        {
+          "kind": "no-counterpart",
+          "detail": "no .wn-button class — stub generated."
+        }
+      ]
+    },
+    {
+      "name": "Eyebrow",
+      "status": "new",
+      "issues": [
+        {
+          "kind": "no-counterpart",
+          "detail": "no .wn-eyebrow class — stub generated."
+        }
+      ]
+    },
+    {
+      "name": "Icon",
+      "status": "new",
+      "issues": [
+        {
+          "kind": "no-counterpart",
+          "detail": "no .wn-icon class — stub generated."
+        }
+      ]
+    },
+    {
+      "name": "PageHeader",
+      "status": "new",
+      "issues": [
+        {
+          "kind": "no-counterpart",
+          "detail": "no .wn-page-header class — stub generated."
+        }
+      ]
+    },
+    {
+      "name": "PipelineStrip",
+      "status": "new",
+      "issues": [
+        {
+          "kind": "no-counterpart",
+          "detail": "no .wn-pipeline class — stub generated."
+        }
+      ]
+    },
+    {
+      "name": "Sidebar",
+      "status": "new",
+      "issues": [
+        {
+          "kind": "no-counterpart",
+          "detail": "no .wn-sidebar class — stub generated."
+        }
+      ]
+    },
+    {
+      "name": "StageDot",
+      "status": "new",
+      "issues": [
+        {
+          "kind": "no-counterpart",
+          "detail": "no .wn-stage-dot class — stub generated."
+        }
+      ]
+    },
+    {
+      "name": "Stamp",
+      "status": "new",
+      "issues": [
+        {
+          "kind": "no-counterpart",
+          "detail": "no .wn-stamp class — stub generated."
+        }
+      ]
+    },
+    {
+      "name": "Tag",
+      "status": "new",
+      "issues": [
+        {
+          "kind": "no-counterpart",
+          "detail": "no .wn-tag class — stub generated."
+        }
+      ]
+    },
+    {
+      "name": "TopNav",
+      "status": "new",
+      "issues": [
+        {
+          "kind": "no-counterpart",
+          "detail": "no .wn-top-nav class — stub generated."
+        }
+      ]
+    }
+  ]
+}

adapters/plain-css/adapt.mjs

@@ -0,0 +1,102 @@
+#!/usr/bin/env node
+// =============================================================
+// adapters/plain-css/adapt.mjs — second-adapter SMOKE (WHYNOT-WP-0002 · T10)
+//
+// NOT a finished stack. This exists only to prove the IR/adapter *boundary*:
+// a non-Lit adapter consuming the very same ir/ and honouring the same
+// adapters/ADAPTER_CONTRACT.md (token full-gen + stub/drift + exit codes).
+// The deliverable is confidence in the seam, not a usable plain-CSS kit.
+//
+// It does two contract things from ir/ and nothing Lit-specific:
+//   • tokens  → fully generated CSS custom properties (deterministic no-op re-run)
+//   • components → write-once class stubs + a drift roll-up in the contract shape
+//     (every component is "new" here — plain-CSS has no existing source to drift).
+//
+// Exit codes (shared contract): 0 ok · 2 usage · 3 drift/new · 5 internal.
+// Run: `make adapt-plain-css`.
+// =============================================================
+import { readFileSync, readdirSync, writeFileSync, existsSync, mkdirSync, rmSync } from "node:fs";
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const REPO = join(dirname(fileURLToPath(import.meta.url)), "..", "..");
+const IR = join(REPO, "ir");
+const HERE = join(REPO, "adapters", "plain-css");
+const STUBS = join(HERE, "stubs");
+
+const refToVar = (v) => {
+  const m = /^\{[A-Za-z0-9]+\.([A-Za-z0-9-]+)\}$/.exec(String(v).trim());
+  return m ? `var(--${m[1]})` : v;
+};
+
+function generateTokens() {
+  const tokens = JSON.parse(readFileSync(join(IR, "tokens.json"), "utf8"));
+  const lines = ["/* @generated by adapters/plain-css (WHYNOT-WP-0002 T10) from ir/tokens.json — DO NOT EDIT. */", ":root {"];
+  let n = 0;
+  for (const [group, entries] of Object.entries(tokens)) {
+    lines.push(`  /* ${group} */`);
+    for (const [key, tok] of Object.entries(entries)) {
+      if (key === "$type") continue;
+      lines.push(`  --${key}: ${refToVar(tok.$value)};`); n++;
+    }
+  }
+  lines.push("}", "");
+  const out = join(HERE, "tokens.css");
+  const body = lines.join("\n");
+  const before = existsSync(out) ? readFileSync(out, "utf8") : null;
+  if (before === body) { console.log(`tokens: up to date (${n} custom properties, no change).`); return; }
+  writeFileSync(out, body);
+  console.log(`tokens: regenerated ${n} custom properties → adapters/plain-css/tokens.css`);
+}
+
+function renderClassStub(c) {
+  const base = c.tag; // reuse the contract tag as the base class name
+  const lines = [
+    `/* @generated STUB by adapters/plain-css (T10) from ir/components/${c.name}.json — write-once. */`,
+    `/* ${c.name}: ${c.description} */`,
+    `.${base} { /* TODO: base appearance per ir/exemplars/${c.name}.html */ }`,
+  ];
+  for (const v of c.variants || []) {
+    for (const val of v.values) lines.push(`.${base}--${val} { /* ${v.axis}=${val} */ }`);
+  }
+  return lines.join("\n") + "\n";
+}
+
+function scaffold() {
+  const contracts = readdirSync(join(IR, "components")).filter((f) => f.endsWith(".json"))
+    .map((f) => JSON.parse(readFileSync(join(IR, "components", f), "utf8")))
+    .sort((a, b) => a.name.localeCompare(b.name));
+
+  // Plain-CSS has no hand-authored source, so every IR component is "new".
+  const components = contracts.map((c) => ({ name: c.name, status: "new",
+    issues: [{ kind: "no-counterpart", detail: `no .${c.tag} class — stub generated.` }] }));
+
+  mkdirSync(STUBS, { recursive: true });
+  let stubbed = 0;
+  for (const c of contracts) {
+    const out = join(STUBS, `${c.tag}.css`);
+    if (!existsSync(out)) { writeFileSync(out, renderClassStub(c)); stubbed++; }
+  }
+  // Drift roll-up — same shape as the Lit adapter's, proving the contract is portable.
+  const reportPath = join(HERE, "_report.json");
+  let generatedAt = new Date().toISOString();
+  if (existsSync(reportPath)) {
+    try { const prev = JSON.parse(readFileSync(reportPath, "utf8"));
+      if (JSON.stringify(prev.components) === JSON.stringify(components) && prev.generatedAt) generatedAt = prev.generatedAt;
+    } catch { /* fresh */ }
+  }
+  writeFileSync(reportPath, JSON.stringify({ stack: "plain-css", generatedAt, components }, null, 2) + "\n");
+  console.log(`scaffold: ${components.length} components, all new (${stubbed} stub${stubbed === 1 ? "" : "s"} written) → adapters/plain-css/stubs/`);
+  return components.length > 0;
+}
+
+function main() {
+  if (!existsSync(join(IR, "tokens.json"))) { console.error("No ir/ — run `make ir` first."); process.exit(2); }
+  generateTokens();
+  const isNew = scaffold();
+  console.log("\nadapt-plain-css: SMOKE only — proves a non-Lit adapter consumes the same ir/ and");
+  console.log("emits the same contract shapes. Not a finished stack (see adapters/plain-css/README.md).");
+  if (isNew) process.exit(3); // new components present (contract: 3) — expected for a fresh stack
+}
+
+main();

adapters/plain-css/stubs/wn-button.css

@@ -0,0 +1,6 @@
+/* @generated STUB by adapters/plain-css (T10) from ir/components/Button.json — write-once. */
+/* Button: Button — extracted from designbook ui_kits/whynot-control/Atoms.jsx. */
+.wn-button { /* TODO: base appearance per ir/exemplars/Button.html */ }
+.wn-button--secondary { /* variant=secondary */ }
+.wn-button--primary { /* variant=primary */ }
+.wn-button--ghost { /* variant=ghost */ }

adapters/plain-css/stubs/wn-eyebrow.css

@@ -0,0 +1,3 @@
+/* @generated STUB by adapters/plain-css (T10) from ir/components/Eyebrow.json — write-once. */
+/* Eyebrow: Eyebrow — extracted from designbook ui_kits/whynot-control/Atoms.jsx. */
+.wn-eyebrow { /* TODO: base appearance per ir/exemplars/Eyebrow.html */ }

adapters/plain-css/stubs/wn-icon.css

@@ -0,0 +1,3 @@
+/* @generated STUB by adapters/plain-css (T10) from ir/components/Icon.json — write-once. */
+/* Icon: Icon — extracted from designbook ui_kits/whynot-control/Atoms.jsx. */
+.wn-icon { /* TODO: base appearance per ir/exemplars/Icon.html */ }

adapters/plain-css/stubs/wn-page-header.css

@@ -0,0 +1,3 @@
+/* @generated STUB by adapters/plain-css (T10) from ir/components/PageHeader.json — write-once. */
+/* PageHeader: PageHeader — extracted from designbook ui_kits/whynot-control/Chrome.jsx. */
+.wn-page-header { /* TODO: base appearance per ir/exemplars/PageHeader.html */ }

adapters/plain-css/stubs/wn-pipeline.css

@@ -0,0 +1,3 @@
+/* @generated STUB by adapters/plain-css (T10) from ir/components/PipelineStrip.json — write-once. */
+/* PipelineStrip: PipelineStrip — extracted from designbook ui_kits/whynot-control/Chrome.jsx. */
+.wn-pipeline { /* TODO: base appearance per ir/exemplars/PipelineStrip.html */ }

adapters/plain-css/stubs/wn-sidebar.css

@@ -0,0 +1,4 @@
+/* @generated STUB by adapters/plain-css (T10) from ir/components/Sidebar.json — write-once. */
+/* Sidebar: Sidebar — extracted from designbook ui_kits/whynot-control/Chrome.jsx. */
+.wn-sidebar { /* TODO: base appearance per ir/exemplars/Sidebar.html */ }
+.wn-sidebar--doc: { /* current=doc: */ }

adapters/plain-css/stubs/wn-stage-dot.css

@@ -0,0 +1,3 @@
+/* @generated STUB by adapters/plain-css (T10) from ir/components/StageDot.json — write-once. */
+/* StageDot: StageDot — extracted from designbook ui_kits/whynot-control/Atoms.jsx. */
+.wn-stage-dot { /* TODO: base appearance per ir/exemplars/StageDot.html */ }

adapters/plain-css/stubs/wn-stamp.css

@@ -0,0 +1,3 @@
+/* @generated STUB by adapters/plain-css (T10) from ir/components/Stamp.json — write-once. */
+/* Stamp: Stamp — extracted from designbook ui_kits/whynot-control/Atoms.jsx. */
+.wn-stamp { /* TODO: base appearance per ir/exemplars/Stamp.html */ }

adapters/plain-css/stubs/wn-tag.css

@@ -0,0 +1,3 @@
+/* @generated STUB by adapters/plain-css (T10) from ir/components/Tag.json — write-once. */
+/* Tag: Tag — extracted from designbook ui_kits/whynot-control/Atoms.jsx. */
+.wn-tag { /* TODO: base appearance per ir/exemplars/Tag.html */ }

adapters/plain-css/stubs/wn-top-nav.css

@@ -0,0 +1,3 @@
+/* @generated STUB by adapters/plain-css (T10) from ir/components/TopNav.json — write-once. */
+/* TopNav: TopNav — extracted from designbook ui_kits/whynot-control/Chrome.jsx. */
+.wn-top-nav { /* TODO: base appearance per ir/exemplars/TopNav.html */ }

adapters/plain-css/tokens.css

@@ -0,0 +1,91 @@
+/* @generated by adapters/plain-css (WHYNOT-WP-0002 T10) from ir/tokens.json — DO NOT EDIT. */
+:root {
+  /* color */
+  --ink: #0A0A0A;
+  --ink-2: #1F1F1F;
+  --ink-3: #5C5C5C;
+  --ink-4: #8A8A8A;
+  --ink-5: #B5B5B3;
+  --line: #E5E5E2;
+  --line-strong: #C9C9C5;
+  --line-soft: #F0F0EC;
+  --paper: #FFFFFF;
+  --paper-2: #FAFAF7;
+  --paper-3: #F4F4EF;
+  --fg-1: var(--ink);
+  --fg-2: var(--ink-3);
+  --fg-3: var(--ink-4);
+  --fg-mute: var(--ink-5);
+  --fg-on-dark: #FAFAF7;
+  --bg-1: var(--paper);
+  --bg-2: var(--paper-2);
+  --bg-3: var(--paper-3);
+  --bg-invert: var(--ink);
+  --border: var(--line);
+  --border-strong: var(--line-strong);
+  --border-soft: var(--line-soft);
+  --hi: #FFE14A;
+  --hi-2: #FFD400;
+  --hi-ink: #1A1500;
+  --status-raw: #B5B5B3;
+  --status-weak: #8A8A8A;
+  --status-medium: #5C5C5C;
+  --status-strong: #0A0A0A;
+  --status-commercial: #FFD400;
+  --status-error: #B33A2E;
+  --status-error-bg: #FCF3F1;
+  --status-warn: #C28000;
+  --status-warn-bg: #FFFCEB;
+  --status-success: #2F6B3A;
+  --status-success-bg: #F2F7F2;
+  --status-info: #2E5C8A;
+  --status-info-bg: #F2F5FA;
+  /* fontFamily */
+  --ff-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --ff-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  --ff-serif: ui-serif, Georgia, "Times New Roman", serif;
+  /* fontSize */
+  --fs-xs: 11px;
+  --fs-sm: 13px;
+  --fs-base: 15px;
+  --fs-md: 17px;
+  --fs-lg: 20px;
+  --fs-xl: 24px;
+  --fs-2xl: 32px;
+  --fs-3xl: 44px;
+  --fs-4xl: 64px;
+  --fs-5xl: 96px;
+  /* lineHeight */
+  --lh-tight: 1.05;
+  --lh-snug: 1.25;
+  --lh-base: 1.5;
+  --lh-loose: 1.7;
+  /* letterSpacing */
+  --tr-tight: -0.02em;
+  --tr-snug: -0.01em;
+  --tr-base: 0em;
+  --tr-mono: 0.02em;
+  --tr-label: 0.08em;
+  /* space */
+  --sp-1: 4px;
+  --sp-2: 8px;
+  --sp-3: 12px;
+  --sp-4: 16px;
+  --sp-5: 24px;
+  --sp-6: 32px;
+  --sp-7: 48px;
+  --sp-8: 64px;
+  --sp-9: 96px;
+  --sp-10: 128px;
+  /* radius */
+  --r-0: 0px;
+  --r-1: 2px;
+  --r-2: 4px;
+  --r-3: 8px;
+  --r-pill: 999px;
+  /* shadow */
+  --shadow-0: none;
+  --shadow-1: 0 1px 0 var(--line);
+  --shadow-2: 0 1px 0 var(--line-strong);
+  --shadow-3: 0 4px 12px -6px rgba(10,10,10,0.10);
+}

bin/whynot-design.mjs

@@ -0,0 +1,207 @@
+#!/usr/bin/env node
+// =============================================================
+// whynot-design CLI — consumer drift-check (WHYNOT-WP-0003 · T05)
+//
+// Runs IN A CONSUMING REPO:  npx @whynot/design drift
+//
+// Compares the consumer's adopted sync-point (.whynot-design.lock) against the
+// installed package's ir/manifest.json (or an explicit --manifest), and reports
+// added / changed / removed components + token changes. Read-only against the
+// package; the only file it writes is .whynot-design.lock (and only on --update).
+//
+// This is the DOWNSTREAM mirror of the upstream adapter drift
+// (adapters/ADAPTER_CONTRACT.md) — same report shape, same exit codes:
+//   0  in sync          2  usage/config error          3  drift detected
+// =============================================================
+import { readFileSync, writeFileSync, existsSync } from "node:fs";
+import { join, dirname, resolve, isAbsolute } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const PKG_ROOT = join(dirname(fileURLToPath(import.meta.url)), "..");
+const EXIT = { OK: 0, USAGE: 2, DRIFT: 3 };
+
+function fail(msg) {
+  process.stderr.write(`whynot-design: ${msg}\n`);
+  process.exit(EXIT.USAGE);
+}
+
+function readJson(path, label) {
+  if (!existsSync(path)) fail(`${label} not found at ${path}`);
+  try {
+    return JSON.parse(readFileSync(path, "utf8"));
+  } catch (e) {
+    fail(`${label} at ${path} is not valid JSON: ${e.message}`);
+  }
+}
+
+function parseArgs(argv) {
+  const args = { _: [], flags: {} };
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === "--json" || a === "--update") args.flags[a.slice(2)] = true;
+    else if (a === "--lock" || a === "--manifest" || a === "--version") args.flags[a.slice(2)] = argv[++i];
+    else if (a.startsWith("--")) fail(`unknown flag ${a}`);
+    else args._.push(a);
+  }
+  return args;
+}
+
+function resolvePath(p, base) {
+  return isAbsolute(p) ? p : resolve(base, p);
+}
+
+// ---------- drift core ----------
+// Compare an adopted lock against a target manifest. Pure; reused for --json,
+// the human report, and --update. Mirrors the adapter drift component shape.
+function computeDrift(lock, manifest) {
+  const adopted = lock.manifestHashes.components || {};
+  const current = Object.fromEntries(manifest.components.map((c) => [c.name, c.hash]));
+  const groupOf = Object.fromEntries(manifest.components.map((c) => [c.name, c.group]));
+
+  const names = [...new Set([...Object.keys(adopted), ...Object.keys(current)])].sort();
+  const components = [];
+  for (const name of names) {
+    if (!(name in adopted)) components.push({ name, group: groupOf[name], status: "added" });
+    else if (!(name in current)) components.push({ name, status: "removed" });
+    else if (adopted[name] !== current[name]) components.push({ name, group: groupOf[name], status: "changed", from: adopted[name], to: current[name] });
+    else components.push({ name, group: groupOf[name], status: "ok" });
+  }
+
+  const tokensChanged = lock.manifestHashes.tokens !== manifest.tokensHash;
+  const drifted = tokensChanged || components.some((c) => c.status !== "ok");
+
+  return {
+    tool: "@whynot/design drift",
+    generatedAt: new Date().toISOString(),
+    adopted: { designVersion: lock.designVersion, adoptedAt: lock.adoptedAt },
+    target: { designVersion: manifest.designVersion, generatedAt: manifest.generatedAt },
+    schemaVersionMismatch: lock.manifestSchemaVersion !== manifest.schemaVersion
+      ? { adopted: lock.manifestSchemaVersion, target: manifest.schemaVersion }
+      : null,
+    tokens: { status: tokensChanged ? "changed" : "ok" },
+    components,
+    drift: drifted,
+  };
+}
+
+function lockFromManifest(manifest) {
+  return {
+    designVersion: manifest.designVersion,
+    adoptedAt: new Date().toISOString(),
+    manifestSchemaVersion: manifest.schemaVersion,
+    manifestHashes: {
+      tokens: manifest.tokensHash,
+      components: Object.fromEntries(manifest.components.map((c) => [c.name, c.hash])),
+    },
+  };
+}
+
+function printHuman(report) {
+  const out = [];
+  out.push(`whynot-design drift`);
+  out.push(`  adopted: ${report.adopted.designVersion}  (${report.adopted.adoptedAt})`);
+  out.push(`  target:  ${report.target.designVersion}  (${report.target.generatedAt})`);
+  if (report.schemaVersionMismatch) {
+    out.push(`  ! manifest schemaVersion differs (${report.schemaVersionMismatch.adopted} → ${report.schemaVersionMismatch.target}); hashes may not be directly comparable.`);
+  }
+  out.push("");
+
+  const added = report.components.filter((c) => c.status === "added");
+  const changed = report.components.filter((c) => c.status === "changed");
+  const removed = report.components.filter((c) => c.status === "removed");
+
+  out.push(`Tokens:     ${report.tokens.status === "changed" ? "changed" : "unchanged"}`);
+  out.push(`Components:  +${added.length} added · ~${changed.length} changed · -${removed.length} removed · ${report.components.length} total`);
+  if (added.length) out.push(`  + ${added.map((c) => c.name).join(", ")}`);
+  if (changed.length) out.push(`  ~ ${changed.map((c) => c.name).join(", ")}`);
+  if (removed.length) out.push(`  - ${removed.map((c) => c.name).join(", ")}`);
+  out.push("");
+
+  if (report.drift) {
+    out.push(`Drift detected vs your adopted sync-point.`);
+    out.push(`Adopt this version:  npx @whynot/design drift --update`);
+  } else {
+    out.push(`In sync with ${report.target.designVersion}. No drift.`);
+  }
+  process.stdout.write(out.join("\n") + "\n");
+}
+
+// ---------- drift command ----------
+function cmdDrift(args) {
+  const cwd = process.cwd();
+  const lockPath = resolvePath(args.flags.lock || ".whynot-design.lock", cwd);
+  const manifestPath = args.flags.manifest
+    ? resolvePath(args.flags.manifest, cwd)
+    : join(PKG_ROOT, "ir", "manifest.json");
+
+  const manifest = readJson(manifestPath, "ir/manifest.json");
+  if (!Array.isArray(manifest.components) || typeof manifest.tokensHash !== "string") {
+    fail(`${manifestPath} is not a valid ir/manifest.json`);
+  }
+  if (args.flags.version && manifest.designVersion !== args.flags.version) {
+    fail(`--version ${args.flags.version} does not match the resolved manifest (designVersion ${manifest.designVersion}). Install that version or point --manifest at it.`);
+  }
+
+  // First adopt: no lock yet. --update bootstraps it; otherwise guide the user.
+  if (!existsSync(lockPath)) {
+    if (args.flags.update) {
+      writeFileSync(lockPath, JSON.stringify(lockFromManifest(manifest), null, 2) + "\n");
+      if (args.flags.json) process.stdout.write(JSON.stringify({ adopted: manifest.designVersion, created: true }, null, 2) + "\n");
+      else process.stdout.write(`Adopted ${manifest.designVersion} as the initial sync-point → ${lockPath}\n`);
+      return EXIT.OK;
+    }
+    fail(`no .whynot-design.lock found. Adopt the installed version first:\n  npx @whynot/design drift --update`);
+  }
+
+  const lock = readJson(lockPath, ".whynot-design.lock");
+  if (!lock.manifestHashes || !lock.manifestHashes.components) {
+    fail(`${lockPath} is missing manifestHashes.components`);
+  }
+
+  const report = computeDrift(lock, manifest);
+
+  if (args.flags.update) {
+    writeFileSync(lockPath, JSON.stringify(lockFromManifest(manifest), null, 2) + "\n");
+    if (args.flags.json) process.stdout.write(JSON.stringify({ ...report, updated: true }, null, 2) + "\n");
+    else {
+      printHuman(report);
+      process.stdout.write(`\nAdopted ${manifest.designVersion} → ${lockPath}\n`);
+    }
+    return EXIT.OK; // --update reconciles, so it always lands in sync
+  }
+
+  if (args.flags.json) process.stdout.write(JSON.stringify(report, null, 2) + "\n");
+  else printHuman(report);
+
+  return report.drift ? EXIT.DRIFT : EXIT.OK;
+}
+
+// ---------- dispatch ----------
+function main() {
+  const argv = process.argv.slice(2);
+  const args = parseArgs(argv);
+  const cmd = args._[0];
+
+  if (!cmd || cmd === "help" || args.flags.help) {
+    process.stdout.write(`whynot-design — consumer-side design-system tooling
+
+Usage:
+  npx @whynot/design drift [options]      Report changes since your adopted sync-point
+
+Options:
+  --update            Adopt the target version as the new sync-point (writes .whynot-design.lock)
+  --json              Machine-readable output
+  --manifest <path>   Diff against an explicit ir/manifest.json (default: the installed package's)
+  --version <x.y.z>   Assert the resolved manifest is this version (guards against the wrong install)
+  --lock <path>       Path to the consumer lock (default: ./.whynot-design.lock)
+
+Exit codes:  0 in sync · 2 usage/config error · 3 drift detected
+`);
+    return EXIT.OK;
+  }
+
+  if (cmd === "drift") return cmdDrift(args);
+  fail(`unknown command '${cmd}'. Try: npx @whynot/design help`);
+}
+
+process.exit(main());

designbook/.design-pull.json

@@ -0,0 +1,18 @@
+{
+  "comment": "Globs (over Claude Design project paths) that designbook_pull.py mirrors into designbook/. Exclude _whynot-design-seed/** \u2014 it is a copy of THIS repo living in the cloud project and must not shadow the real source.",
+  "include": [
+    "ui_kits/**",
+    "preview/**",
+    "_ds_manifest.json",
+    "_ds_bundle.js",
+    "styles.css",
+    "colors_and_type.css"
+  ],
+  "exclude": [
+    "_whynot-design-seed/**",
+    "uploads/**",
+    "_check/**",
+    ".thumbnail",
+    "assets/**"
+  ]
+}

designbook/.design-sync.json

@@ -0,0 +1,6 @@
+{
+  "lastSyncAt": "2026-06-23T19:25:28Z",
+  "remoteUpdatedAt": "2026-06-23T19:25:28Z",
+  "projectId": "fb2eef8c-c1fc-4c75-bff4-3782552e5511",
+  "projectName": "WhyNot Design System"
+}

designbook/REACT_CANONICAL_DECISION.md

@@ -0,0 +1,63 @@
+# Decision: the canonical React designbook (WHYNOT-WP-0002 · T04)
+
+> **Status: RESOLVED.** The canonical React designbook **already exists** — it is
+> the **"WhyNot Design System"** project in Claude Design
+> (`fb2eef8c-c1fc-4c75-bff4-3782552e5511`, owner Bernd). The remaining concrete
+> action is the first `/design-sync` pull into `designbook/`.
+
+## Correction to the earlier premise
+
+An earlier draft of this doc assumed the Claude Design project held only the
+hand-authored **Lit** experiment, and therefore proposed *authoring* a new React
+designbook. That premise was wrong. Inspecting the project
+(`DesignSync.list_files` / `get_file`) shows it already contains a real React
+source:
+
+- `ui_kits/whynot-control/*.jsx` — **React function components**: `Atoms.jsx`
+  (`Eyebrow`, `Tag`, `Button`, `StageDot`, `Stamp`, `Icon`), `Chrome.jsx`,
+  `Screens.jsx`, `DocView.jsx`, `data.jsx`. Props are expressed as JSX function
+  parameters with defaults (e.g. `Button({ variant = 'secondary', icon, … })`).
+- `preview/comp-*.html` — per-component preview cards (the exemplar renders).
+- `styles.css`, `colors_and_type.css`, `_ds_manifest.json`, `_ds_bundle.js` —
+  token/style layers + the grouping manifest.
+- `_whynot-design-seed/` — a full copy of this Lit repo that seeded the project.
+
+So Claude Design is genuinely canonical today, and `/design-sync` provides the
+React origin from which Lit (and any future stack) is generated. This is the
+directionality the workplan already assumes: **React → IR → stacks.**
+
+## Resolution
+
+- **Canonical source:** the existing "WhyNot Design System" Claude Design project.
+  No new designbook is authored; nothing is adopted from a foreign kit.
+- **How it reaches `designbook/`:** run **`make designbook-pull`**
+  (`scripts/designbook_pull.py`) — it drives the local `claude` binary headless
+  (`claude --print --permission-mode acceptEdits`) so the `DesignSync` fetch+write
+  happens in a subprocess, and stamps freshness on success. (The bundled
+  `/design-sync` skill goes the other way — it *pushes* repo→cloud — so it does not
+  populate `designbook/`.) **Done 2026-06-23:** 44 files pulled (the `.jsx` ui-kit,
+  `_ds_manifest.json`, style layers, and `preview/*.html` exemplars);
+  `_whynot-design-seed/**` excluded.
+
+## Consequence for the extractor (T05)
+
+The React source is a **bundled `.jsx` ui-kit** (several components per file),
+**not** the per-component `.d.ts` + `.prompt.md` layout the T01 schema notes
+assumed. The neutral IR **contract schema is unaffected** (it describes the
+*output* shape), but `scripts/ir-extract.mjs` (T05) must:
+
+- read component **props/defaults from the JSX function signatures** in
+  `ui_kits/whynot-control/*.jsx` (not `.d.ts`),
+- take **grouping** from `_ds_manifest.json`,
+- take **exemplars** from `preview/comp-*.html`,
+- take **tokens** from the project's `styles.css` / `colors_and_type.css` (and/or
+  the seed `tokens/*.json`), normalising to W3C DTCG.
+
+This is recorded so T05 is designed against the real source layout.
+
+## What unblocks the rest of the pipeline
+
+1. Run `/design-sync` → `designbook/` receives the React mirror (more than README).
+2. Stamp + `make designbook-sync`.
+3. `make ir` (T05) extracts the IR from the `.jsx` ui-kit + previews + manifest.
+4. T06–T08 (Lit adapter + parity) then run against real data.

designbook/README.md

@@ -8,6 +8,32 @@ build scripts; `tokens/` and `src/styles/` in the repo root are *derived* from i
 See `DesignSystemIntroduction.md` §1 (three places) and §5 (the atelier → repo hop),
 and `RecentChanges.md` (regenerated by `make designbook-sync`) for the last diff.
 
+## Refresh runbook — propagating a designbook change to Lit (WHYNOT-WP-0002)
+
+When the cloud designbook moves, run **`make designbook-refresh`** — it chains
+check → pull → record → `make ir` → `make adapt-lit` → (drift triage) → `make
+parity-lit` and stops when a human decision is needed. See
+`.claude/rules/stack-and-commands.md` for the step list and
+`.claude/rules/designbook-propagation.md` for the one-way governance.
+
+**Step 6 — resolving drift (the human step).** When `make adapt-lit` exits `3`,
+the refresh halts and points you at `adapters/lit/drift/<Name>.md`. For each
+**actionable** issue (informational `non-portable`/`prop-extra` are not gated):
+
+| drift kind | what it means | how to resolve |
+|---|---|---|
+| `attribute-mismatch` | the Lit property reflects a different attribute than the IR contract | rename the Lit `attribute:` to match the IR, or — if the *language* is what's wrong — change it in Claude Design and re-propagate |
+| `prop-missing` | the IR contract has a prop the `<wn-*>` element lacks | add the reactive property + behaviour to the element, **or** if the element models it differently (e.g. a slot, or state on a child), change the React designbook so the contract matches reality |
+| `variant-axis-missing` | an IR variant axis has no backing Lit property | add the variant property, or correct the axis in Claude Design |
+| `tag-mismatch` | the IR contract's tag has no element; a near-named one exists (e.g. `wn-pipeline-strip` vs the hand-authored `wn-pipeline`) | decide the canonical name **in Claude Design** and re-propagate, then realign the element — do not silently rename only the stack |
+
+**Never** resolve drift by editing `ir/` or back-editing React from the stack —
+that desyncs the canonical source (see `designbook-propagation.md`). After
+resolving, re-run `make designbook-refresh --no-pull` to confirm `adapt-lit` is
+clean and `parity-lit` passes (exit `0`). New components get a write-once stub in
+`adapters/lit/stubs/<Name>.js` — move it into `src/elements/`, implement the
+behaviour, register it, and re-run.
+
 ## How it syncs
 
 The designbook is a cloud project of type `PROJECT_TYPE_DESIGN_SYSTEM`. Sync is

designbook/colors_and_type.css

@@ -0,0 +1,293 @@
+/* ============================================================
+   WhyNot Design System — Colors & Type
+   ------------------------------------------------------------
+   Neutral, mostly black/white. Color is used SPARINGLY — only
+   one warm accent (annotation yellow) borrowed from the LEGO
+   brick in the logo. The system favours light grey wireframe
+   artefacts over heavy fills.
+   ============================================================ */
+
+/* ---------- Fonts ----------
+   System-font stacks: zero CDN dependency, zero offline issues, no CSP
+   headaches, no FOUC. macOS gets SF Pro / SF Mono; Windows gets Segoe UI
+   / Cascadia; Linux falls through to its own ui-* alias. All three stacks
+   ship as "quiet, document-quality" out of the box, which matches the
+   system's intent (wireframe-leaning, not branded display type).         */
+
+:root {
+  /* ---------- Base palette: neutrals ---------- */
+  --ink:           #0A0A0A;   /* near-black, the only "fill" most of the time */
+  --ink-2:         #1F1F1F;
+  --ink-3:         #5C5C5C;
+  --ink-4:         #8A8A8A;
+  --ink-5:         #B5B5B3;   /* placeholder text, wireframe labels */
+  --line:          #E5E5E2;   /* default 1px wireframe rule */
+  --line-strong:   #C9C9C5;   /* dividers between sections */
+  --line-soft:     #F0F0EC;   /* hairline within a card */
+  --paper:         #FFFFFF;   /* canvas */
+  --paper-2:       #FAFAF7;   /* sheet, dim canvas */
+  --paper-3:       #F4F4EF;   /* recessed surface, code block bg */
+
+  /* ---------- Foreground / background semantic ---------- */
+  --fg-1:          var(--ink);
+  --fg-2:          var(--ink-3);
+  --fg-3:          var(--ink-4);
+  --fg-mute:       var(--ink-5);
+  --fg-on-dark:    #FAFAF7;
+
+  --bg-1:          var(--paper);
+  --bg-2:          var(--paper-2);
+  --bg-3:          var(--paper-3);
+  --bg-invert:     var(--ink);
+
+  --border:        var(--line);
+  --border-strong: var(--line-strong);
+  --border-soft:   var(--line-soft);
+
+  /* ---------- The single accent: annotation yellow ---------- */
+  /* Lifted from the LEGO brick. Used as highlighter, "draft"
+     stamp, signal-marker. Never as a button fill. */
+  --hi:            #FFE14A;
+  --hi-2:          #FFD400;
+  --hi-ink:        #1A1500;   /* text on yellow */
+
+  /* ---------- Status (for prototype lifecycle, signal strength) ---------- */
+  /* Kept deliberately desaturated so they read as labels, not UI. */
+  --status-raw:        #B5B5B3;   /* S0 — no signal      */
+  --status-weak:       #8A8A8A;   /* S1 — weak signal    */
+  --status-medium:     #5C5C5C;   /* S2 — medium signal  */
+  --status-strong:     #0A0A0A;   /* S3 — strong signal  */
+  --status-commercial: #FFD400;   /* S4 — commercial     */
+
+  /* ---------- Functional status (for UI feedback: errors, warnings, success, info) ----------
+     Distinct from signal strength above. Used as 2px borders, small dots, and icon tints —
+     NEVER as fills or button backgrounds. Tints (e.g. --status-error-bg) are barely-saturated
+     paper tones for banner backgrounds when the message must really attract the eye.
+     If even this feels too colourful, set the *-fg tokens to var(--ink) — the system still
+     reads correctly with the dots/borders alone.                                                */
+  --status-error:    #B33A2E;     /* muted brick red */
+  --status-error-bg: #FCF3F1;
+  --status-warn:     #C28000;     /* deep mustard — keeps lineage with --hi */
+  --status-warn-bg:  #FFFCEB;
+  --status-success:  #2F6B3A;     /* muted forest */
+  --status-success-bg: #F2F7F2;
+  --status-info:     #2E5C8A;     /* muted ink-blue */
+  --status-info-bg:  #F2F5FA;
+
+  /* ---------- Type families ---------- */
+  --ff-sans:    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+                "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;   /* @kind font */
+  --ff-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;       /* @kind font */
+  --ff-serif:   ui-serif, Georgia, "Times New Roman", serif;               /* @kind font */
+
+  /* ---------- Type scale (modular, ~1.2) ---------- */
+  --fs-xs:    11px;
+  --fs-sm:    13px;
+  --fs-base:  15px;
+  --fs-md:    17px;
+  --fs-lg:    20px;
+  --fs-xl:    24px;
+  --fs-2xl:   32px;
+  --fs-3xl:   44px;
+  --fs-4xl:   64px;
+  --fs-5xl:   96px;
+
+  --lh-tight:  1.05;   /* @kind font */
+  --lh-snug:   1.25;   /* @kind font */
+  --lh-base:   1.5;    /* @kind font */
+  --lh-loose:  1.7;    /* @kind font */
+
+  --tr-tight:  -0.02em;
+  --tr-snug:   -0.01em;
+  --tr-base:    0em;
+  --tr-mono:    0.02em;
+  --tr-label:   0.08em;   /* uppercase eyebrow labels */
+
+  /* ---------- Spacing (4px base) ---------- */
+  --sp-1:  4px;
+  --sp-2:  8px;
+  --sp-3:  12px;
+  --sp-4:  16px;
+  --sp-5:  24px;
+  --sp-6:  32px;
+  --sp-7:  48px;
+  --sp-8:  64px;
+  --sp-9:  96px;
+  --sp-10: 128px;
+
+  /* ---------- Radii — small, mostly square ---------- */
+  --r-0:   0px;
+  --r-1:   2px;
+  --r-2:   4px;
+  --r-3:   8px;
+  --r-pill: 999px;
+
+  /* ---------- Elevation — almost none. This is a wireframe system. ---------- */
+  --shadow-0: none;
+  --shadow-1: 0 1px 0 var(--line);
+  --shadow-2: 0 1px 0 var(--line-strong);
+  --shadow-3: 0 4px 12px -6px rgba(10,10,10,0.10);
+}
+
+/* ============================================================
+   Semantic element styles
+   ============================================================ */
+
+html {
+  font-family: var(--ff-sans);
+  font-size: var(--fs-base);
+  line-height: var(--lh-base);
+  color: var(--fg-1);
+  background: var(--bg-1);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  margin: 0;
+  font-feature-settings: "ss01", "cv11";
+  text-wrap: pretty;
+}
+
+/* ---------- Headings ---------- */
+h1, .h1 {
+  font: 600 var(--fs-3xl)/var(--lh-tight) var(--ff-sans);
+  letter-spacing: var(--tr-tight);
+  margin: 0 0 var(--sp-5);
+  color: var(--fg-1);
+}
+h2, .h2 {
+  font: 500 var(--fs-2xl)/var(--lh-snug) var(--ff-sans);
+  letter-spacing: var(--tr-snug);
+  margin: 0 0 var(--sp-4);
+}
+h3, .h3 {
+  font: 500 var(--fs-xl)/var(--lh-snug) var(--ff-sans);
+  letter-spacing: var(--tr-snug);
+  margin: 0 0 var(--sp-3);
+}
+h4, .h4 {
+  font: 500 var(--fs-lg)/var(--lh-snug) var(--ff-sans);
+  margin: 0 0 var(--sp-2);
+}
+h5, .h5 {
+  font: 500 var(--fs-md)/var(--lh-snug) var(--ff-sans);
+  margin: 0 0 var(--sp-2);
+}
+
+/* ---------- Display (for hero / title slides) ---------- */
+.display-1 {
+  font: 300 var(--fs-5xl)/0.95 var(--ff-sans);
+  letter-spacing: -0.035em;
+  color: var(--fg-1);
+}
+.display-2 {
+  font: 400 var(--fs-4xl)/1.0 var(--ff-sans);
+  letter-spacing: var(--tr-tight);
+}
+
+/* ---------- Body ---------- */
+p {
+  margin: 0 0 var(--sp-4);
+  line-height: var(--lh-base);
+  color: var(--fg-1);
+}
+.lead {
+  font-size: var(--fs-md);
+  line-height: 1.55;
+  color: var(--fg-2);
+}
+small, .small {
+  font-size: var(--fs-sm);
+  color: var(--fg-2);
+}
+
+/* ---------- Eyebrow / uppercase labels (very common in this system) ---------- */
+.eyebrow,
+.label {
+  font: 500 var(--fs-xs)/1.2 var(--ff-mono);
+  letter-spacing: var(--tr-label);
+  text-transform: uppercase;
+  color: var(--fg-3);
+}
+
+/* ---------- Code / mono ---------- */
+code, kbd, samp, pre, .mono {
+  font-family: var(--ff-mono);
+  font-size: 0.92em;
+  letter-spacing: var(--tr-mono);
+}
+code {
+  background: var(--bg-3);
+  padding: 1px 6px;
+  border-radius: var(--r-1);
+  color: var(--ink-2);
+}
+pre {
+  background: var(--bg-3);
+  border: 1px solid var(--border);
+  padding: var(--sp-4);
+  overflow-x: auto;
+  border-radius: var(--r-2);
+  font-size: var(--fs-sm);
+  line-height: var(--lh-snug);
+}
+pre code { background: none; padding: 0; }
+
+/* ---------- Editorial serif moments ---------- */
+.serif       { font-family: var(--ff-serif); }
+.serif-quote {
+  font: 400 italic var(--fs-xl)/1.4 var(--ff-serif);
+  color: var(--fg-2);
+}
+
+/* ---------- Links ---------- */
+a {
+  color: var(--fg-1);
+  text-decoration: underline;
+  text-decoration-color: var(--border-strong);
+  text-underline-offset: 3px;
+  text-decoration-thickness: 1px;
+  transition: text-decoration-color 120ms ease, color 120ms ease;
+}
+a:hover {
+  text-decoration-color: var(--fg-1);
+}
+
+/* ---------- HR ---------- */
+hr {
+  border: 0;
+  border-top: 1px solid var(--border);
+  margin: var(--sp-5) 0;
+}
+
+/* ---------- Highlighter (the one place yellow appears in body copy) ---------- */
+mark, .mark {
+  background: var(--hi);
+  color: var(--hi-ink);
+  padding: 0 2px;
+}
+
+/* ---------- Tables (used in templates) ---------- */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--fs-sm);
+}
+th, td {
+  text-align: left;
+  padding: var(--sp-3) var(--sp-4);
+  border-bottom: 1px solid var(--border);
+}
+th {
+  font-weight: 500;
+  color: var(--fg-2);
+  font-family: var(--ff-mono);
+  font-size: var(--fs-xs);
+  letter-spacing: var(--tr-label);
+  text-transform: uppercase;
+}
+
+/* ---------- Selection ---------- */
+::selection { background: var(--hi); color: var(--hi-ink); }

designbook/preview/brand-iconography.html

@@ -0,0 +1,36 @@
+<!doctype html>
+<!-- @dsCard group="Brand" name="Brand · Iconography" subtitle="Lucide · 1.5px stroke · 16 of set" viewport="700x240" -->
+<html><head>
+<meta charset="utf-8"><title>Iconography — Lucide @ 1.5px</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { padding: 22px 32px; background: var(--paper); }
+  .row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }
+  .grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px 12px; }
+  .cell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border: 1px solid var(--border-soft); border-radius: 2px; }
+  .cell svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.5; fill: none; }
+  .cell .n { font: 500 10px var(--ff-mono); color: var(--fg-3); letter-spacing: 0.04em; }
+</style></head>
+<body>
+  <div class="row-label">Lucide · stroke-width 1.5 · currentColor</div>
+  <div class="grid">
+    <div class="cell"><i data-lucide="inbox"></i><span class="n">inbox</span></div>
+    <div class="cell"><i data-lucide="lightbulb"></i><span class="n">lightbulb</span></div>
+    <div class="cell"><i data-lucide="flask-conical"></i><span class="n">flask</span></div>
+    <div class="cell"><i data-lucide="activity"></i><span class="n">signal</span></div>
+    <div class="cell"><i data-lucide="users"></i><span class="n">beta</span></div>
+    <div class="cell"><i data-lucide="git-branch"></i><span class="n">branch</span></div>
+    <div class="cell"><i data-lucide="check-square"></i><span class="n">decision</span></div>
+    <div class="cell"><i data-lucide="archive"></i><span class="n">park</span></div>
+    <div class="cell"><i data-lucide="arrow-right"></i><span class="n">promote</span></div>
+    <div class="cell"><i data-lucide="x"></i><span class="n">reject</span></div>
+    <div class="cell"><i data-lucide="search"></i><span class="n">search</span></div>
+    <div class="cell"><i data-lucide="filter"></i><span class="n">filter</span></div>
+    <div class="cell"><i data-lucide="file-text"></i><span class="n">doc</span></div>
+    <div class="cell"><i data-lucide="folder"></i><span class="n">folder</span></div>
+    <div class="cell"><i data-lucide="circle-help"></i><span class="n">question</span></div>
+    <div class="cell"><i data-lucide="circle-alert"></i><span class="n">caveat</span></div>
+  </div>
+  <script src="https://unpkg.com/lucide@latest"></script>
+  <script>lucide.createIcons();</script>
+</body></html>

designbook/preview/brand-lockups.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<!-- @dsCard group="Brand" name="Brand · Lockups" subtitle="Mark + slug · 3 sizes" viewport="700x260" -->
+<html><head>
+<meta charset="utf-8"><title>Logo Lockups</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { padding: 22px 32px; background: var(--paper); display: grid; grid-template-columns: 1fr; gap: 18px; align-content: start; }
+  .lock { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--border); border-radius: 4px; }
+  .lock img { width: 28px; height: 28px; }
+  .lock .word { font: 500 18px var(--ff-sans); letter-spacing: -0.01em; }
+  .lock .org { font: 400 14px var(--ff-mono); color: var(--fg-3); letter-spacing: 0.02em; }
+  .lock .sep { color: var(--ink-5); }
+  .lock.lg img { width: 36px; height: 36px; }
+  .lock.lg .word { font-size: 22px; }
+  .lock.foot { background: var(--ink); border-color: var(--ink); }
+  .lock.foot img { filter: invert(1); }
+  .lock.foot .word, .lock.foot .org, .lock.foot .sep { color: var(--paper); }
+  .lock.foot .org, .lock.foot .sep { opacity: 0.55; }
+  .row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 4px; }
+</style></head>
+<body>
+  <div class="row-label">Lockups — mark + wordmark + organisation slug</div>
+  <div class="lock lg"><img src="../assets/whynot-logo.png" alt=""><span class="word">whynot</span><span class="sep">/</span><span class="org">control</span></div>
+  <div class="lock"><img src="../assets/whynot-logo.png" alt=""><span class="word">whynot</span><span class="sep">/</span><span class="org">prototypes</span></div>
+  <div class="lock foot"><img src="../assets/whynot-logo.png" alt=""><span class="word">whynot</span><span class="sep">·</span><span class="org">2026 · A1 incubating</span></div>
+</body></html>

designbook/preview/brand-logo.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<!-- @dsCard group="Brand" name="Brand · Logo" subtitle="Primary · inverted · ?! wordmark" viewport="700x220" -->
+<html><head>
+<meta charset="utf-8"><title>Logo</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { padding: 20px 32px; background: var(--paper); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; align-items: center; }
+  .cell { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px; }
+  .cell.dark { background: var(--ink); border-radius: 4px; }
+  .cell img { width: 120px; height: 120px; object-fit: contain; }
+  .cell.dark img { filter: invert(1); }
+  .cell .lbl { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
+  .cell.dark .lbl { color: var(--fg-on-dark); opacity: 0.55; }
+  .wordmark { font: 600 56px/1 var(--ff-sans); letter-spacing: -0.04em; color: var(--ink); }
+  .wordmark .q { color: var(--ink); }
+</style></head>
+<body>
+  <div class="cell"><img src="../assets/whynot-logo.png" alt="whynot logo"><span class="lbl">Primary · black on white</span></div>
+  <div class="cell dark"><img src="../assets/whynot-logo.png" alt="whynot logo"><span class="lbl">Inverted · white on black</span></div>
+  <div class="cell"><div class="wordmark">?!</div><span class="lbl">Mini · ?! wordmark (favicon size)</span></div>
+</body></html>

designbook/preview/brand-wireframe-motif.html

@@ -0,0 +1,43 @@
+<!doctype html>
+<!-- @dsCard group="Brand" name="Brand · Wireframe Motif" subtitle="Graph paper + draft stamp" viewport="700x240" -->
+<html><head>
+<meta charset="utf-8"><title>Wireframe Motif</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { padding: 20px; background: var(--paper); margin: 0; }
+  .frame {
+    background: var(--paper-2);
+    background-image:
+      linear-gradient(to right, var(--border-soft) 1px, transparent 1px),
+      linear-gradient(to bottom, var(--border-soft) 1px, transparent 1px);
+    background-size: 16px 16px;
+    border: 1px solid var(--border);
+    padding: 22px 24px;
+    display: grid;
+    grid-template-columns: 200px 1fr;
+    gap: 24px;
+    min-height: 200px;
+  }
+  .frame .stamp { background: var(--hi); color: var(--hi-ink); padding: 6px 10px 4px; font: 500 10px/1 var(--ff-mono); letter-spacing: 0.12em; text-transform: uppercase; transform: rotate(-1.5deg); display: inline-block; align-self: flex-start; }
+  .frame .col { display: flex; flex-direction: column; gap: 12px; }
+  .frame h4 { font: 500 18px/1.2 var(--ff-sans); margin: 0; }
+  .frame .l { height: 10px; background: var(--ink-5); border-radius: 2px; opacity: 0.6; }
+  .frame .l.s { width: 50% } .frame .l.m { width: 75% }
+  .frame .l.x { width: 30% }
+  .frame .meta { font: 500 11px var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
+</style></head>
+<body>
+  <div class="frame">
+    <div class="col">
+      <span class="stamp">Draft · WNO-014</span>
+      <span class="meta">Stage 2 · Prototype</span>
+    </div>
+    <div class="col">
+      <h4>A field-notebook for catching weird ideas before they evaporate.</h4>
+      <div class="l m"></div>
+      <div class="l s"></div>
+      <div class="l x"></div>
+      <div class="l m"></div>
+    </div>
+  </div>
+</body></html>

designbook/preview/colors-accent.html

@@ -0,0 +1,33 @@
+<!doctype html>
+<!-- @dsCard group="Colors" name="Colors · Accent" subtitle="Annotation yellow — highlighter only" viewport="700x200" -->
+<html><head>
+<meta charset="utf-8"><title>Accent — Annotation Yellow</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { padding: 24px 32px; background: var(--paper); display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: start; }
+  .row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 10px; }
+  .sw-row { display: flex; gap: 10px; }
+  .sw { width: 84px; height: 64px; padding: 8px; display: flex; flex-direction: column; justify-content: flex-end; }
+  .sw .name { font: 500 11px var(--ff-mono); }
+  .sw .hex { font: 400 10px var(--ff-mono); color: var(--hi-ink); opacity: 0.6; }
+  .usage { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
+  .usage .row { display: flex; gap: 10px; align-items: baseline; }
+  .stamp { display:inline-block; background: var(--hi); color: var(--hi-ink); padding: 4px 10px; font: 500 10px var(--ff-mono); letter-spacing: 0.12em; text-transform: uppercase; transform: rotate(-2deg); }
+</style></head>
+<body>
+  <div>
+    <div class="row-label">Accent — used as highlighter, never as button fill</div>
+    <div class="sw-row">
+      <div class="sw" style="background:#FFE14A"><span class="name">--hi</span><span class="hex">#FFE14A</span></div>
+      <div class="sw" style="background:#FFD400"><span class="name">--hi-2</span><span class="hex">#FFD400</span></div>
+    </div>
+  </div>
+  <div>
+    <div class="row-label">Usage</div>
+    <div class="usage">
+      <div class="row"><span>Signals are <mark>evidence</mark>, not vibes.</span></div>
+      <div class="row"><span class="stamp">Draft · S2</span></div>
+      <div class="row" style="color: var(--fg-2); font-family: var(--ff-mono); font-size: 11px;">— only for marker / annotation / status</div>
+    </div>
+  </div>
+</body></html>

designbook/preview/colors-borders.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<!-- @dsCard group="Colors" name="Colors · Borders" subtitle="Hairline · default · strong" viewport="700x180" -->
+<html><head>
+<meta charset="utf-8"><title>Borders & Lines</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { padding: 24px 32px; background: var(--paper); }
+  .row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
+  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
+  .cell { background: var(--paper); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
+  .cell .name { font: 500 12px var(--ff-mono); }
+  .cell .hex { font: 400 11px var(--ff-mono); color: var(--fg-3); }
+  .demo { height: 32px; display: flex; align-items: center; padding-left: 10px; font-size: 12px; color: var(--fg-2); }
+  .d1 { border: 1px solid var(--border-soft); }
+  .d2 { border: 1px solid var(--border); }
+  .d3 { border: 1px solid var(--border-strong); }
+</style></head>
+<body>
+  <div class="row-label">Lines — hairline · default · strong</div>
+  <div class="grid">
+    <div class="cell"><div class="demo d1">soft hairline</div><span class="name">--border-soft</span><span class="hex">#F0F0EC · within cards</span></div>
+    <div class="cell"><div class="demo d2">default border</div><span class="name">--border</span><span class="hex">#E5E5E2 · cards, inputs</span></div>
+    <div class="cell"><div class="demo d3">strong divider</div><span class="name">--border-strong</span><span class="hex">#C9C9C5 · sections</span></div>
+  </div>
+</body></html>

designbook/preview/colors-neutrals.html

@@ -0,0 +1,36 @@
+<!doctype html>
+<!-- @dsCard group="Colors" name="Colors · Neutrals" subtitle="Ink scale + paper surfaces" viewport="700x290" -->
+<html><head>
+<meta charset="utf-8"><title>Neutrals — Paper & Ink</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { padding: 24px 32px; background: var(--paper); }
+  .group { display: flex; flex-direction: column; gap: 18px; }
+  .row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
+  .swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
+  .sw { border: 1px solid var(--border); padding: 14px 12px; display: flex; flex-direction: column; gap: 6px; min-height: 72px; }
+  .sw .name { font: 500 12px var(--ff-mono); letter-spacing: 0.02em; }
+  .sw .hex { font: 400 11px var(--ff-mono); color: var(--fg-3); }
+</style></head>
+<body>
+  <div class="group">
+    <div>
+      <div class="row-label">Ink — text & fills</div>
+      <div class="swatches">
+        <div class="sw" style="background:#0A0A0A;color:#FAFAF7"><span class="name">--ink</span><span class="hex" style="color:#9A9A98">#0A0A0A</span></div>
+        <div class="sw" style="background:#1F1F1F;color:#FAFAF7"><span class="name">--ink-2</span><span class="hex" style="color:#9A9A98">#1F1F1F</span></div>
+        <div class="sw" style="background:#5C5C5C;color:#FAFAF7"><span class="name">--ink-3</span><span class="hex" style="color:#C9C9C5">#5C5C5C</span></div>
+        <div class="sw" style="background:#8A8A8A;color:#FAFAF7"><span class="name">--ink-4</span><span class="hex" style="color:#E5E5E2">#8A8A8A</span></div>
+        <div class="sw" style="background:#B5B5B3"><span class="name">--ink-5</span><span class="hex">#B5B5B3</span></div>
+      </div>
+    </div>
+    <div>
+      <div class="row-label">Paper — surfaces</div>
+      <div class="swatches">
+        <div class="sw" style="background:#FFFFFF"><span class="name">--paper</span><span class="hex">#FFFFFF</span></div>
+        <div class="sw" style="background:#FAFAF7"><span class="name">--paper-2</span><span class="hex">#FAFAF7</span></div>
+        <div class="sw" style="background:#F4F4EF"><span class="name">--paper-3</span><span class="hex">#F4F4EF</span></div>
+      </div>
+    </div>
+  </div>
+</body></html>

designbook/preview/colors-signal.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<!-- @dsCard group="Colors" name="Colors · Signal Strength" subtitle="S0–S4 ramp, S4 uses accent" viewport="700x220" -->
+<html><head>
+<meta charset="utf-8"><title>Signal Strength Ramp</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { padding: 26px 32px; background: var(--paper); }
+  .row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }
+  .ramp { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
+  .step { border: 1px solid var(--border); padding: 12px 12px 14px; min-height: 96px; display: flex; flex-direction: column; gap: 6px; }
+  .step .dot { width: 14px; height: 14px; border-radius: 999px; }
+  .step .lvl { font: 500 11px var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
+  .step .name { font: 500 13px var(--ff-sans); color: var(--fg-1); }
+  .step .meaning { font: 400 11px/1.35 var(--ff-sans); color: var(--fg-2); margin-top: auto; }
+</style></head>
+<body>
+  <div class="row-label">Signal strength — desaturated, S4 only uses the accent</div>
+  <div class="ramp">
+    <div class="step"><span class="dot" style="background:#B5B5B3"></span><span class="lvl">S0</span><span class="name">No signal</span><span class="meaning">No observable interest or usefulness.</span></div>
+    <div class="step"><span class="dot" style="background:#8A8A8A"></span><span class="lvl">S1</span><span class="name">Weak</span><span class="meaning">Some curiosity or informal interest.</span></div>
+    <div class="step"><span class="dot" style="background:#5C5C5C"></span><span class="lvl">S2</span><span class="name">Medium</span><span class="meaning">Repeated interest, specific feedback.</span></div>
+    <div class="step"><span class="dot" style="background:#0A0A0A"></span><span class="lvl">S3</span><span class="name">Strong</span><span class="meaning">Action, return, referral, contribution.</span></div>
+    <div class="step"><span class="dot" style="background:#FFD400"></span><span class="lvl">S4</span><span class="name">Commercial</span><span class="meaning">Payment, pre-order, budget commit.</span></div>
+  </div>
+</body></html>

designbook/preview/colors-status-functional.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<!-- @dsCard group="Colors" name="Colors · Functional Status" subtitle="Error / warn / success / info — borders & dots only" viewport="700x280" -->
+<html><head>
+<meta charset="utf-8"><title>Functional Status Colours</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { padding: 24px 32px; background: var(--paper); }
+  .row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }
+  .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
+  .sw { padding: 12px 12px 14px; min-height: 92px; display: flex; flex-direction: column; gap: 6px; background: var(--paper); border-left: 2px solid; position: relative; }
+  .sw .dot { width: 10px; height: 10px; border-radius: 999px; position: absolute; right: 12px; top: 12px; }
+  .sw .name { font: 500 13px var(--ff-sans); color: var(--fg-1); }
+  .sw .tok  { font: 400 11px var(--ff-mono); color: var(--fg-3); }
+  .sw .hex  { font: 400 11px var(--ff-mono); color: var(--fg-3); margin-top: auto; }
+  .e { border-color: var(--status-error); }    .e .dot { background: var(--status-error); }
+  .w { border-color: var(--status-warn);  background: var(--status-warn-bg); }
+                                               .w .dot { background: var(--status-warn); }
+  .s { border-color: var(--status-success); }  .s .dot { background: var(--status-success); }
+  .i { border-color: var(--status-info); }     .i .dot { background: var(--status-info); }
+  .caveat { font: 400 11px/1.45 var(--ff-mono); color: var(--fg-3); margin-top: 4px; max-width: 64ch; }
+</style></head>
+<body>
+  <div class="row-label">Functional status — borders + dots only, never fills</div>
+  <div class="grid">
+    <div class="sw e"><span class="dot"></span><span class="name">Error</span><span class="tok">--status-error</span><span class="hex">#B33A2E · brick red</span></div>
+    <div class="sw w"><span class="dot"></span><span class="name">Warning</span><span class="tok">--status-warn</span><span class="hex">#C28000 · deep mustard</span></div>
+    <div class="sw s"><span class="dot"></span><span class="name">Success</span><span class="tok">--status-success</span><span class="hex">#2F6B3A · muted forest</span></div>
+    <div class="sw i"><span class="dot"></span><span class="name">Info</span><span class="tok">--status-info</span><span class="hex">#2E5C8A · muted ink-blue</span></div>
+  </div>
+  <p class="caveat">Distinct from S0–S4 signal strength. Use sparingly: a 2px left-border on banners, a small dot next to status text, or as <code class="mono">currentColor</code> on an icon. If even this feels too colourful for a context, fall back to ink and the existing yellow accent — the system still parses without these.</p>
+</body></html>

designbook/preview/comp-buttons.html

@@ -0,0 +1,40 @@
+<!doctype html>
+<!-- @dsCard group="Components" name="Components · Buttons" subtitle="Primary · secondary · ghost" viewport="700x240" -->
+<html><head>
+<meta charset="utf-8"><title>Buttons</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { padding: 28px 32px; background: var(--paper); }
+  .row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 16px; }
+  .grid { display: grid; grid-template-columns: repeat(4, max-content); gap: 12px 14px; align-items: center; }
+  .col-h { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
+  .row-h { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
+  .btn { font: 500 13px var(--ff-sans); letter-spacing: -0.005em; padding: 9px 16px; border-radius: var(--r-2); border: 1px solid transparent; cursor: pointer; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; }
+  .btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
+  .btn.primary.hover { background: var(--ink-2); border-color: var(--ink-2); }
+  .btn.primary.disabled { background: var(--ink-5); border-color: var(--ink-5); color: var(--paper); cursor: not-allowed; }
+  .btn.secondary { background: var(--paper); color: var(--ink); border-color: var(--border); }
+  .btn.secondary.hover { border-color: var(--ink); }
+  .btn.secondary.disabled { color: var(--ink-5); border-color: var(--border); cursor: not-allowed; }
+  .btn.ghost { background: transparent; color: var(--ink); border-color: transparent; padding-left: 8px; padding-right: 8px; }
+  .btn.ghost.hover { background: var(--paper-3); }
+  .btn.ghost.disabled { color: var(--ink-5); cursor: not-allowed; }
+</style></head>
+<body>
+  <div class="row-label">Buttons — primary · secondary · ghost</div>
+  <div class="grid">
+    <div></div><div class="col-h">Default</div><div class="col-h">Hover</div><div class="col-h">Disabled</div>
+    <div class="row-h">Primary</div>
+    <button class="btn primary">Promote prototype</button>
+    <button class="btn primary hover">Promote prototype</button>
+    <button class="btn primary disabled">Promote prototype</button>
+    <div class="row-h">Secondary</div>
+    <button class="btn secondary">Park</button>
+    <button class="btn secondary hover">Park</button>
+    <button class="btn secondary disabled">Park</button>
+    <div class="row-h">Ghost</div>
+    <button class="btn ghost">View signal</button>
+    <button class="btn ghost hover">View signal</button>
+    <button class="btn ghost disabled">View signal</button>
+  </div>
+</body></html>

designbook/preview/comp-empty-placeholder.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<!-- @dsCard group="Components" name="Components · Empty State" subtitle="Dashed border · wireframe lines" viewport="700x220" -->
+<html><head>
+<meta charset="utf-8"><title>Empty / Placeholder State</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { padding: 24px 32px; background: var(--paper); display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
+  .row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 12px; }
+  .empty { border: 1px dashed var(--border-strong); padding: 24px; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--fg-3); }
+  .empty .ttl { font: 500 13px var(--ff-sans); color: var(--fg-2); }
+  .empty .sub { font: 400 12px/1.4 var(--ff-mono); color: var(--fg-3); }
+  .empty .cta { font: 500 12px var(--ff-mono); color: var(--fg-1); text-decoration: underline; text-underline-offset: 3px; }
+  .wire { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--border); }
+  .wire .l { height: 10px; background: var(--paper-3); border-radius: 2px; }
+  .wire .l.s { width: 60% }
+  .wire .l.m { width: 80% }
+  .wire .l.x { width: 40% }
+</style></head>
+<body>
+  <div>
+    <div class="row-label">Empty — dashed border + caption</div>
+    <div class="empty">
+      <div class="ttl">No signals yet.</div>
+      <div class="sub">Lack of signal is also information.</div>
+      <a href="#" class="cta">Record a signal →</a>
+    </div>
+  </div>
+  <div>
+    <div class="row-label">Wireframe — placeholder content</div>
+    <div class="wire">
+      <div class="l m"></div>
+      <div class="l s"></div>
+      <div class="l x"></div>
+      <div class="l m"></div>
+      <div class="l s"></div>
+    </div>
+  </div>
+</body></html>

designbook/preview/comp-inputs.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<!-- @dsCard group="Components" name="Components · Inputs" subtitle="Default · focus · error" viewport="700x280" -->
+<html><head>
+<meta charset="utf-8"><title>Inputs & Form Fields</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { padding: 26px 32px; background: var(--paper); display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
+  .row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 12px; }
+  .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
+  .field label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
+  .input { font: 400 14px var(--ff-sans); padding: 10px 12px; border: 1px solid var(--border); background: var(--paper); border-radius: var(--r-1); color: var(--fg-1); outline: none; }
+  .input.focus { border-color: var(--ink); }
+  .input.error { border-color: var(--ink); border-bottom-width: 2px; }
+  .input::placeholder { color: var(--ink-5); }
+  .help { font-size: 11px; color: var(--fg-3); font-family: var(--ff-mono); }
+  .err { font-size: 11px; color: var(--ink); font-family: var(--ff-mono); }
+  textarea.input { resize: none; min-height: 64px; }
+</style></head>
+<body>
+  <div>
+    <div class="row-label">Text · Default / Focus</div>
+    <div class="field"><label>Prototype name</label><input class="input" placeholder="e.g. relevant-coronapolitics-timeline" /></div>
+    <div class="field"><label>One-line pitch</label><input class="input focus" value="Discover the weird and the useful." /><span class="help">120 char limit · plain sentence</span></div>
+  </div>
+  <div>
+    <div class="row-label">Textarea · Error</div>
+    <div class="field"><label>Learning question</label><textarea class="input">What would we need to learn to know whether this idea deserves another step?</textarea></div>
+    <div class="field"><label>Smallest useful test</label><input class="input error" value="" /><span class="err">Required — describe in one sentence.</span></div>
+  </div>
+</body></html>

designbook/preview/comp-labels-tags.html

@@ -0,0 +1,44 @@
+<!doctype html>
+<!-- @dsCard group="Components" name="Components · Labels & Tags" subtitle="Stage tags · signal dots" viewport="700x200" -->
+<html><head>
+<meta charset="utf-8"><title>Labels & Tags</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { padding: 24px 32px; background: var(--paper); }
+  .row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }
+  .stack { display: flex; flex-direction: column; gap: 18px; }
+  .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+  .tag { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--fg-2); background: var(--paper); }
+  .tag.active { color: var(--paper); background: var(--ink); border-color: var(--ink); }
+  .tag.draft { background: var(--hi); color: var(--hi-ink); border-color: transparent; }
+  .stage { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; color: var(--fg-2); display: inline-flex; align-items: center; gap: 6px; }
+  .stage .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ink); }
+  .stage.s0 .dot { background: #B5B5B3 } .stage.s1 .dot { background: #8A8A8A }
+  .stage.s2 .dot { background: #5C5C5C } .stage.s3 .dot { background: #0A0A0A }
+  .stage.s4 .dot { background: #FFD400 }
+</style></head>
+<body>
+  <div class="stack">
+    <div>
+      <div class="row-label">Tags — default · active · draft</div>
+      <div class="row">
+        <span class="tag">Raw Idea</span>
+        <span class="tag">Prototype Candidate</span>
+        <span class="tag active">Experiment</span>
+        <span class="tag">Promotion Candidate</span>
+        <span class="tag">Parked</span>
+        <span class="tag draft">Draft</span>
+      </div>
+    </div>
+    <div>
+      <div class="row-label">Signal dots — inline indicator</div>
+      <div class="row">
+        <span class="stage s0"><span class="dot"></span>S0 · No signal</span>
+        <span class="stage s1"><span class="dot"></span>S1 · Weak</span>
+        <span class="stage s2"><span class="dot"></span>S2 · Medium</span>
+        <span class="stage s3"><span class="dot"></span>S3 · Strong</span>
+        <span class="stage s4"><span class="dot"></span>S4 · Commercial</span>
+      </div>
+    </div>
+  </div>
+</body></html>

designbook/preview/comp-left-nav.html

@@ -0,0 +1,85 @@
+<!doctype html>
+<!-- @dsCard group="Components" name="Components · Left Navigation" subtitle="Grouped sidebar · active state · minimal variant" viewport="700x420" -->
+<html><head>
+<meta charset="utf-8"><title>Left Navigation</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { margin: 0; padding: 20px; background: var(--paper); display: flex; gap: 28px; align-items: stretch; }
+  .frame { display: flex; flex-direction: column; gap: 8px; }
+  .frame > .cap { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); padding-left: 12px; }
+  .leftnav {
+    width: 220px; box-sizing: border-box;
+    display: flex; flex-direction: column; gap: 28px;
+    padding: 24px 8px 24px 12px;
+    border-right: 1px solid var(--line-soft);
+    min-height: 360px;
+  }
+  .brand { display: flex; align-items: center; gap: 8px; padding: 0 10px; }
+  .brand img { width: 20px; height: 20px; }
+  .brand .nm { font: 500 14px var(--ff-sans); color: var(--fg-1); }
+  .brand .slug { font: 400 12px var(--ff-mono); color: var(--fg-3); }
+  .body { display: flex; flex-direction: column; gap: 28px; flex: 1; }
+  .section { display: flex; flex-direction: column; gap: 8px; }
+  .section .lbl { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); padding-left: 12px; opacity: 0.7; }
+  .items { display: flex; flex-direction: column; gap: 1px; }
+  .item {
+    display: flex; align-items: center; gap: 10px;
+    padding: 6px 10px; border-left: 2px solid transparent;
+    color: var(--fg-3); font: 400 13px var(--ff-sans); cursor: pointer;
+    text-decoration: none;
+  }
+  .item .ic { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; flex: none; }
+  .item .t { flex: 1; }
+  .item .n { margin-left: auto; font: 400 11px var(--ff-mono); color: var(--ink-5); }
+  .item.active { color: var(--fg-1); font-weight: 500; border-left-color: var(--ink); }
+  .item.active .n { color: var(--fg-3); }
+  .item.doc { font: 400 12px var(--ff-mono); }
+  .footer { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 0 12px; font: 400 11px var(--ff-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
+  .footer .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--ink-4); }
+</style></head>
+<body>
+  <div class="frame">
+    <span class="cap">Default · grouped, with active state</span>
+    <nav class="leftnav">
+      <div class="brand"><img src="../assets/whynot-logo.png" alt=""><span class="nm">whynot</span><span class="slug">/ control</span></div>
+      <div class="body">
+        <div class="section">
+          <span class="lbl">Work</span>
+          <div class="items">
+            <a class="item"><svg class="ic" viewBox="0 0 24 24"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg><span class="t">Inbox</span><span class="n">7</span></a>
+            <a class="item active"><svg class="ic" viewBox="0 0 24 24"><path d="M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2"/><path d="M6.453 15h11.094"/><path d="M8.5 2h7"/></svg><span class="t">Prototypes</span><span class="n">4</span></a>
+            <a class="item"><svg class="ic" viewBox="0 0 24 24"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.5.5 0 0 1-.96 0L9.24 2.18a.5.5 0 0 0-.96 0l-2.35 8.36A2 2 0 0 1 4 12H2"/></svg><span class="t">Signals</span><span class="n">12</span></a>
+            <a class="item"><svg class="ic" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/><path d="M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/></svg><span class="t">Betas</span><span class="n">1</span></a>
+            <a class="item"><svg class="ic" viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg><span class="t">Decisions</span><span class="n">3</span></a>
+          </div>
+        </div>
+        <div class="section">
+          <span class="lbl">Control docs</span>
+          <div class="items">
+            <a class="item doc"><span class="t">INTENT.md</span></a>
+            <a class="item doc"><span class="t">SCOPE.md</span></a>
+            <a class="item doc"><span class="t">OPERATING_MODEL.md</span></a>
+          </div>
+        </div>
+      </div>
+      <div class="footer"><span class="dot"></span><span>A1 · Incubating</span></div>
+    </nav>
+  </div>
+
+  <div class="frame">
+    <span class="cap">Minimal · no brand, no icons</span>
+    <nav class="leftnav" style="min-height: 360px;">
+      <div class="body">
+        <div class="section">
+          <span class="lbl">Navigate</span>
+          <div class="items">
+            <a class="item active"><span class="t">Overview</span></a>
+            <a class="item"><span class="t">Prototypes</span><span class="n">4</span></a>
+            <a class="item"><span class="t">Signals</span><span class="n">12</span></a>
+            <a class="item"><span class="t">Settings</span></a>
+          </div>
+        </div>
+      </div>
+    </nav>
+  </div>
+</body></html>

designbook/preview/comp-pipeline.html

@@ -0,0 +1,30 @@
+<!doctype html>
+<!-- @dsCard group="Components" name="Components · Pipeline" subtitle="Lifecycle stage tracker" viewport="700x180" -->
+<html><head>
+<meta charset="utf-8"><title>Pipeline / Lifecycle</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { padding: 28px 32px; background: var(--paper); }
+  .row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 22px; }
+  .pipeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
+  .stage { padding: 10px 12px 14px; border-top: 2px solid var(--border); display: flex; flex-direction: column; gap: 4px; position: relative; }
+  .stage.done { border-top-color: var(--ink); }
+  .stage.active { border-top-color: var(--hi-2); }
+  .stage .num { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
+  .stage.done .num, .stage.active .num { color: var(--fg-1); }
+  .stage .name { font: 500 14px/1.25 var(--ff-sans); color: var(--fg-1); }
+  .stage.pending .name { color: var(--fg-3); }
+  .stage .meta { font: 400 11px/1.35 var(--ff-mono); color: var(--fg-3); }
+  .arrow { position: absolute; top: -8px; right: -7px; font: 400 14px var(--ff-mono); color: var(--ink-5); }
+  .stage.active .arrow, .stage.done .arrow { color: var(--ink); }
+</style></head>
+<body>
+  <div class="row-label">Pipeline — Raw → Candidate → Experiment → Signal → Decision</div>
+  <div class="pipeline">
+    <div class="stage done"><span class="num">Stage 0</span><span class="name">Raw idea</span><span class="meta">inbox/</span></div>
+    <div class="stage done"><span class="num">Stage 1</span><span class="name">Triage</span><span class="meta">2026-02-12</span><span class="arrow">→</span></div>
+    <div class="stage done"><span class="num">Stage 2</span><span class="name">Prototype card</span><span class="meta">prototypes/</span><span class="arrow">→</span></div>
+    <div class="stage active"><span class="num">Stage 3</span><span class="name">Experiment</span><span class="meta">ends 2026-04-01</span><span class="arrow">→</span></div>
+    <div class="stage pending"><span class="num">Stage 4</span><span class="name">Signal review</span><span class="meta">— pending</span><span class="arrow">→</span></div>
+  </div>
+</body></html>

designbook/preview/comp-prototype-card.html

@@ -0,0 +1,46 @@
+<!doctype html>
+<!-- @dsCard group="Components" name="Components · Prototype Card" subtitle="Default + hover (black left bar)" viewport="700x290" -->
+<html><head>
+<meta charset="utf-8"><title>Prototype Card</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { padding: 24px 32px; background: var(--paper-2); }
+  .row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }
+  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+  .card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-2); padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; position: relative; }
+  .card.hover::before { content:""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; background: var(--ink); }
+  .head { display: flex; justify-content: space-between; align-items: baseline; }
+  .meta { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
+  .head .stage { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); display: inline-flex; align-items: center; gap: 6px; }
+  .head .stage .dot { width: 8px; height: 8px; border-radius: 999px; background: #5C5C5C; }
+  .pitch { font: 500 17px/1.35 var(--ff-sans); margin: 4px 0 8px; }
+  .qrow { display: flex; gap: 8px; font-size: 13px; color: var(--fg-2); }
+  .qrow .k { color: var(--fg-3); font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; min-width: 96px; flex: none; padding-top: 2px; }
+  .qrow .v { color: var(--fg-1); }
+  .foot { display: flex; justify-content: space-between; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--border-soft); font-size: 12px; color: var(--fg-3); font-family: var(--ff-mono); }
+</style></head>
+<body>
+  <div class="row-label">Prototype card — default · hover</div>
+  <div class="grid">
+    <article class="card">
+      <div class="head">
+        <span class="meta">WNO-014 · Prototype</span>
+        <span class="stage"><span class="dot"></span>Experiment</span>
+      </div>
+      <h3 class="pitch">A pocket field-notebook for catching weird ideas before they evaporate.</h3>
+      <div class="qrow"><span class="k">Learning q.</span><span class="v">Do people return to capture more than once?</span></div>
+      <div class="qrow"><span class="k">Smallest test</span><span class="v">One-page landing + email capture, 14 days.</span></div>
+      <div class="foot"><span>→ Coulomb</span><span>S1 · weak</span></div>
+    </article>
+    <article class="card hover">
+      <div class="head">
+        <span class="meta" style="color: var(--fg-1)">WNO-017 · Prototype</span>
+        <span class="stage"><span class="dot" style="background:#0A0A0A"></span>Signal review</span>
+      </div>
+      <h3 class="pitch">A LEGO-brick mood board for engineers who don't think in mood boards.</h3>
+      <div class="qrow"><span class="k">Learning q.</span><span class="v">Will engineers attach metaphors to their tickets?</span></div>
+      <div class="qrow"><span class="k">Smallest test</span><span class="v">Slack bot, three teams, two weeks.</span></div>
+      <div class="foot"><span>→ Helix</span><span>S3 · strong</span></div>
+    </article>
+  </div>
+</body></html>

designbook/preview/comp-topnav.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<!-- @dsCard group="Components" name="Components · Top Navigation" subtitle="56px · 1px hairline · ⌘K search" viewport="900x160" -->
+<html><head>
+<meta charset="utf-8"><title>Top Navigation</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { margin: 0; background: var(--paper-2); font-family: var(--ff-sans); min-height: 200px; }
+  .nav { height: 56px; background: rgba(255,255,255,0.92); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 32px; padding: 0 24px; }
+  .brand { display: flex; align-items: center; gap: 10px; font: 500 14px var(--ff-sans); }
+  .brand img { width: 22px; height: 22px; }
+  .brand .org { font-family: var(--ff-mono); font-size: 12px; color: var(--fg-3); letter-spacing: 0.04em; }
+  .links { display: flex; gap: 22px; }
+  .links a { font: 500 13px var(--ff-sans); color: var(--fg-2); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
+  .links a.active { color: var(--fg-1); border-bottom-color: var(--ink); }
+  .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
+  .right .search { font: 400 12px var(--ff-mono); color: var(--fg-3); border: 1px solid var(--border); padding: 6px 10px; border-radius: var(--r-1); display: flex; align-items: center; gap: 8px; min-width: 200px; }
+  .right .kbd { margin-left: auto; padding: 1px 5px; border: 1px solid var(--border); border-radius: 2px; font-size: 10px; }
+  .right .btn { font: 500 12px var(--ff-sans); padding: 7px 12px; border-radius: var(--r-2); border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; }
+  .body-preview { padding: 32px 24px; color: var(--fg-3); font: 400 13px var(--ff-mono); }
+</style></head>
+<body>
+  <nav class="nav">
+    <div class="brand"><img src="../assets/whynot-logo.png" alt=""><span>whynot</span><span class="org">/ control</span></div>
+    <div class="links">
+      <a class="active" href="#">Inbox</a>
+      <a href="#">Prototypes</a>
+      <a href="#">Signals</a>
+      <a href="#">Betas</a>
+      <a href="#">Decisions</a>
+    </div>
+    <div class="right">
+      <div class="search"><span>Search…</span><span class="kbd">⌘ K</span></div>
+      <button class="btn">+ New idea</button>
+    </div>
+  </nav>
+  <div class="body-preview">// 56px height · 1px hairline · rgba(255,255,255,0.92) when scrolled</div>
+</body></html>

designbook/preview/page-beta-invitation.html

@@ -0,0 +1,104 @@
+<!doctype html>
+<!-- @dsCard group="Pages" name="Pages · Closed-beta invitation" subtitle="Invitation-only · seats, dates, accept / decline" viewport="1280x860" -->
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>You're invited · whynot closed beta</title>
+<link rel="icon" href="../assets/whynot-logo.png">
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  html, body { margin: 0; min-height: 100%; background: var(--paper); color: var(--fg-1); }
+  .page { min-height: 100vh; display: flex; flex-direction: column; }
+
+  .nav { height: 60px; flex: none; display: flex; align-items: center; gap: 16px; padding: 0 40px; border-bottom: 1px solid var(--line); }
+  .nav .brand { display: flex; align-items: center; gap: 10px; }
+  .nav .brand img { width: 22px; height: 22px; }
+  .nav .brand .nm { font: 500 15px var(--ff-sans); letter-spacing: -0.01em; }
+  .nav .brand .slug { font: 400 12px var(--ff-mono); color: var(--fg-3); }
+  .nav .pill { margin-left: auto; font: 500 11px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; }
+
+  .wrap {
+    flex: 1; display: flex; align-items: center; justify-content: center;
+    padding: 48px 24px;
+    background:
+      linear-gradient(to right, var(--line-soft) 1px, transparent 1px) 0 0 / 28px 28px,
+      linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px) 0 0 / 28px 28px,
+      var(--paper-2);
+  }
+
+  .invite {
+    width: 100%; max-width: 560px; background: var(--paper);
+    border: 1px solid var(--line-strong); border-radius: var(--r-3);
+    padding: 40px 44px 36px; position: relative;
+  }
+  .stamp {
+    position: absolute; top: -14px; right: 28px;
+    background: var(--hi); color: var(--hi-ink);
+    font: 500 10px/1 var(--ff-mono); letter-spacing: 0.12em; text-transform: uppercase;
+    padding: 7px 12px 5px; transform: rotate(-2deg);
+  }
+  .invite .eyebrow { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
+  .invite h1 { font: 400 30px/1.2 var(--ff-sans); letter-spacing: -0.02em; margin: 12px 0 0; max-width: 18ch; }
+  .invite .lede { font: 400 16px/1.6 var(--ff-sans); color: var(--fg-2); margin: 14px 0 0; max-width: 46ch; }
+
+  .specs { margin: 28px 0 0; border-top: 1px solid var(--line); }
+  .spec { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); align-items: baseline; }
+  .spec .k { font: 500 11px/1.4 var(--ff-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
+  .spec .v { font: 400 14px/1.5 var(--ff-sans); color: var(--fg-1); }
+  .spec .v .mono { font-family: var(--ff-mono); }
+
+  .actions { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
+  .btn { font: 500 14px var(--ff-sans); padding: 12px 20px; border-radius: var(--r-2); border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; }
+  .btn:hover { background: var(--ink-2); }
+  .btn.ghost { background: transparent; color: var(--fg-2); border-color: transparent; padding: 12px 10px; }
+  .btn.ghost:hover { color: var(--fg-1); background: var(--paper-3); }
+  .actions .seats { margin-left: auto; font: 400 11px var(--ff-mono); color: var(--fg-3); }
+
+  .note { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line-soft); font: 400 12px/1.6 var(--ff-mono); color: var(--fg-3); }
+  .note b { color: var(--fg-2); font-weight: 500; }
+
+  .footer { flex: none; padding: 18px 40px; border-top: 1px solid var(--line); display: flex; gap: 14px; font: 400 11px var(--ff-mono); color: var(--fg-3); }
+  .footer .sp { margin-left: auto; }
+</style>
+</head>
+<body>
+<div class="page">
+  <nav class="nav">
+    <div class="brand"><img src="../assets/whynot-logo.png" alt=""><span class="nm">whynot</span><span class="slug">/ betas</span></div>
+    <span class="pill">Closed beta · invitation only</span>
+  </nav>
+
+  <div class="wrap">
+    <div class="invite">
+      <span class="stamp">Invitation · WNO-021</span>
+      <span class="eyebrow">You’re invited</span>
+      <h1>Concierge prototype triage</h1>
+      <p class="lede">A one-hour call where we take one of your half-formed ideas and turn it into a testable prototype card — learning question, smallest useful test, and all.</p>
+
+      <div class="specs">
+        <div class="spec"><span class="k">Learning question</span><span class="v">Will three founders pay a listed price for a single triage call?</span></div>
+        <div class="spec"><span class="k">What you do</span><span class="v">Bring one idea. Leave with a prototype card and a next step.</span></div>
+        <div class="spec"><span class="k">Seats</span><span class="v">5 · <span class="mono">2 remaining</span></span></div>
+        <div class="spec"><span class="k">Window</span><span class="v"><span class="mono">2026-04-01 → 2026-04-14</span></span></div>
+        <div class="spec"><span class="k">Cost</span><span class="v">Listed price. No refunds, no obligations after.</span></div>
+      </div>
+
+      <div class="actions">
+        <button class="btn">Accept invitation</button>
+        <button class="btn ghost">Not now</button>
+        <span class="seats">Expires in 6 days</span>
+      </div>
+
+      <p class="note"><b>Invitation only.</b> This is a prototype, not a product — it may be parked after the beta regardless of how it goes. Accepting reserves a seat; it is not a commitment to continue.</p>
+    </div>
+  </div>
+
+  <footer class="footer">
+    <span>whynot · betas</span>
+    <span>·</span>
+    <span>BETA_MODEL.md</span>
+    <span class="sp">try($idea) until success;</span>
+  </footer>
+</div>
+</body>
+</html>

designbook/preview/page-landing-auth.html

@@ -0,0 +1,224 @@
+<!doctype html>
+<!-- @dsCard group="Pages" name="Pages · Landing — Login & Registration" subtitle="Public landing · log in / request access toggle" viewport="1280x820" -->
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>whynot — landing</title>
+<link rel="icon" href="../assets/whynot-logo.png">
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  html, body { height: 100%; }
+  body { margin: 0; background: var(--paper); color: var(--fg-1); }
+
+  /* faint engineering-graph backdrop, very subtle */
+  .page {
+    min-height: 100vh;
+    display: flex; flex-direction: column;
+  }
+
+  /* ---- top nav ---- */
+  .nav {
+    height: 60px; flex: none;
+    display: flex; align-items: center; gap: 24px;
+    padding: 0 40px;
+    border-bottom: 1px solid var(--line);
+  }
+  .nav .brand { display: flex; align-items: center; gap: 10px; }
+  .nav .brand img { width: 24px; height: 24px; }
+  .nav .brand .nm { font: 500 15px var(--ff-sans); letter-spacing: -0.01em; }
+  .nav .brand .slug { font: 400 12px var(--ff-mono); color: var(--fg-3); }
+  .nav .links { margin-left: auto; display: flex; align-items: center; gap: 24px; }
+  .nav .links a { font: 500 13px var(--ff-sans); color: var(--fg-2); text-decoration: none; }
+  .nav .links a:hover { color: var(--fg-1); }
+  .nav .pill {
+    font: 500 11px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase;
+    color: var(--fg-3); border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px;
+  }
+
+  /* ---- hero split ---- */
+  .hero {
+    flex: 1; display: grid; grid-template-columns: 1.15fr 0.85fr;
+    align-items: stretch;
+  }
+  .pitch {
+    padding: 72px 56px 56px 40px;
+    display: flex; flex-direction: column; gap: 24px;
+    border-right: 1px solid var(--line);
+    background:
+      linear-gradient(to right, var(--line-soft) 1px, transparent 1px) 0 0 / 28px 28px,
+      linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px) 0 0 / 28px 28px,
+      var(--paper-2);
+  }
+  .eyebrow-lg { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
+  .pitch h1 {
+    font: 300 64px/0.98 var(--ff-sans); letter-spacing: -0.035em;
+    margin: 4px 0 0; color: var(--ink);
+    max-width: 13ch;
+  }
+  .pitch h1 .q { font-weight: 500; }
+  .pitch .lede { font: 400 18px/1.55 var(--ff-sans); color: var(--fg-2); margin: 0; max-width: 42ch; }
+  .codeline {
+    font: 500 14px var(--ff-mono); color: var(--fg-1);
+    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-2);
+    padding: 12px 16px; align-self: flex-start;
+  }
+  .codeline .c { color: var(--ink-4); }
+  .codeline mark { background: var(--hi); color: var(--hi-ink); padding: 0 3px; }
+
+  .principles { margin-top: auto; display: flex; flex-direction: column; gap: 0; }
+  .principles .p {
+    display: grid; grid-template-columns: 28px 1fr; gap: 14px;
+    padding: 16px 0; border-top: 1px solid var(--line);
+    align-items: baseline;
+  }
+  .principles .p .k { font: 500 12px var(--ff-mono); color: var(--fg-3); }
+  .principles .p .v { font: 400 14px/1.5 var(--ff-sans); color: var(--fg-2); }
+  .principles .p .v b { color: var(--fg-1); font-weight: 500; }
+
+  /* ---- auth panel ---- */
+  .auth {
+    padding: 72px 40px 56px 56px;
+    display: flex; flex-direction: column;
+    max-width: 480px;
+  }
+  .auth .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
+  .auth .tab {
+    font: 500 13px var(--ff-sans); color: var(--fg-3); background: none; border: 0;
+    padding: 0 0 12px; margin-right: 28px; cursor: pointer;
+    border-bottom: 2px solid transparent; margin-bottom: -1px;
+  }
+  .auth .tab.active { color: var(--fg-1); border-bottom-color: var(--ink); }
+
+  .form { display: flex; flex-direction: column; gap: 18px; }
+  .form.hidden { display: none; }
+  .field { display: flex; flex-direction: column; gap: 7px; }
+  .field label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
+  .field input, .field textarea {
+    font: 400 14px var(--ff-sans); color: var(--fg-1);
+    padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-1);
+    background: var(--paper); outline: none; transition: border-color 120ms ease;
+  }
+  .field input:focus, .field textarea:focus { border-color: var(--ink); }
+  .field input::placeholder, .field textarea::placeholder { color: var(--ink-5); }
+  .field textarea { resize: none; min-height: 76px; font-family: var(--ff-sans); }
+  .field .row { display: flex; justify-content: space-between; align-items: baseline; }
+  .field .row a { font: 400 11px var(--ff-mono); color: var(--fg-3); text-decoration: none; }
+  .field .row a:hover { color: var(--fg-1); text-decoration: underline; }
+
+  .btn {
+    font: 500 14px var(--ff-sans); padding: 12px 18px; border-radius: var(--r-2);
+    border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
+    cursor: pointer; transition: background 120ms ease; margin-top: 4px;
+  }
+  .btn:hover { background: var(--ink-2); }
+
+  .note {
+    font: 400 12px/1.5 var(--ff-mono); color: var(--fg-3);
+    margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-soft);
+  }
+  .note b { color: var(--fg-2); font-weight: 500; }
+
+  .footer {
+    flex: none; padding: 18px 40px; border-top: 1px solid var(--line);
+    display: flex; align-items: center; gap: 16px;
+    font: 400 11px var(--ff-mono); color: var(--fg-3); letter-spacing: 0.04em;
+  }
+  .footer .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--ink-4); }
+  .footer .sp { margin-left: auto; }
+</style>
+</head>
+<body>
+<div class="page">
+
+  <nav class="nav">
+    <div class="brand">
+      <img src="../assets/whynot-logo.png" alt="">
+      <span class="nm">whynot</span>
+      <span class="slug">/ prototypes</span>
+    </div>
+    <div class="links">
+      <span class="pill">A1 · Incubating</span>
+      <a href="#" onclick="show('login');return false;">Log in</a>
+    </div>
+  </nav>
+
+  <div class="hero">
+
+    <!-- left: pitch -->
+    <section class="pitch">
+      <span class="eyebrow-lg">Prototype &amp; market-signal space</span>
+      <h1>why<span class="q">?</span> why not<span class="q">!</span></h1>
+      <p class="lede">A quiet workshop for discovering the weird and the useful — building, testing, and reviewing prototypes before they ever pretend to be products.</p>
+      <div class="codeline"><span class="c">$</span> try(<mark>$idea</mark>) until success<span class="c">;</span></div>
+
+      <div class="principles">
+        <div class="p"><span class="k">01</span><span class="v"><b>A prototype is a question made tangible.</b> Not a promise.</span></div>
+        <div class="p"><span class="k">02</span><span class="v"><b>Signal beats enthusiasm.</b> Evidence, not vibes.</span></div>
+        <div class="p"><span class="k">03</span><span class="v"><b>Capture is not commitment.</b> A good idea can still be parked.</span></div>
+      </div>
+    </section>
+
+    <!-- right: auth -->
+    <section class="auth">
+      <div class="tabs">
+        <button class="tab active" id="tab-login" onclick="show('login')">Log in</button>
+        <button class="tab" id="tab-register" onclick="show('register')">Request access</button>
+      </div>
+
+      <form class="form" id="form-login" onsubmit="return false;">
+        <div class="field">
+          <label for="li-email">Email</label>
+          <input id="li-email" type="email" placeholder="you@example.com" autocomplete="username">
+        </div>
+        <div class="field">
+          <div class="row">
+            <label for="li-pw">Password</label>
+            <a href="#" onclick="return false;">Forgot?</a>
+          </div>
+          <input id="li-pw" type="password" placeholder="••••••••" autocomplete="current-password">
+        </div>
+        <button class="btn" type="submit">Log in</button>
+        <p class="note">Access is limited to current contributors and invited beta participants. <b>No public sign-ups.</b></p>
+      </form>
+
+      <form class="form hidden" id="form-register" onsubmit="return false;">
+        <div class="field">
+          <label for="rg-name">Name</label>
+          <input id="rg-name" type="text" placeholder="What should we call you?">
+        </div>
+        <div class="field">
+          <label for="rg-email">Email</label>
+          <input id="rg-email" type="email" placeholder="you@example.com">
+        </div>
+        <div class="field">
+          <label for="rg-build">What would you want to build or test?</label>
+          <textarea id="rg-build" placeholder="One sentence is plenty. The weirder the better."></textarea>
+        </div>
+        <button class="btn" type="submit">Request invite</button>
+        <p class="note"><b>Closed beta. Invitation only.</b> Requests are read, not auto-approved — silence is also an answer.</p>
+      </form>
+    </section>
+
+  </div>
+
+  <footer class="footer">
+    <span class="dot"></span>
+    <span>whynot · 2026</span>
+    <span>·</span>
+    <span>Prereleases &amp; prototypes only</span>
+    <span class="sp">try($idea) until success;</span>
+  </footer>
+
+</div>
+
+<script>
+  function show(which) {
+    var isLogin = which === 'login';
+    document.getElementById('form-login').classList.toggle('hidden', !isLogin);
+    document.getElementById('form-register').classList.toggle('hidden', isLogin);
+    document.getElementById('tab-login').classList.toggle('active', isLogin);
+    document.getElementById('tab-register').classList.toggle('active', !isLogin);
+  }
+</script>
+</body>
+</html>

designbook/preview/page-prototype-detail.html

@@ -0,0 +1,158 @@
+<!doctype html>
+<!-- @dsCard group="Pages" name="Pages · Prototype detail" subtitle="Single prototype · pipeline, learning question, signal sidebar" viewport="1280x860" -->
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>WNO-017 · Prototype</title>
+<link rel="icon" href="../assets/whynot-logo.png">
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  html, body { margin: 0; background: var(--paper); color: var(--fg-1); }
+  a { color: inherit; }
+
+  .nav { height: 60px; display: flex; align-items: center; gap: 24px; padding: 0 40px; border-bottom: 1px solid var(--line); }
+  .nav .brand { display: flex; align-items: center; gap: 10px; }
+  .nav .brand img { width: 22px; height: 22px; }
+  .nav .brand .nm { font: 500 15px var(--ff-sans); letter-spacing: -0.01em; }
+  .nav .brand .slug { font: 400 12px var(--ff-mono); color: var(--fg-3); }
+  .nav .right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
+  .nav .search { font: 400 12px var(--ff-mono); color: var(--fg-3); border: 1px solid var(--line); border-radius: var(--r-1); padding: 6px 10px; min-width: 220px; display: flex; gap: 8px; }
+  .nav .search .kbd { margin-left: auto; border: 1px solid var(--line); border-radius: 2px; padding: 0 5px; font-size: 10px; }
+
+  .app { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 60px); }
+
+  /* left nav */
+  .leftnav { display: flex; flex-direction: column; gap: 28px; padding: 28px 8px 24px 16px; border-right: 1px solid var(--line-soft); }
+  .leftnav .section { display: flex; flex-direction: column; gap: 8px; }
+  .leftnav .lbl { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); padding-left: 12px; opacity: 0.7; }
+  .leftnav .items { display: flex; flex-direction: column; gap: 1px; }
+  .leftnav .item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-left: 2px solid transparent; color: var(--fg-3); font: 400 13px var(--ff-sans); text-decoration: none; }
+  .leftnav .item .ic { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; flex: none; }
+  .leftnav .item .n { margin-left: auto; font: 400 11px var(--ff-mono); color: var(--ink-5); }
+  .leftnav .item.active { color: var(--fg-1); font-weight: 500; border-left-color: var(--ink); }
+  .leftnav .item.doc { font: 400 12px var(--ff-mono); }
+  .leftnav .footer { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 0 12px; font: 400 11px var(--ff-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
+  .leftnav .footer .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--ink-4); }
+
+  /* main */
+  .main { padding: 40px 56px 80px; max-width: 980px; }
+  .crumb { font: 400 12px/1.5 var(--ff-mono); color: var(--fg-3); margin-bottom: 22px; display: flex; gap: 7px; }
+  .crumb a { text-decoration: none; color: var(--fg-2); }
+  .crumb .sep { color: var(--ink-5); }
+  .crumb .cur { color: var(--fg-1); }
+
+  .head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 36px; }
+  .head .eyebrow { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
+  .head .row { display: flex; align-items: flex-start; gap: 24px; }
+  .head h1 { font: 400 32px/1.2 var(--ff-sans); letter-spacing: -0.02em; margin: 0; flex: 1; max-width: 22ch; }
+  .head .actions { display: flex; gap: 8px; flex: none; padding-top: 4px; }
+  .btn { font: 500 13px var(--ff-sans); padding: 9px 15px; border-radius: var(--r-2); border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
+  .btn:hover { border-color: var(--ink); }
+  .btn .ic { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.5; fill: none; }
+  .btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
+  .btn.primary:hover { background: var(--ink-2); }
+
+  /* pipeline */
+  .pipeline { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 0 40px; }
+  .pstage { padding: 10px 12px 14px; border-top: 2px solid var(--line); display: flex; flex-direction: column; gap: 4px; position: relative; }
+  .pstage.done { border-top-color: var(--ink); }
+  .pstage.active { border-top-color: var(--hi-2); }
+  .pstage .num { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
+  .pstage.done .num, .pstage.active .num { color: var(--fg-1); }
+  .pstage .nm { font: 500 13px/1.25 var(--ff-sans); color: var(--fg-1); }
+  .pstage.pending .nm { color: var(--fg-3); }
+  .pstage .meta { font: 400 11px/1.3 var(--ff-mono); color: var(--fg-3); }
+  .pstage .arrow { position: absolute; top: -8px; right: -7px; font: 400 14px var(--ff-mono); color: var(--ink-5); }
+  .pstage.done .arrow, .pstage.active .arrow { color: var(--ink); }
+
+  .body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; }
+  .col { display: flex; flex-direction: column; gap: 24px; }
+  .field { display: flex; flex-direction: column; gap: 7px; }
+  .field .k { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
+  .field .v { font: 400 15px/1.6 var(--ff-sans); color: var(--fg-1); max-width: 56ch; }
+
+  .aside { display: flex; flex-direction: column; gap: 20px; }
+  .arow { display: flex; flex-direction: column; gap: 7px; }
+  .arow .k { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
+  .arow .v { font: 400 14px/1.5 var(--ff-sans); color: var(--fg-1); }
+  .tag { align-self: flex-start; font: 500 10px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--ink); color: var(--paper); }
+  .dot { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 var(--ff-mono); letter-spacing: 0.06em; color: var(--fg-2); }
+  .dot .b { width: 8px; height: 8px; border-radius: 999px; background: var(--ink); }
+  .mono { font-family: var(--ff-mono); }
+  .caveat { border: 1px dashed var(--line-strong); border-radius: var(--r-2); padding: 16px; margin-top: 4px; }
+  .caveat .k { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); display: block; margin-bottom: 8px; }
+  .caveat .v { font: 400 13px/1.55 var(--ff-sans); color: var(--fg-2); margin: 0; }
+</style>
+</head>
+<body>
+  <nav class="nav">
+    <div class="brand"><img src="../assets/whynot-logo.png" alt=""><span class="nm">whynot</span><span class="slug">/ control</span></div>
+    <div class="right">
+      <div class="search"><span>Search…</span><span class="kbd">⌘ K</span></div>
+    </div>
+  </nav>
+
+  <div class="app">
+    <nav class="leftnav">
+      <div class="section">
+        <span class="lbl">Work</span>
+        <div class="items">
+          <a class="item"><svg class="ic" viewBox="0 0 24 24"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg><span>Inbox</span><span class="n">7</span></a>
+          <a class="item active"><svg class="ic" viewBox="0 0 24 24"><path d="M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2"/><path d="M6.453 15h11.094"/><path d="M8.5 2h7"/></svg><span>Prototypes</span><span class="n">4</span></a>
+          <a class="item"><svg class="ic" viewBox="0 0 24 24"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.5.5 0 0 1-.96 0L9.24 2.18a.5.5 0 0 0-.96 0l-2.35 8.36A2 2 0 0 1 4 12H2"/></svg><span>Signals</span><span class="n">12</span></a>
+          <a class="item"><svg class="ic" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/><path d="M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/></svg><span>Betas</span><span class="n">1</span></a>
+          <a class="item"><svg class="ic" viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg><span>Decisions</span><span class="n">3</span></a>
+        </div>
+      </div>
+      <div class="section">
+        <span class="lbl">Control docs</span>
+        <div class="items">
+          <a class="item doc"><span>INTENT.md</span></a>
+          <a class="item doc"><span>OPERATING_MODEL.md</span></a>
+          <a class="item doc"><span>PROTOTYPE_PIPELINE.md</span></a>
+        </div>
+      </div>
+      <div class="footer"><span class="dot"></span><span>A1 · Incubating</span></div>
+    </nav>
+
+    <main class="main">
+      <div class="crumb"><a href="#">whynot</a><span class="sep">/</span><a href="#">Prototypes</a><span class="sep">/</span><span class="cur">WNO-017</span></div>
+
+      <div class="head">
+        <span class="eyebrow">WNO-017 · Prototype</span>
+        <div class="row">
+          <h1>A LEGO-brick mood board for engineers who don’t think in mood boards.</h1>
+          <div class="actions">
+            <button class="btn"><svg class="ic" viewBox="0 0 24 24"><path d="M21 8v13H3V8"/><path d="M1 3h22v5H1z"/><path d="M10 12h4"/></svg>Park</button>
+            <button class="btn primary"><svg class="ic" viewBox="0 0 24 24"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>Promote → Helix</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="pipeline">
+        <div class="pstage done"><span class="num">Stage 0</span><span class="nm">Raw idea</span><span class="meta">inbox/</span></div>
+        <div class="pstage done"><span class="num">Stage 1</span><span class="nm">Triage</span><span class="meta">2026-02-15</span><span class="arrow">→</span></div>
+        <div class="pstage done"><span class="num">Stage 2</span><span class="nm">Prototype card</span><span class="meta">prototypes/</span><span class="arrow">→</span></div>
+        <div class="pstage done"><span class="num">Stage 3</span><span class="nm">Experiment</span><span class="meta">closed 2026-03-04</span><span class="arrow">→</span></div>
+        <div class="pstage active"><span class="num">Stage 4</span><span class="nm">Signal review</span><span class="meta">in progress</span><span class="arrow">→</span></div>
+      </div>
+
+      <div class="body">
+        <div class="col">
+          <div class="field"><span class="k">Learning question</span><span class="v">Will engineers attach metaphors to their tickets, and do those metaphors help anyone else read the work later?</span></div>
+          <div class="field"><span class="k">Smallest useful test</span><span class="v">A Slack bot in three teams for two weeks. One command attaches a “brick” — a one-line metaphor — to any ticket.</span></div>
+          <div class="field"><span class="k">Expected signal</span><span class="v">At least one team voluntarily keeps using the bricks after the two weeks, or references a brick in a review without being prompted.</span></div>
+          <div class="field"><span class="k">Risks</span><span class="v">Cute but unused after a week. Or: engineers treat it as a chore rather than a shortcut.</span></div>
+        </div>
+        <aside class="aside">
+          <div class="arow"><span class="k">Stage</span><span class="tag">Signal review</span></div>
+          <div class="arow"><span class="k">Signal</span><span class="dot"><span class="b"></span>S3 · Strong</span></div>
+          <div class="arow"><span class="k">Promotion target</span><span class="v mono">→ Helix</span></div>
+          <div class="arow"><span class="k">Audience</span><span class="v">Engineering teams already writing terse tickets.</span></div>
+          <div class="caveat"><span class="k">Caveat</span><p class="v">Strong signal is not a decision. Promotion to Helix still requires an explicit record in <span class="mono">DECISIONS.md</span>.</p></div>
+        </aside>
+      </div>
+    </main>
+  </div>
+</body>
+</html>

designbook/preview/page-signals-dashboard.html

@@ -0,0 +1,135 @@
+<!doctype html>
+<!-- @dsCard group="Pages" name="Pages · Signals dashboard" subtitle="Market-signal log · filter by strength · evidence rows" viewport="1280x860" -->
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Signals · whynot-control</title>
+<link rel="icon" href="../assets/whynot-logo.png">
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  html, body { margin: 0; background: var(--paper); color: var(--fg-1); }
+
+  .nav { height: 60px; display: flex; align-items: center; gap: 24px; padding: 0 40px; border-bottom: 1px solid var(--line); }
+  .nav .brand { display: flex; align-items: center; gap: 10px; }
+  .nav .brand img { width: 22px; height: 22px; }
+  .nav .brand .nm { font: 500 15px var(--ff-sans); letter-spacing: -0.01em; }
+  .nav .brand .slug { font: 400 12px var(--ff-mono); color: var(--fg-3); }
+  .nav .right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
+  .nav .search { font: 400 12px var(--ff-mono); color: var(--fg-3); border: 1px solid var(--line); border-radius: var(--r-1); padding: 6px 10px; min-width: 220px; display: flex; gap: 8px; }
+  .nav .search .kbd { margin-left: auto; border: 1px solid var(--line); border-radius: 2px; padding: 0 5px; font-size: 10px; }
+
+  .app { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 60px); }
+
+  .leftnav { display: flex; flex-direction: column; gap: 28px; padding: 28px 8px 24px 16px; border-right: 1px solid var(--line-soft); }
+  .leftnav .section { display: flex; flex-direction: column; gap: 8px; }
+  .leftnav .lbl { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); padding-left: 12px; opacity: 0.7; }
+  .leftnav .items { display: flex; flex-direction: column; gap: 1px; }
+  .leftnav .item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-left: 2px solid transparent; color: var(--fg-3); font: 400 13px var(--ff-sans); text-decoration: none; }
+  .leftnav .item .ic { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; flex: none; }
+  .leftnav .item .n { margin-left: auto; font: 400 11px var(--ff-mono); color: var(--ink-5); }
+  .leftnav .item.active { color: var(--fg-1); font-weight: 500; border-left-color: var(--ink); }
+  .leftnav .item.doc { font: 400 12px var(--ff-mono); }
+  .leftnav .footer { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 0 12px; font: 400 11px var(--ff-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
+  .leftnav .footer .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--ink-4); }
+
+  .main { padding: 40px 56px 80px; max-width: 1040px; }
+  .head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
+  .head .eyebrow { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
+  .head .row { display: flex; align-items: flex-end; gap: 24px; }
+  .head h1 { font: 400 32px/1.2 var(--ff-sans); letter-spacing: -0.02em; margin: 0; flex: 1; }
+  .head .lede { font: 400 16px/1.6 var(--ff-sans); color: var(--fg-2); margin: 4px 0 0; max-width: 58ch; }
+  .btn { font: 500 13px var(--ff-sans); padding: 9px 15px; border-radius: var(--r-2); border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
+  .btn .ic { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.5; fill: none; }
+
+  /* distribution strip */
+  .dist { display: flex; gap: 0; border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; margin-bottom: 28px; }
+  .dist .cell { flex: 1; padding: 14px 16px; border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 6px; }
+  .dist .cell:last-child { border-right: 0; }
+  .dist .cell .lv { display: inline-flex; align-items: center; gap: 6px; font: 500 10px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
+  .dist .cell .lv .b { width: 8px; height: 8px; border-radius: 999px; }
+  .dist .cell .ct { font: 300 28px/1 var(--ff-sans); color: var(--fg-1); }
+  .b0 { background: var(--status-raw); } .b1 { background: var(--status-weak); } .b2 { background: var(--status-medium); } .b3 { background: var(--status-strong); } .b4 { background: var(--status-commercial); }
+
+  .filters { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
+  .chip { font: 500 10px/1 var(--ff-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg-2); background: var(--paper); cursor: pointer; }
+  .chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
+  .filters .count { margin-left: auto; font: 400 11px var(--ff-mono); color: var(--fg-3); }
+
+  .rows { display: flex; flex-direction: column; }
+  .srow { display: grid; grid-template-columns: 90px 90px 1fr; gap: 6px 24px; padding: 20px 0; border-bottom: 1px solid var(--line-soft); align-items: baseline; }
+  .srow .id { font: 400 11px var(--ff-mono); color: var(--fg-3); }
+  .srow .pr { font: 400 11px var(--ff-mono); color: var(--fg-2); }
+  .srow .dot { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 var(--ff-mono); letter-spacing: 0.06em; color: var(--fg-2); }
+  .srow .dot .b { width: 8px; height: 8px; border-radius: 999px; }
+  .srow .what { grid-column: 1 / -1; margin: 4px 0 0; font: 400 14px/1.55 var(--ff-sans); color: var(--fg-1); max-width: 64ch; }
+  .srow .src { grid-column: 1 / -1; font: 400 11px var(--ff-mono); color: var(--fg-3); }
+</style>
+</head>
+<body>
+  <nav class="nav">
+    <div class="brand"><img src="../assets/whynot-logo.png" alt=""><span class="nm">whynot</span><span class="slug">/ control</span></div>
+    <div class="right"><div class="search"><span>Search…</span><span class="kbd">⌘ K</span></div></div>
+  </nav>
+
+  <div class="app">
+    <nav class="leftnav">
+      <div class="section">
+        <span class="lbl">Work</span>
+        <div class="items">
+          <a class="item"><svg class="ic" viewBox="0 0 24 24"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg><span>Inbox</span><span class="n">7</span></a>
+          <a class="item"><svg class="ic" viewBox="0 0 24 24"><path d="M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2"/><path d="M6.453 15h11.094"/><path d="M8.5 2h7"/></svg><span>Prototypes</span><span class="n">4</span></a>
+          <a class="item active"><svg class="ic" viewBox="0 0 24 24"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.5.5 0 0 1-.96 0L9.24 2.18a.5.5 0 0 0-.96 0l-2.35 8.36A2 2 0 0 1 4 12H2"/></svg><span>Signals</span><span class="n">12</span></a>
+          <a class="item"><svg class="ic" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/><path d="M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/></svg><span>Betas</span><span class="n">1</span></a>
+          <a class="item"><svg class="ic" viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg><span>Decisions</span><span class="n">3</span></a>
+        </div>
+      </div>
+      <div class="section">
+        <span class="lbl">Control docs</span>
+        <div class="items">
+          <a class="item doc"><span>MARKET_SIGNAL.md</span></a>
+          <a class="item doc"><span>OPERATING_MODEL.md</span></a>
+        </div>
+      </div>
+      <div class="footer"><span class="dot"></span><span>A1 · Incubating</span></div>
+    </nav>
+
+    <main class="main">
+      <div class="head">
+        <span class="eyebrow">whynot-control / signals</span>
+        <div class="row">
+          <h1>Signals</h1>
+          <button class="btn"><svg class="ic" viewBox="0 0 24 24"><path d="M12 5v14"/><path d="M5 12h14"/></svg>Record signal</button>
+        </div>
+        <p class="lede">A signal is evidence, not a vibe. Record what happened, who did it, and how strong the evidence is. Lack of signal is also information.</p>
+      </div>
+
+      <div class="dist">
+        <div class="cell"><span class="lv"><span class="b b0"></span>S0</span><span class="ct">1</span></div>
+        <div class="cell"><span class="lv"><span class="b b1"></span>S1</span><span class="ct">2</span></div>
+        <div class="cell"><span class="lv"><span class="b b2"></span>S2</span><span class="ct">2</span></div>
+        <div class="cell"><span class="lv"><span class="b b3"></span>S3</span><span class="ct">1</span></div>
+        <div class="cell"><span class="lv"><span class="b b4"></span>S4</span><span class="ct">0</span></div>
+      </div>
+
+      <div class="filters">
+        <span class="chip active">All</span>
+        <span class="chip">S0</span>
+        <span class="chip">S1</span>
+        <span class="chip">S2</span>
+        <span class="chip">S3</span>
+        <span class="chip">S4</span>
+        <span class="count">6 of 6</span>
+      </div>
+
+      <div class="rows">
+        <div class="srow"><span class="id">SIG-031</span><span class="pr">WNO-017</span><span class="dot"><span class="b b3"></span>S3</span><p class="what">Two teams shipped public README sections labelled “brick: scope” after using the bot for a week.</p><span class="src">usage log · 2026-03-04</span></div>
+        <div class="srow"><span class="id">SIG-030</span><span class="pr">WNO-017</span><span class="dot"><span class="b b2"></span>S2</span><p class="what">Three engineers DM’d asking for an export-to-Notion option.</p><span class="src">Slack · 2026-03-03</span></div>
+        <div class="srow"><span class="id">SIG-029</span><span class="pr">WNO-014</span><span class="dot"><span class="b b1"></span>S1</span><p class="what">Landing page: 34 visits, 7 emails, 0 returns in week 1.</p><span class="src">Plausible · 2026-03-01</span></div>
+        <div class="srow"><span class="id">SIG-028</span><span class="pr">WNO-021</span><span class="dot"><span class="b b2"></span>S2</span><p class="what">First triage call booked at listed price; second declined on price.</p><span class="src">Stripe / email · 2026-02-28</span></div>
+        <div class="srow"><span class="id">SIG-027</span><span class="pr">WNO-021</span><span class="dot"><span class="b b1"></span>S1</span><p class="what">“Interesting but I’d want a free first one” ×2.</p><span class="src">interview · 2026-02-26</span></div>
+        <div class="srow"><span class="id">SIG-026</span><span class="pr">WNO-024</span><span class="dot"><span class="b b0"></span>S0</span><p class="what">Static preview: 12 visits in 30 days, 0 returns.</p><span class="src">Plausible · 2026-02-24</span></div>
+      </div>
+    </main>
+  </div>
+</body>
+</html>

designbook/preview/spacing-elevation.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<!-- @dsCard group="Spacing" name="Spacing · Elevation" subtitle="Mostly none · wireframe system" viewport="700x220" -->
+<html><head>
+<meta charset="utf-8"><title>Elevation</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { padding: 28px 32px; background: var(--paper-2); }
+  .row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 22px; }
+  .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
+  .cell { display: flex; flex-direction: column; align-items: center; gap: 12px; }
+  .obj { width: 100%; height: 72px; background: var(--paper); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font: 500 11px var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
+  .lbl { font: 500 11px var(--ff-mono); color: var(--fg-1); }
+  .val { font: 400 10px var(--ff-mono); color: var(--fg-3); text-align: center; line-height: 1.4; }
+  .s1 { box-shadow: 0 1px 0 var(--line); }
+  .s2 { box-shadow: 0 1px 0 var(--line-strong); }
+  .s3 { box-shadow: 0 4px 12px -6px rgba(10,10,10,.10); border-color: var(--border-soft); }
+</style></head>
+<body>
+  <div class="row-label">Elevation — this is a wireframe system, prefer none</div>
+  <div class="grid">
+    <div class="cell"><div class="obj">default</div><span class="lbl">--shadow-0</span><span class="val">none · everywhere</span></div>
+    <div class="cell"><div class="obj s1">+1</div><span class="lbl">--shadow-1</span><span class="val">1px hairline · sticky nav</span></div>
+    <div class="cell"><div class="obj s2">+2</div><span class="lbl">--shadow-2</span><span class="val">1px strong · sticky strong</span></div>
+    <div class="cell"><div class="obj s3">float</div><span class="lbl">--shadow-3</span><span class="val">soft 4–12px · popover only</span></div>
+  </div>
+</body></html>

designbook/preview/spacing-radii.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<!-- @dsCard group="Spacing" name="Spacing · Radii" subtitle="0 / 2 / 4 / 8 / pill" viewport="700x200" -->
+<html><head>
+<meta charset="utf-8"><title>Radii</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { padding: 28px 32px; background: var(--paper); }
+  .row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 16px; }
+  .grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
+  .cell { display: flex; flex-direction: column; align-items: center; gap: 10px; }
+  .swatch { width: 80px; height: 60px; background: var(--paper); border: 1px solid var(--ink); }
+  .lbl { font: 500 11px/1.2 var(--ff-mono); letter-spacing: 0.04em; color: var(--fg-1); text-align: center; }
+  .val { font: 400 11px var(--ff-mono); color: var(--fg-3); }
+</style></head>
+<body>
+  <div class="row-label">Radii — big things stay square</div>
+  <div class="grid">
+    <div class="cell"><div class="swatch" style="border-radius:0"></div><span class="lbl">--r-0<br><span class="val">0 · documents</span></span></div>
+    <div class="cell"><div class="swatch" style="border-radius:2px"></div><span class="lbl">--r-1<br><span class="val">2 · inputs, tags</span></span></div>
+    <div class="cell"><div class="swatch" style="border-radius:4px"></div><span class="lbl">--r-2<br><span class="val">4 · buttons</span></span></div>
+    <div class="cell"><div class="swatch" style="border-radius:8px"></div><span class="lbl">--r-3<br><span class="val">8 · cards, modals</span></span></div>
+    <div class="cell"><div class="swatch" style="border-radius:999px"></div><span class="lbl">--r-pill<br><span class="val">∞ · label caps only</span></span></div>
+  </div>
+</body></html>

designbook/preview/spacing-scale.html

@@ -0,0 +1,28 @@
+<!doctype html>
+<!-- @dsCard group="Spacing" name="Spacing · Scale" subtitle="4px base · 10 steps" viewport="700x280" -->
+<html><head>
+<meta charset="utf-8"><title>Spacing Scale</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { padding: 24px 32px; background: var(--paper); }
+  .row-label { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 14px; }
+  .scale { display: grid; grid-template-columns: 80px 1fr 90px; row-gap: 8px; column-gap: 16px; align-items: center; font-family: var(--ff-mono); font-size: 12px; }
+  .name { color: var(--fg-1); }
+  .bar { height: 12px; background: var(--ink); }
+  .val { color: var(--fg-3); text-align: right; }
+</style></head>
+<body>
+  <div class="row-label">Spacing — 4px base unit</div>
+  <div class="scale">
+    <span class="name">--sp-1</span><div class="bar" style="width:4px"></div><span class="val">4px</span>
+    <span class="name">--sp-2</span><div class="bar" style="width:8px"></div><span class="val">8px</span>
+    <span class="name">--sp-3</span><div class="bar" style="width:12px"></div><span class="val">12px</span>
+    <span class="name">--sp-4</span><div class="bar" style="width:16px"></div><span class="val">16px</span>
+    <span class="name">--sp-5</span><div class="bar" style="width:24px"></div><span class="val">24px</span>
+    <span class="name">--sp-6</span><div class="bar" style="width:32px"></div><span class="val">32px</span>
+    <span class="name">--sp-7</span><div class="bar" style="width:48px"></div><span class="val">48px</span>
+    <span class="name">--sp-8</span><div class="bar" style="width:64px"></div><span class="val">64px</span>
+    <span class="name">--sp-9</span><div class="bar" style="width:96px"></div><span class="val">96px</span>
+    <span class="name">--sp-10</span><div class="bar" style="width:128px"></div><span class="val">128px</span>
+  </div>
+</body></html>

designbook/preview/type-body.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<!-- @dsCard group="Type" name="Type · Body & Lead" subtitle="Lead 17/1.55 · Body 15/1.5" viewport="700x220" -->
+<html><head>
+<meta charset="utf-8"><title>Body & Lead</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { padding: 28px 32px; background: var(--paper); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
+  .col .label { display: block; margin-bottom: 8px; }
+  .col .spec { color: var(--fg-3); font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.04em; margin-top: 6px; display: block; }
+  p { margin: 0; max-width: 56ch; }
+</style></head>
+<body>
+  <div class="col">
+    <span class="label">Lead</span>
+    <p class="lead">A prototype is a question made tangible. The purpose is not to prove an idea is brilliant — it is to learn what is useful, desirable, or irrelevant.</p>
+    <span class="spec">.lead · system-sans 400 · 17 / 1.55 · fg-2</span>
+  </div>
+  <div class="col">
+    <span class="label">Body</span>
+    <p>Signals are evidence, not vibes. Weak signals are useful if clearly labelled. Contradictory signals should be preserved. A signal should be connected to a prototype, audience, or hypothesis. Lack of signal is also information.</p>
+    <span class="spec">p · system-sans 400 · 15 / 1.5 · fg-1</span>
+  </div>
+</body></html>

designbook/preview/type-display.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<!-- @dsCard group="Type" name="Type · Display" subtitle="PlexSans 300/400 · -.035em tracking" viewport="700x200" -->
+<html><head>
+<meta charset="utf-8"><title>Display Type</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { padding: 32px; background: var(--paper); }
+  .row { display: flex; align-items: baseline; gap: 24px; margin-bottom: 18px; }
+  .row .label { width: 80px; flex: none; }
+  .row .spec { color: var(--fg-3); font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.04em; margin-left: auto; flex: none; }
+</style></head>
+<body>
+  <div class="row">
+    <span class="label">Display 1</span>
+    <span class="display-1">try($idea)</span>
+    <span class="spec">system-sans 300 · 96 / .95 · -.035em</span>
+  </div>
+  <div class="row">
+    <span class="label">Display 2</span>
+    <span class="display-2">why? why not!</span>
+    <span class="spec">system-sans 400 · 64 / 1.0 · -.02em</span>
+  </div>
+</body></html>

designbook/preview/type-headings.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<!-- @dsCard group="Type" name="Type · Headings" subtitle="H1–H5 · PlexSans 500 · tight tracking" viewport="700x320" -->
+<html><head>
+<meta charset="utf-8"><title>Headings</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { padding: 28px 32px; background: var(--paper); }
+  .row { display: grid; grid-template-columns: 64px 1fr auto; align-items: baseline; gap: 24px; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
+  .row:last-child { border: 0; }
+  .row .label { color: var(--fg-3); font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
+  .row h1, .row h2, .row h3, .row h4, .row h5 { margin: 0; }
+  .row .spec { color: var(--fg-3); font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.04em; }
+</style></head>
+<body>
+  <div class="row"><span class="label">H1</span><h1>Prototype pipeline</h1><span class="spec">500 · 44 / 1.05</span></div>
+  <div class="row"><span class="label">H2</span><h2>Stage 2 — Prototype card</h2><span class="spec">500 · 32 / 1.25</span></div>
+  <div class="row"><span class="label">H3</span><h3>Learning question</h3><span class="spec">500 · 24 / 1.25</span></div>
+  <div class="row"><span class="label">H4</span><h4>Smallest useful test</h4><span class="spec">500 · 20 / 1.25</span></div>
+  <div class="row"><span class="label">H5</span><h5>Expected signal</h5><span class="spec">500 · 17 / 1.25</span></div>
+</body></html>

designbook/preview/type-mono-eyebrows.html

@@ -0,0 +1,42 @@
+<!doctype html>
+<!-- @dsCard group="Type" name="Type · Mono & Eyebrows" subtitle="PlexMono · uppercase · .08em tracking" viewport="700x220" -->
+<html><head>
+<meta charset="utf-8"><title>Mono & Eyebrows</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { padding: 28px 32px; background: var(--paper); }
+  .group { display: flex; gap: 48px; align-items: flex-start; }
+  .stack { display: flex; flex-direction: column; gap: 10px; }
+  .stack h6 { margin: 0 0 4px; font: 500 11px/1.2 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
+  .eyebrow-row { display: flex; gap: 10px; flex-wrap: wrap; }
+  .specrow { display: flex; align-items: baseline; gap: 16px; }
+  .specrow code { background: none; padding: 0; color: var(--fg-1); }
+  .tag { font: 500 11px/1 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); padding: 5px 9px; border: 1px solid var(--border); border-radius: var(--r-pill); }
+</style></head>
+<body>
+  <div class="group">
+    <div class="stack" style="flex:1">
+      <h6>Eyebrow labels</h6>
+      <div class="eyebrow-row">
+        <span class="eyebrow">PROTOTYPE</span>
+        <span class="eyebrow">STAGE</span>
+        <span class="eyebrow">SIGNAL · S2</span>
+        <span class="eyebrow">IN BETA</span>
+        <span class="eyebrow">PROMOTION TARGET</span>
+      </div>
+    </div>
+    <div class="stack" style="flex:1">
+      <h6>Mono inline</h6>
+      <div class="specrow"><code class="mono">whynot-control/INTENT.md</code></div>
+      <div class="specrow"><code class="mono">stage: prototype-candidate</code></div>
+      <div class="specrow"><code class="mono">→ Helix</code></div>
+    </div>
+  </div>
+  <div style="margin-top: 28px; display: flex; gap: 10px; align-items: center;">
+    <span class="tag">Raw Idea</span>
+    <span class="tag">Prototype Candidate</span>
+    <span class="tag">Experiment</span>
+    <span class="tag">Promotion Candidate</span>
+    <span class="tag">Parked</span>
+  </div>
+</body></html>

designbook/preview/type-serif-quote.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<!-- @dsCard group="Type" name="Type · Serif Quote" subtitle="PlexSerif italic · editorial moments" viewport="700x210" -->
+<html><head>
+<meta charset="utf-8"><title>Serif Quote</title>
+<link rel="stylesheet" href="../colors_and_type.css">
+<style>
+  body { padding: 32px 36px; background: var(--paper); }
+  blockquote { margin: 0; max-width: 60ch; padding-left: 16px; border-left: 1px solid var(--border-strong); }
+  blockquote .q { font: 400 italic 22px/1.4 var(--ff-serif); color: var(--ink); margin: 0 0 12px; }
+  blockquote cite { font: 500 11px/1.2 var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); font-style: normal; }
+</style></head>
+<body>
+  <blockquote>
+    <p class="q">A prototype is a question made tangible. The purpose is not to prove an idea is brilliant. The purpose is to learn what is actually useful, desirable, feasible, or irrelevant.</p>
+    <cite>— whynot-control / INTENT.md</cite>
+  </blockquote>
+</body></html>

designbook/styles.css

@@ -0,0 +1,9 @@
+/* ============================================================
+   WhyNot Design System — canonical stylesheet entry point
+   ------------------------------------------------------------
+   Consumers link ONE file:  <link rel="stylesheet" href="styles.css">
+   It pulls in the token + semantic layer. The component utility
+   layer (components.css) ships with the distributable package
+   (see the whynot-design repo seed) and is imported there.
+   ============================================================ */
+@import "colors_and_type.css";

designbook/ui_kits/whynot-control/Atoms.jsx

@@ -0,0 +1,102 @@
+// =============================================================
+// Atoms — Eyebrow, Tag, Button, StageDot, Stamp, IconBtn
+// =============================================================
+
+function Eyebrow({ children, style }) {
+  return (
+    <span style={{
+      font: '500 11px/1.2 var(--ff-mono)',
+      letterSpacing: '0.08em',
+      textTransform: 'uppercase',
+      color: 'var(--fg-3)',
+      ...style,
+    }}>{children}</span>
+  );
+}
+
+function Tag({ children, active, draft, style }) {
+  const base = {
+    font: '500 10px/1 var(--ff-mono)',
+    letterSpacing: '0.1em',
+    textTransform: 'uppercase',
+    padding: '5px 10px',
+    borderRadius: 'var(--r-pill)',
+    border: '1px solid var(--border)',
+    color: 'var(--fg-2)',
+    background: 'var(--paper)',
+    display: 'inline-block',
+  };
+  if (active) Object.assign(base, { background: 'var(--ink)', color: 'var(--paper)', borderColor: 'var(--ink)' });
+  if (draft) Object.assign(base, { background: 'var(--hi)', color: 'var(--hi-ink)', borderColor: 'transparent' });
+  return <span style={{ ...base, ...style }}>{children}</span>;
+}
+
+function Button({ children, variant = 'secondary', onClick, style, icon }) {
+  const base = {
+    font: '500 13px var(--ff-sans)',
+    letterSpacing: '-0.005em',
+    padding: '9px 14px',
+    borderRadius: 'var(--r-2)',
+    border: '1px solid var(--border)',
+    background: 'var(--paper)',
+    color: 'var(--ink)',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: 8,
+    whiteSpace: 'nowrap',
+    transition: 'background 120ms ease, border-color 120ms ease',
+  };
+  if (variant === 'primary') Object.assign(base, { background: 'var(--ink)', color: 'var(--paper)', borderColor: 'var(--ink)' });
+  if (variant === 'ghost') Object.assign(base, { background: 'transparent', borderColor: 'transparent', padding: '7px 10px' });
+  return (
+    <button onClick={onClick} style={{ ...base, ...style }}>
+      {icon && <i data-lucide={icon} style={{ width: 14, height: 14, strokeWidth: 1.5 }}></i>}
+      {children}
+    </button>
+  );
+}
+
+const STAGE_COLORS = {
+  S0: '#B5B5B3', S1: '#8A8A8A', S2: '#5C5C5C', S3: '#0A0A0A', S4: '#FFD400',
+};
+
+function StageDot({ level = 'S2', label, style }) {
+  return (
+    <span style={{
+      font: '500 10px/1 var(--ff-mono)',
+      letterSpacing: '0.1em',
+      textTransform: 'uppercase',
+      color: 'var(--fg-2)',
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 6,
+      ...style,
+    }}>
+      <span style={{ width: 8, height: 8, borderRadius: 999, background: STAGE_COLORS[level] }}></span>
+      {label || level}
+    </span>
+  );
+}
+
+function Stamp({ children, style }) {
+  return (
+    <span style={{
+      display: 'inline-block',
+      background: 'var(--hi)',
+      color: 'var(--hi-ink)',
+      padding: '5px 10px 3px',
+      font: '500 10px/1 var(--ff-mono)',
+      letterSpacing: '0.12em',
+      textTransform: 'uppercase',
+      transform: 'rotate(-1.5deg)',
+      ...style,
+    }}>{children}</span>
+  );
+}
+
+function Icon({ name, size = 16, style }) {
+  return <i data-lucide={name} style={{ width: size, height: size, strokeWidth: 1.5, ...style }}></i>;
+}
+
+Object.assign(window, { Eyebrow, Tag, Button, StageDot, Stamp, Icon, STAGE_COLORS });

designbook/ui_kits/whynot-control/Chrome.jsx

@@ -0,0 +1,163 @@
+// =============================================================
+// Chrome — TopNav, Sidebar, PageHeader, PipelineStrip
+// =============================================================
+
+function TopNav({ onNew }) {
+  return (
+    <nav style={{
+      height: 56,
+      background: 'rgba(255,255,255,0.92)',
+      borderBottom: '1px solid var(--border)',
+      display: 'flex',
+      alignItems: 'center',
+      gap: 28,
+      padding: '0 24px',
+      position: 'sticky',
+      top: 0,
+      zIndex: 10,
+    }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+        <img src="../../assets/whynot-logo.png" alt="" style={{ width: 22, height: 22 }} />
+        <span style={{ font: '500 14px var(--ff-sans)' }}>whynot</span>
+        <span style={{ font: '400 12px var(--ff-mono)', color: 'var(--fg-3)', letterSpacing: '0.04em' }}>/ control</span>
+      </div>
+      <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 12 }}>
+        <div style={{
+          font: '400 12px var(--ff-mono)',
+          color: 'var(--fg-3)',
+          border: '1px solid var(--border)',
+          padding: '6px 10px',
+          borderRadius: 'var(--r-1)',
+          display: 'flex', alignItems: 'center', gap: 10,
+          minWidth: 240,
+        }}>
+          <Icon name="search" size={14} />
+          <span>Search ideas, prototypes, signals…</span>
+          <span style={{ marginLeft: 'auto', padding: '1px 5px', border: '1px solid var(--border)', borderRadius: 2, fontSize: 10 }}>⌘ K</span>
+        </div>
+        <Button variant="primary" icon="plus" onClick={onNew}>New idea</Button>
+      </div>
+    </nav>
+  );
+}
+
+const NAV_ITEMS = [
+  { key: 'inbox',      label: 'Inbox',       icon: 'inbox',         count: 7 },
+  { key: 'prototypes', label: 'Prototypes',  icon: 'flask-conical', count: 4 },
+  { key: 'signals',    label: 'Signals',     icon: 'activity',      count: 12 },
+  { key: 'betas',      label: 'Betas',       icon: 'users',         count: 1 },
+  { key: 'decisions',  label: 'Decisions',   icon: 'check-square',  count: 3 },
+];
+
+const DOC_ITEMS = [
+  { key: 'intent',     label: 'INTENT.md' },
+  { key: 'scope',      label: 'SCOPE.md' },
+  { key: 'operating',  label: 'OPERATING_MODEL.md' },
+  { key: 'pipeline',   label: 'PROTOTYPE_PIPELINE.md' },
+  { key: 'agent',      label: 'AGENT_RULES.md' },
+];
+
+function Sidebar({ current, onNav }) {
+  const itemStyle = (active) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: 10,
+    padding: '6px 10px',
+    color: active ? 'var(--fg-1)' : 'var(--fg-3)',
+    background: 'transparent',
+    borderLeft: active ? '2px solid var(--ink)' : '2px solid transparent',
+    paddingLeft: active ? 10 : 12,
+    font: active ? '500 13px var(--ff-sans)' : '400 13px var(--ff-sans)',
+    cursor: 'pointer',
+    textDecoration: 'none',
+    transition: 'color 120ms ease, border-color 120ms ease',
+  });
+  return (
+    <aside style={{
+      width: 200, flex: 'none',
+      background: 'transparent',
+      borderRight: 'none',
+      padding: '32px 0 32px 8px',
+      display: 'flex', flexDirection: 'column', gap: 32,
+      height: 'calc(100vh - 56px)',
+      position: 'sticky', top: 56,
+      overflowY: 'auto',
+    }}>
+      <div>
+        <Eyebrow style={{ paddingLeft: 12, marginBottom: 10, display: 'block', opacity: 0.7 }}>Work</Eyebrow>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+          {NAV_ITEMS.map(item => (
+            <a key={item.key} onClick={() => onNav(item.key)} style={itemStyle(current === item.key)}>
+              <span>{item.label}</span>
+              <span style={{ marginLeft: 'auto', font: '400 11px var(--ff-mono)', color: 'var(--ink-5)' }}>{item.count}</span>
+            </a>
+          ))}
+        </div>
+      </div>
+      <div>
+        <Eyebrow style={{ paddingLeft: 12, marginBottom: 10, display: 'block', opacity: 0.7 }}>Control docs</Eyebrow>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+          {DOC_ITEMS.map(item => (
+            <a key={item.key} onClick={() => onNav('doc:' + item.key)} style={{ ...itemStyle(current === 'doc:' + item.key), font: current === 'doc:' + item.key ? '500 12px var(--ff-mono)' : '400 12px var(--ff-mono)' }}>
+              <span>{item.label}</span>
+            </a>
+          ))}
+        </div>
+      </div>
+      <div style={{ marginTop: 'auto', padding: '0 12px' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <span style={{ width: 5, height: 5, borderRadius: 999, background: 'var(--ink-4)' }}></span>
+          <span style={{ font: '400 11px var(--ff-mono)', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>A1 · Incubating</span>
+        </div>
+      </div>
+    </aside>
+  );
+}
+
+function PageHeader({ eyebrow, title, lede, actions }) {
+  return (
+    <header style={{ marginBottom: 48, display: 'flex', flexDirection: 'column', gap: 10 }}>
+      {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
+      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 24 }}>
+        <h1 style={{ font: '400 36px/1.1 var(--ff-sans)', letterSpacing: '-0.02em', margin: 0, flex: 1 }}>{title}</h1>
+        {actions && <div style={{ display: 'flex', gap: 8 }}>{actions}</div>}
+      </div>
+      {lede && <p style={{ font: '400 16px/1.6 var(--ff-sans)', color: 'var(--fg-2)', margin: '4px 0 0', maxWidth: '56ch' }}>{lede}</p>}
+    </header>
+  );
+}
+
+function PipelineStrip({ activeIdx = 3 }) {
+  const stages = [
+    { num: 'Stage 0', name: 'Raw idea',       meta: 'inbox/' },
+    { num: 'Stage 1', name: 'Triage',         meta: '2026-02-12' },
+    { num: 'Stage 2', name: 'Prototype card', meta: 'prototypes/' },
+    { num: 'Stage 3', name: 'Experiment',     meta: 'ends 2026-04-01' },
+    { num: 'Stage 4', name: 'Signal review',  meta: '— pending' },
+  ];
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0, position: 'relative', margin: '0 0 32px' }}>
+      {stages.map((s, i) => {
+        const state = i < activeIdx ? 'done' : i === activeIdx ? 'active' : 'pending';
+        const topColor = state === 'done' ? 'var(--ink)' : state === 'active' ? 'var(--hi-2)' : 'var(--border)';
+        return (
+          <div key={i} style={{
+            padding: '10px 12px 14px',
+            borderTop: `2px solid ${topColor}`,
+            display: 'flex', flexDirection: 'column', gap: 4,
+            position: 'relative',
+          }}>
+            <span style={{ font: '500 10px/1 var(--ff-mono)', letterSpacing: '0.1em', textTransform: 'uppercase', color: state === 'pending' ? 'var(--fg-3)' : 'var(--fg-1)' }}>{s.num}</span>
+            <span style={{ font: '500 14px/1.25 var(--ff-sans)', color: state === 'pending' ? 'var(--fg-3)' : 'var(--fg-1)' }}>{s.name}</span>
+            <span style={{ font: '400 11px/1.35 var(--ff-mono)', color: 'var(--fg-3)' }}>{s.meta}</span>
+            {i > 0 && (
+              <span style={{ position: 'absolute', top: -8, right: -7, font: '400 14px var(--ff-mono)', color: state === 'pending' ? 'var(--ink-5)' : 'var(--ink)' }}>→</span>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+Object.assign(window, { TopNav, Sidebar, PageHeader, PipelineStrip, NAV_ITEMS, DOC_ITEMS });

designbook/ui_kits/whynot-control/DocView.jsx

@@ -0,0 +1,102 @@
+// =============================================================
+// Document viewer — renders one of the control docs
+// =============================================================
+
+const DOC_CONTENT = {
+  intent: {
+    title: 'INTENT.md',
+    eyebrow: 'whynot-control · control document',
+    sections: [
+      { h: 'Purpose', p: 'whynot-control exists to serve as the control repository for the whynot organisation: a prototype, feedback, and market-signal space for discovering the weird and the useful.' },
+      { h: 'Primary utility', list: [
+        'capture unusual but potentially useful ideas;',
+        'distinguish curiosity from commitment;',
+        'shape rough ideas into testable prototypes;',
+        'collect early feedback and market signals;',
+        'run closed beta concepts in a controlled way;',
+        'identify which ideas should move toward Helix, Coulomb, Sloppers, Plenitude, Binky, or Tegwick;',
+        'prevent premature productisation.',
+      ]},
+      { h: 'Operating principle', quote: 'A prototype is a question made tangible. The purpose of a prototype is not to prove that an idea is brilliant. The purpose is to learn what is actually useful, desirable, feasible, or irrelevant.' },
+    ],
+  },
+  scope: {
+    title: 'SCOPE.md',
+    eyebrow: 'whynot-control · control document',
+    sections: [
+      { h: 'Current reality', p: 'whynot-control is the control repository for organising prototype exploration and early market-signal capture.' },
+      { h: 'In scope', list: ['Prototype idea capture.', 'Prototype classification.', 'Early user feedback notes.', 'Market-signal tracking.', 'Closed beta planning.', 'Experiment records.', 'Promotion recommendations.', 'Agent-assisted drafting and analysis.'] },
+      { h: 'Out of scope', list: ['Production implementation.', 'Long-term product maintenance.', 'Payment processing.', 'Legal investment documentation.', 'Public launch operations.', 'Binding financial, legal, or tax conclusions.'] },
+      { h: 'Scope guardrail', quote: 'whynot-control explores and validates. It does not absorb all product development.' },
+    ],
+  },
+  operating: {
+    title: 'OPERATING_MODEL.md',
+    eyebrow: 'whynot-control · control document',
+    sections: [
+      { h: 'Core rules', list: [
+        'Prototypes are questions. Each prototype should express a question about usefulness, desirability, feasibility, or willingness to pay.',
+        'Signal beats enthusiasm. An idea should not be promoted only because it is exciting.',
+        'Low-cost learning first. Prefer sketches, mockups, demos, landing pages, conversations.',
+        'Closed beta before broad launch.',
+        'Promotion requires criteria.',
+      ]},
+      { h: 'Burnout guardrail', quote: 'A prototype can be interesting and still be parked. whynot exists to reduce uncertainty, not to create more obligations.' },
+    ],
+  },
+  pipeline: {
+    title: 'PROTOTYPE_PIPELINE.md',
+    eyebrow: 'whynot-control · control document',
+    sections: [
+      { h: 'Stage 0 — Raw capture', p: 'Capture ideas without judging them immediately. Located in inbox/. Done when the idea is saved and no longer needs to be held in memory.' },
+      { h: 'Stage 1 — Triage', p: 'Decide whether an idea deserves a prototype card. Outcomes: create card, park, merge, reject.' },
+      { h: 'Stage 2 — Prototype card', p: 'Turn the idea into a structured prototype candidate. Located in prototypes/.' },
+      { h: 'Stage 3 — Experiment', p: 'Test the idea with minimal cost: concept note, landing page, clickable mockup, CLI/demo script, Wizard-of-Oz, manual concierge test, closed conversation, private beta.' },
+      { h: 'Stage 4 — Signal review', p: 'Evaluate what was learned. Interest, usefulness, retention, referral, payment, contribution, strategic fit.' },
+      { h: 'Stage 5 — Decision', p: 'Park, iterate, promote, reject, or merge. Promotion requires an explicit record in DECISIONS.md.' },
+    ],
+  },
+  agent: {
+    title: 'AGENT_RULES.md',
+    eyebrow: 'whynot-control · control document',
+    sections: [
+      { h: 'General principle', p: 'Agents may help clarify, structure, draft, compare, and analyse prototype ideas. They must not silently turn experiments into product commitments.' },
+      { h: 'Allowed', list: ['draft prototype cards', 'classify ideas by lifecycle stage', 'propose smallest useful tests', 'summarise feedback', 'compare prototype candidates', 'improve wording and structure'] },
+      { h: 'Forbidden', list: ['create artificial urgency', 'treat all prototype ideas as products', 'infer willingness to pay without evidence', 'present weak signals as strong validation', 'create legal, financial, or investment commitments'] },
+      { h: 'Preferred output style', quote: 'Agent outputs should be concise, evidence-oriented, explicit about uncertainty, and careful to separate idea, hypothesis, signal, and decision.' },
+    ],
+  },
+};
+
+function DocView({ docKey }) {
+  const doc = DOC_CONTENT[docKey];
+  if (!doc) return <div>Doc not found.</div>;
+  return (
+    <article style={{ maxWidth: 680 }}>
+      <Eyebrow>{doc.eyebrow}</Eyebrow>
+      <h1 style={{ font: '600 36px/1.1 var(--ff-mono)', letterSpacing: '-0.01em', margin: '12px 0 28px' }}>{doc.title}</h1>
+      {doc.sections.map((s, i) => (
+        <section key={i} style={{ marginBottom: 36 }}>
+          <h2 style={{ font: '500 22px/1.25 var(--ff-sans)', letterSpacing: '-0.005em', margin: '0 0 14px' }}>{s.h}</h2>
+          {s.p && <p style={{ margin: 0, font: '400 15px/1.65 var(--ff-sans)', color: 'var(--fg-1)' }}>{s.p}</p>}
+          {s.list && (
+            <ul style={{ margin: 0, paddingLeft: 18, color: 'var(--fg-1)', font: '400 15px/1.7 var(--ff-sans)' }}>
+              {s.list.map((li, j) => <li key={j} style={{ marginBottom: 6 }}>{li}</li>)}
+            </ul>
+          )}
+          {s.quote && (
+            <blockquote style={{ margin: 0, paddingLeft: 16, borderLeft: '1px solid var(--border-strong)' }}>
+              <p style={{ margin: 0, font: '400 italic 17px/1.55 var(--ff-serif)', color: 'var(--fg-2)' }}>{s.quote}</p>
+            </blockquote>
+          )}
+        </section>
+      ))}
+      <div style={{ marginTop: 48, padding: '14px 0', borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'space-between', font: '400 11px var(--ff-mono)', color: 'var(--fg-3)' }}>
+        <span>whynot-control / {doc.title}</span>
+        <span>A1 · Incubating · 2026</span>
+      </div>
+    </article>
+  );
+}
+
+Object.assign(window, { DocView, DOC_CONTENT });

designbook/ui_kits/whynot-control/README.md

@@ -0,0 +1,31 @@
+# whynot-control UI kit
+
+A click-through high-fidelity recreation of the `whynot-control` repository — rendered not as a folder of Markdown files, but as the lightweight web application it implies.
+
+This kit demonstrates the WhyNot Design System applied to its primary use case: a prototype-and-signal control surface. Everything here is **cosmetic** — there's no backend, no persistence, no real router. Each screen is a working visual artefact you can drop into a design review.
+
+## Screens
+
+| Screen | Source doc(s) | Component |
+|---|---|---|
+| Inbox | `inbox/` | `Inbox.jsx` |
+| Prototypes (index) | `prototypes/` + `PROTOTYPE_PIPELINE.md` | `PrototypesIndex.jsx` |
+| Prototype (detail) | `templates/prototype-card.md` + `example-prototype-card.md` | `PrototypeDetail.jsx` |
+| Signals | `signals/` + `MARKET_SIGNAL.md` | `SignalsIndex.jsx` |
+| Document viewer | `INTENT.md`, `OPERATING_MODEL.md` | `DocView.jsx` |
+
+## Components
+
+- `TopNav.jsx` — sticky 56px hairline top bar (search + new-idea action).
+- `Sidebar.jsx` — left rail with org slug, repo nav, activation indicator.
+- `PrototypeCard.jsx` — the card from `preview/comp-prototype-card.html`, factored.
+- `PipelineStrip.jsx` — the 5-stage progress strip from `preview/comp-pipeline.html`.
+- `SignalRow.jsx` — one row in the signals table.
+- `Tag.jsx`, `Eyebrow.jsx`, `Button.jsx`, `StageDot.jsx`, `Stamp.jsx` — atoms used everywhere.
+
+## Conventions
+
+- All components are flat function components, no hooks beyond `useState` for screen routing.
+- Components export themselves onto `window` so each `<script type="text/babel">` file can find them.
+- Style objects are inline or scoped (e.g. `cardStyles`, `navStyles`) to avoid name collisions.
+- Icons are Lucide via CDN, rendered as `<i data-lucide="…">` and hydrated by `lucide.createIcons()`.

designbook/ui_kits/whynot-control/Screens.jsx

@@ -0,0 +1,274 @@
+// =============================================================
+// Screens — Inbox, PrototypesIndex, PrototypeDetail, SignalsIndex, DocView, BetasIndex, DecisionsIndex
+// =============================================================
+
+function Inbox({ onCapture }) {
+  const [draft, setDraft] = React.useState('');
+  return (
+    <div>
+      <PageHeader
+        eyebrow="whynot-control / inbox"
+        title="Inbox"
+        lede="Temporary capture for rough ideas, weird observations, user comments, market hints, and product fragments. Capture is not commitment."
+      />
+      <div style={{
+        border: '1px solid var(--border)',
+        borderRadius: 'var(--r-2)',
+        padding: 16,
+        background: 'var(--paper)',
+        marginBottom: 28,
+        display: 'flex', flexDirection: 'column', gap: 10,
+      }}>
+        <Eyebrow>Capture</Eyebrow>
+        <textarea
+          value={draft}
+          onChange={e => setDraft(e.target.value)}
+          placeholder="An idea, an observation, a fragment. No filter, no judgement, no commitment."
+          style={{
+            font: '400 14px/1.5 var(--ff-sans)',
+            border: 'none', outline: 'none', resize: 'none',
+            minHeight: 64, padding: 0, background: 'transparent', color: 'var(--fg-1)',
+          }}
+        />
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <span style={{ font: '400 11px var(--ff-mono)', color: 'var(--fg-3)', marginRight: 'auto' }}>
+            ⌘ ↵ to capture · stored in <code className="mono">inbox/</code>
+          </span>
+          <Button variant="ghost" onClick={() => setDraft('')}>Discard</Button>
+          <Button variant="primary" icon="inbox" onClick={() => { onCapture && onCapture(draft); setDraft(''); }}>Capture</Button>
+        </div>
+      </div>
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
+        <Eyebrow>Recent · 7</Eyebrow>
+        <div style={{ flex: 1, borderTop: '1px solid var(--border-soft)' }}></div>
+        <span style={{ font: '400 11px var(--ff-mono)', color: 'var(--fg-3)' }}>↓ newest first</span>
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        {INBOX.map(item => (
+          <div key={item.id} style={{
+            display: 'grid',
+            gridTemplateColumns: '120px 1fr',
+            gap: '4px 24px',
+            padding: '20px 0',
+            borderBottom: '1px solid var(--border-soft)',
+            alignItems: 'baseline',
+          }}>
+            <span style={{ font: '400 11px var(--ff-mono)', color: 'var(--fg-3)' }}>{item.ts}</span>
+            <span style={{ font: '500 10px/1 var(--ff-mono)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>{item.from}</span>
+            <p style={{ gridColumn: '1 / -1', margin: '4px 0 0', font: '400 15px/1.6 var(--ff-sans)', color: 'var(--fg-1)', maxWidth: '60ch' }}>{item.text}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function PrototypeListCard({ p, onOpen }) {
+  const [hover, setHover] = React.useState(false);
+  return (
+    <article
+      onClick={() => onOpen(p.id)}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      style={{
+        background: 'var(--paper)',
+        borderTop: '1px solid var(--border-soft)',
+        padding: '24px 0 28px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 12,
+        position: 'relative',
+        cursor: 'pointer',
+        transition: 'background 120ms ease',
+      }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
+        <Eyebrow style={{ color: hover ? 'var(--fg-1)' : 'var(--fg-3)' }}>{p.id} · Prototype</Eyebrow>
+        <StageDot level={p.signal} label={p.stageLabel} />
+      </div>
+      <h3 style={{ font: '400 22px/1.3 var(--ff-sans)', letterSpacing: '-0.01em', margin: '2px 0 8px', color: 'var(--fg-1)', maxWidth: '52ch' }}>{p.pitch}</h3>
+      <div style={{ display: 'grid', gridTemplateColumns: '140px 1fr', gap: '10px 16px', fontSize: 14, color: 'var(--fg-2)', maxWidth: '60ch' }}>
+        <span style={{ font: '500 11px/1.7 var(--ff-mono)', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>Learning q.</span>
+        <span style={{ lineHeight: 1.55 }}>{p.learning}</span>
+        <span style={{ font: '500 11px/1.7 var(--ff-mono)', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>Smallest test</span>
+        <span style={{ lineHeight: 1.55 }}>{p.test}</span>
+      </div>
+      <div style={{ display: 'flex', gap: 24, marginTop: 4, font: '500 11px var(--ff-mono)', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>
+        <span>→ {p.target}</span>
+        <span>{p.signal} signal</span>
+        <span style={{ marginLeft: 'auto', color: hover ? 'var(--fg-1)' : 'var(--fg-3)' }}>Open →</span>
+      </div>
+    </article>
+  );
+}
+
+function PrototypesIndex({ onOpen }) {
+  const [filter, setFilter] = React.useState('All');
+  const filters = ['All', 'Experiment', 'Signal review', 'Parked'];
+  const list = filter === 'All' ? PROTOTYPES : PROTOTYPES.filter(p => p.stageLabel === filter);
+  return (
+    <div>
+      <PageHeader
+        eyebrow="whynot-control / prototypes"
+        title="Prototypes"
+        lede="Structured prototype cards. A prototype card defines a learning question and the smallest useful test."
+        actions={<Button variant="primary" icon="plus">New prototype</Button>}
+      />
+      <div style={{ display: 'flex', gap: 10, marginBottom: 8, alignItems: 'center' }}>
+        {filters.map(f => (
+          <Tag key={f} active={filter === f} style={{ cursor: 'pointer' }} >
+            <span onClick={() => setFilter(f)}>{f}</span>
+          </Tag>
+        ))}
+        <span style={{ marginLeft: 'auto', font: '400 11px var(--ff-mono)', color: 'var(--fg-3)' }}>{list.length} of {PROTOTYPES.length}</span>
+      </div>
+      <div>
+        {list.map(p => <PrototypeListCard key={p.id} p={p} onOpen={onOpen} />)}
+      </div>
+    </div>
+  );
+}
+
+function PrototypeDetail({ id, onBack }) {
+  const p = PROTOTYPES.find(p => p.id === id) || PROTOTYPES[0];
+  const stageIdx = { 'parked': 0, 'experiment': 3, 'signal': 4, 'experiment-active': 3 }[p.stage] ?? 3;
+  return (
+    <div>
+      <a onClick={onBack} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, font: '400 12px var(--ff-mono)', color: 'var(--fg-2)', textDecoration: 'none', marginBottom: 18, cursor: 'pointer' }}>
+        <Icon name="arrow-left" size={14} /> Back to prototypes
+      </a>
+      <PageHeader
+        eyebrow={`${p.id} · Prototype`}
+        title={p.pitch}
+        actions={
+          <React.Fragment>
+            <Button variant="secondary" icon="archive">Park</Button>
+            <Button variant="primary" icon="arrow-right">Promote → {p.target}</Button>
+          </React.Fragment>
+        }
+      />
+      <PipelineStrip activeIdx={stageIdx} />
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32 }}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
+          <Field label="Learning question" value={p.learning} />
+          <Field label="Smallest useful test" value={p.test} />
+          <Field label="Expected signal" value="At least one person asks for a concrete next step, gives specific use-case feedback, or identifies a realistic context where the idea would matter." />
+          <Field label="Risks" value={p.risks} />
+        </div>
+        <aside style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
+          <SidebarField label="Stage" value={<Tag active>{p.stageLabel}</Tag>} />
+          <SidebarField label="Signal" value={<StageDot level={p.signal} />} />
+          <SidebarField label="Target" value={<code className="mono">→ {p.target}</code>} />
+          <SidebarField label="Audience" value="Potential early users, collaborators, or customers." />
+          <SidebarField label="Agentic suitability" value="Agents may help turn rough notes into a sharper prototype card." />
+          <div style={{ marginTop: 6, border: '1px dashed var(--border-strong)', borderRadius: 4, padding: 14 }}>
+            <Eyebrow style={{ display: 'block', marginBottom: 8 }}>Caveat</Eyebrow>
+            <p style={{ margin: 0, font: '400 13px/1.55 var(--ff-sans)', color: 'var(--fg-2)' }}>
+              A prototype can be interesting and still be parked. <code className="mono">whynot</code> exists to reduce uncertainty, not create more obligations.
+            </p>
+          </div>
+        </aside>
+      </div>
+    </div>
+  );
+}
+
+function Field({ label, value }) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+      <Eyebrow>{label}</Eyebrow>
+      <p style={{ margin: 0, font: '400 15px/1.55 var(--ff-sans)', color: 'var(--fg-1)' }}>{value}</p>
+    </div>
+  );
+}
+
+function SidebarField({ label, value }) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+      <Eyebrow>{label}</Eyebrow>
+      <div style={{ font: '400 13px/1.5 var(--ff-sans)', color: 'var(--fg-1)' }}>{value}</div>
+    </div>
+  );
+}
+
+function SignalsIndex() {
+  return (
+    <div>
+      <PageHeader
+        eyebrow="whynot-control / signals"
+        title="Signals"
+        lede="Market-signal and feedback records. A signal is evidence. Record what happened, who did it, and how strong the evidence is."
+        actions={<Button variant="primary" icon="plus">Record signal</Button>}
+      />
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        {SIGNALS.map(s => (
+          <div key={s.id} style={{
+            display: 'grid',
+            gridTemplateColumns: '90px 90px 1fr',
+            gap: '6px 24px',
+            padding: '20px 0',
+            borderBottom: '1px solid var(--border-soft)',
+            alignItems: 'baseline',
+          }}>
+            <code className="mono" style={{ background: 'none', padding: 0, color: 'var(--fg-3)', font: '400 11px var(--ff-mono)' }}>{s.id}</code>
+            <code className="mono" style={{ background: 'none', padding: 0, color: 'var(--fg-2)', font: '400 11px var(--ff-mono)' }}>{s.proto}</code>
+            <StageDot level={s.level} />
+            <p style={{ gridColumn: '1 / -1', margin: '4px 0 0', font: '400 14px/1.55 var(--ff-sans)', color: 'var(--fg-1)', maxWidth: '60ch' }}>{s.what}</p>
+            <span style={{ gridColumn: '1 / -1', font: '400 11px var(--ff-mono)', color: 'var(--fg-3)' }}>{s.source} · {s.date}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function BetasIndex() {
+  return (
+    <div>
+      <PageHeader
+        eyebrow="whynot-control / betas"
+        title="Betas"
+        lede="Closed beta plans and beta review notes. A beta should have a clear learning question, entry criteria, and exit outcome."
+      />
+      <div style={{
+        border: '1px dashed var(--border-strong)',
+        padding: 32,
+        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
+        textAlign: 'center',
+        color: 'var(--fg-3)',
+        borderRadius: 4,
+      }}>
+        <Icon name="users" size={20} />
+        <div style={{ font: '500 14px var(--ff-sans)', color: 'var(--fg-2)' }}>One beta plan in draft.</div>
+        <div style={{ font: '400 12px var(--ff-mono)', color: 'var(--fg-3)' }}>WNO-021 · Concierge triage · pending Binky approval</div>
+        <a href="#" style={{ font: '500 12px var(--ff-mono)', color: 'var(--fg-1)', marginTop: 4 }}>Open draft →</a>
+      </div>
+    </div>
+  );
+}
+
+function DecisionsIndex() {
+  const decisions = [
+    { id: 'DEC-001', title: 'Shorten organisation name from whywhynot to whynot.', status: 'Accepted', date: '2026-01-08' },
+    { id: 'DEC-002', title: 'Maintain A1 Incubating until first prototype candidates review.', status: 'Open', date: '—' },
+    { id: 'DEC-003', title: 'Initial promotion targets: Helix, Coulomb, Sloppers, Plenitude, Binky, Tegwick.', status: 'Open', date: '—' },
+  ];
+  return (
+    <div>
+      <PageHeader eyebrow="whynot-control / decisions" title="Decisions" lede="A promotion record is required before any prototype moves to Helix, Coulomb, Sloppers, Plenitude, Binky, or Tegwick." />
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        {decisions.map(d => (
+          <div key={d.id} style={{ display: 'grid', gridTemplateColumns: '90px 1fr 130px 100px', gap: 20, alignItems: 'baseline', padding: '16px 4px', borderBottom: '1px solid var(--border-soft)' }}>
+            <code className="mono" style={{ background: 'none', padding: 0, color: 'var(--fg-1)' }}>{d.id}</code>
+            <span style={{ font: '500 15px var(--ff-sans)', color: 'var(--fg-1)' }}>{d.title}</span>
+            <Tag active={d.status === 'Accepted'} draft={d.status === 'Open'}>{d.status}</Tag>
+            <span style={{ font: '400 12px var(--ff-mono)', color: 'var(--fg-3)', textAlign: 'right' }}>{d.date}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+Object.assign(window, { Inbox, PrototypesIndex, PrototypeDetail, SignalsIndex, BetasIndex, DecisionsIndex, Field, SidebarField, PrototypeListCard });

designbook/ui_kits/whynot-control/data.jsx

@@ -0,0 +1,71 @@
+// =============================================================
+// Sample data — prototypes, signals, inbox items
+// =============================================================
+
+const PROTOTYPES = [
+  {
+    id: 'WNO-014',
+    pitch: 'A field-notebook for catching weird ideas before they evaporate.',
+    learning: 'Do people return to capture more than once?',
+    test: 'One-page landing + email capture, 14 days.',
+    target: 'Coulomb',
+    stage: 'experiment',
+    stageLabel: 'Experiment',
+    signal: 'S1',
+    risks: 'Confused with note-taking apps.',
+  },
+  {
+    id: 'WNO-017',
+    pitch: 'A LEGO-brick mood board for engineers who don’t think in mood boards.',
+    learning: 'Will engineers attach metaphors to their tickets?',
+    test: 'Slack bot, three teams, two weeks.',
+    target: 'Helix',
+    stage: 'signal',
+    stageLabel: 'Signal review',
+    signal: 'S3',
+    risks: 'Cute but unused after a week.',
+  },
+  {
+    id: 'WNO-021',
+    pitch: 'Concierge-style “prototype triage” for indie hackers.',
+    learning: 'Will three founders pay for a one-hour triage call?',
+    test: 'Offer beta · 3 calls · listed price.',
+    target: 'Plenitude',
+    stage: 'experiment',
+    stageLabel: 'Experiment',
+    signal: 'S2',
+    risks: 'Time-cost outruns signal value.',
+  },
+  {
+    id: 'WNO-024',
+    pitch: 'A relevant-#CoronaPolitics timeline, re-released with one editor.',
+    learning: 'Is there residual demand five years on?',
+    test: 'Static preview page, 30 days, count returns.',
+    target: 'None yet',
+    stage: 'parked',
+    stageLabel: 'Parked',
+    signal: 'S0',
+    risks: 'Topical relevance has clearly faded.',
+  },
+];
+
+const INBOX = [
+  { id: 1, ts: '2026-03-02 14:21', text: 'Idea: “subway map” view of the prototype pipeline. People understand transit maps; they don’t understand kanban boards.', from: 'Tegwick' },
+  { id: 2, ts: '2026-03-01 09:08', text: 'Weird observation from yesterday’s call: three founders independently asked for “something to capture the half-formed stuff”.', from: 'note-to-self' },
+  { id: 3, ts: '2026-02-28 23:55', text: 'Could the LEGO-brick metaphor extend to a public “build log” format? One brick = one decision.', from: 'Tegwick' },
+  { id: 4, ts: '2026-02-27 11:34', text: 'Park idea: realtime sentiment dashboard for prototype landing pages. Probably worse than reading the comments.', from: 'note-to-self' },
+  { id: 5, ts: '2026-02-26 17:02', text: 'Conversation with R. about closed-beta etiquette. Useful: pre-write the exit email before the beta opens.', from: 'note-to-self' },
+  { id: 6, ts: '2026-02-25 08:12', text: 'fuerindifferenz shirts: residual interest from old whywhynot.de page. Could a yearly drop work?', from: 'Tegwick' },
+  { id: 7, ts: '2026-02-24 15:40', text: 'Tiny idea: a “reject log” that publishes the ideas you said no to, with one-sentence reasons.', from: 'note-to-self' },
+];
+
+const SIGNALS = [
+  { id: 'SIG-031', proto: 'WNO-017', level: 'S3', what: 'Two teams shipped public README sections labelled “brick: scope” after using the bot for a week.', source: 'usage log', date: '2026-03-04' },
+  { id: 'SIG-030', proto: 'WNO-017', level: 'S2', what: 'Three engineers DM’d asking for an export-to-Notion option.', source: 'Slack', date: '2026-03-03' },
+  { id: 'SIG-029', proto: 'WNO-014', level: 'S1', what: 'Landing page: 34 visits, 7 emails, 0 returns in week 1.', source: 'Plausible', date: '2026-03-01' },
+  { id: 'SIG-028', proto: 'WNO-021', level: 'S2', what: 'First triage call booked at listed price; second declined on price.', source: 'Stripe / email', date: '2026-02-28' },
+  { id: 'SIG-027', proto: 'WNO-021', level: 'S1', what: '“Interesting but I’d want a free first one” ×2.', source: 'interview', date: '2026-02-26' },
+  { id: 'SIG-026', proto: 'WNO-024', level: 'S0', what: 'Static preview: 12 visits in 30 days, 0 returns.', source: 'Plausible', date: '2026-02-24' },
+];
+
+Object.assign(window, { PROTOTYPES, INBOX, SIGNALS });

designbook/ui_kits/whynot-control/index.html

@@ -0,0 +1,77 @@
+<!doctype html>
+<!-- @dsCard group="Pages" name="Pages · User dashboard" subtitle="Authenticated app · inbox, prototypes, signals, betas, decisions, docs" viewport="1200x740" -->
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>whynot · control</title>
+  <link rel="icon" href="../../assets/whynot-logo.png">
+  <link rel="stylesheet" href="../../colors_and_type.css">
+  <style>
+    html, body { background: var(--paper); }
+    body { min-height: 100vh; }
+    .app { display: grid; grid-template-columns: 200px 1fr; min-height: 100vh; }
+    .main { padding: 56px 64px 96px; max-width: 880px; }
+    /* Lucide icons inherit currentColor */
+    [data-lucide] { stroke-width: 1.5; }
+    /* Cleanup: button reset */
+    button { font-family: inherit; }
+    button:active { transform: none; }
+    a { cursor: pointer; }
+  </style>
+
+  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+  <script src="https://unpkg.com/lucide@latest"></script>
+</head>
+<body>
+  <div id="root"></div>
+
+  <script type="text/babel" src="Atoms.jsx"></script>
+  <script type="text/babel" src="Chrome.jsx"></script>
+  <script type="text/babel" src="data.jsx"></script>
+  <script type="text/babel" src="Screens.jsx"></script>
+  <script type="text/babel" src="DocView.jsx"></script>
+
+  <script type="text/babel">
+    const { useState, useEffect } = React;
+
+    function App() {
+      const [route, setRoute] = useState('prototypes'); // inbox | prototypes | signals | betas | decisions | proto:<id> | doc:<key>
+
+      useEffect(() => {
+        // re-hydrate lucide icons whenever the route changes
+        if (window.lucide) window.lucide.createIcons();
+      }, [route]);
+
+      const onNav = (key) => setRoute(key);
+      const onOpen = (id) => setRoute('proto:' + id);
+      const onBack = () => setRoute('prototypes');
+
+      let screen;
+      if (route === 'inbox') screen = <Inbox onCapture={() => {}} />;
+      else if (route === 'prototypes') screen = <PrototypesIndex onOpen={onOpen} />;
+      else if (route.startsWith('proto:')) screen = <PrototypeDetail id={route.slice(6)} onBack={onBack} />;
+      else if (route === 'signals') screen = <SignalsIndex />;
+      else if (route === 'betas') screen = <BetasIndex />;
+      else if (route === 'decisions') screen = <DecisionsIndex />;
+      else if (route.startsWith('doc:')) screen = <DocView docKey={route.slice(4)} />;
+      else screen = <Inbox />;
+
+      const sidebarKey = route.startsWith('proto:') ? 'prototypes' : route;
+
+      return (
+        <React.Fragment>
+          <TopNav onNew={() => setRoute('inbox')} />
+          <div className="app">
+            <Sidebar current={sidebarKey} onNav={onNav} />
+            <main className="main">{screen}</main>
+          </div>
+        </React.Fragment>
+      );
+    }
+
+    ReactDOM.createRoot(document.getElementById('root')).render(<App />);
+  </script>
+</body>
+</html>

examples/consumer-fixture/README.md

@@ -0,0 +1,36 @@
+# consumer-fixture — the drift loop, copy-pasteable
+
+A tiny stand-in for a repo that **consumes** `@whynot/design`. It exercises the
+full downstream loop — **pin → inspect → drift → update** — against this repo's
+own `ir/manifest.json`, with no real npm install, so you can see exactly what a
+consumer experiences.
+
+```bash
+./run.sh
+```
+
+What it shows:
+
+1. **Inspect** — the head of `ir/INDEX.md` (the browsable catalog of the version).
+2. **drift** — [`adopted.lock`](./adopted.lock) is a sample `.whynot-design.lock`
+   pinned to a pretend older `0.2.0` sync-point (Button changed since, TopNav added
+   since, tokens changed). `drift` reports those and exits `3`.
+3. **drift --update** — adopts the current version as the new sync-point.
+4. **drift** again — now in sync, exits `0`.
+
+The run is **non-destructive**: `adopted.lock` is copied into a scratch dir and
+only the copy is mutated.
+
+## In a real consuming repo
+
+You would **not** pass `--manifest`/`--lock`. The installed package supplies its
+own `ir/manifest.json`, and the lock lives at `./.whynot-design.lock`:
+
+```bash
+npm i @whynot/design@0.3.0 lit     # pin
+npx @whynot/design drift --update  # adopt a sync-point (writes .whynot-design.lock)
+# ...later, after bumping the version...
+npx @whynot/design drift           # see what changed; exit 3 on drift
+```
+
+Full guide: [`../../CONSUMING.md`](../../CONSUMING.md).

examples/consumer-fixture/adopted.lock

@@ -0,0 +1,19 @@
+{
+  "designVersion": "0.2.0",
+  "adoptedAt": "2026-05-01T12:00:00.000Z",
+  "manifestSchemaVersion": "1.0.0",
+  "manifestHashes": {
+    "tokens": "sha256:00000000bbbbbbbb",
+    "components": {
+      "Button": "sha256:00000000aaaaaaaa",
+      "Eyebrow": "sha256:56baa59a49b5f32c",
+      "Icon": "sha256:2557fbffb3aa6ee1",
+      "PageHeader": "sha256:93e12068e2f58f10",
+      "PipelineStrip": "sha256:89c40afe4742d64e",
+      "Sidebar": "sha256:8340b292fff7a80d",
+      "StageDot": "sha256:f6f7790aa886261e",
+      "Stamp": "sha256:0b32f43ed19ac470",
+      "Tag": "sha256:91ee34eac1457016"
+    }
+  }
+}

examples/consumer-fixture/run.sh

@@ -0,0 +1,38 @@
+#!/usr/bin/env bash
+# Exercise the consumer drift loop against this repo's own ir/manifest.json,
+# without a real npm install. Non-destructive: the committed adopted.lock is
+# copied into a scratch dir; only that copy is mutated.
+#
+# In a REAL consuming repo you would not pass --manifest at all — the installed
+# @whynot/design package supplies its own ir/manifest.json, and the lock lives at
+# ./.whynot-design.lock. Here we point at the repo copy so the demo is hermetic.
+set -euo pipefail
+cd "$(dirname "$0")"
+
+REPO_ROOT="$(cd ../.. && pwd)"
+CLI="$REPO_ROOT/bin/whynot-design.mjs"
+MANIFEST="$REPO_ROOT/ir/manifest.json"
+
+WORK="$(mktemp -d)"
+trap 'rm -rf "$WORK"' EXIT
+cp adopted.lock "$WORK/.whynot-design.lock"
+LOCK="$WORK/.whynot-design.lock"
+
+echo "### 1. Inspect — what's in this version"
+sed -n '1,6p' "$REPO_ROOT/ir/INDEX.md"
+echo
+
+echo "### 2. drift — what changed since the adopted (0.2.0) sync-point  (expect exit 3)"
+set +e
+node "$CLI" drift --manifest "$MANIFEST" --lock "$LOCK"
+echo "(exit $?)"
+set -e
+echo
+
+echo "### 3. drift --update — adopt the current version as the new sync-point"
+node "$CLI" drift --manifest "$MANIFEST" --lock "$LOCK" --update >/dev/null
+echo
+
+echo "### 4. drift again — now in sync  (expect exit 0)"
+node "$CLI" drift --manifest "$MANIFEST" --lock "$LOCK"
+echo "(exit $?)"

examples/showcase/index.html

@@ -7,12 +7,14 @@
   <link rel="stylesheet" href="../../src/styles/colors_and_type.css">
   <link rel="stylesheet" href="../../src/styles/components.css">
 
-  <!-- Lit comes via importmap. In a real consumer this would be bundled. -->
+  <!-- Lit comes via importmap. Vendored as a self-contained bundle so the
+       page (and visual tests) render deterministically with no live CDN graph.
+       Regenerate with: npx esbuild <entry 'export * from "lit"'> --bundle
+       --format=esm --platform=browser --minify --outfile=examples/vendor/lit.js -->
   <script type="importmap">
   {
     "imports": {
-      "lit": "https://esm.sh/lit@3.2.1",
+      "lit": "../vendor/lit.js"
-      "lit/": "https://esm.sh/lit@3.2.1/"
     }
   }
   </script>

examples/whynot-control/index.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <title>whynot · control</title>
   <link rel="icon" href="../../assets/whynot-logo.png">
-  <link rel="stylesheet" href="../../colors_and_type.css">
+  <link rel="stylesheet" href="../../src/styles/colors_and_type.css">
   <style>
     html, body { background: var(--paper); }
     body { min-height: 100vh; }

ir/INDEX.md

@@ -0,0 +1,130 @@
+<!-- GENERATED by scripts/ir-extract.mjs (make ir) — do not hand-edit. -->
+# whynot-design IR catalog
+
+**designVersion** `0.4.0` · **components** 10 · **generated** 2026-06-30T07:46:35.138Z
+
+Machine-readable companion: [`manifest.json`](./manifest.json) (per-component + token hashes).
+
+## atoms
+
+### Button `<wn-button>`
+
+Button — extracted from designbook ui_kits/whynot-control/Atoms.jsx.
+
+| prop | attribute | type | default |
+| --- | --- | --- | --- |
+| `variant` | `variant` | enum(secondary \| primary \| ghost) | `secondary` |
+| `icon` | `icon` | boolean | — |
+
+_Non-portable (React-only) props:_ `onClick`, `style`.
+
+**Slots:** `default`  
+**Events:** `wn-click`  
+**Variants:** variant (secondary/primary/ghost)  
+**Contract:** [`components/Button.json`](./components/Button.json) · **hash** `sha256:4a32713049e433dd` · **exemplar:** [`exemplars/Button.html`](./exemplars/Button.html)
+
+### Eyebrow `<wn-eyebrow>`
+
+Eyebrow — extracted from designbook ui_kits/whynot-control/Atoms.jsx.
+
+_Non-portable (React-only) props:_ `style`.
+
+**Slots:** `default`  
+**Contract:** [`components/Eyebrow.json`](./components/Eyebrow.json) · **hash** `sha256:56baa59a49b5f32c` · **exemplar:** [`exemplars/Eyebrow.html`](./exemplars/Eyebrow.html)
+
+### Icon `<wn-icon>`
+
+Icon — extracted from designbook ui_kits/whynot-control/Atoms.jsx.
+
+| prop | attribute | type | default |
+| --- | --- | --- | --- |
+| `name` | `name` | string | — |
+| `size` | `size` | number | `16` |
+
+_Non-portable (React-only) props:_ `style`.
+
+**Contract:** [`components/Icon.json`](./components/Icon.json) · **hash** `sha256:2557fbffb3aa6ee1`
+
+### StageDot `<wn-stage-dot>`
+
+StageDot — extracted from designbook ui_kits/whynot-control/Atoms.jsx.
+
+| prop | attribute | type | default |
+| --- | --- | --- | --- |
+| `level` | `level` | string | `S2` |
+| `label` | `label` | string | — |
+
+_Non-portable (React-only) props:_ `style`.
+
+**Contract:** [`components/StageDot.json`](./components/StageDot.json) · **hash** `sha256:f6f7790aa886261e` · **exemplar:** [`exemplars/StageDot.html`](./exemplars/StageDot.html)
+
+### Stamp `<wn-stamp>`
+
+Stamp — extracted from designbook ui_kits/whynot-control/Atoms.jsx.
+
+_Non-portable (React-only) props:_ `style`.
+
+**Slots:** `default`  
+**Contract:** [`components/Stamp.json`](./components/Stamp.json) · **hash** `sha256:0b32f43ed19ac470`
+
+### Tag `<wn-tag>`
+
+Tag — extracted from designbook ui_kits/whynot-control/Atoms.jsx.
+
+| prop | attribute | type | default |
+| --- | --- | --- | --- |
+| `active` | `active` | boolean | — |
+| `draft` | `draft` | boolean | — |
+
+_Non-portable (React-only) props:_ `style`.
+
+**Slots:** `default`  
+**Contract:** [`components/Tag.json`](./components/Tag.json) · **hash** `sha256:91ee34eac1457016` · **exemplar:** [`exemplars/Tag.html`](./exemplars/Tag.html)
+
+## chrome
+
+### PageHeader `<wn-page-header>`
+
+PageHeader — extracted from designbook ui_kits/whynot-control/Chrome.jsx.
+
+| prop | attribute | type | default |
+| --- | --- | --- | --- |
+| `eyebrow` | `eyebrow` | boolean | — |
+| `title` | `title` | string | — |
+| `lede` | `lede` | boolean | — |
+| `actions` | `actions` | boolean | — |
+
+**Contract:** [`components/PageHeader.json`](./components/PageHeader.json) · **hash** `sha256:93e12068e2f58f10` · **exemplar:** [`exemplars/PageHeader.html`](./exemplars/PageHeader.html)
+
+### PipelineStrip `<wn-pipeline>`
+
+PipelineStrip — extracted from designbook ui_kits/whynot-control/Chrome.jsx.
+
+| prop | attribute | type | default |
+| --- | --- | --- | --- |
+| `activeIdx` | `active-idx` | number | `3` |
+
+**Contract:** [`components/PipelineStrip.json`](./components/PipelineStrip.json) · **hash** `sha256:167717c21cceff79` · **exemplar:** [`exemplars/PipelineStrip.html`](./exemplars/PipelineStrip.html)
+
+### Sidebar `<wn-sidebar>`
+
+Sidebar — extracted from designbook ui_kits/whynot-control/Chrome.jsx.
+
+| prop | attribute | type | default |
+| --- | --- | --- | --- |
+| `current` | `current` | enum(doc:) | — |
+
+_Non-portable (React-only) props:_ `onNav`.
+
+**Events:** `wn-nav`  
+**Variants:** current (doc:)  
+**Contract:** [`components/Sidebar.json`](./components/Sidebar.json) · **hash** `sha256:8340b292fff7a80d` · **exemplar:** [`exemplars/Sidebar.html`](./exemplars/Sidebar.html)
+
+### TopNav `<wn-top-nav>`
+
+TopNav — extracted from designbook ui_kits/whynot-control/Chrome.jsx.
+
+_Non-portable (React-only) props:_ `onNew`.
+
+**Events:** `wn-new`  
+**Contract:** [`components/TopNav.json`](./components/TopNav.json) · **hash** `sha256:32ebc6e46db38f93` · **exemplar:** [`exemplars/TopNav.html`](./exemplars/TopNav.html)

ir/README.md

@@ -0,0 +1,44 @@
+# `ir/` — technology-neutral design blueprint
+
+This directory holds the **intermediate representation (IR)** of the whynot design
+language: tokens, per-component contracts, and reference exemplars, in a form that
+carries no framework assumptions.
+
+## Decision: `ir/` is committed
+
+`ir/` is **checked into git**, on purpose. The IR is the diffable blueprint of the
+shared language — committing it means a re-extract (`make ir`) surfaces every
+blueprint change as a reviewable git diff, and adapters have a stable, versioned
+input. It is a build *input*, not a throwaway build *output*.
+
+What is committed:
+
+- `tokens.json` — all tokens, W3C DTCG format.
+- `components/<Name>.json` — one contract per component.
+- `exemplars/<Name>.{png,html}` — reference renders from the designbook preview.
+- `manifest.json` — the per-version inventory + diff anchor: `{ schemaVersion,
+  designVersion, generatedAt, tokensHash, components: [{ name, group, hash }] }`,
+  where each hash is a deterministic content hash (sha256 over canonicalised JSON).
+  This is what a consuming repo pins against and what the `drift` check compares
+  (WHYNOT-WP-0003). Validated by `schema/manifest.schema.json`.
+- `INDEX.md` — the human-readable catalog, generated from the same contracts:
+  per component its group, description, props/variants/slots/events, and a link
+  to its exemplar. Browse a version without cloning or running anything.
+- `schema/` + `SCHEMA.md` — the contract definitions (this is what T01 delivered).
+
+`manifest.json` and `INDEX.md` are generated by the same extractor as the rest of
+`ir/` and share its one-way rule — **do not hand-edit them.**
+
+## Direction of flow
+
+```
+Claude Design (React)  ──/design-sync──▶  designbook/  ──make ir──▶  ir/  ──make adapt-lit──▶  adapters/lit/
+```
+
+One-way. The only writer of `tokens.json`, `components/`, and `exemplars/` is the
+extractor (`scripts/ir-extract.mjs`, T05). **Do not hand-edit those** — change the
+language in Claude Design and re-propagate. The `schema/` files and these docs are
+the exception: they are authored here.
+
+See [`SCHEMA.md`](./SCHEMA.md) for the full contract spec and a worked `Button`
+exemplar.