sheleg-design-skill 1.47.0 → 1.48.1

package/CHANGELOG.md

@@ -6,6 +6,175 @@ follow [SemVer](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [1.48.1] - 2026-08-24
+
+### The assembly rule is written down, and the render step earned its place within the hour
+
+The procedure for adding a pack lived in three homes — `CONTRIBUTING.md`'s authoring
+steps, `docs/DOCMAP.md`'s propagation row, and the release section — and three things
+the `nameplate` run actually did were in none of them. They are now in the home that
+already owns each, rather than in a fourth document, which `DOCMAP`'s single-homes
+discipline forbids.
+
+**`STYLE_PACK_TEMPLATE.md` gains rules 7 and 8**, and both ship inside the bundle so an
+author holding only the installed skill sees them. Rule 7 is *read the render, not the
+stylesheet*: a dead token reads as the brand, a gradient hides from a
+`background-color` census because its element's is transparent, and vendor CSS
+outnumbers authored CSS — three traps met in one run, each with the shipped pack that
+met it. Rule 8 is *write a ratio so the gate can compute it*, with all four shapes that
+fail: a line break between the number and its partner, a token whose name contains
+another's (`--on-action` resolves as `--action`, a gradient that pairs with nothing), a
+table row stating a bare ratio, and a line whose **only** token is the partner, so it
+fills both slots and pairs with itself.
+
+**`CONTRIBUTING.md` gains step 8: render the kit and check its computed values against
+what the pack claims.** Not a screenshot for the eye — mount it on real content at
+1440, 768 and an emulated 390, then read `getComputedStyle` back. The step existed
+only as a sentence in `bulletin`'s CHANGELOG entry, so whether it happened depended on
+the next author reading that paragraph. **It caught a defect within the hour of being
+written:** the `Mark` tile added in this same release rendered 60×60 against a declared
+50, because `.np-mark` was not in the kit's `border-box` list — the same defect as the
+plate one release earlier, in the component added to close a different gap.
+
+### The mark set, and what measuring it changed
+
+`nameplate`'s reference repeats one object per feature on the report surface it embeds:
+a 50×50 tile at 16px radius wearing a **5px solid ring**, a wash at 9–12% alpha and a
+glyph in the matching solid. Six hue pairs drive it and the pack carried none of them,
+so an agent building the reference's own feature row would have invented six colours.
+
+**Measuring them changed the answer from "carry six hues" to "carry a mechanism and a
+ban".** The set does not separate from itself: seven of its fifteen pairs are tight,
+and the reference's own indigo `#5b4bd4` and violet `#6c5ce7` are 5.58 OKLab units
+apart at full colour — one colour wearing two names. So the hue is variety, never
+meaning; it does not encode which feature this is; and the tokens are **numbered**
+rather than named so nothing can misread them as semantic. That is the measured
+difference from `pigeonhole`, whose hues *are* a taxonomy and whose label word is
+therefore mandatory, and the fork is now written from both ends.
+
+The sixth hue was dropped for a second measured reason: the reference's red `#d94558`
+sits **2.92** units from `--action-to` and 1.12 under the worst dichromacy — the same
+colour to every reader, not only to a colourblind one. A mark in the action's colour
+reads as a control, so the coral stays with `--action` and the sixth slot takes
+`--mark-neutral`. All six clear the 3:1 non-text floor on their own composited tile,
+and none may carry a word: `--mark-4` is 3.89:1 on the slab, `--mark-2` is 4.27:1, and
+the dropped red was 3.96:1.
+
+Ships `Mark` as the kit's twelfth component, with `tone` as a number precisely because
+it means nothing.
+
+### A claim that was wider than its evidence
+
+The pack said *the reference has no dark band anywhere*, and what had been checked was
+the home page at 1440. The authored stylesheets declare **eight** dark fills, and both
+kinds were then checked: `.bg-header-blue` (`#231b66`) is dead CSS no served page uses,
+and the one that renders (`#1f2937`) sits inside a **mock of another product's
+interface** in the hero image. The claim holds in substance and now states the width it
+was measured at, in the Bans and in the token layer's own comment. A claim wider than
+its evidence is this repository's own defect class, and it does not get an exemption
+for being ours.
+
+### Still open, and named rather than quietly dropped
+
+`T31` is unrun — it needs fresh contexts reading blind. And 29% of the reference's
+authored CSS is still unmeasured into the pack: the checkout (`order-form-cro.css`,
+66,546 B) and the report surface (71,302 B) of 500,051 B total. The pack describes a
+front door and says nothing about the payment step. That is an extension to a second
+surface, not a loose end.
+
+Gates: 4617 → **4626**, 2659 → **2681**, 692 unchanged. Both palette ceilings held.
+
+## [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

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-two 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.
 
@@ -52,6 +52,7 @@ into the cinematic layer, and says so in its own *Motion flavor* section.
 | `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 |
@@ -152,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-two 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 |
 
@@ -223,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-two 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.
@@ -269,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-two
+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,11 +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-two 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), patchbay (dark live
-                       schematic), babylove (white +
+                       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

@@ -101,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>
+```

package/kits/nameplate/src/Frame.tsx

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+
+export interface FrameProps {
+  children: ReactNode;
+  className?: string;
+}
+
+/** The one object per screen allowed to wear --shadow-frame. */
+export function Frame({ children, className }: FrameProps) {
+  return (
+    <figure className={['np-frame', className].filter(Boolean).join(' ')}>
+      {children}
+    </figure>
+  );
+}

package/kits/nameplate/src/Heading.md

@@ -0,0 +1,14 @@
+---
+category: Foundations
+---
+
+Three levels, all in the one family at `--weight-display` (700) with
+`--track-display` (−0.02em): 1 is the hero at `--t-hero` (45px, and 30px at ≤768), 2
+is the section at `--t-section`, 3 is a card title.
+
+The tracking is negative at every level and the body is untracked — that pair is the
+pack's type signature, and setting a heading at 0 tracking loses it.
+
+```tsx
+<Heading level={1}>Build instant authority</Heading>
+```