sheleg-design-skill 1.46.0 → 1.48.0

package/CHANGELOG.md

@@ -6,6 +6,183 @@ follow [SemVer](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [1.48.0] - 2026-08-24
+
+### Nameplate, the thirty-third pack — the proof is a borrowed name
+
+Extracted from `brandpush.co` by enumerating its sitemap (20 URLs, 12 distinct pages),
+fetching every page `robots.txt` permits, reading the **11 stylesheets the site itself
+authors** — 500,051 bytes, 20,240 lines, 136 custom properties — and then reading
+**computed styles on the live page** through CDP at 1440×900 (1,251 visible of 5,694
+elements), 768×1168 and a device-emulated 390×844. Vendor layers were excluded from every
+count: the site also loads Bootstrap 4.6.2, a purchased *ave* theme, a *frest* admin theme
+and three Font Awesome versions, and counting those reads Bootstrap's defaults as the
+brand's decisions.
+
+What the pack takes is a **rationed round shape**. 1,091 of the 1,251 rendered elements sit
+at zero radius — 87% of the page — and the pill is 52 of them, spent on one thing: a white
+1px-bordered plate carrying somebody else's publication name as 15px/500 type rather than
+as a logo. Thirty names set as type read as a list a visitor can check; thirty logotypes
+read as thirty typefaces. Around it, one family at four weights with the **body at weight
+500** (172 nodes at 1440, 459 at 768, 182 at 390 — the dominant weight at every width), a
+display face tracked −0.02em, and two uppercase registers tracked 0.06em and 0.175em.
+
+**The declared token layer disagreed with the render, and this is the sharpest case in the
+library.** The site declares `--primary: #84B761` three times — a green nothing paints — and
+its real primary action is a gradient, whose element carries a *transparent*
+`background-color`. A colour census reading `background-color` alone finds the blue cookie
+banner and reports it as the brand. Both facts were caught by rendering rather than by
+reading, which is why the pack's Origin records the method and not just the address.
+
+**Five corrections travel with the pack, each with its number at the declaration.** The
+primary action is white on a coral ramp at 2.90:1 and 3.19:1, 3.04:1 at the midpoint — under
+AA and under the 3:1 large-text floor, with a 12px uppercase label on it; `--action` holds
+both hues in OKLab and moves lightness until white clears 4.5:1 along the whole ramp. The
+body grey is 4.74:1 on white and **4.42:1 on the cool slab the hero stands on** — the
+correction a white-background-only check never finds. The focus ring is
+`rgba(5,135,237,0.35)`, which composites to `#d3dff9` at 1.34:1, and all three of its alpha
+variants miss the 3:1 non-text floor on both fields; the hue was never the problem, so the
+ring keeps the measured colour and drops the alpha. Two greys carry live text at 2.46:1 and
+2.54:1 across 46 nodes. And 87 of 137 visible interactive elements at 390 are under 44px
+tall, so `--tap-min` is a floor.
+
+**The status set was searched, not chosen, and the palette gate is why.** With a coral action
+in play a conventional red `--danger` lands 2.93 OKLab units from it and is
+indistinguishable under all three dichromacies, so danger is held at the reference's red hue
+and taken deep to `#900004`. And `--info` may not be the reference's blue, because that blue
+is already `--accent`: the two came out 7.5 units apart, which the gate refuses outright —
+one colour cannot be both a link and a state. Info is the reference's cyan instead. All
+fifteen pairs across the four states, the accent and the action clear 15 units at full
+colour and 8 under protanopia, deuteranopia and tritanopia.
+
+**The first pack in four not to move a ratio pin.** `outrank`, `babylove` and `patchbay` each
+raised `unresolved_at_most` or `unguarded_at_most`, because a pack that documents what it
+*refused* carries ratios whose subject it deliberately does not ship. This pack carries the
+same kind of evidence and states each claim with its subject and its partner on one line, so
+all 34 of its ratios are **computed** and both ceilings held; `computed_at_least` rises
+536 → 570 to lock that in. Three claims did land unpairable on the first run and every one
+was a line break — `--on-action`'s own name resolves as `--action`, which is a gradient and
+pairs with nothing — and a fourth was a table row stating a ratio with no partner named. All
+four were rewritten rather than pinned.
+
+A fifth standalone pack pins its own motion ceiling: **nameplate at 4**, the same as `roster`
+and for the same reason. 1,057 of the 1,251 visible elements compute
+`transition-duration: 0s`, `animation-timeline` appears zero times in 20,240 lines, and the
+whole budget is an entrance reveal, a 2px hover lift whose shadow grows in the same 200ms,
+and a 140ms press. The reference also ships a real reduced-motion contract — 23 blocks across
+7 of its 11 authored stylesheets, with the reveal layer restoring `visibility` and `opacity`
+so content is never locked behind an animation that did not run. That shape is kept without
+correction; it is the one thing here worth copying as measured.
+
+**Rendering the kit found two defects three green gates could not**, which is the second
+consecutive release where the browser beat the ratchet. The plate came out **78px against a
+stated 50** — the kit declared no `box-sizing`, and Chrome's UA stylesheet gives `button`
+`border-box` while giving an anchor `content-box`, so the button beside it kept its promise
+and the plate silently grew by its own padding. And body copy rendered at **weight 400
+against the pack's central claim of 500**, because `--weight-body` existed and no component
+consumed it — a token that is decorative rather than binding. Both fixed and re-measured at
+50px and 500. A gate reads structure, not layout.
+
+**The fork against `roster` is recorded in both directions**, because the two share one
+sentence — the proof is a name — and nothing else. `roster` proves by *who already uses us*
+and makes the pill its most frequent shape (102 elements) with a body at weight 300 on a
+grid-textured white field; nameplate proves by *who will carry you*, is square on 87% of its
+elements, and sets its body at 500 on an untextured slab. `ADR-0001` gains a further
+application: the pack is named for the register, with `masthead`, `newsstand`, `clipping` and
+`hallmark` weighed and rejected on its own criteria — the last of those for trademark
+surface, which is the clause `datasheet` was chosen under.
+
+Ships `styles/nameplate.md` on the widened thirteen-heading contract with `Themes:` and
+`Rank:` declared, `styles/tokens/nameplate.css`, the `kits/nameplate` reference kit (the
+six-name spine plus `Plate`, `PlateBand`, `Wave`, `Frame` and `Eyebrow`), routing in every
+enumeration surface, and the `.cursor` mirror.
+
+## [1.47.0] - 2026-08-22
+
+### `patchbay` — the thirty-second pack, and the first read off a page with no tokens at all
+
+Measured 2026-08-22 off <https://nautilustrader.io/> with `getComputedStyle` on the running
+page. Named for its register under ADR-0001 — named ports, drawn cords, live signal — not for
+the source brand.
+
+**The reference declares zero custom properties.** It is Material UI with Emotion, so there was
+no author-side vocabulary to lift and every value in the token layer was read off a painted
+element. Two of the pack's findings come straight out of that: the MUI theme's own defaults
+leak through where a variant was not overridden, so the page's **59.2px hero is tracked
++0.555px** — positive tracking on a display line, two selectors away from designed styles that
+track −0.3px — and **fourteen text nodes render in Roboto**, which is not one of the three fonts
+the page loads.
+
+**The signature element is a live architecture diagram, and it is measured rather than
+admired.** 21 cords carrying 32 particles, distributed 12 / 7 / 2 at one, two and three
+particles each. Every multi-particle cord divides its own period evenly: the seven pairs are
+offset by exactly half their duration — 1.25s on a 2.5s cord, all seven — and both triples by a
+third, at 0.4 / 1.2333 / 2.0667 and 0.5 / 1.3333 / 2.1667. Consecutive cords start 0.1s apart,
+so the board has no visible beginning. Each cord is an inline `<svg>` with a path, an endpoint
+dot, an arrowhead marker and one `<circle>` per particle driven by `<animateMotion>` — no
+JavaScript, no library, one element per dot.
+
+Three corrections the arithmetic produced:
+
+* **The reference paints two muted greys and only one of them is legible.** `#848895` is
+  4.86:1; `#686B75`, in 13 text nodes, is **3.23:1**. There is no room for a corrected third
+  step below 4.86, so the pack ships **one** muted tier and says which token replaces the other
+  in each of its two uses.
+* **The diagram's group labels are 2.70:1** — 9px mono uppercase at 30% white, the least
+  legible text on the page. Corrected to 50%, which is 5.19:1 and which the reference already
+  uses for its own diagram legend further down. The ladder already had the step.
+* **The status set is derived and its constraint is unusual.** The accent is a mint-cyan, so
+  the ordinary dark-UI green collides with it under dichromacy: `instrument-console`'s `#46D39A`
+  separates from this accent by **3.51** under simulated CVD against a floor of 8. Every
+  candidate that clears the floor is light, which is why `--ok` sits above `--warn` and
+  `--danger` in luminance rather than beside them.
+
+### The reduced-motion doctrine gained the three holes this page measures
+
+`MOTION_DOCTRINE.md` §9 has always said an animation without a reduced-motion path is a bug.
+What it did not say is that the usual one-rule remedy — zero every duration — **cannot reach
+three layers**, all three of them live on this one reference:
+
+* **It cannot stop SMIL.** `<animateMotion>` is not a CSS animation and does not read
+  `animation-duration`. All 32 particles keep moving with the preference on. `pauseAnimations()`
+  is the fix and it has to be wired by hand; `kits/patchbay/src/Diagram.tsx` wires it.
+* **It cannot stop JavaScript.** The reference's reveal writes `opacity` and `transform` inline
+  per scroll frame across 48 wrappers, so with the preference on the content is **still hidden
+  until scrolled**.
+* **It teleports a loop that does not end where it began.** Collapsing to `.01ms` jumps to the
+  final keyframe. That is safe here only because all four ambient light loops are written with
+  `0%` and `100%` identical — so write perpetual loops that way and the cheap remedy stops being
+  a gamble.
+
+### What the reference gets wrong, kept because a pack that only admires is not evidence
+
+* **`0+` renders on a live page, in two separate sections.** The count-up animates from zero and
+  has no state for *the fetch did not return*, so the failure renders as a precise, confident,
+  wrong number under `GITHUB STARS`, `DOWNLOADS`, `DISCORD MEMBERS` and `TESTING`. `Stat` in the
+  kit refuses: an empty value renders the skeleton and announces itself, never a zero.
+* **The reveal freezes on a programmatic jump.** Measured at eight scroll positions from 700px
+  to 1700px reached with `scrollTo`: the target stayed `opacity: 0` at every one and the section
+  never appeared. Reached by wheel, it reveals normally — which is what makes it a deep-link,
+  anchor and print-stylesheet defect rather than a broken page.
+
+### Three numbers that were already stale beside this change
+
+Found while registering the pack, none of them this run's regression: the slash command said
+**"the twenty-nine are"** over a list of thirty-one — invisible to the count gate because the
+numeral named no noun, which is the exact failure the skeleton's rule 6 warns about, so it now
+names one; `SURFACE_COMPOSITION.md` said **sixteen** token layers declare `@role non-text:` and
+the tree says nineteen; and `FIGMA_BRIDGE.md` said **ten** packs ship a theme twin against a
+derived eleven. The widened remainder in `SKILL.md` went stale for the **third consecutive
+release** and the gate caught it, which is what that check was written for.
+
+### ADR-0001 now records that it was broken twice
+
+`outrank` and `babylove` both shipped on 2026-08-21 carrying their source brand as the pack
+name, and neither run added an entry. Recorded rather than left to be rediscovered — a register
+showing an unbroken chain of eleven applications was making a claim the library does not
+support. **Neither is renamed:** the ADR's own Consequences make a pack name a public API across
+four channels, which is what makes renaming after release a breaking change.
+
 ## [1.46.0] - 2026-08-22
 
 ### `babylove` — the thirty-first pack, and the other end of the same question

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 **thirty-one locked style
+decides whether to animate before it decides how, and **thirty-three locked style
 packs** with ready-made design tokens, so what it builds reads as one system
 instead of a pile of effects.
 
@@ -51,6 +51,8 @@ into the cinematic layer, and says so in its own *Motion flavor* section.
 | `briefing-room` | dark 16:9 deck: one blue hue top to bottom (OKLCH), mono slide furniture, 1-bit dithered art, claims as titles | investor & board decks, technical briefings, talks published as a page |
 | `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 |
 | `babylove` | white with one orange in six steps and nothing else declared — seven tokens over Tailwind's defaults, two card levels nested at 16 and 8px, no shadow and no dark theme | SEO and AI-visibility SaaS with a long time-to-value — the minimal-system answer to the same brief `outrank` answers maximally |
+| `patchbay` | near-black under a faint 40px grid, one mint-cyan doing every functional job, elevation made of 8% hairlines with no shadow anywhere, and a live architecture diagram whose cords carry SMIL particles | engines, message buses, pipelines, schedulers and open-source front doors — anything whose argument is an architecture rather than a promise |
+| `nameplate` | a cool near-white slab under a page that is **square on 87% of its elements** — 1,091 of 1,251 measured — where the one round shape is reserved for a white 1px-bordered pill carrying somebody else's publication name **as type rather than as a logo**, one family with the body at **weight 500**, and two uppercase registers tracked 0.06em and 0.175em | **pages whose argument is that named third parties will vouch for you** — press and media placement, PR distribution, trust marks and badges, certification, review aggregation and "as featured in" surfaces (standalone) |
 | `outrank` | white field with one violet that carries text in both directions, a 5px light ring standing in for a button shadow, and two type families split by how long a thing is read | SEO and growth SaaS, agent-run back-office — the pack for a product that ships a landing and a dashboard at once |
 | `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 |
@@ -151,7 +153,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 thirty-one style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
+| `styles/*.md` | The thirty-three 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 |
 
@@ -222,7 +224,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 thirty-one kits, so switching packs swaps identity rather than API,
+identical in all thirty-three 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.
@@ -268,7 +270,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 thirty-one
+installers and `diff -r`s the result against the source, then builds all thirty-three
 kits.
 
 `test/scenarios.md` (T1–T30) is the behavioral harness: fresh subagents given a

package/bin/cli.js

@@ -234,10 +234,14 @@ ${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/              thirty-one style packs — instrument-console (dark console),
+  styles/              thirty-three 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), babylove (white +
+                       atrium (warm cream consumer health), patchbay (dark live
+                       schematic), nameplate (a cool near-white slab under a
+                       square page, the one round shape reserved for a white
+                       bordered pill carrying somebody else's publication name
+                       as type), babylove (white +
                           one orange, seven tokens over Tailwind defaults),
                           outrank (white +
                           one violet, a landing and a dashboard in one brand),

package/cursor/rules/sheleg-design.mdc

@@ -15,7 +15,9 @@ 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
 never animate; atrium — warm cream consumer-health field, one terracotta
-accent, fluted-glass hero; babylove — seven brand tokens over Tailwind
+accent, fluted-glass hero; patchbay — a dark live schematic, one mint-cyan, 8% hairlines,
+no shadow, an architecture diagram whose cords carry SMIL particles;
+babylove — seven brand tokens over Tailwind
 defaults, two nested card levels, first-class disconnected states, for
 SEO and AI-visibility SaaS; outrank — a marketing page and a working tool in
 one brand, white with one violet, for SEO and growth SaaS; orchard — friendly
@@ -99,7 +101,13 @@ demonstration;
 bulletin — warm cream paper cut by flat pastel bands, every card and control a
 1px ink outline standing on a hard zero-blur ink offset it travels into when
 pressed, a display face at 800 inside controls and 700 in the headline, and no
-tracking at any size, for front doors whose argument is breadth);
+tracking at any size, for front doors whose argument is breadth;
+nameplate — a cool near-white slab under a page square on 87% of its elements,
+the one round shape reserved for a white 1px-bordered pill carrying somebody
+else's publication name as type, one family with the body at weight 500, and two
+uppercase registers tracked 0.06em and 0.175em, for pages whose argument is that
+named third parties will vouch for you: press placement, trust marks,
+certification and review aggregation);
 otherwise follow the contract below (self-contained on purpose).
 
 ## Whether to animate at all — before how

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

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

@@ -0,0 +1,74 @@
+# Nameplate — the contract this design system ships under
+
+**Register.** Choose Nameplate for **pages whose argument is that named third
+parties will vouch for you**: press and media placement, PR distribution, trust
+marks and badges, certification and accreditation, review aggregation and
+"as featured in" surfaces. A cool near-white slab, a page that is square almost
+everywhere, and one round shape reserved for a plate carrying somebody else's
+name. Build every screen against `var(--…)` and never a literal.
+
+**The page is square, and that is the discipline.** 87% of the reference's
+rendered elements sit at zero radius — 1,091 of 1,251 measured. `--r-xs` (4px)
+is an inline tag, `--r-sm` (8px) an inner well, `--r-md` (16px) a card or the
+framed panel. `--r-pill` belongs to the plate and to the two CTAs, and to
+nothing else. Every radius you add spends the plate's meaning.
+
+**The plate is drawn by its border.** White fill, 1px `--line`, `--r-pill`,
+`--shadow-pill` at 4% and 2px blur, one borrowed name as 15px/500 type at
+`--pill-h`. It carries **type, never a logo** — that is what lets thirty of them
+sit together without becoming a ransom note of thirty typefaces. One name per
+plate. Give it a fill and it stops being a nameplate.
+
+**The lift is one gesture.** On hover a plate translates by `--lift` (2px) *and*
+grows its shadow to `--shadow-pill-hover`, both over `--dur-base` (200ms) on
+`--ease-out`. Animating one without the other is the fastest way to break the
+pack. `:active` returns the lift to zero over `--dur-press` (140ms).
+
+**Elevation is a hairline, with one exception per screen.** `--shadow-frame` —
+25px offset, 70px blur, 7% — belongs to the framed panel holding the
+demonstration, and to nothing else. Two of them in one viewport spends the only
+depth the page has; one on a card or a control makes the pack look like a
+template.
+
+**The action is a ramp, and it does not change on hover.** `--action` is a
+two-stop coral gradient; hover spends `--shadow-action-hover` plus the lift,
+`:active` swaps to `--action-pressed`. Darkening a coral on hover reads as a
+disabled state. At most one primary per view. The blue is **not** the action —
+it is `--link` and `--focus-color`, and the reference's declared tokens make it
+look primary while the render disagrees.
+
+**Colour corrections you must not undo.** White on the reference's own coral is
+2.90:1; `--action` holds the hue and moves lightness until white clears AA
+along the whole ramp. The reference's body grey is 4.42:1 on `--field`, so
+`--ink-body` is darker. Its focus ring is `rgba(…, 0.35)` at 1.34:1 against a
+3:1 floor — the ring here keeps the measured hue and is **opaque**. Reverting any
+of the three reintroduces a measured failure.
+
+**Two fields, and white is the resting state.** `--bg` is the page, `--field` the
+cool slab an act stands on. A card on the slab is white with no border; the same
+card on white takes a 1px `--line-soft`. This pack never separates by going
+darker — `--surface-2` is an inset well, not a card.
+
+**Status is never by colour alone.** `--good` / `--warn` / `--danger` / `--info`
+each take a glyph or a label beside the colour. The set was searched, not
+picked: with a coral action in the palette a conventional red danger is
+indistinguishable from it under every dichromacy, so `--danger` is deep, and
+`--info` is a cyan because the blue is already `--accent`.
+
+**Type: one family, body at medium.** Poppins at four weights. Body is 17px at
+**weight 500** with a 1.6 line-height; display is 700 tracked `--track-display`
+(−0.02em). Two uppercase registers exist and are not interchangeable —
+`--track-caps-control` (0.06em) on a button label, `--track-caps-micro`
+(0.175em) on a micro-link.
+
+**Every control clears `--tap-min` (44px).** This is a correction: 87 of the
+reference's 137 visible interactive elements at 390px are shorter than that.
+
+**No texture, no dark variant, no scroll clock.** There is no grid, noise or
+pattern — acts are separated by returning to white, by a 1px rule, and by the
+`Wave`. The reference has no dark band anywhere, so a dark theme here would be
+invented. `MOTION_INTENSITY` above 4 has nothing legal to buy: no parallax, no
+scrub, no `animation-timeline`.
+
+**Reduced motion collapses every duration and the lift to zero**, and content is
+never gated behind a reveal that did not run.

package/kits/nameplate/README.md

@@ -0,0 +1,44 @@
+# @sheleg-design/nameplate
+
+The React reference kit for the SHELEG **Nameplate** style pack — a cool
+near-white slab under a page that is square on 87% of its elements, where the one
+round shape is reserved for a white 1px-bordered pill carrying somebody else's
+publication name as type.
+
+It is generated from the pack, not authored beside it: `src/styles.css` opens
+with `styles/tokens/nameplate.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
+```
+
+## The spine
+
+`Button`, `Card`, `Chip`, `Stat`, `Heading`, `Rule` — identical names, props and
+types in every SHELEG kit, so switching packs swaps identity rather than API.
+
+## This pack's own
+
+`Plate` (the borrowed name, and the reason the pack exists), `PlateBand` (the
+wrapping row of them — it wraps, it never scrolls), `Wave` (the 150px arc that
+closes an act, overspilling to 150% width and gone under 768px), `Frame` (the one
+object per screen allowed to wear the 70px-blur shadow) and `Eyebrow` (two
+uppercase registers, tracked 0.06em and 0.175em, and they are not
+interchangeable).
+
+## The three rules that carry the kit
+
+1. **The border is the plate.** A fill takes the meaning away, and a logo takes
+   the readability with it. Thirty names set as type read as a list; thirty
+   logotypes read as thirty typefaces.
+2. **The lift is one gesture.** Travel and shadow-growth share `--dur-base`, so a
+   plate rises *and* separates in one motion. Animate one without the other and
+   the pack is gone.
+3. **The round shape is rationed.** `Chip` is square at `--r-xs` and `Plate` is a
+   pill, and reaching for the pill where the content is not a borrowed name spends
+   the only shape on the page that means something.
+
+**Motion does not cross into a design tool.** A kit is the static half of a pack:
+the lift and the press are described here and in the pack, and implemented in
+`styles.css`, but nothing in this package animates on its own.

package/kits/nameplate/package.json

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

@@ -0,0 +1,23 @@
+---
+category: Actions
+---
+
+`primary` is the coral ramp — `--action` — and there is at most one per view. Its
+label is 14px/700 uppercase at `--track-caps-control`, and white on it clears AA at
+every point along the ramp because the ramp was corrected for exactly that: the
+reference's own gradient is 2.90:1 under white.
+
+Hover does **not** change the fill. It spends `--shadow-action-hover` and lifts by
+`--lift`, both at `--dur-base` — the reference's own hover here is a glow, and
+darkening a coral on hover reads as a disabled state. `active` takes
+`--action-pressed` and returns the lift to 0.
+
+`secondary` is a plate that happens to be a button: `--surface` fill, 1px
+`--line-soft`, no fill change on hover. `ghost` carries no border.
+
+Every size honours `--tap-min` (44px) as a height floor.
+
+```tsx
+<Button>See how it works</Button>
+<Button variant="secondary">View real results</Button>
+```

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

package/kits/nameplate/src/Card.md

@@ -0,0 +1,14 @@
+---
+category: Surfaces
+---
+
+A card is `--surface` at `--r-md`, and it is drawn two ways on purpose: **no border
+and no shadow** when it stands on `--field`, a 1px `--line-soft` when it stands on
+white. Its separation comes from the field it is on, which is why the same component
+changes clothes.
+
+It never wears `--shadow-frame`. That shadow belongs to `Frame`, once per screen.
+
+```tsx
+<Card title="Guaranteed placement" meta="48h">…</Card>
+```

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

package/kits/nameplate/src/Chip.md

@@ -0,0 +1,15 @@
+---
+category: Foundations
+---
+
+A chip is the small square-ish object at `--r-xs`: an inline tag, a filter, a count.
+It is **not** a plate — a plate is `--r-pill` and carries a borrowed name, and the
+distinction is the pack's whole discipline. Reaching for `Chip` where the content is
+somebody else's name spends the round shape without buying the meaning.
+
+`accent` tints with `--accent-wash` rather than filling with `--accent`.
+
+```tsx
+<Chip>Distribution</Chip>
+<Chip tone="accent" selected>Authority</Chip>
+```

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

package/kits/nameplate/src/Eyebrow.md

@@ -0,0 +1,18 @@
+---
+category: Foundations
+---
+
+The tracked uppercase micro-label. Two registers, and they are **not**
+interchangeable: `micro` tracks `--track-caps-micro` (+0.175em) at 12px, `control`
+tracks `--track-caps-control` (+0.06em) at 14px.
+
+The threefold difference is measured, and the reference's own `--tracking-caps` token
+describes only the second. Collapsing them to one value is how the eyebrows stop
+reading as eyebrows.
+
+Above a section head. Never inside a control — that is what `control` register is
+for, and `Button` already applies it.
+
+```tsx
+<Eyebrow>See sample report</Eyebrow>
+```

package/kits/nameplate/src/Eyebrow.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+
+export interface EyebrowProps {
+  children: ReactNode;
+  /** `micro` tracks +0.175em; `control` tracks +0.06em. They are not interchangeable. */
+  register?: 'micro' | 'control';
+  className?: string;
+}
+
+export function Eyebrow({ children, register = 'micro', className }: EyebrowProps) {
+  return (
+    <span
+      className={['np-eyebrow', `np-eyebrow--${register}`, className]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {children}
+    </span>
+  );
+}

package/kits/nameplate/src/Frame.md

@@ -0,0 +1,14 @@
+---
+category: Surfaces
+---
+
+The one object per screen allowed to wear `--shadow-frame` — 25px offset, 70px blur,
+7%. `--r-md`, no border.
+
+It holds the demonstration: the mocked article, the report, the product shot. Putting
+this shadow on a card or a control is what makes the pack look like a template, and
+putting two Frames in one viewport spends the only depth the page has.
+
+```tsx
+<Frame><img src="…" alt="A placement on a named outlet" /></Frame>
+```