sheleg-design-skill 1.8.0 → 1.9.0

package/CHANGELOG.md

@@ -4,6 +4,69 @@ 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.9.0] - 2026-08-09
+
+Four style packs, taking the library from eight to twelve — and a fix to the
+thing that would have made twelve worse than eight.
+
+Extracted from four live references on 2026-08-09. Three of them sell vector
+databases and none of them collapse into each other; two are the same company's
+project page and product page, and they share a type stack and nothing else.
+
+### Added
+
+- **`showroom`** — from [attio.com](https://attio.com/). A white gallery where
+  one real product surface is the exhibit, under a **seven-layer shadow**. The
+  reference declares its palette in **CIE Lab**, which this repo's palette gate
+  cannot parse; every value was converted by painting it into a canvas and
+  reading the sRGB bytes back — the browser's conversion, not ours.
+- **`blueprint`** — from [pinecone.io](https://www.pinecone.io/). A drawing
+  sheet: a 32px grid, ruled column boundaries, corner registration marks, one
+  electric blue that works as ink *and* as fill at 7.53:1 both ways, and **no
+  radius anywhere**.
+- **`prism`** — from [milvus.io](https://milvus.io/). One static iridescent wash
+  with a hard bottom edge, a heavy grotesque display over **mono body copy** —
+  the inversion that makes a page read as a project rather than a company.
+- **`maquette`** — from [zilliz.com](https://zilliz.com/). A near-black table
+  with a cream axonometric model on it, mono block labels, and the only accent in
+  this library's four new packs that works as text (15.49:1).
+- Four reference kits, each with the six-component spine plus four signature
+  parts, and four routing scenario pairs (**T16–T19**), every one with its
+  negative branch.
+
+### Fixed — the routing table, which was a list
+
+**Five of the eight shipped packs named no other pack at all.** Forks existed
+only in `field-notes`, `cyclorama` and `atrium`, and every one pointed backwards
+at packs that never pointed back — so an agent entering at `instrument-console`,
+which is where any infrastructure brief lands first, never learned that a
+distinction existed. Four more one-way forks would have made twelve packs with
+eight dead ends.
+
+- `instrument-console`, `workbench`, `field-notes` and `cyclorama` each gain the
+  mirror clause for the new pack that forks against them.
+- **A new `validate.py` check enforces it:** a markdown link from one pack to
+  another must be reciprocated. Watched failing against a planted defect before
+  it landed.
+
+### Fixed — in the packs, not in the references
+
+- **`blueprint`'s reference sets pure black as body ink**, on 316 elements, which
+  the doctrine bans. The pack ships the reference's *own* second ink `#111827`
+  (136 elements) and does not pretend it is the same colour: the two sit **21.2
+  apart** in OKLab.
+- **`showroom`'s reference names `#A4ADBA` "caption-foreground"** and it measures
+  **2.27:1** on its own white field. Kept, renamed `--disabled`, and captions
+  routed to an ink that passes.
+- **`prism`'s reference sets 72px display type in `#00B3FF`** — **2.36:1**, which
+  fails even the relaxed large-text floor. The cyan is a fill in this pack.
+- **Neither `blueprint` nor `prism` ships a `prefers-reduced-motion` branch** —
+  zero blocks each, against live marquee, ping, pulse and scroll. Both packs
+  require the branch their references omit.
+- **`maquette`'s status palette is derived, not extracted**, and the token layer
+  says so at the declaration. The reference exposes none; the first set this run
+  reached for was a framework default, and the palette gate caught it colliding.
+
 ## [1.8.0] - 2026-08-08
 
 An eighth style pack, and the first one whose reference already implements this

package/README.md

@@ -49,6 +49,10 @@ voice is the timeline and slides therefore never animate).
 | `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 |
 | `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 |
+| `showroom` | white gallery, near-black ink, one blue that works as link and as fill, Inter Display + Inter + JetBrains Mono, a seven-layer shadow framing one real product surface | product-led companies whose best argument is the application on screen |
+| `blueprint` | white drawing stock, 32px grid, ruled column edges, corner registration marks, one electric blue, zero radius anywhere | infrastructure sold on precision — vector databases, search, storage and query engines |
+| `prism` | one static iridescent wash with a hard bottom edge, heavy grotesque display over mono body copy, cyan as a fill only | an open-source project's front door, where the first action is a command |
+| `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 |
 | `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 |
 
 Each pack locks palette, type, texture, motion tokens, signature motifs and
@@ -122,7 +126,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 eight style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
+| `styles/*.md` | The twelve 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 ships 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 |
 

package/bin/cli.js

@@ -230,14 +230,17 @@ ${c("bold", "What it installs")}
   SHELEG_DESIGN.md     the full reference (architecture, recipes, why it works)
   FIGMA_BRIDGE.md      the design↔code contract (tokens ⇄ Figma variables)
   AI_PRODUCT_PATTERNS.md  chat / agent / streaming surfaces (honest state)
-  styles/              eight style packs — instrument-console (dark console),
+  styles/              twelve 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
                        consumer biotech), field-notes (warm paper dev tools),
-                       cyclorama (a pastel field on a 32s cycle, for enterprise
-                       AI transformation) — plus a ready-made token CSS per pack
-                       and STYLE_PACK_TEMPLATE.md for authoring more
+                       cyclorama (a pastel field on a 32s cycle), showroom
+                       (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) —
+                       plus a ready-made token CSS per pack and
+                       STYLE_PACK_TEMPLATE.md for authoring more
 `);
 }
 
@@ -316,7 +319,7 @@ function main() {
     `\n${c("green", "✓")} ${c("bold", "SHELEG Design")} installed to ${c("blue", rel + "/")}\n` +
       `  ${c("dim", "SKILL.md")}          the agent skill\n` +
       `  ${c("dim", "SHELEG_DESIGN.md")}  the full reference\n` +
-      `  ${c("dim", "styles/")}           style packs + token CSS (instrument-console / editorial-luxury / workbench / briefing-room / atrium / orchard / field-notes / cyclorama)\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)\n\n` +
       `Your Cursor / Claude agent can now discover the skill and build\n` +
       `cinematic, scroll-driven pages — or style product UI (dashboards,\n` +
       `admin, internal tools) from the workbench pack — on its principles.\n\n` +

package/cursor/rules/sheleg-design.mdc

@@ -20,7 +20,13 @@ tools on warm green-cast paper ruled by hairlines, one rust accent, a hero
 that dissolves into the page, and colour that encodes how a claim is known;
 cyclorama — enterprise AI transformation on a pale field that cycles through
 six pastel stops on a 32s loop under fixed near-black ink, a monospaced
-typewriter serif, one orange used only as a fill, and no shadows at all);
+typewriter serif, one orange used only as a fill, and no shadows at all;
+showroom — a white gallery where one real product surface is the exhibit,
+under a seven-layer shadow; blueprint — a drawing sheet for infrastructure
+sold on precision: grid, ruled columns, registration marks, one electric
+blue and zero radius; prism — an open-source project's front door, one
+static iridescent wash over mono body copy; maquette — enterprise data
+infrastructure as a cream axonometric model on a near-black table);
 otherwise follow the contract below (self-contained on purpose).
 
 ## Five principles, in order

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

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

@@ -0,0 +1,52 @@
+# Blueprint — the contract this design system ships under
+
+**Register.** Choose Blueprint for **infrastructure sold on precision**: vector
+databases, search and retrieval, storage and query engines. Its vocabulary is
+technical drafting — a white sheet, a 32px grid, ruled column edges, registration
+marks, one saturated blue used the way a draftsman uses ink. The fork people get
+wrong is against `field-notes`: that pack is **warm paper** arguing from
+provenance (*how do you know*), this one is **cold stock** arguing from precision
+(*how is it built*). Against `instrument-console`: that pack's subject is a
+running system with a changing value; this one's is a mechanism drawn to scale.
+Build every screen against `var(--…)` and never a literal.
+
+**There is no radius.** `--radius: 0`, everywhere, and the token exists so the
+ban is greppable. The single exception is `--radius-round: 50%` for a dot or an
+avatar. Most component libraries ship a default radius — zero it globally rather
+than per component, or the page ends up with three rounded inputs nobody notices
+until it looks cheap and nobody can say why.
+
+**One blue does everything.** `--accent` `#002BFF` measures 7.53:1 as text on the
+stock *and* 7.53:1 under white. It sets a heading word, draws a 1.5px rule, fills
+a button and rings a focused input, with no second token. It is unusually
+saturated and vibrates against `--ink` at small sizes — never set body copy in
+it.
+
+**The ink is not the reference's ink, and the pack says so.** The reference sets
+pure black on 316 elements; the doctrine bans pure black as ink. This system
+ships `#111827` — the reference's own second ink, on 136 of its elements. The two
+sit 21.2 apart in OKLab: it is a visible substitution, not a rounding.
+
+**Category marks are squares, not circles.** A circle is a status; a square is a
+kind. Every pair clears both separation floors under all three dichromacies —
+label them anyway, because a legend of four coloured squares is a legend nobody
+reads.
+
+**Bans** (verbatim from the pack):
+
+- A radius. Any radius, on anything, except `50%` for a dot or an avatar.
+- A shadow used for elevation.
+- `--ink-faint` as text; `--accent` as a large field fill.
+- A circle used as a category mark; a category colour used to mean health.
+- The annotation size without its tracking; caps annotations set at 0.
+- A geometric or humanist substitute for the display face.
+- Fluid `clamp()` type; `transition: all`; `100vh`; a scroll listener.
+- Animating the grid, or parallaxing it.
+- A screenshot as the hero's figure. Draw it, or use `showroom`.
+
+**The reference ships no `prefers-reduced-motion` branch at all**, against live
+marquee, ping, pulse and scroll animations. This system requires the branch its
+reference omits.
+
+Motion is not part of this design system and must not be invented: a kit is the
+static half of a pack, and anything that moves stays behind in the pack.

package/kits/blueprint/README.md

@@ -0,0 +1,14 @@
+# @sheleg-design/blueprint
+
+The React reference kit for the SHELEG **Blueprint** style pack — a drawing sheet: grid, ruled columns, registration marks, one electric blue, and zero radius anywhere.
+
+It is generated from the pack, not authored beside it: `src/styles.css` opens
+with `styles/tokens/blueprint.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/blueprint/package.json

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

@@ -0,0 +1,5 @@
+---
+category: Actions
+---
+
+**Zero radius**, like everything in this pack. The primary carries registration marks at its four corners — that is the pack's signature and it belongs on the one action the page wants, not on every button.

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

package/kits/blueprint/src/Card.md

@@ -0,0 +1,5 @@
+---
+category: Surfaces
+---
+
+A panel: `--surface` on a 1px `--line`, **0 radius**, no shadow. Elevation here is a hairline; `--shadow-panel` exists only for a genuinely floating popover.

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

package/kits/blueprint/src/Chip.md

@@ -0,0 +1,5 @@
+---
+category: Data
+---
+
+A category mark — a **square**, never a circle. A circle is a status; a square is a kind. Every pair of category colours clears both separation floors, but label them anyway.

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

package/kits/blueprint/src/CodeLine.md

@@ -0,0 +1,14 @@
+---
+category: Data
+---
+
+JetBrains Mono on `--surface-2`, **zero radius**, a `$` prompt in `--ink-faint`,
+a copy control at the right.
+
+The control changes its **label**, not only its colour. A colour-only
+confirmation is invisible to a meaningful share of the readers this page is for,
+and it is the same rule the pack applies to its category marks.
+
+```tsx
+<CodeLine command="pip install pinecone" copied={done} onCopy={copy} />
+```

package/kits/blueprint/src/CodeLine.tsx

@@ -0,0 +1,28 @@
+export interface CodeLineProps {
+  command: string;
+  /** Shown before the command, in --ink-faint. Defaults to a shell prompt. */
+  prompt?: string;
+  onCopy?: () => void;
+  /** Flipped by the caller after a copy. Changes the LABEL, not just a colour. */
+  copied?: boolean;
+  className?: string;
+}
+
+/**
+ * A command in JetBrains Mono on `--surface-2`, zero radius, with a copy
+ * control at the right.
+ *
+ * The copy control changes its **label** to `copied`, not only its colour — the
+ * same rule the pack applies to category marks, and for the same readers.
+ */
+export function CodeLine({ command, prompt = '$', onCopy, copied = false, className }: CodeLineProps) {
+  return (
+    <div className={['bp-code', className].filter(Boolean).join(' ')}>
+      <span className="bp-code__prompt" aria-hidden="true">{prompt}</span>
+      <code className="bp-code__cmd">{command}</code>
+      <button type="button" className="bp-code__copy" onClick={onCopy}>
+        {copied ? 'copied' : 'copy'}
+      </button>
+    </div>
+  );
+}

package/kits/blueprint/src/GridField.md

@@ -0,0 +1,14 @@
+---
+category: Foundations
+---
+
+1px dots in `--line-grid` at `--grid-step` 32px, halving to 16px below 768px so
+the density stays visually constant as the viewport narrows.
+
+Depth layer 1: `pointer-events: none`, `aria-hidden`, never on a scroller, and
+**never animated**. The grid is the sheet. A sheet that drifts, parallaxes or
+fades in turns a drawing into a screensaver.
+
+```tsx
+<GridField />
+```

package/kits/blueprint/src/GridField.tsx

@@ -0,0 +1,23 @@
+export interface GridFieldProps {
+  /** Dot spacing in px. Halves below 768px so density stays visually constant. */
+  step?: number;
+  className?: string;
+}
+
+/**
+ * The drawing grid: 1px dots in `--line-grid` at `--grid-step`.
+ *
+ * It sits at depth layer 1 — `pointer-events: none`, `aria-hidden`, behind
+ * everything, never on a scroller. **It never animates**: not on load, not on
+ * scroll, not on hover. It is the sheet the page is drawn on, and a sheet that
+ * moves is a different kind of page.
+ */
+export function GridField({ step, className }: GridFieldProps) {
+  return (
+    <div
+      className={['bp-grid', className].filter(Boolean).join(' ')}
+      style={step !== undefined ? ({ ['--grid-step' as string]: `${step}px` } as object) : undefined}
+      aria-hidden="true"
+    />
+  );
+}

package/kits/blueprint/src/Heading.md

@@ -0,0 +1,5 @@
+---
+category: Foundations
+---
+
+GT Planar at 700, tracking −0.02em. Substitutes are Inter or Geist — never a geometric, which rounds the page off in a way that fights the zero-radius rule.

package/kits/blueprint/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={['bp-heading', `bp-heading--${level}`, className].filter(Boolean).join(' ')}
+    >
+      {children}
+    </Tag>
+  );
+}

package/kits/blueprint/src/RegistrationMarks.md

@@ -0,0 +1,17 @@
+---
+category: Signature
+---
+
+Four L-shaped brackets — `--tick-len` 8px arms at `--tick-w` 1px, offset
+`--tick-gap` 6px — around the thing the page is registering.
+
+**Spend them on one thing per viewport.** The primary action, or the figure the
+section argues from. Marks on every card is a texture; marks on the one thing
+that matters is an argument, and it is the argument this pack is making.
+
+Desktop only: below 768px they come off buttons, where 8px brackets become
+touch-target confetti, and stay on framed figures.
+
+```tsx
+<RegistrationMarks tone="accent"><Button>Start Building</Button></RegistrationMarks>
+```

package/kits/blueprint/src/RegistrationMarks.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+
+export interface RegistrationMarksProps {
+  /** `accent` puts the marks in the pack's blue; `grid` keeps them faint. */
+  tone?: 'grid' | 'accent';
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * Four L-shaped brackets at the corners of whatever it wraps: 8px arms at 1px,
+ * offset 6px from the object they register.
+ *
+ * They are the pack's signature and they must stay rare. A registration mark
+ * exists so two plates line up in a press — it is a mark about *accuracy*, made
+ * by someone who assumed you would recognise it. Put them on **one** thing per
+ * viewport: the action the page wants, or the figure it is arguing from. Marks
+ * on every card is a texture; marks on the one thing that matters is an
+ * argument.
+ *
+ * Desktop only. At 8px they become touch-target confetti on a phone, so they
+ * come off buttons below 768px and stay only on framed figures.
+ */
+export function RegistrationMarks({ tone = 'grid', children, className }: RegistrationMarksProps) {
+  return (
+    <span className={['bp-reg', `bp-reg--${tone}`, className].filter(Boolean).join(' ')}>
+      {children}
+      <i className="bp-reg__tick bp-reg__tick--tl" aria-hidden="true" />
+      <i className="bp-reg__tick bp-reg__tick--tr" aria-hidden="true" />
+      <i className="bp-reg__tick bp-reg__tick--bl" aria-hidden="true" />
+      <i className="bp-reg__tick bp-reg__tick--br" aria-hidden="true" />
+    </span>
+  );
+}

package/kits/blueprint/src/Rule.md

@@ -0,0 +1,5 @@
+---
+category: Foundations
+---
+
+1px in `--line`, 0 radius. The vertical column rules are a layout element, not this component; use `RuledColumn` for those.

package/kits/blueprint/src/Rule.tsx

@@ -0,0 +1,18 @@
+export interface RuleProps {
+  tone?: 'hairline' | 'strong';
+  className?: string;
+}
+
+export function Rule({ tone = 'hairline', className }: RuleProps) {
+  return (
+    <hr
+      className={[
+        'bp-rule',
+        tone === 'strong' ? 'bp-rule--strong' : undefined,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    />
+  );
+}

package/kits/blueprint/src/RuledColumn.md

@@ -0,0 +1,17 @@
+---
+category: Foundations
+---
+
+Two 1px verticals in `--line-strong` at `--column-max` 1280px, running the full
+height of the section.
+
+This is the layout made visible. A max-width container with no rules is a
+website; the same container with its boundaries drawn is a sheet, and that
+difference is most of what separates this pack from a plain white page.
+
+Below 1024px the rules move to the viewport edges; below 768px they are removed
+entirely.
+
+```tsx
+<RuledColumn><Heading level={1}>Give agents knowledge</Heading></RuledColumn>
+```

package/kits/blueprint/src/RuledColumn.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+
+export interface RuledColumnProps {
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * The content column with its two 1px vertical rules, in `--line-strong`,
+ * running the section's full height at `--column-max`.
+ *
+ * They are the layout made visible, and they are why the page reads as a sheet
+ * rather than as a container with a max-width. Below 1024px they collapse to
+ * the viewport edges; below 768px they are removed entirely, because two rules
+ * 16px in from the screen edge read as a rendering error.
+ */
+export function RuledColumn({ children, className }: RuledColumnProps) {
+  return (
+    <div className={['bp-column', className].filter(Boolean).join(' ')}>
+      <span className="bp-column__rule bp-column__rule--l" aria-hidden="true" />
+      <div className="bp-column__inner">{children}</div>
+      <span className="bp-column__rule bp-column__rule--r" aria-hidden="true" />
+    </div>
+  );
+}

package/kits/blueprint/src/Stat.md

@@ -0,0 +1,5 @@
+---
+category: Data
+---
+
+Mono for the figure, right-aligned when it sits in a column. Every number in this pack is JetBrains Mono; the grotesque never sets a digit that has to align.

package/kits/blueprint/src/Stat.tsx

@@ -0,0 +1,17 @@
+export interface StatProps {
+  value: string;
+  label: string;
+  /** Where the figure came from — a query, a window, a dashboard. */
+  source?: string;
+  className?: string;
+}
+
+export function Stat({ value, label, source, className }: StatProps) {
+  return (
+    <div className={['bp-stat', className].filter(Boolean).join(' ')}>
+      <span className="bp-stat__label">{label}</span>
+      <span className="bp-stat__value">{value}</span>
+      {source !== undefined && <span className="bp-stat__source">{source}</span>}
+    </div>
+  );
+}

package/kits/blueprint/src/index.ts

@@ -0,0 +1,23 @@
+// The spine — identical names, props and types in every SHELEG kit.
+export { Button } from './Button.js';
+export type { ButtonProps } from './Button.js';
+export { Card } from './Card.js';
+export type { CardProps } from './Card.js';
+export { Chip } from './Chip.js';
+export type { ChipProps } from './Chip.js';
+export { Stat } from './Stat.js';
+export type { StatProps } from './Stat.js';
+export { Heading } from './Heading.js';
+export type { HeadingProps } from './Heading.js';
+export { Rule } from './Rule.js';
+export type { RuleProps } from './Rule.js';
+
+// Signature — this pack's own motifs, static forms only.
+export { RegistrationMarks } from './RegistrationMarks.js';
+export type { RegistrationMarksProps } from './RegistrationMarks.js';
+export { GridField } from './GridField.js';
+export type { GridFieldProps } from './GridField.js';
+export { RuledColumn } from './RuledColumn.js';
+export type { RuledColumnProps } from './RuledColumn.js';
+export { CodeLine } from './CodeLine.js';
+export type { CodeLineProps } from './CodeLine.js';