sheleg-design-skill 1.18.0 → 1.20.0

package/CHANGELOG.md

@@ -4,6 +4,160 @@ 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.20.0] - 2026-08-12
+
+A fifteenth style pack, whose display typeface costs zero bytes — and three
+WCAG failures in the reference, one of them on the very element the design is
+remembered by.
+
+### Added
+
+- **`manpage`** — the fifteenth pack, extracted from `zernio.com` off the
+  server-rendered HTML of three pages and its two shipped stylesheets, which
+  declare 398 custom properties: the Tailwind v4 default ramps plus twelve
+  bespoke brand names (coral, cream, ink, charcoal, burgundy, each with a
+  `-muted` partner). Cream paper, a 48px display that never grows louder, a
+  576px argument column narrower than most prose, coral label chips that are
+  real `<h2>`s, `└` tree glyphs in their own grid column, and one dark code
+  frame as the focal point. For developer products whose buyer reads code —
+  APIs, SDKs, CLIs, MCP servers. Widened contract, a two-theme token layer, a
+  full reference kit, and reciprocal forks written into `blueprint`,
+  `datasheet`, `field-notes`, `instrument-console`, `scoreboard`, `showroom`
+  and `workbench`.
+- **The display face is the system monospace, and that is the whole identity.**
+  The reference loads exactly one webfont — a single variable Geist Sans — and
+  sets its headline, body, chips, code frames and FAQ in
+  `Menlo, Consolas, Monaco, "Liberation Mono", "Courier New", monospace`, which
+  is already on the reader's machine. No render-blocking request for the face
+  that carries the page, and no swap window on the headline. Substituting a
+  webfont mono is banned in the pack: it costs a request to look less native.
+- **The section heading is a chip and the chip is a real heading.** `LabelChip`
+  wraps its span in an `<h2>`, which is why the reference keeps a clean outline
+  — one `h1`, one `h2` per section — while reading as a printed specification.
+- **`FaqList` is a `<dl>` that never collapses.** The reference ships zero
+  `<details>` and zero `<summary>` on its FAQ: every answer is flat text in the
+  DOM, paired with its question, extractable without running JavaScript. The
+  component has no `collapsed` prop and will not get one.
+
+### Fixed
+
+Four corrections to the reference, every replacement a colour it already ships:
+
+- **The white button label fails AA.** `Start for Free` is white on coral at
+  **4.16:1**, on both the hero and the closing CTA. The fill is kept — the coral
+  button *is* the identity — and the label darkens to `--on-action` (ink) at
+  **4.55:1**. `--action-strong` is the reference's burgundy, carrying white at
+  13.34:1.
+- **The signature element is the least readable thing on the page.** The section
+  chip paints 12px coral on a coral/8 wash: **3.24:1**, worse than coral on bare
+  cream because the wash lifts the field. The wash and edge are kept so the chip
+  looks identical; the label becomes `--accent-ink` at **10.40:1**.
+- **The live-status green fails AA at 2.82:1.** `green-600` carries the credit
+  balance, the `online` badge and both weekly counters. Its own ramp cannot be
+  stepped into a legal set — `green-700` still misses at 4.35:1 and `green-800`
+  clears AA but separates by only 3.9 under dichromacy — so success takes
+  emerald-800, a ramp the reference also ships in full.
+- **One reduced-motion gate out of eight animations.** The reference gates its
+  40s logo marquee behind `motion-safe:` and leaves the hero blur-in, every
+  section rise, `fadeInScale`, `slideInRight`, `pulse`, `ping` and a **1.1s
+  infinite `waveform`** running for a reader who asked for stillness. The pack
+  collapses the whole surface, and infinite motion **stops** rather than
+  shortens.
+
+### Changed
+
+- `test/floors.json` raised: `validate.py` 1647 → 1788, `validate_palette.py`
+  716 → 791, `sloplint.py` 366 → 422.
+- **The stated-ratio checker earned its keep twice on this pack**, catching
+  `--ink-strong` claimed at 18.98:1 against a computed 19.44 and
+  `--on-action-strong` at 6.71:1 against 7.76 — both authored by hand, both
+  wrong, neither visible on inspection.
+- `SURFACE_COMPOSITION.md`: three counts corrected by measurement — the accent
+  resolves as `--accent` in **thirteen** packs, `--brand` in `field-notes` and
+  `--cta` in `orchard`. **B-016 stays open**: none of the three reaches a check,
+  because `in thirteen,` is not followed by a counted noun. This is the third
+  release in which they were fixed by hand.
+- `plugins/sheleg-design/.claude-plugin/plugin.json` said **thirteen** style
+  packs while fourteen shipped. `validate_counted_claims()` did not catch it:
+  its pattern wants `<number> [pluggable|locked] style packs` and the manifest
+  wrote `pluggable visual style packs`, so the intervening adjective hid a stale
+  count from the gate that exists to find them. Corrected to fifteen; the
+  pattern gap is the same class as B-016.
+
+## [1.19.0] - 2026-08-12
+
+A fourteenth style pack, and the Refero style card it started from was wrong in
+four measurable places.
+
+### Added
+
+- **`datasheet`** — the fourteenth pack, extracted from `fingerprint.com` off its
+  live computed styles and its shipped stylesheet, which declares 140 custom
+  properties including ten-step ramps for nine hues. An off-white spec sheet, one
+  vivid orange, Inter over JetBrains Mono, a concentric radius family from 16 down
+  to 2 — and a **live instrument ruled out of hairlines at radius 0 which re-skins
+  itself dark when it detects the reader is hiding**. For B2B SaaS whose product is
+  a verdict about the visitor, the request or the device: fraud and bot detection,
+  device intelligence, identity, API products sold on their payload. Widened
+  contract, a two-theme token layer, a full reference kit, and reciprocal forks
+  written into `field-notes`, `instrument-console`, `showroom`, `blueprint` and
+  `scoreboard`.
+- **The dark half is a state, not a theme.** `[data-state="alarm"]` — the token
+  `--dash-dark` appears in 97 rules on the reference and every one of them is an
+  incognito selector; 134 rules in total re-skin the instrument when it detects
+  evasion. Wiring that surface to a user preference is banned in the pack, because
+  it destroys the only idea the pack has.
+
+### Fixed
+
+- **`validate_counted_claims()` did not read the three manifests, and both carried
+  a stale count.** `.claude-plugin/marketplace.json` said *"twelve pluggable style
+  packs"* above a list of thirteen for two releases, and `package.json` said
+  *"thirteen"* on the day the fourteenth landed. Names in those files were already
+  checked; the number beside the names was not, because the source list was
+  all-markdown plus two scripts. The list now includes both plugin manifests and
+  `package.json`, watched saying no against a planted `eleven` in the real file and
+  again as a permanent self-test plant that derives its wrong number from whatever
+  the manifest currently claims.
+- **Four corrections to the reference, recorded rather than applied silently.** Its
+  primary button sets white on `--orange-7` at **3.32:1**, so the pack's resting
+  fill moves one ramp step to `--orange-8` (5.34:1) and hovers to `--orange-9`
+  (9.02:1) — no colour invented, and the darkening direction kept. Its 8px mono
+  badge is set in `--gray-6` at **2.51:1** and the pack refuses that ink. Its `h1`
+  is pure black while its `body` is `#141415`, and the pack ships one ink. Its
+  `prefers-reduced-motion` block covers one group of hero animations out of roughly
+  twenty keyframe sets, and the token layer collapses the whole surface.
+- **Eleven defects in the new pack, found by its own routing scenario and fixed
+  before the tag.** T24 ran both branches in fresh contexts — the positive branch
+  chose `datasheet`, the negative stayed on `field-notes` — and each was asked to
+  read its chosen pack and report defects. The sharpest: in the alarm state
+  `--danger` on its own tint measured **4.44:1**, in the one cell that state exists
+  to render (the tint moves to `--pink-10`, 6.24:1); and the focus ring at
+  `--accent` measured **2.85:1** on `--accent-wash`, the surface the pack itself
+  mandates for a selected cell (a new `--focus-color` is `--accent-deep` on paper).
+  Also fixed: an accent job list that contradicted the pack's own ban, a button
+  border rule with no token behind it, 54 of 118 token declarations carrying
+  neither MEASURED nor SELECTED, a "hard floor" argument that sat exactly on the
+  floor, a duration measured against the wrong ceiling, an empty state using an ink
+  the palette table forbids for content, and two type values outside the ramp. Full
+  table in `test/scenarios.md` under T24.
+- **`SKILL.md` said "Six of the fourteen … The other seven answer all four."** Six
+  plus seven is thirteen against a fourteen-row table, and the pack left out of the
+  sentence was the one this release adds. It was this release's own count edit that
+  did it — **and the identical defect was found by a scenario agent in the previous
+  pack release**, fixed then as an instance. `validate_contract_split()` now derives
+  all three numbers from the table, watched saying no against a planted remainder
+  and shipped with a permanent self-test plant that reads whatever the paragraph
+  currently claims.
+- **`SURFACE_COMPOSITION.md` said the accent role resolves to `--accent` in ten
+  packs.** True at twelve, silently wrong at thirteen, twelve at fourteen. Fixed by
+  hand and filed as **B-016**, because the phrase reaches no check: `in ten,` is
+  not followed by a counted noun.
+
+### Changed
+
+- Ratchet floors raised to **1647 / 716 / 366** from 1507 / 603 / 352.
+
 ## [1.18.0] - 2026-08-12
 
 ### Changed

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 **thirteen locked style
+decides whether to animate before it decides how, and **fifteen locked style
 packs** with ready-made design tokens, so what it builds reads as one system
 instead of a pile of effects.
 
@@ -58,6 +58,8 @@ into the cinematic layer, and says so in its own *Motion flavor* section.
 | `maquette` | near-black table, cream ink and cream axonometric models, mono block labels, pale aqua that works as text, one offset shadow | enterprise data infrastructure sold to an architecture buyer |
 | `scoreboard` | warm paper and warm near-black ink, 2–3px radii, an ink primary button, one hot orange that only ever marks, and a dark ledger of dotted-leader rows whose numbers are set in an aliased pixel face | products whose argument is an accumulating number — ads and SEO operators, growth tools, revenue dashboards sold on results |
 | `cyclorama` | a pale field cycling through six pastel stops on a 32s loop under near-black ink that never moves with it, a monospaced typewriter serif over mono, one orange used only as a fill, a particle organ that holds then redeploys, no shadows anywhere | enterprise AI transformation, applied-AI services, technical consultancies — where what is sold is a change of state and there is no screenshot worth showing |
+| `datasheet` | an off-white spec sheet ruled with dashed page guides, a live instrument built from hairline cells at radius zero, one vivid orange, Inter over JetBrains Mono, concentric radii from 16 to 2, and a dark alarm state the instrument enters when it detects the reader is hiding | B2B SaaS whose product is a verdict about the visitor, the request or the device — fraud and bot detection, device intelligence, identity and verification, API products sold on their payload |
+| `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 |
 
 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
@@ -132,7 +134,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 thirteen style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
+| `styles/*.md` | The fifteen 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 |
 
@@ -203,7 +205,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 thirteen kits, so switching packs swaps identity rather than API,
+identical in all fifteen 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.
@@ -249,7 +251,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 thirteen
+installers and `diff -r`s the result against the source, then builds all fifteen
 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/              thirteen style packs — instrument-console (dark console),
+  styles/              fifteen 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
@@ -243,7 +243,11 @@ ${c("bold", "What it installs")}
                        (the product as the exhibit), blueprint (a drawing sheet,
                        zero radius), prism (one iridescent wash over mono body),
                        maquette (cream axonometric models on a dark table),
-                       scoreboard (warm paper, pixel numerals, a dark ledger) —
+                       scoreboard (warm paper, pixel numerals, a dark ledger),
+                       datasheet (an off-white spec sheet whose live instrument
+                       goes dark when it catches the reader hiding),
+                       manpage (a developer landing page set in the reader's
+                       own system monospace, cream paper, coral label chips) —
                        plus a ready-made token CSS per pack and
                        STYLE_PACK_TEMPLATE.md for authoring more
 `);
@@ -325,7 +329,7 @@ function main() {
       `  ${c("dim", "SKILL.md")}            the agent skill\n` +
       `  ${c("dim", "SHELEG_DESIGN.md")}    the full reference\n` +
       `  ${c("dim", "MOTION_DOCTRINE.md")}  whether to animate at all — read before any animation\n` +
-      `  ${c("dim", "styles/")}             style packs + token CSS (instrument-console / editorial-luxury / workbench / briefing-room / atrium / orchard / field-notes / cyclorama / showroom / blueprint / prism / maquette / scoreboard)\n\n` +
+      `  ${c("dim", "styles/")}             style packs + token CSS (instrument-console / editorial-luxury / workbench / briefing-room / atrium / orchard / field-notes / cyclorama / showroom / blueprint / prism / maquette / scoreboard / datasheet / manpage)\n\n` +
       `Your Cursor / Claude agent can now discover the skill and build\n` +
       `cinematic, scroll-driven pages — or style product UI (dashboards, admin,\n` +
       `internal tools) from a standalone pack — on its principles.\n\n` +

package/cursor/rules/sheleg-design.mdc

@@ -30,7 +30,13 @@ static iridescent wash over mono body copy; maquette — enterprise data
 infrastructure as a cream axonometric model on a near-black table;
 scoreboard — warm paper and a dark ledger of dotted-leader rows whose
 numbers are set in an aliased pixel face, for a product whose argument is
-an accumulating number);
+an accumulating number; datasheet — an off-white spec
+sheet whose focal element is a live instrument ruled at radius zero and
+which re-skins itself dark when it detects the reader is hiding, for B2B
+SaaS whose product is a verdict about the visitor or the device;
+manpage — a developer landing page set in the reader's own system
+monospace on cream paper, coral label chips that are real headings and a
+dark code frame as the argument, for APIs, SDKs and CLIs);
 otherwise follow the contract below (self-contained on purpose).
 
 ## Whether to animate at all — before how

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

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

@@ -0,0 +1,72 @@
+# Datasheet — the contract this design system ships under
+
+**Register.** Choose Datasheet for **B2B SaaS whose product is a verdict about
+the visitor, the request or the device**: fraud and bot detection, device
+intelligence, identity and verification, anti-abuse, payment risk, API products
+sold on the payload they return. The page is a spec sheet, and the specimen is the
+reader — the instrument shows *their* visitor id, *their* city, *their* IP, and a
+verdict reached seconds ago. The fork people get wrong is against `field-notes`,
+which shares the off-white paper, the hairlines and the one warm accent: there the
+small mono type annotates a **source** so a claim can be checked (*how do you
+know?*); here it carries a **reading** about the reader (*what did you get?*).
+Build every screen against `var(--…)` and never a literal.
+
+**The accent is a mark and a fill, not a voice.** `--accent` measures 3.17:1 on
+the field: enough for a non-text mark and for large text at 24px and above, not
+enough for anything at body size. Its jobs are one word of a display headline, the
+mono visitor id, a 2px focus ring, a tick, and a wash on a selected cell. Where an
+orange must carry a word at body size, use `--accent-deep` at 5.11:1. The primary
+button fills with `--action` — one ramp step deeper than the brand orange, because
+white on the brand step measures 3.32:1 and fails AA — and darkens to
+`--action-hover` on press.
+
+**The instrument is not a card, and its cells never round.** A card is
+`--surface` at `--r-card` with the inset elevation pair. The instrument is a grid
+whose walls are 1px `--rule` at `--r-cell`, which is **0**. Rounding those cells is
+the single edit that turns this system into a generic SaaS page. Padding is
+`--pad-cell`; every cell is a 9px uppercase label over an 11px value, and machine
+output — ids, IPs, hashes, timestamps — takes the mono face.
+
+**Radii are concentric and the arithmetic is real.** 16 outside, 8 inside, 12 on
+cards, 6 on buttons, 4 on controls, 2 on a chip, 0 on the instrument. An inner
+radius is the outer radius minus the padding between them: the frame carries
+`--grid` of padding, so its shell resolves to `--r-inner`. Never the same radius
+twice in a nest.
+
+**Elevation is inset, never dropped.** Cards and the frame carry the measured
+two-line inset — a pale top edge, a darker bottom one. Nothing casts a downward
+shadow, nothing lifts on hover, nothing scales.
+
+**Status is never by colour alone.** Every status cell tints its whole background
+with the matching `--*-weak` and **writes the verdict out**. The four statuses do
+not separate under dichromacy — success and warning are 3.7 apart under
+deuteranopia against a floor of 8 — so the tint is emphasis and the word is the
+meaning. No bare dots, no traffic lights, and never a hue swap to signal disabled:
+a disabled cell that changes colour reads as a different verdict. Disabled is 0.7
+opacity with pointer events off.
+
+**The dark surface is a state, not a theme.** `[data-state="alarm"]` exists
+because the instrument **detected** something — on the reference, that the reader
+is in incognito. Never wire it to a user preference, a toggle or
+`prefers-color-scheme`; that destroys the one idea this system has. In the alarm
+state the accent steps lighter, text on the accent flips to ink, and the status set
+is selected rather than measured, danger from the pink ramp because a red cannot
+sit beside an orange accent on a dark field.
+
+**Type.** Two families only: Inter and JetBrains Mono. No serif anywhere. The
+display weight is **500, not 600** — at 48px with -0.0625em tracking, 500 reads as
+engineered and 600 reads as an advertisement. Tracking runs both ways: negative
+and steep above 36px, positive and wide below 12px. A 9px label at neutral tracking
+is the fastest way to make this system look like a generic admin theme.
+
+**Motion.** One curve, one measured base duration (`--dur-base`, the reference's
+own single duration token), and one measured stagger of `--stagger` between the
+words of a display headline. Nothing exceeds 300ms. Colour and opacity only —
+never a layout property, and never `ease-in`. Under
+`prefers-reduced-motion: reduce` every duration and the stagger go to zero and the
+headline arrives already in place.
+
+**Never fabricate a reading.** If the instrument cannot show live data, it shows a
+labelled last-known one — the reference's own badge reads *this is a demo,
+production accuracy will be higher*. A screen in this system that invents an IP
+address has told its only lie in its loudest element.

package/kits/datasheet/README.md

@@ -0,0 +1,16 @@
+# @sheleg-design/datasheet
+
+The React reference kit for the SHELEG **Datasheet** style pack — an off-white spec
+sheet, a live instrument built from hairline cells at radius zero, and a dark alarm
+state the instrument enters when it detects the reader is hiding.
+
+It is generated from the pack, not authored beside it: `src/styles.css` opens with
+`styles/tokens/datasheet.css` byte for byte, and the rules the design agent must
+obey are in [`.design-sync/conventions.md`](./.design-sync/conventions.md).
+
+```bash
+npm install && npm run build
+```
+
+Then run `/design-sync` in Claude Code from this directory to push it to
+claude.ai/design.

package/kits/datasheet/package.json

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

@@ -0,0 +1,17 @@
+---
+category: Actions
+---
+
+One accent fill per view, and in this pack that fill is `--action` — the
+reference's own orange one ramp step deeper than its brand orange, because white
+on the brand step measures 3.32:1 and does not clear AA. `secondary` is the
+1px-bordered outline in `--accent-deep`; `ghost` is the bare navigation control
+that changes ink and nothing else. Hover moves fill, border and colour over
+`--dur-base`; nothing lifts, scales or gains a shadow. Disabled drops to 0.7
+opacity with pointer events off, measured off the reference.
+
+```tsx
+<Button onClick={start}>Get started</Button>
+<Button variant="secondary" onClick={contact}>Contact sales</Button>
+<Button variant="ghost" size="sm" onClick={close}>Dismiss</Button>
+```

package/kits/datasheet/src/Button.tsx

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

package/kits/datasheet/src/Card.md

@@ -0,0 +1,15 @@
+---
+category: Surfaces
+---
+
+The bounded surface for prose and features: `--surface` at `--r-card` with the
+measured inset pair for elevation and no border. It is deliberately **not** the
+instrument — the instrument is a hairline grid at radius 0 and never becomes a
+card, because rounding a reading is the edit that turns this pack into a generic
+SaaS page. `meta` sits on the right of the title row in the label style.
+
+```tsx
+<Card title="Account takeover" meta="12ms p95">
+  <Cell label="Signals" value="device, network, behaviour" />
+</Card>
+```

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

package/kits/datasheet/src/Cell.md

@@ -0,0 +1,16 @@
+---
+category: Data
+---
+
+The pack's atom: a 9px uppercase label in `--ink-soft` above an 11px value in
+`--ink`, inside a cell walled with 1px `--rule` at radius **0**. Padding is the
+measured `10px 12px`. Set `mono` for anything a machine produced — an id, an IP,
+a hash — because a proportional face makes two similar hashes look identical.
+
+The value is never justified and never hyphenated: a broken IP address is a wrong
+IP address.
+
+```tsx
+<Cell label="Geolocation">1 location</Cell>
+<Cell label="Visitor ID" mono>JzzA01Muat9b30Sh60KJ</Cell>
+```

package/kits/datasheet/src/Cell.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+
+export interface CellProps {
+  /** The 9px uppercase label. Always present: a value with no label is a number nobody can use. */
+  label: string;
+  children: ReactNode;
+  /** Set for machine output — ids, IPs, hashes, timestamps. */
+  mono?: boolean;
+  className?: string;
+}
+
+export function Cell({ label, children, mono = false, className }: CellProps) {
+  return (
+    <div className={['ds-cell', className].filter(Boolean).join(' ')}>
+      <span className="ds-cell__label">{label}</span>
+      <span className={['ds-cell__value', mono ? 'ds-cell__value--mono' : undefined]
+        .filter(Boolean)
+        .join(' ')}>
+        {children}
+      </span>
+    </div>
+  );
+}

package/kits/datasheet/src/Chip.md

@@ -0,0 +1,16 @@
+---
+category: Data
+---
+
+The small static label: 11px in the data face at `--r-chip`, 1px `--rule`,
+padding of 2 by 8. Chips name things that are already true — a region, a plan, a
+version — and never stand in for a button. `tone="accent"` is for the one value
+that is the screen's subject; `selected` fills with `--accent-wash` behind an
+accent edge, which is how the reference marks its active summary cell. A chip
+carrying a verdict is a `ValueChip`; a chip carrying an action is a `Button`.
+
+```tsx
+<Chip>eu-central-1</Chip>
+<Chip tone="accent">v3</Chip>
+<Chip selected>Suspect only</Chip>
+```

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

package/kits/datasheet/src/Heading.md

@@ -0,0 +1,14 @@
+---
+category: Foundations
+---
+
+Three levels, all Inter at `--w-medium` — 500, not 600, which is the single
+value a second-hand description of this reference gets wrong most often. Tracking
+is negative and steep at the display size (-0.0625em at 48px) and relaxes with
+the size. One word inside a heading may take `--accent` at `--w-semi`; weight and
+colour arrive together, once, and never as a whole phrase.
+
+```tsx
+<Heading level={1}>Identify every visitor</Heading>
+<Heading level={2}>What the API returns</Heading>
+```

package/kits/datasheet/src/Heading.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+
+export interface HeadingProps {
+  /** 1 = page title, 2 = section, 3 = sub-head. */
+  level?: 1 | 2 | 3;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Heading({ level = 2, children, className }: HeadingProps) {
+  const Tag = `h${level}` as 'h1' | 'h2' | 'h3';
+  return (
+    <Tag
+      className={['ds-heading', `ds-heading--${level}`, className].filter(Boolean).join(' ')}
+    >
+      {children}
+    </Tag>
+  );
+}

package/kits/datasheet/src/Instrument.md

@@ -0,0 +1,21 @@
+---
+category: Signature
+---
+
+The pack's signature element: the frame that reads the visitor's own data back to
+them. `--r-frame` on `--surface`, 8px of padding so an inner shell resolves to
+`--r-inner` (16 − 8 = 8, which the reference proves on itself), and a grid of
+cells whose walls are hairlines at radius 0.
+
+`alarm` is the whole idea. On the reference, 134 rules re-skin this frame dark
+when it detects the reader is in incognito — the argument completes itself with no
+copy. It is a **state, not a theme**: drive it from what was detected, never from
+a preference or a media query. Build the light state first and completely.
+
+```tsx
+<Instrument title="Hello, visitor JzzA01Muat9b30Sh60KJ" badge="This is real data">
+  <Cell label="Weekly visit summary">You visited 1 time</Cell>
+  <Cell label="IP address" mono>83.175.182.157</Cell>
+  <StatusCell label="Incognito" reading="success">Not detected</StatusCell>
+</Instrument>
+```