sheleg-design-skill 1.12.0 → 1.13.0

package/CHANGELOG.md

@@ -4,6 +4,71 @@ 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.13.0] - 2026-08-12
+
+A thirteenth style pack, and it is the first one in the library whose accent is
+forbidden from carrying a word.
+
+### Added
+
+- **`scoreboard`** — the thirteenth pack, extracted from
+  <https://www.get-ryze.ai/> on 2026-08-12 off its shipped stylesheet and the
+  markup of three pages. Warm paper (`#FAF9F5`), a warm near-black ink
+  (`#221D16`, 15.88:1), radii of two and three pixels, an **ink** primary button,
+  one hot orange (`#FF4801`) used only as a mark, and a dark ledger of
+  dotted-leader rows whose numbers are set in an aliased pixel face. Widened
+  contract — all thirteen headings — with `styles/tokens/scoreboard.css` and a
+  full reference kit in `kits/scoreboard/`.
+- **The accent measures 3.23:1 and the pack says so at the top.** Above the 3:1
+  floor for a non-text mark, below the one for a word. The reference obeys this
+  without ever stating it: across three pages its orange is a 3×18px tick, a
+  `::marker`, a focus ring, a selection colour, a link underline and one
+  oversized chevron — and its primary button is ink. The pack turns that
+  observation into a ban, which is the only reason a page in it can carry a
+  colour that loud.
+- **Two status sets rather than one filtered set.** The reference paints status
+  only on its dark panels; those values measure 1.6–2.6:1 against warm paper. The
+  paper set is selected from deeper steps of the Tailwind ramp the reference's own
+  stylesheet ships, and the measured on-dark set is kept beside it under
+  `--*-on-dark`. Every declaration says which of the two kinds of claim it is.
+- **`TickHeading`, `Ledger`, `LedgerRow` and `StatusChip`** in the kit, on the
+  same six-component spine as every other kit. `StatusChip` takes `label` as a
+  **required** prop: the paper statuses cluster (the accent and `--warn` separate
+  by 6.3 under protanopia), so status in this pack is a chip with its word in it.
+
+### Fixed
+
+- **Three corrections to the reference, recorded rather than silently applied.**
+  Its positive-delta colour `#00D492` is set at 11px on white — 1.84:1, an
+  invisible success state — and is confined here to the dark panel where it
+  measures 10.21:1. Its primary button transitions over 500ms, past the 300ms
+  ceiling in `MOTION_DOCTRINE.md` §3, and the pack pins `--dur-fast` at .16s. Its
+  scan line animates `top`; the pack rebuilds it on `transform`.
+- **`validate.py --self-test` printed FAILED and exited 0.** `main()` returned
+  the self-test's status and `__main__` called it bare, so the code was dropped
+  on the floor and `npm run selftest` stayed green through a self-test that had
+  failed — found because this release's count change broke a plant fixture and
+  the suite passed anyway. The argv handling directly above it exists to close
+  this exact class one layer up and never reached the exit code. Verified by
+  breaking a fixture in a copy of the tree: 0 before, 1 after.
+- **A plant fixture pinned to a literal that changes every release.** The
+  stale-count plant searched for `**twelve locked style packs**`; the first time
+  the library grew it mutated nothing and stopped testing the check it exists
+  for. It now reads whatever number the README claims and makes that wrong.
+- **Reciprocal forks with `field-notes` and `workbench`.** From a distance
+  `field-notes` *is* this pack — warm paper, one orange-red accent, hairline
+  rules — and the distinction is what the small type does: mono numerals make
+  evidence auditable, pixel numerals make results countable. Both neighbours now
+  carry the fork back, so an agent arriving at either one first still learns it
+  exists.
+
+## [1.12.1] - 2026-08-11
+
+- **The reference-sweep heading named one server for a section about two.** It
+  read `Optional — real-world references (Lazyweb MCP)` after Mobbin joined it,
+  so an agent skimming headings would conclude Mobbin was not there. Headings are
+  a discovery surface, not decoration.
+
 ## [1.12.0] - 2026-08-11
 
 Mobile becomes a register the skill can name, and a second reference sweep joins

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 **twelve locked style
+decides whether to animate before it decides how, and **thirteen locked style
 packs** with ready-made design tokens, so what it builds reads as one system
 instead of a pile of effects.
 
@@ -56,6 +56,7 @@ into the cinematic layer, and says so in its own *Motion flavor* section.
 | `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 |
+| `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 |
 
 Each pack locks palette, type, texture, motion tokens, signature motifs and
@@ -126,12 +127,12 @@ skills.
 |---|---|
 | `SKILL.md` | The agent-facing skill: discovery triggers, the principles, how to apply them, quick-reference rules, common mistakes |
 | `SHELEG_DESIGN.md` | The full reference: architecture, layer-by-layer mechanics with code, the exact morph math, the DOM↔WebGL projection bridge, a build-from-scratch recipe, and why each piece works |
-| `SURFACE_COMPOSITION.md` | Two decisions the pack layer does not make: the six depth layers of a scene, read before writing CSS for a cinematic page; and the handoff to `dataviz`, read before drawing a chart in any pack — token names are not uniform across the twelve and an undefined custom property fails silently |
+| `SURFACE_COMPOSITION.md` | Two decisions the pack layer does not make: the six depth layers of a scene, read before writing CSS for a cinematic page; and the handoff to `dataviz`, read before drawing a chart in any pack — token names are not uniform across the thirteen and an undefined custom property fails silently |
 | `MOTION_DOCTRINE.md` | Whether to animate at all, before how: the frequency table that kills motion on high-repetition paths, the easing tree and the `ease-in` ban, the duration ceiling, the forbidden forms, and the reduced-motion contract. `SKILL.md` marks it required before any animation |
 | `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 twelve style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
+| `styles/*.md` | The thirteen 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 |
 
@@ -202,7 +203,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 twelve kits, so switching packs swaps identity rather than API,
+identical in all thirteen 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,7 +249,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 twelve
+installers and `diff -r`s the result against the source, then builds all thirteen
 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/              twelve style packs — instrument-console (dark console),
+  styles/              thirteen 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
@@ -242,7 +242,8 @@ ${c("bold", "What it installs")}
                        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) —
+                       maquette (cream axonometric models on a dark table),
+                       scoreboard (warm paper, pixel numerals, a dark ledger) —
                        plus a ready-made token CSS per pack and
                        STYLE_PACK_TEMPLATE.md for authoring more
 `);
@@ -324,7 +325,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)\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)\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

@@ -27,7 +27,10 @@ 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);
+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);
 otherwise follow the contract below (self-contained on purpose).
 
 ## Whether to animate at all — before how

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

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

@@ -0,0 +1,59 @@
+# Scoreboard — the contract this design system ships under
+
+**Register.** Choose Scoreboard for a product whose argument is **an
+accumulating number**: performance marketing and ads operators, SEO and growth
+tools, revenue dashboards sold on results, agency-replacement services. The page
+is a running tally — a dated column of figures the product already produced, with
+the label on the left, the number on the right, and a line of dots between them.
+The fork people get wrong is against `field-notes`, which shares the warm paper
+and the orange-red accent: there the numerals are mono and make evidence
+*auditable*; here they are pixel and make results *countable*. *How do you know
+that?* goes there. *How much, and since when?* stays here. Build every screen
+against `var(--…)` and never a literal.
+
+**The accent is a mark, not a voice.** `--accent` `#FF4801` measures 3.23:1 on
+the paper — above the 3:1 floor for a non-text mark, below the one for a word.
+It is the 3×18px tick, the list marker, the focus ring and the link underline.
+Body text, headings and button fills set in it are the fastest way to break this
+system.
+
+**The action is ink.** `--action` `#0A0A0A` with a white label is the primary
+button. This is measured off the reference, and it is why the accent survives:
+the loudest colour on the page never competes with the thing you are meant to
+click. A view with an orange CTA has two primaries and no accent.
+
+**Status is never by colour alone.** The paper statuses cluster — the accent and
+`--warn` separate by only 6.3 under protanopia, `--danger` and `--warn` by 12.6
+at full colour. Every status is therefore a chip containing its word, which is
+why `StatusChip` takes `label` as a required prop rather than an optional one.
+
+**There are two status sets, not one.** On paper use `--good` / `--warn` /
+`--danger` / `--info`; on a `data-surface="panel"` element use the measured
+`--*-on-dark` values. The dark set measures 1.6–2.6:1 against the paper and the
+paper set disappears on the panel. `StatusChip` takes `onPanel` for exactly this.
+
+**Radii are two and three pixels.** Across the reference, 107 of 143 radius
+utilities are 2px or 3px. At 8px everywhere this becomes a generic product page
+with an orange tick on it. When containers nest, an inner radius is the outer
+minus the padding between them.
+
+**Bans** (verbatim from the pack):
+
+- The accent as body text, a heading, or a button fill.
+- A second ledger on the page, a ledger with a rounded marketing number in it,
+  or a ledger with no date under it.
+- Antialiased pixel type. Without smoothing off, the numerals are a novelty face.
+- A bare status dot, and any status carried by colour with no word beside it.
+- The paper status set on the dark band, or the dark set on paper.
+- Radii above 8px, and any radius on the ledger's own rows.
+- A spinner where a number will land. The skeleton is the row.
+- Fluid `clamp()` display type; `transition: all`; a second accent; a gradient
+  anywhere except the hero's wash.
+
+**The body size is 15px and the numeral column is fixed.** Press Start 2P has no
+currency width worth trusting: budget the column in pixels (80px, 70px below the
+medium breakpoint) and right-align it.
+
+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 — the entrance, the scan line, the
+count-up — stays behind in the pack.

package/kits/scoreboard/README.md

@@ -0,0 +1,16 @@
+# @sheleg-design/scoreboard
+
+The React reference kit for the SHELEG **Scoreboard** style pack — warm paper, an
+orange that only ever marks, and a ledger of dotted-leader rows whose numbers are
+set in an aliased pixel face.
+
+It is generated from the pack, not authored beside it: `src/styles.css` opens
+with `styles/tokens/scoreboard.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/scoreboard/package.json

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

@@ -0,0 +1,5 @@
+---
+category: Actions
+---
+
+`primary` is the **ink** fill, not the accent — this pack's loudest colour never competes with the thing you are meant to click. `secondary` is the 4%-ink ghost. Nothing scales on hover: the fill changes and the button presses by one pixel.

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

package/kits/scoreboard/src/Card.md

@@ -0,0 +1,5 @@
+---
+category: Surfaces
+---
+
+A `--surface` panel with a 1px `--line-weak` and a hairline under it, at `--radius-sm` — three pixels, not eight. This pack divides with rules; `--shadow-card` is reserved for the one report surface a section is built around.

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

package/kits/scoreboard/src/Chip.md

@@ -0,0 +1,5 @@
+---
+category: Data
+---
+
+A 2px-radius tag at 11px uppercase. `accent` uses `--accent-wash` behind `--accent-hover`, never the raw accent as text. For anything that carries a state, use `StatusChip` instead — it requires the word.

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

package/kits/scoreboard/src/Heading.md

@@ -0,0 +1,5 @@
+---
+category: Foundations
+---
+
+Satoshi at 600–700 with the tracking coupled to the size: −0.03em at display, −0.02em at section. Section headings normally arrive through `TickHeading`, which puts the accent tick in front of them.

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

package/kits/scoreboard/src/Ledger.md

@@ -0,0 +1,5 @@
+---
+category: Signature
+---
+
+The signature element: a dark panel of dotted-leader rows under a bulleted group label, with the date the figures were last true at its foot. One per page. `status` renders beside the live square and is a sentence — the square is never shown alone.

package/kits/scoreboard/src/Ledger.tsx

@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react';
+
+export interface LedgerProps {
+  /** The group label: uppercase, +0.14em, with a square bullet ahead of it. */
+  label?: string;
+  /** The date the figures were last true. A ledger with no date is a poster. */
+  updated?: string;
+  /** Rendered beside the live square, e.g. "All systems ok". Never a bare dot. */
+  status?: string;
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * The pack's signature element: a dark panel of dotted-leader rows. The scan
+ * line that crosses it on the live site is motion and stays in the pack — a kit
+ * is the static half.
+ */
+export function Ledger({ label, updated, status, children, className }: LedgerProps) {
+  return (
+    <section
+      data-surface="panel"
+      className={['sb-ledger', className].filter(Boolean).join(' ')}
+    >
+      {label !== undefined && (
+        <p className="sb-ledger__label">
+          <span className="sb-ledger__bullet" aria-hidden="true" />
+          {label}
+        </p>
+      )}
+      <div className="sb-ledger__rows">{children}</div>
+      {(updated !== undefined || status !== undefined) && (
+        <div className="sb-ledger__foot">
+          {updated !== undefined && <div>Last updated: {updated}</div>}
+          {status !== undefined && (
+            <div className="sb-ledger__status">
+              <span className="sb-ledger__live" aria-hidden="true" />
+              {status}
+            </div>
+          )}
+        </div>
+      )}
+    </section>
+  );
+}

package/kits/scoreboard/src/LedgerRow.md

@@ -0,0 +1,5 @@
+---
+category: Signature
+---
+
+Label, dotted leader, pixel numeral on a fixed 80px column (70px below the medium breakpoint). The leader absorbs every width change so the row never wraps. `pending` keeps the row and puts an em dash where the number will land — a skeleton, never a spinner.

package/kits/scoreboard/src/LedgerRow.tsx

@@ -0,0 +1,28 @@
+export interface LedgerRowProps {
+  /** Left column, two lines at most. It does not wrap past that. */
+  label: string;
+  /** The figure. Set in the pixel face, right-aligned on a fixed column. */
+  value: string;
+  /** No figure yet: the row survives and an em dash holds the column. */
+  pending?: boolean;
+  className?: string;
+}
+
+/**
+ * Label, a dotted leader, and a pixel numeral on a fixed column. A row that
+ * wraps is not a row — the leader absorbs every width change instead.
+ */
+export function LedgerRow({ label, value, pending = false, className }: LedgerRowProps) {
+  return (
+    <div className={['sb-row', className].filter(Boolean).join(' ')}>
+      <span className="sb-row__label">{label}</span>
+      <span className="sb-row__leader" aria-hidden="true" />
+      <span className={['sb-row__value', pending ? 'sb-row__value--pending' : undefined]
+        .filter(Boolean)
+        .join(' ')}
+      >
+        {pending ? '—' : value}
+      </span>
+    </div>
+  );
+}

package/kits/scoreboard/src/Rule.md

@@ -0,0 +1,5 @@
+---
+category: Foundations
+---
+
+The pack's elevation model in one element. `hairline` is `--line-weak`, `strong` is `--line`; a card border and a section divider are the same rule at two weights.

package/kits/scoreboard/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={[
+        'sb-rule',
+        tone === 'strong' ? 'sb-rule--strong' : undefined,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    />
+  );
+}

package/kits/scoreboard/src/Stat.md

@@ -0,0 +1,5 @@
+---
+category: Data
+---
+
+A figure in `--ink-strong` above its label. Use it for a single number in the flow of a page; four or more figures that belong together are a `Ledger`, not four Stats. Give `source` whenever the number came from somewhere checkable.

package/kits/scoreboard/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={['sb-stat', className].filter(Boolean).join(' ')}>
+      <span className="sb-stat__label">{label}</span>
+      <span className="sb-stat__value">{value}</span>
+      {source !== undefined && <span className="sb-stat__source">{source}</span>}
+    </div>
+  );
+}

package/kits/scoreboard/src/StatusChip.md

@@ -0,0 +1,5 @@
+---
+category: Data
+---
+
+`label` is required, not optional: the paper statuses cluster (the accent and `--warn` separate by 6.3 under protanopia), so a status in this pack is a chip with its word inside. `onPanel` swaps to the measured on-dark set, which is a different palette rather than the same one lightened.

package/kits/scoreboard/src/StatusChip.tsx

@@ -0,0 +1,27 @@
+export type Status = 'good' | 'warn' | 'danger' | 'info';
+
+export interface StatusChipProps {
+  status: Status;
+  /** Required, not optional. Status is never by colour alone in this pack. */
+  label: string;
+  /** On a dark panel the measured on-dark set applies instead of the paper one. */
+  onPanel?: boolean;
+  className?: string;
+}
+
+export function StatusChip({ status, label, onPanel = false, className }: StatusChipProps) {
+  return (
+    <span
+      className={[
+        'sb-status',
+        `sb-status--${status}`,
+        onPanel ? 'sb-status--on-panel' : undefined,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {label}
+    </span>
+  );
+}

package/kits/scoreboard/src/TickHeading.md

@@ -0,0 +1,5 @@
+---
+category: Signature
+---
+
+The 3×18px accent bar, a 10px gap, then the heading. The most recognisable thing in the pack and one of the few places the raw `--accent` is correct at full strength: a mark is not read, so its 3.23:1 against the paper is measured against the 3:1 non-text floor rather than the text one.

package/kits/scoreboard/src/TickHeading.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+
+export interface TickHeadingProps {
+  /** 2 = section, 3 = sub-head. A tick never precedes the page title. */
+  level?: 2 | 3;
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * A 3x18px accent bar, a 10px gap, then the heading. The pack's most
+ * recognisable motif and the one place the raw accent is correct at full
+ * strength — it is a mark, not a word.
+ */
+export function TickHeading({ level = 2, children, className }: TickHeadingProps) {
+  const Tag = `h${level}` as 'h2' | 'h3';
+  return (
+    <div className={['sb-tick-heading', className].filter(Boolean).join(' ')}>
+      <span className="sb-tick-heading__tick" aria-hidden="true" />
+      <Tag className={['sb-heading', `sb-heading--${level}`].join(' ')}>{children}</Tag>
+    </div>
+  );
+}