sheleg-design-skill 1.27.1 → 1.31.0

package/CHANGELOG.md

@@ -4,6 +4,316 @@ 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.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
+**hand-authored stylesheet** rather than a compiled bundle: <https://heytenor.com> ships
+33,822 bytes of CSS somebody wrote, so the token names, the ratios between them and the
+reasons they exist were all legible in the source instead of having to be reconstructed.
+
+### Added
+
+- **`styles/tenor.md` + `styles/tokens/tenor.css` — widened contract, all thirteen
+  headings.** Warm paper `#f7f6f2` under near-black ink at 17.61:1, **zero `border-radius`
+  and zero `box-shadow` in the entire reference**, and one border weight for the whole
+  system. The colour argument is the pack: at rest the page carries a single 25px orange
+  square, and every other appearance of the accent is a hover fill or the focus ring — a
+  page in this pack screenshots with no colour in it at all.
+- **Severity as value rather than hue.** The reference's guardrail chips settle it in one
+  row: ALWAYS ASK is the orange, LIMIT is a grey, NEVER is the ink, and the *word* carries
+  the meaning in all three. The pack ships `--sev-ask` / `--sev-limit` / `--sev-never` as
+  the primary system; `--warn` is the accent and `--danger` is the ink, so `--good`
+  `#296b46` is the only value in the pack the reference does not contain, and it is marked
+  DERIVED at its declaration.
+- **Type: two families, two weights, and tracking that runs both ways.** The sans is held
+  at weight 400 and tracks negative, tightening to `-0.065em` on the hero; the mono is 500
+  and tracks positive, opening to `0.12em` on the smallest label. Display line-height goes
+  **below one** — 0.91 at a `12ch` measure — which is what turns every heading into a
+  three- or four-line stack.
+- **`kits/tenor/` — the React reference kit**, the six-name spine plus seven signature
+  components: `Staircase` (the signature element, typed as a **four-tuple** so the value
+  ramp cannot grow a fifth rung), `SplitHeadline`, `Lattice` + `LatticeCell`, `FilmFrame`,
+  `Guardrail` and `Eyebrow`. Every breakpoint in `src/styles.css` is a `@container` query;
+  `FilmFrame` deliberately does not call `play()`, because the page owns the motion policy
+  and a kit is the static half of a pack.
+
+### Changed
+
+- **The library is nineteen packs**, and every counted claim moved with it: `SKILL.md`
+  (the routing table, the core-contract split — six of the nineteen, the other thirteen —
+  and the token-vocabulary note), `README.md`, `bin/cli.js`, `install.sh`, the three
+  manifests, the Cursor rule, the slash command, `MOBILE_SURFACES.md`,
+  `SURFACE_COMPOSITION.md` (`--accent` in seventeen packs, `@role non-text:` in thirteen of
+  the nineteen) and `DESIGN_SYNC_BRIDGE.md` (nineteen kits).
+- **`blueprint` and `roster` fork against it, reciprocally.** `blueprint` also refuses
+  radius outright and also builds from hairlines — the tell is the marks, since it draws
+  registration marks over a visible grid and `tenor` has neither. `roster` also spends one
+  orange on a light field and also forbids it from carrying a word — it argues *who
+  already uses you*, where `tenor` argues *how the work is organised*.
+- **`bin/cli.js` now names `ora` as well.** The enumeration gate had passed it since
+  1.28.0 because `ora` is a substring of `cyclorama` — the under-reporting the machine's
+  own notes warn about, found by the same check failing honestly on `tenor`.
+- **Ratchet floors raised** to 2294 / 1156 / 478, purely additive; all three self-tests
+  still catch every planted defect.
+
+### Six defects in the reference, recorded in the pack rather than copied
+
+- **`--ink-soft` is 4.16:1** on the paper and carries every lead paragraph at 16px, which
+  is not large text — short of AA by a margin no one notices and every audit finds.
+- **`--ink-faint` is 2.36:1** and carries the grey half of the hero headline at 40.8px to
+  74.4px, below even the 3:1 that large text is allowed.
+- **The accent clears its non-text floor by 0.02**, and contrast is symmetric — so a paper
+  label on an orange fill is the same 3.02:1. Both of the reference's orange-filled
+  elements put a label below the large-text threshold on it, including **every CTA at the
+  moment it is hovered**, where the label falls from 17.61:1 to 3.02:1.
+- **A variable font is loaded across two axes and used at one point**: Instrument Sans is
+  requested as `wdth,wght@75..100,400..600` against zero `font-stretch` declarations, zero
+  `font-variation-settings` and exactly one weight in 33,822 bytes.
+- **The mobile panel ships the pre-`dvh` viewport unit as its base** with a `@supports`
+  upgrade, so it jumps on every browser that lacks the upgrade.
+- **Seven display selectors carry hand-written `<br>` tags** whose visibility is then
+  managed at 620px, and one of them appears in both the hide rule and the re-show rule.
+
+## [1.28.0] - 2026-08-14
+
+> Authored and gated on its own, **released inside `v1.29.0`**: the `tenor` pack followed
+> it in the same session before a tag was cut, and splitting the two after the fact would
+> have produced an intermediate commit whose ratchet floors no longer matched its own
+> tree. There is no `v1.28.0` tag; this section is the record of what it added.
+
+An eighteenth pack, **`ora`**, extracted from a live reference rather than composed:
+<https://ora.ai> and <https://journey.ora.ai>, read from the shipped stylesheet
+`/_next/static/chunks/feb8eaf5618096ba.css` and the route bundles beside it. It is the
+first pack in the library whose **default theme is dark** — because that is the
+reference's own arrangement, which paints its dark values on
+`:root:not([data-theme=light])`, so an unattributed root is dark.
+
+### Added
+
+- **`styles/ora.md` + `styles/tokens/ora.css` — widened contract, all thirteen
+  headings.** A warm coal field, cream ink, and **no third hue**: the accent is the
+  inverted field, which the reference names out loud as
+  `--accent-signature` / `--accent-signature-foreground` and spends as
+  `bg-foreground text-background` on its one primary action. Both themes ship: coal
+  `#141210` with cream `#f7f2e5` at 16.72:1, paper `#f9f7f2` with `#1a1a1a` at 16.26:1.
+- **Two families and one of them is a serif doing the sans job.** `--font-sans`,
+  `--font-serif` and `--default-font-family` all resolve to Lora, so there is no sans
+  anywhere in the system; Space Mono carries every machine fact. The rule the pair
+  encodes — a serif means a person said it, mono means a machine reported it — is what
+  the whole page is read through, and the pack bans adding a sans for that reason.
+- **`kits/ora/` — the React reference kit**, the six-name spine plus six signature
+  components: `Verdict` (the signature element), `LayerBar`, `Terminal`, `StepLog`,
+  `SectionRule`, `StatusDot`. `src/styles.css` opens with the token layer byte for byte;
+  every breakpoint in it is a `@container` query, so no component is sized by the screen.
+- **The verdict numeral as the signature element.** One number in the display serif in
+  its grade colour, a hairline `/ 100` at half its size, and the letter plus the word
+  beneath. `grade` and `label` are **required props** on the component, which is the
+  palette rule made into an API: under deuteranopia `--good` and `--danger` separate by
+  6.5 in dark and 7.4 in light, below the 8.0 CVD floor, so the letter and the word are
+  what make the verdict legible.
+
+### Changed
+
+- **The library is eighteen packs**, and every counted claim moved with it: `SKILL.md`
+  (the routing table, the core-contract split — six of the eighteen, the other twelve —
+  and the token-vocabulary note), `README.md`, `bin/cli.js`, `install.sh`, the three
+  manifests, the Cursor rule, the slash command, `MOBILE_SURFACES.md`,
+  `SURFACE_COMPOSITION.md` (`--accent` in sixteen packs, `@role non-text:` in twelve of
+  the eighteen) and `DESIGN_SYNC_BRIDGE.md` (eighteen kits).
+- **`datasheet` and `manpage` fork against it, reciprocally.** Both are verdict-shaped
+  and both refuse a second family, so an agent reaching either first now learns the
+  distinction: `datasheet` when the artefact is a row of cells, `manpage` when the page
+  is documentation, `ora` when the artefact is a number with a grade and the reader must
+  be shown the raw response a machine received.
+- **Ratchet floors raised** to 2179 / 1095 / 464, purely additive; all three self-tests
+  still catch every planted defect.
+
+### Six defects in the reference, recorded in the pack rather than copied
+
+Named in `## Gotchas` because a pack extracted from a live site inherits its accidents
+unless someone reads them:
+
+- `--border-strong` is declared once in the light `:root` and never re-declared for
+  dark, so the reference paints a paper-coloured hairline at **12.02:1** on the coal
+  field. This pack ships a dark value of its own and marks it derived at the declaration.
+- `--shadow-pop` is a complete shadow in the app scope and a bare **colour** in the
+  journey scope. Copying the wrong one produces an invalid declaration, so the shadow
+  disappears silently rather than erroring.
+- The shadcn `--accent` is a raised **surface**, not an accent — an agent reading token
+  names alone concludes the pack has none.
+- Two dark greys in one product: warm coal `#141210` against neutral `#151515`, each
+  with its own ladder and its own accent.
+- Two radius systems: the proportional ladder off `--radius: .5rem`, and
+  `rounded-[7px]` / `rounded-[9px]` literals that sit on no ladder.
+- Four webfont families are loaded on `<html>` and two are referenced in the stylesheet;
+  the progress fill is animated with `transition-all`, which animates `width` and lays
+  out every frame.
+
 ## [1.27.1] - 2026-08-13
 
 This project's own pipeline paperwork moved from `docs/superpowers/` to

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 **seventeen 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.
 
@@ -62,6 +62,9 @@ into the cinematic layer, and says so in its own *Motion flavor* section.
 | `manpage` | cream paper under the reader's own system monospace — zero webfont bytes for the display face — a 48px display that never grows louder, a 576px argument column, coral label chips that are real `<h2>`s, `└` tree glyphs in their own grid column, and one dark code frame as the focal point | developer products whose buyer reads code — APIs, SDKs, CLIs, MCP servers, developer infrastructure, where the honest hero is the call itself |
 | `pigeonhole` | a white field ruled by hairlines, a display face that never passes weight 400 with exactly one italic word, and **nine categories in which a hue is the category**, drawn from an eleven-ramp pastel system — each rendered as a two-layer chip, 8px outside and 7px inside, whose label word is mandatory because the hue cannot carry the meaning alone | products whose job is to sort the reader's incoming mess into named categories — email triage, ticket routing, notification digests, file organisers, CRM inboxes |
 | `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
@@ -136,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 seventeen 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 |
 
@@ -207,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 seventeen 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.
@@ -253,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 seventeen
+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/              seventeen 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
@@ -251,7 +251,14 @@ ${c("bold", "What it installs")}
                        pigeonhole (a white sorting wall whose nine pastel
                        categories are a filing scheme, one hue each),
                        roster (a white wall of other people's marks: the proof
-                       is a name rather than a number) —
+                       is a name rather than a number), ora (a warm coal field
+                       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),
+                       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

@@ -43,7 +43,20 @@ that file the reader's incoming mess into named categories; roster — a white
 field in a faint grid of squares whose whole argument is other people's
 marks, with client logotypes in pill-labelled industry columns and an
 engine's wordmark inside the headline, for products sold on who already
-carries them);
+carries them; ora — a warm coal field with cream ink and no third hue, where
+the accent is the inverted field, a serif carries every human sentence and a
+monospace every machine fact, and a terminal surface is cut below the page,
+for products whose output is a machine's verdict about the reader; tenor — warm
+paper with zero radius and zero shadow, one hairline weight, an orange that
+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; 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/ora/.design-sync/config.json

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

@@ -0,0 +1,61 @@
+# Ora — the design contract
+
+The reference is <https://ora.ai> and <https://journey.ora.ai> (era labs), read
+2026-08-14 from the shipped stylesheet `/_next/static/chunks/feb8eaf5618096ba.css` and
+the route bundles beside it. The full pack is `styles/ora.md`; this file is what a
+design agent must not get wrong.
+
+## The one thing this pack is
+
+**A page that tells a person what a machine concluded about them.** A warm coal field,
+cream ink, and no third hue — the accent is the inverted field. A serif carries every
+human sentence and a monospace every machine fact. The only surface that leaves the
+page plane goes *down*, into a terminal block cut below the field.
+
+## Non-negotiable
+
+- **There is no brand colour.** `--accent` is the ink: cream on coal, near-black on
+  paper, 16.72:1 and 16.90:1 on their own fields. One filled element per view. A second
+  filled button is a design error, not a variant.
+- **No sans-serif.** `--font-sans`, `--font-serif` and the default family all resolve to
+  Lora in the reference. Adding a real sans dismantles the rule the whole page is read
+  through: a serif means a person said it, mono means a machine reported it.
+- **Status is never by colour alone.** Every dot, bar and number in a status colour
+  carries its word; the six-step grade ramp carries its letter. Under deuteranopia
+  `--good` and `--danger` separate by 6.5 in dark and 7.4 in light, and under protanopia
+  `--good` and `--warn` by 6.4 in light. In the light theme `--good` (2.13:1) and
+  `--warn` (2.01:1) are below the non-text floor on paper and may not set text at all.
+- **Elevation is a hairline.** `--border` at 1.15:1 is a seam. Shadows exist for things
+  that float over the page — overlays, popovers, tooltips — and a card does not float.
+- **The terminal is darker than the page**, in both themes, and never carries a shadow.
+- **One radius root.** `--radius: 0.5rem`, and every other radius is a ratio of it:
+  chip ×0.5, control ×1, card ×1.5, plus the pill. Do not add a step.
+- **A layer that does not apply is hatched and reads `N/A`.** Never an empty bar — an
+  empty bar reads as zero, which is a different verdict about the same product.
+- **Motion is entrance, hover and two ambient loops.** No scroll-jacking, no parallax,
+  no `animation-timeline`, no scroll library — zero occurrences of any of them in the
+  reference's shipped bundles. Scroll drives two things only: the sticky nav's 1px
+  hairline shadow and one pinned two-panel comparison. Hover changes colour, border and
+  opacity and never geometry. Under reduced motion every duration token collapses to
+  zero and the page keeps every value it was showing.
+- **Numbers are `tabular-nums`, always.** A count that changes while the reader watches
+  must not reflow.
+
+## What this kit is not
+
+It is the **static half** of the pack. The hero's breathing glows, the drifting agent
+marks and the scroll-pinned comparison section are page-level motion and do not cross
+into a component library. Nothing here invents motion to fill that silence.
+
+## The traps the reference itself carries
+
+Four of them, so a design agent does not reproduce them from a screenshot:
+
+1. `--border-strong` is never re-declared for dark, so the reference paints a
+   paper-coloured hairline at 12.02:1 on coal. This kit ships a dark value of its own.
+2. `--shadow-pop` is a complete shadow in one scope and a bare colour in the other.
+   Here it is always complete.
+3. The reference's shadcn `--accent` is a raised *surface*, not an accent. The real one
+   is `--accent-signature`, which points at the foreground.
+4. The progress fill is animated with `transition-all`, which animates `width` and lays
+   out every frame. Here it is `transform: scaleX()` from a left origin.

package/kits/ora/README.md

@@ -0,0 +1,43 @@
+# @sheleg-design/ora
+
+The React reference kit for the SHELEG **Ora** style pack — a warm coal field with cream
+ink and no third hue, where the accent is the inverted field, a serif carries every human
+sentence and a monospace every machine fact, and the only surface that leaves the page
+plane goes down, into a terminal block cut below the field.
+
+It is generated from the pack, not authored beside it: `src/styles.css` opens with
+`styles/tokens/ora.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 six
+
+`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 |
+|---|---|
+| `Verdict` | one number in the display serif, in its grade colour, with the letter and the word beneath — the **signature element** |
+| `LayerBar` | the weighted score bar, where a layer that does not apply is hatched and reads `N/A` rather than empty |
+| `Terminal` | the surface below the page plane: raw machine output, `white-space: pre`, and never a shadow |
+| `StepLog` | the loading idiom — one mono line per step, appended as it happens, the caret on the running line |
+| `SectionRule` | the band between sections: a squiggle through a hairline strip with a numbered label knocked out over it |
+| `StatusDot` | a 6px dot and its word, where the word is a required prop |
+
+## Theme
+
+Dark is the default, because it is the default in the reference. Set
+`data-theme="light"` on `:root` for the twin; both are declared in the token block at the
+top of `src/styles.css`.
+
+## What is not here
+
+The hero's breathing glows, the drifting agent marks and the scroll-pinned comparison
+section are page-level motion. A kit is the static half of a pack, and inventing motion
+to fill that silence is the failure this note exists to prevent.

package/kits/ora/package.json

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

@@ -0,0 +1,21 @@
+---
+category: Actions
+---
+
+`primary` is the **inverted field**: `--accent` is the ink, so the button is a solid
+cream slab on coal and a solid near-black slab on paper, and the label takes
+`--accent-ink`. At 16.72:1 in dark and 16.90:1 in light it is the highest-contrast
+object on the page, which is why the pack allows **one per view**.
+
+Hover is the reference's own: the fill drops to 90% opacity. Nothing translates,
+scales or lifts — this pack does not press.
+
+`secondary` is a hairline over `--surface-raised`; its hover moves the **border** to
+`--border-strong` and leaves the fill where it is. `ghost` is mono, `--muted`, and
+gains `--ink` on hover.
+
+```tsx
+<Button>Run</Button>
+<Button variant="secondary">Rescan</Button>
+<Button variant="ghost">View logs</Button>
+```

package/kits/ora/src/Button.tsx

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

package/kits/ora/src/Card.md

@@ -0,0 +1,19 @@
+---
+category: Surfaces
+---
+
+`--surface` inside a 1px `--border`, at `--radius-card`. The border is 1.15:1 against
+the field: a seam, not a line. There is no shadow, because a card does not float —
+`--shadow-pop` exists for overlays and nothing else.
+
+A row of facts inside a card is separated by a top border and padding, never by a
+nested card. Three equal blocks share **one** card with internal dividers.
+
+The head sizes against its **container** (`container-type: inline-size`), so a card in a
+narrow column wraps its title and meta instead of overflowing.
+
+```tsx
+<Card title="Can an agent discover and trust you?" meta="5/100">
+  …
+</Card>
+```