sheleg-design-skill 1.29.0 → 1.32.0

package/CHANGELOG.md

@@ -4,6 +4,230 @@ 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.32.0] - 2026-08-15
+
+**The pack met a product surface, and three of its own measurements did not survive
+the meeting.** `tenor` was mounted on a populated twenty-route dashboard behind a
+`?pack=` switch — the "mount them, don't imagine them" procedure `SKILL.md` prescribes
+— and every finding below came from a screen with real data on it rather than from a
+re-read. Each is reproduced by a number the token layer now carries and
+`validate_stated_ratios` now checks.
+
+### Fixed — in `tenor`
+
+- **The reference puts the wrong label on its own accent, and the pack copied the
+  workaround instead of the fix.** Gotcha 3 measured `--paper` on the orange at 3.02:1,
+  correctly, and concluded that a control whose label is its only statement must keep
+  its ink fill and move its *border* to the accent. It never measured the other
+  direction: `--coal` on the same orange is **5.84:1**. `--accent-ink` is the coal now,
+  declared once and deliberately not overridden on the dark band — the orange does not
+  change between fields, so neither does the only label readable on it. The hover fill,
+  which is this pack's most recognisable interaction, is legal after all.
+- **Gotcha 1's remedy was short on the pack's own second field.** It said to darken
+  `--ink-soft` "to at least `#6f6f6b`", which clears 4.67:1 on `--bg` and only **4.27:1**
+  on `--bg-deep` — a field the pack spends on a whole section. A remedy nobody
+  re-measures is a defect with a citation attached. **New `--ink-soft-aa` `#6b6b67`**:
+  4.95:1 and 4.53:1, the smallest step that holds on both. `--ink-soft` keeps the
+  reference's value and is now marked for the tracked mono labels, not for prose.
+- **`--warn` is the accent, and a product surface sets warn as a word.** At 3.02:1 the
+  orange cannot carry one. **New `--warn-ink` `#94400f`** — the same hue on the value
+  axis, 6.47:1 on `--bg` and 5.93:1 on `--bg-deep`. `--warn` stays the mark (the dot,
+  the edge rule, the fill); the two are one severity in two roles, which is the split
+  `--sev-ask`/`--sev-limit`/`--sev-never` already models. On the dark band the orange
+  clears AA unaided, so `--warn-ink` remaps back to the accent there.
+- **The dark band's `--bg-deep` resolved to the field it sits on.** Correct for a band,
+  which has no hover and no resting chip; a rule that silently does nothing on a product
+  surface, which has both. Derived to `#222221` — paper at 8% over the coal, 1.20:1
+  against `--bg`, and `--ink` 14.73:1 / `--ink-soft` 6.31:1 / `--good` 7.07:1 on it.
+
+### Added — in `tenor`
+
+- **`--coal`**, beside `--paper`. The pack has two materials and named only one, which is
+  why the dark band restated `#f7f6f2` as a literal that then had to agree with the light
+  block by hand. `--ink` is `var(--coal)` on the paper and `var(--paper)` on the band.
+- **`### On a product surface`**, inside `## Components`. Five things a marketing page
+  never exercises, each derived and each found on the dashboard: no dark theme exists and
+  a product with a toggle has to pick one of three answers; ranking by value costs the
+  link its affordance, and the pack's own flipped-origin rule is the fix (static
+  underline in a table — fifty animated rules is the marquee ban in another costume); a
+  rail's selected row is the lattice cell's inversion held open; **a column of chips is
+  where the single hairline stops separating**, which makes the Register's "not for dense
+  operator chrome" specific rather than a blanket refusal; and prose sits on two fields
+  at once. What does not change: the spacing scale and the type ramp, which are page
+  values.
+
+### Note
+
+`--bg-deep` on the dark band was written into this changelog's draft as 1.41:1 against
+`--bg` and is **1.20:1**. The number was asserted rather than computed, and
+`validate_stated_ratios` caught it before the commit — the check earning its keep on the
+run that extended it.
+
+## [1.31.0] - 2026-08-14
+
+**T29 ran, and the pack it was written for did not survive it intact.** Both branches
+green — the routing worked — and the pair returned forty-one findings, twenty-six of them
+against `paperclip`, a pack that had passed all three gates three times. Every one was
+reproduced before an edit; every one is fixed here.
+
+### Fixed — in `paperclip`, found by T29a
+
+- **`--cream` was prescribed and never declared.** The dark primary button's hover was
+  specified to keep its label and border at `--cream`, a token this pack does not ship. It
+  means `--accent`, and now says so.
+- **The dark card hover was a no-op.** A card rests at `--surface` and the hover was
+  written as `--surface`. A card and a grid cell are now separated: the cell rests at
+  `--bg` and hovers one step toward the card's fill; the card does not hover at all.
+- **`--terminal-dim` at 2.92:1 was the label of a tab a reader has to click.** Repaired to
+  `--terminal-mid` (5.64:1). `--terminal-dim` survives for the prompt glyph, which is
+  `aria-hidden` punctuation, and now carries an `@role non-text:` note saying so.
+- **`--shadow-alert` was a second resting shadow in a pack that claimed one** — and it
+  hardcoded the reference's **light**-theme amber into a value only ever painted on the
+  dark field. Derived from `--warn` with `color-mix()`, and the Texture section now names
+  both shadows.
+- **All three stagger formulas hardcoded `.14s`.** Zeroing `--stagger` under reduced
+  motion would have left every one of them running. They spend `var(--stagger)` now, and
+  the pack says why in the sentence that used to say "change it in one place".
+- **The reduced-motion blanket had no mechanism for half of what it promised.** The
+  marquee and the two 1.5s trace loops are literals inside `animation` shorthands, which no
+  token can zero. The pack now ships the rule block beside the token list.
+- **The signature element's generation rule did not reproduce its own artwork.** The
+  bottom stop was stated at −10.3°/step and does not land on the last capsule; the value
+  implied by the anchors is **−10.45°**. "Near-constant saturation and lightness" was true
+  of the top ramp (S 96→84, L 56→48) and false of the bottom (S 96→69, L 56→33) — the
+  bottom stop darkens as it turns, which is what keeps the curtain's lower edge off the
+  field. Both ramps are now stated separately, and "forty-five gradients" no longer sits
+  two sentences from "every capsule is filled with its own": a column carries twelve and
+  the eight columns reuse the ramps, four of them in reverse.
+- **The concentric-radius rule was arithmetically wrong about a nest that does not exist.**
+  `8 − 2 ≈ 4.8` is 6, and the reference's tab group sits inside a header with no radius.
+  The rule is now declared as the pack's own decision, with a worked example that computes,
+  and the reference's actual behaviour — pick by element size, no arithmetic — recorded.
+- **`--radius-lg` was called "never spent" and is spent five times**, on the three large
+  mock panels. `--radius-md` is the rung that is never spent.
+- Smaller, and all reproduced: the artwork called 1200px *tall* where 1200 is its frame's
+  width (it is a 560 × 630 curtain in a 1200 × 675 frame); "nothing in this pack overlaps"
+  in a pack whose hero is an overlap; a 1.5 line-height floor claimed against a display
+  ramp that runs 0.98; `--font-serif` and `--font-sans` named as if the layer declared
+  them; an icon range of 14–16px that excluded the pack's own 11px nav glyph; a mono ramp
+  called width-invariant beside an axis mark that steps at 768px; a Gotchas count of seven
+  where eight are defects; the grain's 512-unit filter in a 256px tile, which is the
+  reference's own arrangement and doubles the effective frequency to ~5.9 — now stated with
+  its consequence rather than repaired; weight 450 prescribed in a pack that documents 450
+  as unrenderable; and an invented "roughly 22 characters per line", replaced by the two
+  lines the reference actually sets.
+
+### Fixed — in neighbours, found by the same run
+
+- **`ora`'s merge-time fork clause called this pack "three grotesques and a monospace".**
+  It is two grotesques and a monospace; the pack's own Bans cap it at three families.
+- **`SKILL.md` marked three packs `(standalone)` and its ceiling paragraph named four.**
+  `ora`, `tenor` and `paperclip` all declare standalone in their own Registers and all
+  three pin a ceiling — 4, 4 and 5 — that the paragraph never mentioned. An agent choosing
+  any of them off the table alone would have taken `MOTION_INTENSITY` 7 from the marketing
+  row. All three are marked and all three ceilings enumerated.
+
+### Added
+
+- **`--terminal-dot`, `--mark-rest`, `--scrim`** — three colours the pack spent as literals
+  in its Components section. `--scrim` is `#0a0a0a8c` in **both** themes, because the
+  reference veils a light modal in coal too, and it stays a literal because the palette gate
+  cannot compute a `color-mix()` into `transparent` — and an unparseable token is a failure
+  there, not a skip.
+- **`--t-hero-art` and `--t-hero-copy` in the Motion tokens table**, which shipped in the
+  token layer and appeared only as prose. The table is now the whole set.
+- **B-038 … B-043** — fifteen findings against `instrument-console` from T29b, filed rather
+  than fixed because they belong to a shipped pack this run does not own. Four reproduced
+  first: zero `--danger`/`--info` tokens against Bans that legislate for four statuses; a
+  pressed primary label at **3.06:1**; one of only two token layers with no
+  `prefers-reduced-motion` branch, in the pack that mandates a particle field; and a Bans
+  line that forbids coloured shadows "besides `--accent-glow`", which is a colour.
+
+## [1.30.0] - 2026-08-14
+
+A twentieth pack, **`paperclip`**, extracted from a live reference rather than composed:
+<https://paperclip.ing>, read from the two shipped stylesheets
+(`/_next/static/chunks/0sw-z-v7xc9dd.css`, 622 rules; `/_next/static/chunks/19xj4kovk13jy.css`,
+712 rules), the hero's inline SVG and the `@font-face` block. It is the first pack whose
+thesis is that **colour is ornament**: there is no functional colour anywhere in the
+interface, and the whole chromatic budget is spent on two things a reader cannot click.
+
+Authored on `feat/paperclip-pack` in a dedicated worktree while another run held the
+`PACK-TENOR` lease on the shared checkout, per `docs/DOCMAP.md`. That run landed `ora` and
+`tenor` as 1.29.0 while this branch was open — including the version this branch had
+already taken — so the merge moved it to 1.30.0 and recounted every site from eighteen to
+twenty. Nothing was lost in either direction; the counted-claims gate named all eleven
+sites that needed moving.
+
+### Added
+
+- **`styles/paperclip.md` + `styles/tokens/paperclip.css` — widened contract, all thirteen
+  headings.** A neutral coal field (`#0a0a0a`) with `#fafafa` ink at 18.97:1, and a light
+  twin on pure white at 19.80:1 that has **no elevation step at all**: the reference sets
+  `--background` and `--card` to the same white and separates a card from the page with a
+  1px rule and nothing else.
+- **The accent is the inverted field, and colour is ornament.** Every control is
+  monochrome — `.navbar-cta`, `.hero-btn-primary`, `.sim-submit` and `.cta-btn` are one
+  component wearing four names — and the pack's central rule is one sentence: a gradient
+  that can be clicked, hovered or focused has left the pack. The corollary is what makes
+  the four status hues land: because colour is spent entirely on things that do nothing,
+  anything coloured reads as scenery.
+- **The capsule curtain as the signature element.** 96 capsules in 8 columns on a 70px
+  pitch, each 70 × 170 at `rx: 35`, stepped 34.5px so every capsule covers all but a
+  34.5px band of the one above it. The 45 gradients filling them are **generated, not
+  chosen**: the top stop rotates forward around the hue wheel by ~12.4° per capsule and
+  the bottom stop backward by ~10.3°, at near-constant saturation and lightness — so the
+  stops stay near-complementary and each column inverts its own gradient between its first
+  capsule and its last. Measured across all 45 gradients and 89 distinct stops.
+- **One noise recipe, on every saturated surface and nowhere else.** `fractalNoise`,
+  `baseFrequency 2.95`, 5 octaves, seed 9, tiled at 256px under `isolation: isolate` with
+  `mix-blend-mode: overlay` — 12% on a section badge, 86% over the artwork through an
+  alpha mask of the capsules themselves. The same seed on both, which is why a
+  twelve-gradient page does not band.
+- **Twelve section-badge gradients, each with its own hand-picked label ink** — white on
+  six, and `#2a1530` / `#3d3010` / `#1a2a40` / `#2a2340` / `#1a3a38` on the five light
+  ramps, because a 90° gradient has two ends and one label has to clear both.
+- **`kits/paperclip/` — the React reference kit**, the six-name spine plus seven signature
+  components: `CapsuleCurtain`, `SectionBadge`, `HairlineGrid`, `OrgNode`, `LedgerRow`,
+  `ScheduleLane`, `Terminal`. `src/styles.css` opens with the token layer byte for byte,
+  and four of the seven carry `container-type: inline-size`, so no component in the kit is
+  sized by the screen.
+- **`T29` in `test/scenarios.md`** — the operator register and its fork against the
+  console, with the negative branch, and a second rejected pack because `ora` now sits
+  inside the same silhouette. **Written and not yet run**, and the scenario says so in its
+  own Result line rather than in a footnote.
+
+### Fixed — in the pack, against its own reference
+
+- **`--info` is derived and marked derived.** The reference's dark block overrides five
+  status *icon* colours and leaves the four base status colours at their light values, so
+  `--status-task-in_progress` renders at **3.83:1** on the coal field and is set as text
+  (`● 1 live`). The pack ships `#60a5fa`, the 400 step of the same ramp, at 7.79:1.
+- **The focus ring is kept.** The reference's one text input sets `outline: none` on focus
+  and replaces the ring with a 1px border colour change.
+- **Two 1.5s infinite loops are stopped under `prefers-reduced-motion`.** `dotPulse` and
+  `statusBlink` survive the reference's own reduced-motion blocks, which do calm the hero,
+  the parallax, the marquee tracks and the modal.
+- **The budget bar animates `transform: scaleX()`**, not `width` for 1.2s per bar with six
+  bars in view.
+
+### Changed
+
+- **Four reciprocal fork clauses.** `instrument-console`, `workbench` and `orchard` each
+  gain one against `paperclip`; `ora` and `paperclip` gain the pair in both directions,
+  which is the one edge no gate could have asked for — neither pack existed in the other's
+  tree, so `validate_fork_reciprocity()` had nothing to check. The two are the closest in
+  the library: both dark by default, both refusing a brand hue, both spending the accent as
+  the inverted field. Three tests separate them, and both packs now carry all three.
+- Counts moved from nineteen to twenty in the README, `bin/cli.js`, the three manifests,
+  `SURFACE_COMPOSITION.md`, `MOBILE_SURFACES.md` and `DESIGN_SYNC_BRIDGE.md`; the
+  `@role non-text:` tally is recomputed (fourteen of twenty, from thirteen of nineteen) and
+  the accent tally with it (eighteen, from seventeen).
+- `/sheleg-design`'s by-name fast path said "the fourteen are" over a list of nineteen —
+  a count no gate reads, because it has no counted noun after it. It now says twenty and
+  lists them.
+- `SKILL.md`'s core-contract paragraph: six of the twenty, the other fourteen.
+
 ## [1.29.0] - 2026-08-14
 
 A nineteenth pack, **`tenor`**, and the first one in the library extracted from a

package/README.md

@@ -11,7 +11,7 @@ problem — invented colors, six accent hues, dark mode retrofitted later.
 
 This skill is the taste layer. It gives a coding agent **one motion
 methodology** for cinematic, scroll-driven pages, **a motion doctrine** that
-decides whether to animate before it decides how, and **nineteen locked style
+decides whether to animate before it decides how, and **twenty locked style
 packs** with ready-made design tokens, so what it builds reads as one system
 instead of a pile of effects.
 
@@ -64,6 +64,7 @@ into the cinematic layer, and says so in its own *Motion flavor* section.
 | `roster` | a white field in a faint grid of squares, hairlines instead of shadows, a display set in the **body** face while the section heads take another, and one orange that may never carry a word | products whose argument is **who already carries them** — AI-search and GEO visibility, SEO and content platforms, agencies, marketplaces, integration-led tooling |
 | `ora` | a warm coal field with cream ink and **no third hue** — the accent is the inverted field, so the one solid object on a page is the one meant to be pressed — a serif doing the sans job over a monospace that carries every machine fact, a terminal surface cut *below* the page plane, a six-step verdict ramp, and dark as the default theme rather than the option | products whose output is **a machine's verdict about the reader** — agent-readiness and crawlability scores, SEO and answer-engine audits, agent-run traces, MCP and protocol surfaces, bot observability |
 | `tenor` | warm paper with **zero radius and zero shadow anywhere**, a single hairline weight assembling every lattice, and one orange that exists only on hover and on focus — so the page screenshots with no colour in it at all — a sans held at weight 400 and tracked negative against a mono tracked positive, display at a line-height below one in an eight-to-twelve-character measure, and proof delivered as silent looping video in a 1px rectangle | products arguing a **management thesis** — that a new kind of thing has to be run like an existing organisation: AI-workforce and agent-operations platforms, autonomous back-office, revenue and sales operations, sold to the director who will have to manage it |
+| `paperclip` | neutral coal with **no functional colour at all** — every control monochrome, elevation made of hairlines, and the whole chromatic budget spent on a curtain of 96 gradient capsules and twelve gradient section badges that cannot be clicked — a tight grotesque over a plain one over a monospace, and the capsule as the shape of everything from a button to a 10 × 20 schedule tick | products that ask a person to **run something that runs itself** — agent teams and orchestrators, autonomous back-office, schedulers, job runners, budget-governed compute |
 
 Each pack locks palette, type, texture, motion tokens, signature motifs and
 bans — and ships a `tokens/<pack>.css` to copy verbatim, so the agent never
@@ -138,7 +139,7 @@ skills.
 | `DESIGN_SYNC_BRIDGE.md` | The Claude Design contract: what a pack sends to claude.ai/design and in what shape, the rule for each of the four reference types, and the border motion does not cross |
 | `FIGMA_BRIDGE.md` | The design↔code contract: how a pack's tokens map onto Figma variable collections and modes, how to implement a design without importing raw values, and what cannot cross the border |
 | `AI_PRODUCT_PATTERNS.md` | The surfaces a model drives: the five states of a call, streaming instead of spinners, latency, provenance and uncertainty, agent confirmations, and the bans that keep it honest |
-| `styles/*.md` | The nineteen style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
+| `styles/*.md` | The twenty 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 |
 
@@ -209,7 +210,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 nineteen kits, so switching packs swaps identity rather than API,
+identical in all twenty 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.
@@ -255,7 +256,7 @@ a pack's four widened sections used to make two gates *quieter* and still green.
 One honest limit: the npx installer is checked by asserting its runtime bundle
 walker exists, not by reading a file list — it has none by design. What proves
 it ships the right files is CI, which installs the bundle through **both**
-installers and `diff -r`s the result against the source, then builds all nineteen
+installers and `diff -r`s the result against the source, then builds all twenty
 kits.
 
 `test/scenarios.md` (T1–T19) is the behavioral harness: fresh subagents given a

package/bin/cli.js

@@ -234,7 +234,7 @@ ${c("bold", "What it installs")}
   DESIGN_SYNC_BRIDGE.md   the Claude Design contract (what a pack sends, and
                        what does not cross)
   AI_PRODUCT_PATTERNS.md  chat / agent / streaming surfaces (honest state)
-  styles/              nineteen style packs — instrument-console (dark console),
+  styles/              twenty 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
@@ -255,7 +255,10 @@ ${c("bold", "What it installs")}
                        whose accent is the inverted field, a serif over mono,
                        and a terminal cut below the page), tenor (warm paper at
                        zero radius and zero shadow, one orange that exists only
-                       on hover, and proof delivered as silent looping video) —
+                       on hover, and proof delivered as silent looping video),
+                       paperclip (neutral coal with no functional colour at all
+                       and one curtain of gradient capsules that cannot be
+                       clicked, for products that run themselves) —
                        plus a ready-made token CSS per pack and
                        STYLE_PACK_TEMPLATE.md for authoring more
 `);

package/cursor/rules/sheleg-design.mdc

@@ -52,7 +52,11 @@ exists only on hover and on focus, a sans at weight 400 tracked negative
 against a mono tracked positive, display at a line-height below one in an
 eight-to-twelve-character measure, and proof delivered as silent looping
 video, for products arguing that a new kind of thing must be managed like an
-existing organisation);
+existing organisation; paperclip — neutral coal with no functional colour
+anywhere, every control monochrome and elevation made of hairlines, the whole
+chromatic budget spent on a curtain of gradient capsules and a row of gradient
+section badges that cannot be clicked, for products that ask a person to run
+something that runs itself);
 otherwise follow the contract below (self-contained on purpose).
 
 ## Whether to animate at all — before how

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

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

@@ -0,0 +1,62 @@
+# Paperclip — the design contract
+
+The reference is <https://paperclip.ing>, measured 2026-08-14 from the two shipped
+stylesheets (`/_next/static/chunks/0sw-z-v7xc9dd.css`, 622 rules, and
+`/_next/static/chunks/19xj4kovk13jy.css`, 712 rules), the hero's inline SVG and the
+`@font-face` block. Both themes read. The full pack is `styles/paperclip.md`; this file
+is what a design agent must not get wrong.
+
+## The one thing this pack is
+
+**No functional colour, and one loud object that does nothing.** A neutral coal field,
+every control monochrome, elevation made of hairlines — and the entire chromatic budget
+spent on a curtain of gradient capsules behind the headline and a row of gradient section
+badges, neither of which can be clicked. Delete every colour from this page and it loses
+its poster, not its meaning.
+
+## Non-negotiable
+
+- **The accent is the inverted field.** Solid `--accent`, label in `--accent-ink`, capsule
+  radius, one per viewport. A brand hue has nowhere to live here.
+- **A coloured thing is never interactive.** No gradient button, no gradient link, no
+  hover on a badge. This is the rule the whole composition rests on.
+- **Status is never by colour alone.** `--good` and `--warn` separate by 6.2 under
+  protanopia and `--good` and `--info` by 6.7 under tritanopia — both below the 8.0
+  floor — and in the light theme `--good` (2.28:1) and `--warn` (2.15:1) are below the
+  3:1 non-text floor on paper. Every dot, ring, tint and bar carries its word.
+- **The capsule is the shape.** `--r-pill` on the button, the badge, the org node and the
+  10 × 20 schedule mark alike. A circle is a point; a capsule is a paperclip's end. The
+  avatar is the single circle in the system, and the data bar's flat 4px the single
+  square-ended form.
+- **Elevation is a hairline.** One resting shadow exists in the whole pack and it belongs
+  to the modal. No card floats, and the sticky nav gains nothing on scroll.
+- **In light there is no surface step.** `--bg` and `--surface` are the same white. A grey
+  card fill turns this pack into a generic dashboard in one commit.
+- **The tracking closes as the size opens** — −0.01em at 16px through −0.045em at 44px.
+  A 60px headline at the default 0em is the fastest way to lose the pack.
+- **One noise recipe, on saturated surfaces only.** `fractalNoise`, `baseFrequency 2.95`,
+  5 octaves, seed 9, tiled at 256px, `mix-blend-mode: overlay` under `isolation: isolate`
+  — 12% on a badge, 86% on the artwork. The field itself stays flat colour.
+- **One stagger, 140ms, everywhere.** The org tree, the swimlanes, the goal cascade and
+  the card reveals share it. Change it in one place or not at all.
+- **Hover is colour, border and fill. Never geometry.** Nothing lifts, scales or shifts.
+
+## What the reference gets wrong, and this kit does not
+
+- `--status-task-in_progress` stays at its light value on the dark field — **3.83:1**,
+  set as text. The kit ships `#60a5fa` at 7.79:1 and marks it derived.
+- The one text input sets `outline: none` on focus and replaces the ring with a 1px border
+  colour change. Keep the ring.
+- Two 1.5s infinite loops (`dotPulse`, `statusBlink`) survive `prefers-reduced-motion`.
+  Stop them; their meaning is already in the word beside them.
+- The budget bar transitions `width` for 1.2s, per bar, six bars in view. Never that —
+  `transform: scaleX()` from a left origin.
+- There is no `@media (hover: hover)` anywhere, so every hover state fires on first touch.
+- `font-weight: 450` is asked for and only 400 and 500 are loaded, as static instances.
+
+## Container, not viewport
+
+Four components size against their own box and carry `container-type: inline-size`:
+`HairlineGrid`, `OrgNode`, `LedgerRow`, `ScheduleLane`. The page's own breakpoints — the
+nav, the hero padding, the artwork offset, the section rhythm — stay on the viewport,
+because the page is not inside anybody's container.

package/kits/paperclip/README.md

@@ -0,0 +1,46 @@
+# @sheleg-design/paperclip
+
+The React reference kit for the SHELEG **Paperclip** style pack — a neutral coal field
+with no functional colour at all, every control monochrome, elevation made of hairlines,
+and the whole chromatic budget spent on one curtain of gradient capsules that cannot be
+clicked.
+
+It is generated from the pack, not authored beside it: `src/styles.css` opens with
+`styles/tokens/paperclip.css` byte for byte, and the rules the design agent must obey are
+in [`.design-sync/conventions.md`](./.design-sync/conventions.md).
+
+```bash
+npm install && npm run build
+```
+
+Then run `/design-sync` in Claude Code from this directory to push it to
+claude.ai/design.
+
+## The spine, and this pack's seven
+
+`Button`, `Card`, `Chip`, `Stat`, `Heading` and `Rule` are identical in name, props and
+types across every SHELEG kit — switching packs swaps identity, not API.
+
+| Component | What it is |
+|---|---|
+| `CapsuleCurtain` | 96 gradient capsules from one hue-rotation rule, under a noise mask — the **signature element** |
+| `SectionBadge` | a mono uppercase label on one of twelve ramps, each with its own hand-picked ink |
+| `HairlineGrid` | the gap *is* the rule: 1px over a border-coloured background, clipped by the container's radius |
+| `OrgNode` | a capsule node at 1.5px, whose live state is a word and not only a ring |
+| `LedgerRow` | a spend row in tabular figures whose bar is white and animates `scaleX`, never `width` |
+| `ScheduleLane` | a swimlane whose ticks are 10 × 20 capsules and whose active tick says what it is doing |
+| `Terminal` | the only warm surface in the pack, with a concentric tab group machined into its bar |
+
+## Container queries, not viewport queries
+
+`HairlineGrid`, `OrgNode`, `LedgerRow` and `ScheduleLane` each take
+`container-type: inline-size` and collapse against **their own width**. A three-across
+grid dropped into a 320px sidebar on a 1440px screen keeps its columns and overflows
+otherwise — which is the bug a kit's viewport query always becomes.
+
+## Two themes, one token layer
+
+Dark is the default; `data-theme="light"` is the twin. The dark border token is *alpha*
+(`#ffffff1a`), so the same hairline reads correctly over the field, over `--surface` and
+over the warm terminal without being restated. In light there is no surface step at all —
+`--bg` and `--surface` are the same white — and that is the theme's whole idea.

package/kits/paperclip/package.json

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

@@ -0,0 +1,23 @@
+---
+category: Actions
+---
+
+`primary` is the inverted field: solid `--accent`, label in `--accent-ink`, and the
+capsule radius the whole pack is built from. **Its hover is theme-dependent and that is
+deliberate** — on paper the fill goes whiter, on coal it goes away and leaves an outline.
+Copying one gesture into both themes makes the button vanish in one of them, because on
+paper there is nowhere brighter to go and on coal there is nowhere darker.
+
+`secondary` is the pack's single exception to the capsule: `--r-md`, a hairline border,
+a `--muted` label. It exists for the path that is not being recommended — the reference
+spends it once, on `or install the local version` under the hero.
+
+`ghost` is a text button; the label carries the whole affordance.
+
+Nothing presses. There is no `:active` transform anywhere in this pack — hover is
+colour, border and fill only.
+
+```tsx
+<Button>Join the waitlist</Button>
+<Button variant="secondary">or install the local version</Button>
+```

package/kits/paperclip/src/Button.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+
+export interface ButtonProps {
+  /** `primary` is the inverted field — at most one per viewport. */
+  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={['pc-btn', `pc-btn--${variant}`, `pc-btn--${size}`, className]
+        .filter(Boolean)
+        .join(' ')}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}

package/kits/paperclip/src/CapsuleCurtain.md

@@ -0,0 +1,32 @@
+---
+category: Signature
+---
+
+**The signature element.** Eight columns on a 70px pitch, twelve 70 × 170 capsules each
+at `rx: 35`, stepped 34.5px apart so every capsule covers all but a 34.5px band of the one
+above it — a stack of overlapping paperclip ends falling from the top of the page.
+
+The fills are **generated, not chosen**. The top stop rotates forward around the hue wheel
+by ~12.4° per capsule and the bottom stop rotates backward by ~10.3°, at near-constant
+saturation and lightness, so the two stops stay near-complementary and the column inverts
+its own gradient between its first capsule and its last. The reference ships 45 gradients
+and 89 distinct stops from that one rule.
+
+Over all of it, the pack's single noise recipe — `fractalNoise`, `baseFrequency 2.95`,
+5 octaves, seed 9 — masked by the capsules themselves and composited `overlay`. Without
+it a twelve-gradient artwork bands on any 8-bit panel.
+
+**It is decoration and it must stay decoration.** `aria-hidden`, no pointer events, no
+information. The composition only works when the copy sits *on top of it*: the reference
+pushes the artwork up by `translateY(-310px)` so only its lower half is in frame and gives
+the headline `margin-top: 124px` to land in the curtain's lower third. A hero that puts
+the art beside the copy is a different pack.
+
+Entrance and parallax belong to the page, not to this component — 1.1s rise on
+`--ease-hero`, then a native `animation-timeline: view-timeline` inside `@supports`.
+
+```tsx
+<div className="pc-hero__art" aria-hidden>
+  <CapsuleCurtain />
+</div>
+```