sheleg-design-skill 1.8.0 → 1.10.0

package/CHANGELOG.md

@@ -4,6 +4,177 @@ All notable changes to this project are documented in this file. The format
 follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); versions
 follow [SemVer](https://semver.org/spec/v2.0.0.html).
 
+## [1.10.0] - 2026-08-10
+
+A fresh-eyes audit of the whole skill, and the finding is the green: at 1.9.0 all
+three gates passed — 1270 / 412 / 224 — while the skill told a reading agent
+there were six style packs, handed the chart layer a token ramp no pack defines,
+and stated thirteen contrast ratios that are wrong.
+
+Full report with every `file:line`, and the reproductions:
+[`docs/audit/2026-08-10-skill-audit.md`](./docs/audit/2026-08-10-skill-audit.md).
+
+### Fixed — what an agent was told that was not true
+
+- **The `dataviz` handoff named tokens no pack defines.** `SKILL.md` promised a
+  ramp `--accent-tint … --accent-deep`: `--accent-tint` exists in **one** pack of
+  twelve, `--accent-deep` in three, and **no pack has both**. It promised a
+  status set of `--good` / `--warning` / `--danger` that seven packs lack and
+  two have no version of at all. An undefined custom property does not error —
+  the declaration goes invalid at computed-value time and the property silently
+  inherits — so the agent follows the instruction exactly and the page is wrong.
+  The table is now written by role, and the non-uniform mappings are named.
+- **Thirteen stated contrast ratios, recomputed and corrected.** `blueprint`'s
+  ratio column is headed ``On `--bg` `` and every number in it was computed
+  against pure white (`--ink` 17.74 → **17.15**, `--accent` 7.53 → **7.28**,
+  pure black 21 → **20.31**). `prism` claimed ink "≥18:1 over all four stops"
+  three times; it is **15.85–16.82** — 18.95 is ink on plain white, carried onto
+  the wash. Also `showroom` 15.9 → **15.35** and 7.7 → **7.08**, `maquette` 5.0 →
+  **5.62** and 13.9 → **13.57**, `editorial-luxury` 6.1 → **6.93**, `workbench`
+  5.0 → **4.57**. None crossed a floor; all were presented as measured.
+- **Two packs justified one accent by a "symmetry" that is a mathematical
+  identity.** WCAG contrast is symmetric for every pair by definition. In
+  `showroom`, whose field is white, the sentence stated one measurement twice; in
+  `blueprint`, whose field is not, the two directions genuinely differ and the
+  pack asserted one number for both.
+- **`atrium` prescribed `transition: padding-top .2s` on a sticky header** — a
+  layout property, transitioned, on scroll: the exact form `MOTION_DOCTRINE.md`
+  forbids, shipped inside the bundle that ships the ban.
+- **`field-notes`' radius rule, its worked example and its token layer were three
+  different systems.** "Subtract the padding … `12 - 12 ≈ 7.2`" — subtraction
+  gives 0; the token layer uses `calc(var(--radius) * 0.6)`.
+- **`blueprint`'s Components and Hero instructed the violation its own Signature
+  element section names** (registration marks on both CTAs). `test/scenarios.md`
+  recorded this as "fixed in the same run"; only half of it had landed.
+- **`atrium` said three shadows exist**; its token layer defines four.
+- **The colour-blindness ban was copy-pasted into six packs**, asserting a
+  measurement across "several pairs" in packs owning one status colour or none —
+  and naming four states as if the pack supplied them, which is an invitation to
+  invent a hue. Rewritten for `orchard`, `editorial-luxury` and `briefing-room`.
+- **`MOTION_DOCTRINE.md` §5 over-banned**, forbidding everything outside four
+  properties while §2 prescribes an ease for colour changes. The ban is on
+  layout, which is what its own rationale says.
+- **ADR-0001 named a pack that never existed** (`lecture-hall`; the pack that
+  shipped from graphify.com is `field-notes`). The decision stands; the example
+  was written on a branch that never merged.
+
+### Added — the half-library nobody declared
+
+Six of twelve packs carry `## Components`, `## Hero`, `## Responsive` and
+`## Signature element`; six do not, and nothing said which. Every pack now
+declares **`Contract: core` or `Contract: widened`** above its Register, a core
+pack states what it leaves the reader to decide, the `SKILL.md` routing table
+marks it, and a check enforces the declaration against the headings present.
+
+### Added — six checks, each watched failing on a planted defect
+
+Counted claims (whitespace-normalised: the README's "six locked style packs" was
+split across a line break) · exhaustive pack enumerations in both manifests, the
+slash command, the CLI, the README and the Cursor rule · one name for the pack
+contract · the `Contract:` declaration · the core role vocabulary (`--bg`,
+`--ink`, and an accent role every pack resolves) · and **every stated contrast
+ratio, recomputed from the token layer**.
+
+The ratio check is scoped to claims whose base the document declares — a column
+headed ``On `--bg` ``, an `on/over --token` phrase, or an `--on-X` name. A first
+draft that inferred the partner produced 22 false positives out of 40.
+
+### Fixed — three gates that could not fail
+
+- **Deleting requirements made two gates quieter, and green.** Stripping a pack's
+  four widened headings took `validate.py` 1270 → 1269 and `sloplint.py` 224 →
+  223, both exit 0. **Ratchet floors** now live in `test/floors.json` and are
+  enforced by all three.
+- **One decoy comment disabled a slop-lint ban for a whole file, permanently.**
+  The check took the first match only and `continue`d past a nearby negation
+  word, so the counter fell and later occurrences went unexamined. Suppression is
+  now per occurrence, and ban-quoting sections are exempted by heading.
+- **`validate.py --self-test` printed OK for a self-test that did not exist** —
+  the same defect the 2026-08-05 retrospective recorded in `validate_palette.py`.
+  All three scripts now exit 2 on an unknown argument, and `validate.py` has a
+  real self-test: six planted defects, run against a copy of the tree.
+- **The slop lint read only fenced code blocks**, and no style pack contains one —
+  so all twelve packs, `SKILL.md`, both bridges and the AI patterns were never
+  linted. It now reads the inline CSS the packs prescribe in prose.
+- **`npm test` and both workflows now run every gate and every self-test.** The
+  release path was gated on one of three.
+
+### Fixed — stale counts and reach
+
+"six locked style packs" and "all six kits" (twelve), "T1–T7" (T1–T19), "Three
+packs extracted" (eight), the pack contract called nine / ten / thirteen in five
+places at once — one of which told an author to ship nine headings, which the
+gate then passed. `plugin.json`, `marketplace.json` and the `/sheleg-design`
+command named three packs of twelve, so nine could not be asked for by name.
+`MOTION_DOCTRINE.md`, marked REQUIRED, appeared on no install surface: it is now
+in the README table, the CLI help and banner, the slash command, and the Cursor
+rule — which gains the whole doctrine in condensed form.
+
+Gates: **1364 / 469 / 320**, from 1270 / 412 / 224.
+
+## [1.9.0] - 2026-08-09
+
+Four style packs, taking the library from eight to twelve — and a fix to the
+thing that would have made twelve worse than eight.
+
+Extracted from four live references on 2026-08-09. Three of them sell vector
+databases and none of them collapse into each other; two are the same company's
+project page and product page, and they share a type stack and nothing else.
+
+### Added
+
+- **`showroom`** — from [attio.com](https://attio.com/). A white gallery where
+  one real product surface is the exhibit, under a **seven-layer shadow**. The
+  reference declares its palette in **CIE Lab**, which this repo's palette gate
+  cannot parse; every value was converted by painting it into a canvas and
+  reading the sRGB bytes back — the browser's conversion, not ours.
+- **`blueprint`** — from [pinecone.io](https://www.pinecone.io/). A drawing
+  sheet: a 32px grid, ruled column boundaries, corner registration marks, one
+  electric blue that works as ink *and* as fill at 7.53:1 both ways, and **no
+  radius anywhere**.
+- **`prism`** — from [milvus.io](https://milvus.io/). One static iridescent wash
+  with a hard bottom edge, a heavy grotesque display over **mono body copy** —
+  the inversion that makes a page read as a project rather than a company.
+- **`maquette`** — from [zilliz.com](https://zilliz.com/). A near-black table
+  with a cream axonometric model on it, mono block labels, and the only accent in
+  this library's four new packs that works as text (15.49:1).
+- Four reference kits, each with the six-component spine plus four signature
+  parts, and four routing scenario pairs (**T16–T19**), every one with its
+  negative branch.
+
+### Fixed — the routing table, which was a list
+
+**Five of the eight shipped packs named no other pack at all.** Forks existed
+only in `field-notes`, `cyclorama` and `atrium`, and every one pointed backwards
+at packs that never pointed back — so an agent entering at `instrument-console`,
+which is where any infrastructure brief lands first, never learned that a
+distinction existed. Four more one-way forks would have made twelve packs with
+eight dead ends.
+
+- `instrument-console`, `workbench`, `field-notes` and `cyclorama` each gain the
+  mirror clause for the new pack that forks against them.
+- **A new `validate.py` check enforces it:** a markdown link from one pack to
+  another must be reciprocated. Watched failing against a planted defect before
+  it landed.
+
+### Fixed — in the packs, not in the references
+
+- **`blueprint`'s reference sets pure black as body ink**, on 316 elements, which
+  the doctrine bans. The pack ships the reference's *own* second ink `#111827`
+  (136 elements) and does not pretend it is the same colour: the two sit **21.2
+  apart** in OKLab.
+- **`showroom`'s reference names `#A4ADBA` "caption-foreground"** and it measures
+  **2.27:1** on its own white field. Kept, renamed `--disabled`, and captions
+  routed to an ink that passes.
+- **`prism`'s reference sets 72px display type in `#00B3FF`** — **2.36:1**, which
+  fails even the relaxed large-text floor. The cyan is a fill in this pack.
+- **Neither `blueprint` nor `prism` ships a `prefers-reduced-motion` branch** —
+  zero blocks each, against live marquee, ping, pulse and scroll. Both packs
+  require the branch their references omit.
+- **`maquette`'s status palette is derived, not extracted**, and the token layer
+  says so at the declaration. The reference exposes none; the first set this run
+  reached for was a framework default, and the palette gate caught it colliding.
+
 ## [1.8.0] - 2026-08-08
 
 An eighth style pack, and the first one whose reference already implements this

package/README.md

@@ -10,7 +10,8 @@ nothing. Ask it for a dashboard and you get a different flavor of the same
 problem — invented colors, six accent hues, dark mode retrofitted later.
 
 This skill is the taste layer. It gives a coding agent **one motion
-methodology** for cinematic, scroll-driven pages and **six locked style
+methodology** for cinematic, scroll-driven pages, **a motion doctrine** that
+decides whether to animate before it decides how, and **twelve locked style
 packs** with ready-made design tokens, so what it builds reads as one system
 instead of a pile of effects.
 
@@ -34,11 +35,13 @@ and collectively cinematic. One scroll "clock" feeds a WebGL particle field, a
 rail — each an independent, degrade-to-calm layer. Nothing crossfades; things
 *redeploy*.
 
-**Style packs** — the visual identity, pluggable per project. Two of them are
-meant to be used **standalone**, with none of the motion layer: `workbench`
-(quiet light/dark product UI for dashboards, admin panels, internal and dev
-tools) and `briefing-room` (a dark 16:9 presentation deck, where the presenter's
-voice is the timeline and slides therefore never animate).
+**Style packs** — the visual identity, pluggable per project. Three of them are
+meant to be used **standalone**: `workbench` (quiet light/dark product UI for
+dashboards, admin panels, internal and dev tools) and `briefing-room` (a dark
+16:9 presentation deck, where the presenter's voice is the timeline and slides
+therefore never animate) take none of the motion layer at all; `field-notes` is
+standalone by default — its reference carries no motion library — but may opt
+into the cinematic layer, and says so in its own *Motion flavor* section.
 
 | Pack | Look | Choose for |
 |---|---|---|
@@ -49,6 +52,10 @@ voice is the timeline and slides therefore never animate).
 | `atrium` | warm cream daylight field with no dark bands, one terracotta accent, light serif with italic asides, fluted-glass hero over photography | consumer health, longevity & diagnostics, wellness, premium care, high-trust DTC |
 | `orchard` | warm oat field of rounded slabs, sage brand + one candy-orange action, rounded geometric display, soft-3D pills built from inset light | friendly consumer biotech, DTC wellness, testing kits & supplements |
 | `field-notes` | warm green-cast paper ruled by hairlines, one rust accent, a hero that dissolves into the page instead of ending, numbered mono eyebrows, crop marks, colour that encodes how a claim is known | open-source & developer tools sold on auditability — code intelligence, provenance, evals, agent memory |
+| `showroom` | white gallery, near-black ink, one blue that works as link and as fill, Inter Display + Inter + JetBrains Mono, a seven-layer shadow framing one real product surface | product-led companies whose best argument is the application on screen |
+| `blueprint` | white drawing stock, 32px grid, ruled column edges, corner registration marks, one electric blue, zero radius anywhere | infrastructure sold on precision — vector databases, search, storage and query engines |
+| `prism` | one static iridescent wash with a hard bottom edge, heavy grotesque display over mono body copy, cyan as a fill only | an open-source project's front door, where the first action is a command |
+| `maquette` | near-black table, cream ink and cream axonometric models, mono block labels, pale aqua that works as text, one offset shadow | enterprise data infrastructure sold to an architecture buyer |
 | `cyclorama` | a pale field cycling through six pastel stops on a 32s loop under near-black ink that never moves with it, a monospaced typewriter serif over mono, one orange used only as a fill, a particle organ that holds then redeploys, no shadows anywhere | enterprise AI transformation, applied-AI services, technical consultancies — where what is sold is a change of state and there is no screenshot worth showing |
 
 Each pack locks palette, type, texture, motion tokens, signature motifs and
@@ -119,11 +126,12 @@ skills.
 |---|---|
 | `SKILL.md` | The agent-facing skill: discovery triggers, the principles, how to apply them, quick-reference rules, common mistakes |
 | `SHELEG_DESIGN.md` | The full reference: architecture, layer-by-layer mechanics with code, the exact morph math, the DOM↔WebGL projection bridge, a build-from-scratch recipe, and why each piece works |
+| `MOTION_DOCTRINE.md` | Whether to animate at all, before how: the frequency table that kills motion on high-repetition paths, the easing tree and the `ease-in` ban, the duration ceiling, the forbidden forms, and the reduced-motion contract. `SKILL.md` marks it required before any animation |
 | `DESIGN_SYNC_BRIDGE.md` | The Claude Design contract: what a pack sends to claude.ai/design and in what shape, the rule for each of the four reference types, and the border motion does not cross |
 | `FIGMA_BRIDGE.md` | The design↔code contract: how a pack's tokens map onto Figma variable collections and modes, how to implement a design without importing raw values, and what cannot cross the border |
 | `AI_PRODUCT_PATTERNS.md` | The surfaces a model drives: the five states of a call, streaming instead of spinners, latency, provenance and uncertainty, agent confirmations, and the bans that keep it honest |
-| `styles/*.md` | The eight style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
-| `styles/tokens/*.css` | The ready-made token layer per pack, copied verbatim instead of transcribed (workbench ships a light `:root` plus a `data-theme="dark"` twin) |
+| `styles/*.md` | The twelve style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
+| `styles/tokens/*.css` | The ready-made token layer per pack, copied verbatim instead of transcribed (`workbench` and `field-notes` each ship a light `:root` plus a `data-theme="dark"` twin) |
 | `styles/STYLE_PACK_TEMPLATE.md` | The pack contract as a skeleton, so a new style is authored against the same headings rather than improvised |
 
 ## What you get out of it
@@ -193,7 +201,7 @@ cd ./ds-workbench && npm install && npm run build
 then `/design-sync` in that directory, from Claude Code. Three layers cross: the
 pack's **bans** as the design system's own README, `styles.css` built from
 `tokens/<pack>.css` verbatim, and the components — a six-name spine that is
-identical in all six kits, so switching packs swaps identity rather than API,
+identical in all twelve kits, so switching packs swaps identity rather than API,
 plus each pack's signature parts. **Motion does not cross**, exactly as it does
 not cross into Figma: a kit is the static half of a pack, and saying so is what
 stops an agent inventing motion to fill the silence.
@@ -220,16 +228,29 @@ repo. Entirely optional; without it the skill works from the pack alone.
 python3 test/validate.py   # or: npm test
 ```
 
-The validator is the repo's contract, not a formality — it checks manifests and
-four-way version sync, skill/command/rule front-matter and description canon,
-the full style-pack section contract, pack ↔ `SKILL.md` ↔ CLI-help agreement,
-the bundled template against `templates/`, both installers' file lists, the
-entire `.cursor/` mirror against the plugin copy, and every relative link. CI
-runs it on each push and PR alongside a negative self-test (the validator must
-fail on a corrupted version) and installs the bundle through **both** installers,
-diffing the result against the source.
+`npm test` is **four gates**, not one, and `validate.py` alone is about a third
+of the contract:
 
-`test/scenarios.md` (T1–T7) is the behavioral harness: fresh subagents given a
+| Gate | What it decides |
+|---|---|
+| `test/validate.py` | manifests and four-way version sync · skill/command/rule front-matter and the description canon · the pack section contract (nine always, the widened four all-or-nothing) and each pack's `Contract:` declaration · the core role vocabulary (`--bg`, `--ink`, and a resolvable accent) in every token layer · every counted claim (packs, kits, scenarios, headings) · exhaustive pack enumerations in the manifests, the command, the CLI, the README and the rule · one name for the pack contract · fork reciprocity · the eleven kit checks · `install.sh`'s file list, both directions · the whole `.cursor/` mirror · every relative link |
+| `test/validate_palette.py` | contrast floors and semantic separation per theme, including three simulated dichromacies · AI-default-cluster provenance · **every contrast ratio the docs state, recomputed from the token layer** |
+| `test/sloplint.py` | the bundle obeying its own bans, in token layers, fenced examples **and the inline CSS the packs prescribe in prose** · doctrine completeness · pack origin addressability |
+| `node --check bin/cli.js` | the installer parses |
+
+Each gate ships a `--self-test` that plants a defect it must catch (`npm run
+selftest`), rejects an unknown argument instead of silently running the normal
+pass, and enforces a **ratchet floor** from `test/floors.json` — a check count
+that falls means a requirement stopped being required, which is how stripping
+a pack's four widened sections used to make two gates *quieter* and still green.
+
+One honest limit: the npx installer is checked by asserting its runtime bundle
+walker exists, not by reading a file list — it has none by design. What proves
+it ships the right files is CI, which installs the bundle through **both**
+installers and `diff -r`s the result against the source, then builds all twelve
+kits.
+
+`test/scenarios.md` (T1–T19) is the behavioral harness: fresh subagents given a
 task, checking that the skill is discovered, applied and quoted correctly.
 Re-run the affected scenarios after any edit to `SKILL.md`, a pack or the
 reference.

package/bin/cli.js

@@ -228,16 +228,23 @@ ${c("bold", "Default")}
 ${c("bold", "What it installs")}
   SKILL.md             the agent-facing skill (discovery + principles)
   SHELEG_DESIGN.md     the full reference (architecture, recipes, why it works)
+  MOTION_DOCTRINE.md   whether to animate at all — frequency, easing, duration,
+                       forbidden forms, the reduced-motion contract
   FIGMA_BRIDGE.md      the design↔code contract (tokens ⇄ Figma variables)
+  DESIGN_SYNC_BRIDGE.md   the Claude Design contract (what a pack sends, and
+                       what does not cross)
   AI_PRODUCT_PATTERNS.md  chat / agent / streaming surfaces (honest state)
-  styles/              eight style packs — instrument-console (dark console),
+  styles/              twelve style packs — instrument-console (dark console),
                        editorial-luxury (warm editorial), workbench (light/dark
                        product UI), briefing-room (dark 16:9 presentation deck),
                        atrium (warm cream consumer health), orchard (friendly
                        consumer biotech), field-notes (warm paper dev tools),
-                       cyclorama (a pastel field on a 32s cycle, for enterprise
-                       AI transformation) — plus a ready-made token CSS per pack
-                       and STYLE_PACK_TEMPLATE.md for authoring more
+                       cyclorama (a pastel field on a 32s cycle), showroom
+                       (the product as the exhibit), blueprint (a drawing sheet,
+                       zero radius), prism (one iridescent wash over mono body),
+                       maquette (cream axonometric models on a dark table) —
+                       plus a ready-made token CSS per pack and
+                       STYLE_PACK_TEMPLATE.md for authoring more
 `);
 }
 
@@ -314,12 +321,13 @@ function main() {
   const rel = path.relative(cwd, targetDir) || ".";
   console.log(
     `\n${c("green", "✓")} ${c("bold", "SHELEG Design")} installed to ${c("blue", rel + "/")}\n` +
-      `  ${c("dim", "SKILL.md")}          the agent skill\n` +
-      `  ${c("dim", "SHELEG_DESIGN.md")}  the full reference\n` +
-      `  ${c("dim", "styles/")}           style packs + token CSS (instrument-console / editorial-luxury / workbench / briefing-room / atrium / orchard / field-notes / cyclorama)\n\n` +
+      `  ${c("dim", "SKILL.md")}            the agent skill\n` +
+      `  ${c("dim", "SHELEG_DESIGN.md")}    the full reference\n` +
+      `  ${c("dim", "MOTION_DOCTRINE.md")}  whether to animate at all — read before any animation\n` +
+      `  ${c("dim", "styles/")}             style packs + token CSS (instrument-console / editorial-luxury / workbench / briefing-room / atrium / orchard / field-notes / cyclorama / showroom / blueprint / prism / maquette)\n\n` +
       `Your Cursor / Claude agent can now discover the skill and build\n` +
-      `cinematic, scroll-driven pages — or style product UI (dashboards,\n` +
-      `admin, internal tools) from the workbench pack — on its principles.\n\n` +
+      `cinematic, scroll-driven pages — or style product UI (dashboards, admin,\n` +
+      `internal tools) from a standalone pack — on its principles.\n\n` +
       `${c("dim", "Docs: " + pkg.homepage)}\n`,
   );
 }

package/cursor/rules/sheleg-design.mdc

@@ -9,7 +9,8 @@ A page feels cinematic from a **single source of truth** (measured scroll
 position) driving **many cheap, layered, independently-degradable responses** —
 not from many animations. If the project has the full skill installed
 (`.cursor/skills/sheleg-design/`), read its `SKILL.md`, `SHELEG_DESIGN.md`,
-and the chosen style pack in `styles/` first (instrument-console — dark
+`MOTION_DOCTRINE.md` (before any animation) and the chosen style pack in
+`styles/` first (instrument-console — dark
 console; editorial-luxury — warm editorial; workbench — quiet light/dark
 product UI for dashboards and tools, used standalone without the cinematic
 motion layer; briefing-room — dark 16:9 presentation deck, standalone, slides
@@ -20,9 +21,49 @@ tools on warm green-cast paper ruled by hairlines, one rust accent, a hero
 that dissolves into the page, and colour that encodes how a claim is known;
 cyclorama — enterprise AI transformation on a pale field that cycles through
 six pastel stops on a 32s loop under fixed near-black ink, a monospaced
-typewriter serif, one orange used only as a fill, and no shadows at all);
+typewriter serif, one orange used only as a fill, and no shadows at all;
+showroom — a white gallery where one real product surface is the exhibit,
+under a seven-layer shadow; blueprint — a drawing sheet for infrastructure
+sold on precision: grid, ruled columns, registration marks, one electric
+blue and zero radius; prism — an open-source project's front door, one
+static iridescent wash over mono body copy; maquette — enterprise data
+infrastructure as a cream axonometric model on a near-black table);
 otherwise follow the contract below (self-contained on purpose).
 
+## Whether to animate at all — before how
+
+Frequency decides before taste gets a vote. (Full doctrine:
+`MOTION_DOCTRINE.md` in the installed skill.)
+
+- Seen 100+ times a day — command palette, keyboard shortcut, tab switch:
+  **no animation, ever.** Never animate a keyboard-initiated action; it turns
+  instant into laggy and disconnects the result from the keypress.
+- Tens of times a day — hover, list navigation, inline toggles: remove it or
+  cut it to the floor. Occasional (modals, drawers, toasts): standard. Rare or
+  first-time (onboarding, empty-to-filled): delight is allowed.
+- Every animation answers "why does this move?" in one sentence — spatial
+  consistency, state indication, feedback, explanation, or preventing a jarring
+  cut. "It looked cool" is not an answer; if you cannot write the sentence,
+  delete the animation.
+- **`ease-in` is banned in UI.** It starts slow, in the exact moment the user is
+  watching hardest. Entering or leaving → `ease-out`; moving or morphing on
+  screen → `ease-in-out`; hover or colour change → `ease`; constant motion →
+  `linear`. Curves: `--ease-out: cubic-bezier(.23,1,.32,1)`,
+  `--ease-in-out: cubic-bezier(.77,0,.175,1)`,
+  `--ease-drawer: cubic-bezier(.32,.72,0,1)`.
+- **UI motion stays under 300 ms.** Button press 100–160ms · tooltip 125–200ms ·
+  dropdown 150–250ms · modal/drawer 200–500ms. Marketing and scrollytelling are
+  deliberately longer.
+- Never animate a property that triggers layout (`width`, `height`, `top`,
+  `left`, `padding`, `margin`, `gap`, `font-size`). Never a bare scroll
+  listener, never `requestAnimationFrame` writing component state, never
+  `backdrop-filter` or grain on a scrolling container, never a left-behind
+  `will-change`, never two marquees.
+- **Reduced motion is a contract, not a feature.** Anything beyond a colour
+  change honours `prefers-reduced-motion: reduce`; loops, parallax and springs
+  collapse to static or instant, never to "slower". Shipping an animation
+  without that branch is a bug, not a polish item.
+
 ## Five principles, in order
 
 1. **One clock.** All motion derives from one measured scroll state in one

package/kits/atrium/src/styles.css

@@ -119,7 +119,7 @@
   --track-mono: 0.1em;
   --track-mono-sm: 0.07em;
 
-  /* ---- Elevation: three shadows, one job each -------------------------- */
+  /* ---- Elevation: four shadows, one job each --------------------------- */
   --shadow-panel: 12px 32px 80px 0 rgba(42, 43, 47, 0.1); /* the hero panel */
   --shadow-lift: 0 4px 30px 0 rgba(0, 0, 0, 0.1); /* a card pulled forward */
   --shadow-cta: 0 2px 12px 0 rgba(0, 0, 0, 0.1); /* a button on photography */
@@ -175,7 +175,6 @@
     --marquee-cycle: 0s;
   }
 }
-
 /* ── components ── */
 
 /* Everything below consumes var(--…) only. Colour never appears as a literal:

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

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

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

@@ -0,0 +1,52 @@
+# Blueprint — the contract this design system ships under
+
+**Register.** Choose Blueprint for **infrastructure sold on precision**: vector
+databases, search and retrieval, storage and query engines. Its vocabulary is
+technical drafting — a white sheet, a 32px grid, ruled column edges, registration
+marks, one saturated blue used the way a draftsman uses ink. The fork people get
+wrong is against `field-notes`: that pack is **warm paper** arguing from
+provenance (*how do you know*), this one is **cold stock** arguing from precision
+(*how is it built*). Against `instrument-console`: that pack's subject is a
+running system with a changing value; this one's is a mechanism drawn to scale.
+Build every screen against `var(--…)` and never a literal.
+
+**There is no radius.** `--radius: 0`, everywhere, and the token exists so the
+ban is greppable. The single exception is `--radius-round: 50%` for a dot or an
+avatar. Most component libraries ship a default radius — zero it globally rather
+than per component, or the page ends up with three rounded inputs nobody notices
+until it looks cheap and nobody can say why.
+
+**One blue does everything.** `--accent` `#002BFF` measures 7.53:1 as text on the
+stock *and* 7.53:1 under white. It sets a heading word, draws a 1.5px rule, fills
+a button and rings a focused input, with no second token. It is unusually
+saturated and vibrates against `--ink` at small sizes — never set body copy in
+it.
+
+**The ink is not the reference's ink, and the pack says so.** The reference sets
+pure black on 316 elements; the doctrine bans pure black as ink. This system
+ships `#111827` — the reference's own second ink, on 136 of its elements. The two
+sit 21.2 apart in OKLab: it is a visible substitution, not a rounding.
+
+**Category marks are squares, not circles.** A circle is a status; a square is a
+kind. Every pair clears both separation floors under all three dichromacies —
+label them anyway, because a legend of four coloured squares is a legend nobody
+reads.
+
+**Bans** (verbatim from the pack):
+
+- A radius. Any radius, on anything, except `50%` for a dot or an avatar.
+- A shadow used for elevation.
+- `--ink-faint` as text; `--accent` as a large field fill.
+- A circle used as a category mark; a category colour used to mean health.
+- The annotation size without its tracking; caps annotations set at 0.
+- A geometric or humanist substitute for the display face.
+- Fluid `clamp()` type; `transition: all`; `100vh`; a scroll listener.
+- Animating the grid, or parallaxing it.
+- A screenshot as the hero's figure. Draw it, or use `showroom`.
+
+**The reference ships no `prefers-reduced-motion` branch at all**, against live
+marquee, ping, pulse and scroll animations. This system requires the branch its
+reference omits.
+
+Motion is not part of this design system and must not be invented: a kit is the
+static half of a pack, and anything that moves stays behind in the pack.

package/kits/blueprint/README.md

@@ -0,0 +1,14 @@
+# @sheleg-design/blueprint
+
+The React reference kit for the SHELEG **Blueprint** style pack — a drawing sheet: grid, ruled columns, registration marks, one electric blue, and zero radius anywhere.
+
+It is generated from the pack, not authored beside it: `src/styles.css` opens
+with `styles/tokens/blueprint.css` byte for byte, and the rules the design agent
+must obey are in [`.design-sync/conventions.md`](./.design-sync/conventions.md).
+
+```bash
+npm install && npm run build
+```
+
+Then run `/design-sync` in Claude Code from this directory to push it to
+claude.ai/design.

package/kits/blueprint/package.json

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

package/kits/blueprint/src/Button.md

@@ -0,0 +1,5 @@
+---
+category: Actions
+---
+
+**Zero radius**, like everything in this pack. The primary carries registration marks at its four corners — that is the pack's signature and it belongs on the one action the page wants, not on every button.

package/kits/blueprint/src/Button.tsx

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

package/kits/blueprint/src/Card.md

@@ -0,0 +1,5 @@
+---
+category: Surfaces
+---
+
+A panel: `--surface` on a 1px `--line`, **0 radius**, no shadow. Elevation here is a hairline; `--shadow-panel` exists only for a genuinely floating popover.

package/kits/blueprint/src/Card.tsx

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

package/kits/blueprint/src/Chip.md

@@ -0,0 +1,5 @@
+---
+category: Data
+---
+
+A category mark — a **square**, never a circle. A circle is a status; a square is a kind. Every pair of category colours clears both separation floors, but label them anyway.

package/kits/blueprint/src/Chip.tsx

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

package/kits/blueprint/src/CodeLine.md

@@ -0,0 +1,14 @@
+---
+category: Data
+---
+
+JetBrains Mono on `--surface-2`, **zero radius**, a `$` prompt in `--ink-faint`,
+a copy control at the right.
+
+The control changes its **label**, not only its colour. A colour-only
+confirmation is invisible to a meaningful share of the readers this page is for,
+and it is the same rule the pack applies to its category marks.
+
+```tsx
+<CodeLine command="pip install pinecone" copied={done} onCopy={copy} />
+```