sheleg-design-skill 1.49.0 → 1.50.0

package/CHANGELOG.md

@@ -6,6 +6,84 @@ follow [SemVer](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [1.50.0] - 2026-08-25
+
+### Onionskin, the thirty-fifth pack — two bases, and everything quiet is an alpha
+
+Extracted from `supermemory.ai`, the front page of a memory and context engine for AI
+applications. The site is Astro: two stylesheets totalling 154,143 bytes declaring 151
+custom properties. Every value was read off **computed styles on the live page** through
+CDP at 1440×900 — 1,469 visible of 1,653 elements on a 14,437px page — and at a
+device-emulated 390×844.
+
+**The principle is measurable and it is the pack.** 199 of the 631 colour-carrying
+values on the page carry an alpha, drawn from exactly **two** bases: 97 from a navy used
+for every rule and panel edge and never for a word, and 83 from the ink, used only for
+words. Text dims through the ink; structure dims through the navy. **There is no grey
+ramp in this pack**, because the reference has none — which is what separates it from
+every other near-white technical sheet in the library.
+
+At **96.5% zero radius** — 1,418 of 1,469 rendered elements — it is the squarest page
+here by a margin. Three faces with one job each (a grotesque displays, a sans carries
+sentences, a mono carries every number and key), a dot grid at 0.8px, dashed hairlines
+for a provisional boundary, and a **working size of 11px**, which is the most frequent
+size on the page at every width.
+
+**An alpha composites in sRGB, not in linear light, and the first pass of this pack got
+that wrong.** Mixed in linear space, the ink at 60% computes 2.32:1 and reads as a
+failure that would have forced every tier to be redrawn; composited the way a browser
+does it, the same value is **4.98:1** and passes. The correction is recorded at the top
+of the token layer, because a pack whose central mechanism is alpha cannot afford the
+next reader to repeat it.
+
+**Four corrections travel with the pack.** A grey that fails on every field it is used
+on — `#888e94` on 48 text nodes, 3.31:1 on white, 3.17:1 on the panel, 2.97:1 on the
+tint. The lowest ink tier, which composites to 3.08:1 and carries six live text nodes,
+demoted to non-text. The rules, at 1.21:1 and 1.10:1, declared as rules rather than
+marks — with a ban requiring a second separator rather than a darker hairline. And 88 of
+123 interactive elements at 1440 under 44px, 73 of 106 at 390.
+
+**The accent needed none, which is rare here:** `#0562ef` is 5.25:1 on white *and*
+5.25:1 under white, so one token carries the fill and the word with no derived twin.
+
+**The fork against `blueprint` is the closest call in the library** and is written from
+both ends. Both are near-white technical sheets, both spend one blue that writes and
+fills, both are zero-radius, and `blueprint`'s Register describes this reference too.
+The separation is mechanical: `blueprint` builds its quiet layer from solid greys and
+rules with a solid line; this one has no greys at all. Body 16px against 11px, two
+families against three, a ruled field with ticks against a dot field.
+
+**The gate caught five of my own numbers.** Every stated ratio in the dark block was
+computed by hand and five were wrong; the gate supplied the right ones and they are what
+shipped. It also refused a `color-mix` with `transparent` inside it as uncomputable, and
+refused three tight status pairs in a dark set I had picked rather than searched — the
+searched set clears all ten pairs.
+
+**Rendering the kit found nothing**, for the first time in four releases. Worth saying
+because the step is not decoration: both classes it caught before — a control following
+its field into the dark act, and a box that grew by its own padding — were pre-empted
+here, `box-sizing` from the first line and a dark block with no light twin to invert.
+
+`MOTION_INTENSITY` is pinned at **2**: 1,290 of 1,469 elements compute
+`transition-duration: 0s` and `animation-timeline` appears zero times in 154,143 bytes.
+
+`ADR-0001` gains a further application, with `quadrille`, `tracing` and `vellum` weighed
+and rejected on its own criteria.
+
+Gates: 4754 → **4882**, 2784 → **2875**, 706 → **720**. Both palette ceilings held for
+the third consecutive release; `computed_at_least` rises 600 → 628.
+
+## [1.49.1] - 2026-08-25
+
+### Fixed
+
+The README told a reader to run commands the published package cannot run: it ships no
+`test/` directory, so `python3 test/validate.py` resolves in a clone and nowhere else. Measured against the
+published tarball on 2026-08-25. Shipping the suite does not fix it — the plants live in
+`.github/workflows/`, which no packaging npm can express puts in a tarball — so the document
+now names where the command runs instead of claiming it, beside a marker the umbrella's
+validator reads. Naming a dead command is this family's own rule; claiming one is the defect.
+
 ## [1.49.0] - 2026-08-24
 
 ### Rimlight, the thirty-fourth pack — elevation made of light

package/README.md

@@ -3,6 +3,15 @@
 [![npm version](https://img.shields.io/npm/v/sheleg-design-skill)](https://www.npmjs.com/package/sheleg-design-skill)
 [![CI](https://github.com/ssheleg/sheleg-design-skill/actions/workflows/validate.yml/badge.svg)](https://github.com/ssheleg/sheleg-design-skill/actions/workflows/validate.yml)
 [![license: MIT](https://img.shields.io/badge/license-MIT-blue)](./LICENSE)
+[![site](https://img.shields.io/badge/docs-skills.sshlg.me-8ab0ff)](https://skills.sshlg.me/skills/sheleg-design/)
+
+**[Docs, and every skill →](https://skills.sshlg.me/)** · [this skill's page](https://skills.sshlg.me/skills/sheleg-design/) · [follow @sshlg93 on X](https://x.com/intent/follow?screen_name=sshlg93)
+
+Loads in **DeepSeek Harness** (`dsh`) with **no plugin to write**: it reads the
+Agent Skills standard directly, scanning `~/.agents/skills` — where `npx skills
+add` puts this pack — at rank 500.
+
+**[Browse every style pack →](https://ssheleg.github.io/sheleg-design-skill/)** — every card rendered in its own token layer, plus the collection audit. The site each pack was measured from stays in the pack; the published pages name none of them.
 
 An agent can generate a landing page in under a minute, and it will look like
 every other generated landing page: three cards, a gradient, a hero that does
@@ -11,7 +20,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-four locked style
+decides whether to animate before it decides how, and **thirty-five locked style
 packs** with ready-made design tokens, so what it builds reads as one system
 instead of a pile of effects.
 
@@ -54,6 +63,7 @@ into the cinematic layer, and says so in its own *Motion flavor* section.
 | `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) |
 | `rimlight` | a white field with a cool grey act separator and one near-black act, a grotesque for every sentence and a **monospace for every piece of chrome**, square on 84% of its elements, tracked negative at every size and with **no bold anywhere** — and an elevation made of **coloured light**: a sixteen-layer rig, six layers lit and ten held at alpha 0, thrown from below-left onto one control per viewport | **a studio's own front door and the pages that sell what it makes** — design and engineering agencies, product studios, service and case-study pages (standalone) |
+| `onionskin` | a white technical sheet at **96.5% zero radius** — the squarest page in the library — where **two bases do all the work and everything quiet is one of them at an alpha**: text dims through the ink, structure through a navy that is never a word, so there is no grey ramp at all. A dot grid, dashed hairlines, three faces with one job each, and an **11px working size** | **developer and AI infrastructure whose front page is a working document** — memory and context engines, retrieval services, agent runtimes, evaluation and observability 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 |
@@ -154,7 +164,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-four style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
+| `styles/*.md` | The thirty-five 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 |
 
@@ -225,7 +235,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-four kits, so switching packs swaps identity rather than API,
+identical in all thirty-five 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.
@@ -248,6 +258,10 @@ repo. Entirely optional; without it the skill works from the pack alone.
 
 ## Development
 
+<!-- commands-run-in: a clone -->
+These run **in a clone of this repository**. The published npm package ships no
+`test/` directory, so from an install they are names, not commands.
+
 ```bash
 python3 test/validate.py   # or: npm test
 ```
@@ -271,7 +285,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-four
+installers and `diff -r`s the result against the source, then builds all thirty-five
 kits.
 
 `test/scenarios.md` (T1–T30) 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/              thirty-four style packs — instrument-console (dark console),
+  styles/              thirty-five 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
@@ -244,7 +244,10 @@ ${c("bold", "What it installs")}
                        as type), rimlight (a white field and one near-black
                        act, a monospace carrying every label and button, and
                        an elevation made of coloured light rather than a
-                       shadow), babylove (white +
+                       shadow), onionskin (a white technical sheet at 96.5%
+                       zero radius where every quiet value is the ink or a
+                       navy at an alpha, over a dot grid, at an 11px working
+                       size), 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

@@ -112,7 +112,12 @@ rimlight — a white field with a cool grey act separator and one near-black act
 grotesque for every sentence and a monospace for every piece of chrome, square on 84%
 of its elements, tracked negative at every size and with no bold anywhere, whose only
 elevation is a sixteen-layer coloured light rig thrown from below-left onto one
-control per viewport, for a studio's front door and its service and case-study pages);
+control per viewport, for a studio's front door and its service and case-study pages;
+onionskin — a white technical sheet at 96.5% zero radius where two bases do all the
+work and everything quiet is one of them at an alpha: text dims through the ink,
+structure through a navy that is never a word, over a dot grid with dashed hairlines,
+three faces with one job each and an 11px working size, for developer and AI
+infrastructure whose front page is a working document);
 otherwise follow the contract below (self-contained on purpose).
 
 ## Whether to animate at all — before how

package/kits/almanac/src/styles.css

@@ -404,7 +404,7 @@
 }
 
 .al-status--ok .al-status__dot {
-  background: var(--ok-mark);
+  background: var(--ok);
 }
 
 .al-status--warn {
@@ -413,7 +413,7 @@
 }
 
 .al-status--warn .al-status__dot {
-  background: var(--warn-mark);
+  background: var(--warn);
 }
 
 .al-status--danger {
@@ -422,7 +422,7 @@
 }
 
 .al-status--danger .al-status__dot {
-  background: var(--danger-mark);
+  background: var(--danger);
 }
 
 .al-status--neutral {

package/kits/daylight/src/styles.css

@@ -398,7 +398,7 @@
 }
 
 .dy-status--ok .dy-status__dot {
-  background: var(--ok-mark);
+  background: var(--ok);
 }
 
 .dy-status--warn {
@@ -407,7 +407,7 @@
 }
 
 .dy-status--warn .dy-status__dot {
-  background: var(--warn-mark);
+  background: var(--warn);
 }
 
 .dy-status--danger {
@@ -416,7 +416,7 @@
 }
 
 .dy-status--danger .dy-status__dot {
-  background: var(--danger-mark);
+  background: var(--danger);
 }
 
 .dy-status--neutral {

package/kits/notation/src/styles.css

@@ -396,7 +396,7 @@ strong, b { font-weight: var(--w-bold); }
 }
 
 .nt-status--ok .nt-status__dot {
-  background: var(--ok-mark);
+  background: var(--ok);
 }
 
 .nt-status--warn {
@@ -405,7 +405,7 @@ strong, b { font-weight: var(--w-bold); }
 }
 
 .nt-status--warn .nt-status__dot {
-  background: var(--warn-mark);
+  background: var(--warn);
 }
 
 .nt-status--danger {
@@ -414,7 +414,7 @@ strong, b { font-weight: var(--w-bold); }
 }
 
 .nt-status--danger .nt-status__dot {
-  background: var(--danger-mark);
+  background: var(--danger);
 }
 
 .nt-status--neutral {

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

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

@@ -0,0 +1,63 @@
+# Onionskin — the contract this design system ships under
+
+**Register.** Choose Onionskin for **developer and AI infrastructure whose front page is
+a working document**: memory and context engines, retrieval and embedding services,
+agent runtimes, evaluation and observability surfaces. A white technical sheet at 96.5%
+zero radius, ruled by hairlines, over a dot grid. Build every screen against `var(--…)`
+and never a literal.
+
+**Two bases, and everything quiet is one of them at an alpha.** Text dims through
+`--ink`; structure dims through a navy that is never a word. There is **no grey ramp in
+this pack** — introducing `#6b7280` here introduces a third base and dissolves the whole
+construction. 199 of the reference's 631 colour-carrying values carry an alpha, from
+exactly two bases.
+
+**An alpha composites in sRGB, not in linear light.** `--ink` at 60% is 4.98:1 and
+passes; computed in linear space the same value reads 2.32:1 and looks like a failure.
+Every ratio in the token layer was computed the way a browser composites.
+
+**The navy is never a word.** At its working alpha it is 1.21:1. It rules and it edges.
+
+**A rule is never the only separator.** At 1.21:1 a hairline is below every floor there
+is, so the region it bounds must ALSO change field, gain a label, or gain space. This is
+a ban, not a preference.
+
+**Elevation is an edge.** `--edge-lit` — the accent at 28%, inset on the left and right
+— marks the one panel per section that is the subject. `--shadow-lift` appears once on
+the reference and should appear once on your page. A panel never floats.
+
+**The working size is 11px.** It is the most frequent size on the reference at every
+width, and it carries labels, keys, annotations and mono data. Setting it at 13px "for
+readability" turns this into a different pack; the density is the argument.
+
+**Tracking is two-sided.** `--track-micro` (+0.18em) on the uppercase label,
+`--track-display` (−0.05em) on the display. Collapsing them loses the page's texture.
+
+**Three faces, one job each.** Space Grotesk displays, DM Sans carries every sentence,
+DM Mono carries every number, key and identifier. Nothing crosses: a number in the sans
+or a sentence in the mono and the page stops reading as a document.
+
+**No bold.** 500 is the ceiling at scale — 205 nodes against 400's 175, with 600 on
+seven elements and 700 on four.
+
+**No radius above 5px.** 1,418 of 1,469 rendered elements are square.
+
+**The dot grid is a field.** Under a section, never inside a panel, never a border, and
+its 24px step does not rescale at narrow widths.
+
+**The accent needed no correction.** `#0562ef` is 5.25:1 on white and 5.25:1 under
+white — one token for the fill and the word.
+
+**Status is never by colour alone**, on either field, and the dark band carries its own
+four because the light set measures 1.4–2.6:1 there.
+
+**`[data-surface="dark"]` is one section, never the document.** Its rules invert base
+rather than alpha — white at 14% instead of navy at 10% — because a navy at 10% over
+near-black is nothing at all.
+
+**Every control clears `--tap-min` (44px).** A correction: 88 of the reference's 123
+interactive elements at 1440 are shorter, and 73 of 106 at 390.
+
+**Nothing travels in space.** No parallax, no scrub, no `animation-timeline`, no press
+translation. `MOTION_INTENSITY` above 2 has nothing legal to buy, and reduced motion
+collapses every duration to zero.

package/kits/onionskin/README.md

@@ -0,0 +1,37 @@
+# @sheleg-design/onionskin
+
+The React reference kit for the SHELEG **Onionskin** style pack — a white technical
+sheet at 96.5% zero radius where two bases do all the work and everything quiet is one
+of them at an alpha.
+
+It is generated from the pack, not authored beside it: `src/styles.css` opens with
+`styles/tokens/onionskin.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. On this pack
+`Card` exists for parity only: reach for `Panel`.
+
+## This pack's own
+
+`Panel` (the signature — a ruled region of the sheet, with a provisional dashed variant
+and a lit-edge subject variant), `Micro` (11px uppercase tracked open, the most repeated
+object on the page), `Data` (the monospace, which owns every number) and `Grid` (the dot
+field, which goes under a section and nowhere else).
+
+## The three rules that carry the kit
+
+1. **There is no grey.** Every quiet value is `--ink` or the navy at an alpha. The
+   moment a third base appears, the system reads as an ordinary light UI.
+2. **Nothing floats.** Elevation is a 1px rule and, once per section, an inset lit edge.
+3. **The three faces do not cross.** Display, sentences, numbers — one family each.
+
+**Motion does not cross into a design tool.** A kit is the static half of a pack, and
+this one is nearly all static by measurement: 1,290 of the reference's 1,469 visible
+elements do not transition at all.

package/kits/onionskin/package.json

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

@@ -0,0 +1,16 @@
+---
+category: Actions
+---
+
+`primary` fills with `--accent` and takes `--on-accent` — 5.25:1, and the same number
+in both directions, which is why this pack needs no derived accent twin. `secondary` is
+`--surface` with a 1px `--rule` and an `--ink` label; hover moves the border to
+`--accent-rule` and never adds a fill.
+
+`--r-sm` (4px), and every size clears `--tap-min` (44px). The reference's own controls
+are 36px — that is the one geometry this pack corrects rather than copies.
+
+```tsx
+<Button>Get an API key</Button>
+<Button variant="secondary">Read the docs</Button>
+```

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

package/kits/onionskin/src/Card.md

@@ -0,0 +1,13 @@
+---
+category: Surfaces
+---
+
+Present for spine parity. **On this pack, reach for `Panel` instead** — the reference
+has no rounded card, and `Card` here is a `Panel` with a title row: zero radius, a 1px
+`--rule`, no shadow.
+
+If a design calls for something that floats, it is not this pack.
+
+```tsx
+<Card title="Throughput" meta="p95">…</Card>
+```

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

package/kits/onionskin/src/Chip.md

@@ -0,0 +1,14 @@
+---
+category: Foundations
+---
+
+A tag at `--r-xs` (2px) with a 1px `--rule` and a `--t-micro` label. `accent` tints with
+`--accent-wash`, which is `--tint` — the reference's called-out block colour doing double
+duty.
+
+`selected` fills `--accent` with `--on-accent`.
+
+```tsx
+<Chip>embeddings</Chip>
+<Chip tone="accent" selected>vector</Chip>
+```

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

package/kits/onionskin/src/Data.md

@@ -0,0 +1,16 @@
+---
+category: Data
+---
+
+Every number, key and identifier on the page, in `--font-mono` at `--t-micro` or
+`--t-xs`. The figure takes `--ink`; its unit takes `--ink-soft`, which is the ink at
+60% rather than a grey.
+
+**Nothing crosses the three families.** A number in the sans, or a sentence in the mono,
+and the page stops reading as a document — that is the whole reason the pack carries
+three faces instead of two.
+
+```tsx
+<Data value="42" unit="ms" />
+<Data value="sk_live_…" />
+```

package/kits/onionskin/src/Data.tsx

@@ -0,0 +1,16 @@
+export interface DataProps {
+  /** The figure. Always the monospace — a number in the sans breaks the document. */
+  value: string;
+  /** Its unit or suffix, one tier quieter. */
+  unit?: string;
+  className?: string;
+}
+
+export function Data({ value, unit, className }: DataProps) {
+  return (
+    <span className={['ok-data', className].filter(Boolean).join(' ')}>
+      <span className="ok-data__value">{value}</span>
+      {unit !== undefined && <span className="ok-data__unit">{unit}</span>}
+    </span>
+  );
+}

package/kits/onionskin/src/Grid.md

@@ -0,0 +1,14 @@
+---
+category: Surfaces
+---
+
+The page's only texture: a `radial-gradient` dot of `--grid-color` at `--grid-dot`
+(0.8px) repeated every `--grid-step` (24px).
+
+It is a **field**. It belongs under a section, and it is never a border and never
+inside a panel. The step does not rescale at narrow widths — a field that rescales
+stops reading as paper.
+
+```tsx
+<Grid><section>…</section></Grid>
+```

package/kits/onionskin/src/Grid.tsx

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+
+export interface GridProps {
+  children: ReactNode;
+  className?: string;
+}
+
+/** The dot field. It goes UNDER a section — never inside a panel, never as a border. */
+export function Grid({ children, className }: GridProps) {
+  return (
+    <div className={['ok-grid', className].filter(Boolean).join(' ')} data-grid="">
+      {children}
+    </div>
+  );
+}

package/kits/onionskin/src/Heading.md

@@ -0,0 +1,14 @@
+---
+category: Foundations
+---
+
+Three levels in `--font-display` (Space Grotesk) at `--weight-medium` (500) with
+`--track-display` (−0.05em): 1 is `--t-display` (56px, 34px at ≤768), 2 is `--t-h2`
+(40px), 3 is `--t-h3` (28px).
+
+**No bold.** 500 is the ceiling at scale on this pack; a headline is loud because it is
+56px and tracked in hard.
+
+```tsx
+<Heading level={1}>Memory for your agents</Heading>
+```

package/kits/onionskin/src/Heading.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+
+export interface HeadingProps {
+  /** 1 = page title (28px), 2 = section (20px), 3 = card title (15px). */
+  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={['ok-heading', `ok-heading--${level}`, className].filter(Boolean).join(' ')}
+    >
+      {children}
+    </Tag>
+  );
+}