sheleg-design-skill 1.41.0 → 1.43.0

package/CHANGELOG.md

@@ -4,6 +4,120 @@ 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.43.0] - 2026-08-17
+
+**The twenty-ninth pack, and the first one whose signature is a defect its reference
+ships.** `bulletin` is extracted from [socialchamp.com](https://www.socialchamp.com) by
+enumerating all 748 URLs in its page sitemap, fetching every one, and reading the 58
+distinct stylesheets they resolve to plus the shared layer its theme ships. What it
+takes is the *drawn* elevation — a 1px ink outline over a hard zero-blur ink offset, 185
+of them against roughly 50 blurred shadows across the whole site — and the press that
+goes with it: a control travels exactly as far as its offset shrinks, so the ink
+displaced is constant.
+
+The reference's primary CTA is white on `#ff6900` at 2.89:1, on every one of those 748
+pages. That is under WCAG AA for body text and under the large-text floor as well, so no
+type size rescues it; the pack keeps the measured hue and darkens it in oklab until white
+clears AA. Two more corrections travel with it, and all three are in the pack's Gotchas
+with their numbers.
+
+### Added
+
+- **`bulletin`**, from [socialchamp.com](https://www.socialchamp.com) — warm cream paper
+  (`#fcfaf4`) cut by three flat pastel bands, one ink (`#464646`) doing four jobs at once
+  (text, outline, offset and the dark band), an orange that fills and marks but never
+  carries a word, a display face at **800 inside controls above the headline's 700**, and
+  **zero tracking at every size** — `letter-spacing` appears seven times in 58
+  stylesheets and never on a heading. Widened contract, all thirteen headings.
+- **`styles/tokens/bulletin.css`** — the ready-made token layer, with a
+  `[data-surface="ink"]` block for the dark band measured off the reference's own dark
+  footer, where the outline and the offset both invert to white. Every value is marked
+  MEASURED, SELECTED or DERIVED at its declaration.
+- **`kits/bulletin`** — the twenty-ninth reference kit: the six-name spine plus
+  `StatusDot`, `Rail` (the row of outlined circles that says *many*), `Band`, `Panel` and
+  `Skeleton`. Its `styles.css` opens with the token layer byte for byte.
+
+### Changed
+
+- **`MOTION_DOCTRINE.md` — a fourth standalone pack pins its own ceiling.** `bulletin`
+  caps `MOTION_INTENSITY` at **3**, the lowest in the library, because the reference's
+  entire measured motion budget across 748 pages is an entrance fade, a 0.12s press and a
+  0.3s hover: no scroll clock, no parallax, no scrub, no pinning. Its depth is drawn
+  rather than animated, and animating the offset is what flattens it.
+- **Every count that names the library moves to twenty-nine** — the pack tables in
+  `SKILL.md` and `README.md`, both manifests, the CLI banner, the Cursor rule, the slash
+  command's by-name fast path, and the core-contract remainder (seven core, twenty-two
+  widened).
+
+### Fixed
+
+- **The rail collapsed to a column, and only rendering it showed that.**
+  `container-type: inline-size` applies inline-size containment, so an element stops
+  taking its width from its contents — on a shrink-to-fit box (a grid item under
+  `justify-items: center`, a flex item, an inline-block) `.bl-rail` went to near-zero
+  width, stacked one circle per line and fired its own narrow branch, hiding every
+  platform name. All three gates were green over it, because a gate reads structure and
+  not layout. `width: 100%` is the fix and the reason is now a comment beside it.
+  Rendered and confirmed at 1440×1000, including the press: the primary's offset goes
+  3px → 1px as the control travels 2px, while the secondary beside it keeps its 3px.
+- **Three stale counts in `SURFACE_COMPOSITION.md` that no gate could see.** It said the
+  token names were not uniform "across the twenty-one" when twenty-nine packs ship, and
+  that the accent is `--accent` "in eighteen" when it is twenty-seven — `--brand` in
+  `field-notes` and `--cta` in `orchard` are still the only two exceptions, counted. The
+  third was a count of packs carrying an `@role non-text:` colour, which is now stated as
+  sixteen token layers because that is what the grep returns.
+
+## [1.42.0] - 2026-08-17
+
+**The twenty-eighth pack, and the first one measured for its tempo rather than its
+surface.** `proscenium` is extracted from [mailmodo.com](https://www.mailmodo.com/), read
+off live computed styles in a headless Chrome at 1440×1000 and at 390, 768 and 1024 for
+the ramp. What it takes from the reference is the *cadence* — two acts, then the same call
+to action, again, with one dark act at the middle — which is why it forks against
+`showroom` on tempo rather than on look.
+
+### Added
+
+- **`proscenium`**, from [mailmodo.com](https://www.mailmodo.com/) — a white field
+  carrying two cool acts and **one deep indigo act at the middle** (`#07061d` to `#2a0b78`
+  at 86.41%, stops measured), ink that is an indigo rather than a grey, an electric violet
+  at `#5a45fe` filling a control that stays **nearly square at 4px against cards at 16**,
+  one family at nine weights, and a framed product panel the fold cuts off. Widened
+  contract, addressable origin, every stated ratio recomputed by the palette gate.
+- **A reference kit**, with the six-component spine plus `StatusDot`, `Skeleton`, `Frame`
+  and this pack's own `Stage` — the one dark act, which the kit's stylesheet teaches to
+  strip elevation from any card standing inside it.
+
+### Three values the reference has and this pack declines, each marked at its declaration
+
+- **The rem base.** Mailmodo steps the root font size by viewport — 10px at 390 and 768,
+  11px at 1024, 13px at 1440 — and lets every rem follow. It is coherent and it overrides
+  the reader's own text-size preference, so the pack takes the *endpoints* (27px→62px on
+  the display, 28px→62px on an act heading) and ships them as clamp slopes with a rem term
+  in the sum.
+- **The heading ink.** The reference sets headings to pure black against an indigo body
+  ink. The move is worth keeping and the literal is not: pure black as a field or an ink is
+  banned library-wide as an unfinished default and the slop lint fails on it, so the pack
+  ships `#05041c` — 20.18:1 on the field against black's 21.00.
+- **The amber.** `#9e7613` is 4.15:1 on white, under AA for body text. The hue is the
+  reference's; the step down to `#8a6510` (5.32 / 4.91 / 4.68) is the pack's.
+
+`--ok`, `--danger` and the entire dark register are pack decisions rather than
+measurements — the reference paints no success and no error state and has no dark mode. The
+dark register is derived from the one dark thing the reference does have: the stage act's
+own two stops carry the field and the panel.
+
+### Fixed
+
+- **A self-test plant that had stopped finding its target.** The core-contract remainder
+  fixture matched `The other \w+ answer all four`; at the twenty-eighth pack the remainder
+  became "twenty-one", which a bare `\w+` cannot match, so the plant changed nothing and
+  the self-test still reported it as caught. A fixture that cannot find its own target is a
+  hole in the gate, and it opens on exactly the release the plant exists to catch.
+
+### Ratchet
+
+`test/floors.json` raised 2422/1287/504 → 3222/1811/615.
 ## [1.41.0] - 2026-08-17
 
 **A style pack is a token layer and a set of rules. It does not ship a button** — and until

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 **twenty-seven locked style
+decides whether to animate before it decides how, and **twenty-nine locked style
 packs** with ready-made design tokens, so what it builds reads as one system
 instead of a pile of effects.
 
@@ -71,6 +71,8 @@ into the cinematic layer, and says so in its own *Motion flavor* section.
 | `notation` | a near-white page drawn **entirely in hairlines instead of cards**, radii of 2 and 4px, a slab serif held at weight 300 against a monospace, **no bold anywhere**, an ink primary that leaves the accent free to mark what can be read, and one chamfered corner per page | **developer and technical products sold on restraint** — open source front pages, workspaces for people who dislike being sold to, documentation homes (standalone) |
 | `almanac` | **oatmeal paper rather than white**, seams at 2px and 4px with **no 1px anywhere**, a 104px display at weight 500 with a line-height below one that locks its lines into a block, uppercase mono tags notched through the edges of drawn boxes, and one object per page floating on four stacked shadow stops | **pages that assert a category** — a manifesto, a company saying what this kind of thing is, a product whose argument is editorial rather than functional (standalone) |
 | `vitrine` | a white field drawn **entirely in hairlines**, a serif display over a sans body, an ink primary so the accent stays free to mark what can be read, a grey panel that groups without lifting, and **one framed record** with a 1px inset highlight carrying the page's evidence | **the front door of a product sold on trust** — B2B software under evaluation, security and compliance surfaces, specification and comparison pages (standalone) |
+| `proscenium` | a white field carrying two cool acts and **one deep indigo act at the middle**, ink that is an indigo rather than a grey, an electric violet that fills a control staying **nearly square at 4px** against cards at 16, one family at nine weights, and a framed product panel the fold cuts off | **product-led marketing front doors whose argument is a demonstration** — SaaS home pages, launch and tour pages, any page with six or more acts that needs a repeated beat (standalone) |
+| `bulletin` | warm cream paper cut by **flat pastel bands**, every card and control a 1px ink outline standing on a **hard zero-blur ink offset it travels into when pressed** — 185 of them against 50 blurred shadows in the reference — a display face at 800 inside controls above the headline's 700, and **no tracking at any size** | **front doors whose argument is breadth** — a tool doing many things across many channels for many clients, sold cheerfully to a small team or an agency: social and content platforms, scheduling and inbox products, all-in-one SMB SaaS (standalone) |
 | `ledger` | warm cream paper where elevation is a **1px hairline at 12% ink** and no card casts a shadow, radii of 7.5/10/15/20 nested concentrically, an **ink** primary button, and a terracotta accent forbidden from filling any control — it labels, as a 10px monospace uppercase kicker — over 32px data rows, with a seal on every card stating how its number is known | the console of a product that answers questions **about data** — AI analysts, BI surfaces, query workspaces, agents that read a warehouse and write back a figure |
 
 Each pack locks palette, type, texture, motion tokens, signature motifs and
@@ -146,7 +148,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 twenty-seven style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
+| `styles/*.md` | The twenty-nine 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 |
 
@@ -217,7 +219,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 twenty-seven kits, so switching packs swaps identity rather than API,
+identical in all twenty-nine 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.
@@ -263,10 +265,10 @@ 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 twenty-seven
+installers and `diff -r`s the result against the source, then builds all twenty-nine
 kits.
 
-`test/scenarios.md` (T1–T19) is the behavioral harness: fresh subagents given a
+`test/scenarios.md` (T1–T30) is the behavioral harness: fresh subagents given a
 task, checking that the skill is discovered, applied and quoted correctly.
 Re-run the affected scenarios after any edit to `SKILL.md`, a pack or the
 reference.

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/              twenty-seven style packs — instrument-console (dark console),
+  styles/              twenty-nine 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
@@ -276,7 +276,14 @@ ${c("bold", "What it installs")}
                        almanac (oatmeal paper at 2px with no 1px anywhere and a
                        display set below a line-height of one), vitrine (a white
                        hairline field with a serif display, an ink primary, and
-                       one framed record carrying the evidence) —
+                       one framed record carrying the evidence),
+                       proscenium (a white field with two cool acts and one deep
+                       indigo act at the middle, a violet filling a control that
+                       stays nearly square at 4px against cards at 16, and a
+                       framed product panel the fold cuts off),
+                       bulletin (warm cream paper cut by flat pastel bands,
+                       every card and control a 1px ink outline on a hard
+                       zero-blur ink offset it travels into when pressed) —
                        plus a ready-made token CSS per pack and
                        STYLE_PACK_TEMPLATE.md for authoring more
 `);

package/cursor/rules/sheleg-design.mdc

@@ -86,7 +86,16 @@ four stacked shadow stops, for pages that assert a category;
 vitrine — a white field drawn entirely in hairlines, a serif display over a sans
 body, an ink primary, a grey panel that groups without lifting, and one framed
 record with a 1px inset highlight carrying the page's evidence, for the front
-door of a product sold on trust);
+door of a product sold on trust;
+proscenium — a white field carrying two cool acts and one deep indigo act at the
+middle, an electric violet filling a control that stays nearly square at 4px
+against cards at 16, one family at nine weights, and a framed product panel the
+fold cuts off, for product-led marketing front doors whose argument is a
+demonstration;
+bulletin — warm cream paper cut by flat pastel bands, every card and control a
+1px ink outline standing on a hard zero-blur ink offset it travels into when
+pressed, a display face at 800 inside controls and 700 in the headline, and no
+tracking at any size, for front doors whose argument is breadth);
 otherwise follow the contract below (self-contained on purpose).
 
 ## Whether to animate at all — before how

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

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

@@ -0,0 +1,55 @@
+# Bulletin — the contract this design system ships under
+
+**Register.** Choose Bulletin for **front doors whose argument is breadth**: a
+tool that does many things across many channels for many clients, sold
+cheerfully to a small team or an agency — social and content platforms,
+scheduling and inbox products, all-in-one SMB SaaS, marketplaces of small
+features. Warm cream paper, flat pastel bands, and every object drawn rather
+than tinted. Build every screen against `var(--…)` and never a literal.
+
+**Elevation is a hard offset and it never blurs.** A 1px `--line` outline plus a
+zero-blur ink shadow — `--shadow-1` 2px for a chip, `--shadow-2` 3px for a
+control, `--shadow-3` 4px for a card, `--shadow-4` for the one framed panel per
+page. One soft shadow anywhere and the pack is gone. An offset without an
+outline reads as a rendering fault.
+
+**The press.** A control translates by `--press-travel` exactly as its offset
+shrinks to `--shadow-press`, so the ink displaced stays constant; `:active`
+travels one more pixel and the offset goes to nothing. Hover and
+`:focus-visible` share the rule, so a keyboard user sees it. A **surface** does
+the opposite: its offset grows to `--shadow-3-wide`. One move per kind of
+object.
+
+**The accent rule.** There is exactly one accent (`--accent`) and it is a fill
+and a mark, never a word — at 2.77:1 on the paper it sits below the non-text
+floor. The filled control uses `--action`, a derived value: the reference sets
+white on the measured orange at 2.89:1, which is under AA and under the
+large-text floor, so no type size rescues it. Links use `--link` with an
+underline. At most one accent fill per view.
+
+**Status is never by colour alone.** `--good` / `--warn` / `--danger` /
+`--info` are state, never decoration, and every one of them ships beside a word.
+Under deuteranopia `--danger` and `--warn` separate by 0.7; the word is the
+message and the colour reinforces it. The `[data-surface="ink"]` block remaps
+all four — a theme that remaps its ink and leaves its statuses behind paints
+1.3–2.0:1.
+
+**Type.** Two families: Bricolage Grotesque for display, DM Sans for body. The
+control label is **heavier than the headline** — 800 against 700 — and that is
+measured, not a flourish. **Tracking is zero at every size.**
+
+**Bans** (verbatim from the pack):
+
+- No blur on any elevation. No offset without an outline.
+- No second orange fill in one viewport; no accent as a word.
+- No tracking, anywhere.
+- No gradient in a band — the bands are flat.
+- No status by colour alone.
+- No motion beyond the press and a fade: no parallax, no scrub, no sticky
+  choreography, no marquee.
+- No white page. White is a card; the field is `--bg`.
+
+**Motion does not cross.** A kit is the static half of a pack. The press is
+specified in `styles.css` and described here; nothing else in this package
+animates, and `prefers-reduced-motion` collapses every duration and both travel
+distances to zero at the token layer.

package/kits/bulletin/README.md

@@ -0,0 +1,38 @@
+# @sheleg-design/bulletin
+
+The React reference kit for the SHELEG **Bulletin** style pack — warm cream
+paper cut by flat pastel bands, where every card and control is a 1px ink
+outline standing on a hard zero-blur ink offset it travels into when pressed.
+
+It is generated from the pack, not authored beside it: `src/styles.css` opens
+with `styles/tokens/bulletin.css` byte for byte, and the rules the design agent
+must obey are in [`.design-sync/conventions.md`](./.design-sync/conventions.md).
+
+```bash
+npm install && npm run build
+```
+
+## The spine
+
+`Button`, `Card`, `Chip`, `Stat`, `Heading`, `Rule` — identical names, props and
+types in every SHELEG kit, so switching packs swaps identity rather than API.
+
+## This pack's own
+
+`StatusDot` (the word is required, never the colour alone), `Rail` (the row of
+outlined circles that says *many*), `Band` (one flat pastel per act, and the
+`ink` tone that flips the whole block to the dark register), `Panel` (one per
+page, the widest offset in the ramp) and `Skeleton`.
+
+## The two rules that carry the kit
+
+1. **An outline and an offset always travel together.** A hard shadow under an
+   edgeless box reads as a rendering fault rather than as depth.
+2. **A control presses into its offset; a surface grows out of it.** One move
+   per kind of object. Give a card the button's press and the grid stops reading
+   as a set of objects; give a button the card's growth and the click has no
+   feedback.
+
+**Motion does not cross into a design tool.** A kit is the static half of a
+pack: the press is described here and in the pack, and it is implemented in
+`styles.css`, but nothing in this package animates on its own.

package/kits/bulletin/package.json

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

@@ -0,0 +1,17 @@
+---
+category: Surfaces
+---
+
+One flat pastel per act, full-bleed, used to **change subject** rather than to
+decorate. The ink clears AA on every band — 5.76:1 on the lilac, 6.53 on the
+sky, 8.36 on the peach — which is why the bands can be saturated without a
+second text colour.
+
+`ink` switches the whole band to the dark register by setting
+`data-surface="ink"`, where the outline and the offset both invert to white. A
+gradient in a band is banned: the reference paints them flat, and a gradient
+reads as a different product.
+
+```tsx
+<Band tone="sky"><Heading level={2}>One inbox for every client</Heading></Band>
+```

package/kits/bulletin/src/Band.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+
+export interface BandProps {
+  /** One flat pastel per act. The pack forbids a gradient here. */
+  tone?: 'paper' | 'peach' | 'sky' | 'lilac' | 'lemon' | 'ink';
+  children: ReactNode;
+  className?: string;
+}
+
+export function Band({ tone = 'paper', children, className }: BandProps) {
+  return (
+    <section
+      className={['bl-band', `bl-band--${tone}`, className].filter(Boolean).join(' ')}
+      data-surface={tone === 'ink' ? 'ink' : undefined}
+    >
+      <div className="bl-band__inner">{children}</div>
+    </section>
+  );
+}

package/kits/bulletin/src/Button.md

@@ -0,0 +1,20 @@
+---
+category: Actions
+---
+
+The press is this pack's signature, and it lives here. A button stands `3px`
+proud of the paper on a hard zero-blur ink offset; hover translates it `2px` and
+shrinks the offset to `1px`; `:active` translates `3px` and removes the offset
+entirely — the control has bottomed out. The ink displaced is constant at every
+step, which is why it reads as movement rather than as a restyle.
+
+`primary` fills with `--action`, not `--accent`: the measured orange carries
+white at 2.89:1 and no type size rescues that. `secondary` is the same outline
+and offset over `--surface`. `ghost` keeps neither, for a toolbar row where an
+outline would add a line the eye has to parse.
+
+```tsx
+<Button onClick={start}>Start free</Button>
+<Button variant="secondary" onClick={book}>Book a demo</Button>
+<Button variant="ghost" size="sm" onClick={dismiss}>Not now</Button>
+```

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

package/kits/bulletin/src/Card.md

@@ -0,0 +1,18 @@
+---
+category: Surfaces
+---
+
+A card is `--surface` at `--r-lg` with a 1px `--line` outline and
+`--shadow-3` — the outline and the offset always travel together, because a hard
+shadow under an edgeless box reads as a rendering fault rather than as depth.
+
+A card is for a *group*. A list of statements takes a `Rule`, and a single
+figure takes a `Stat` on the bare paper. Hover on a card **grows** the offset to
+`--shadow-3-wide` — the opposite of the button's press, and mixing the two moves
+is the way this pack breaks.
+
+```tsx
+<Card title="Approvals" meta="4 waiting">
+  <p>Every post routes through the client before it publishes.</p>
+</Card>
+```

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

package/kits/bulletin/src/Chip.md

@@ -0,0 +1,16 @@
+---
+category: Foundations
+---
+
+A chip is the small outlined object the pack repeats everywhere: a tag, a
+filter, a platform label. `--r-pill`, a 1px `--line`, and `--shadow-1` at 2px —
+the smallest step of the offset ramp, because the offset grows with the object.
+
+`accent` tints with `--accent-wash` rather than filling with `--accent`: the
+accent is a fill for exactly one control per view and a chip is never it.
+`selected` keeps its state after the pointer leaves.
+
+```tsx
+<Chip>Instagram</Chip>
+<Chip tone="accent" selected>Agencies</Chip>
+```

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

package/kits/bulletin/src/Heading.md

@@ -0,0 +1,17 @@
+---
+category: Foundations
+---
+
+The type ramp made visible: 1 is the hero at `--t-hero` 84 / weight 700 /
+line-height 1.1, 2 the section at `--t-page` 48 / 1.2, 3 the card title at
+`--t-card` 20 / weight 600 / 1.4.
+
+**Tracking is zero at every level.** The reference sets `letter-spacing` seven
+times in 58 stylesheets and never on a heading, so a negative track here is the
+fastest way to stop the pack looking like itself. Level 1 clamps fluidly and the
+clamp is monotonic — the reference's own ramp is not, and that is a correction
+rather than a copy.
+
+```tsx
+<Heading level={1}>Post once. Show up everywhere</Heading>
+```

package/kits/bulletin/src/Heading.tsx

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

package/kits/bulletin/src/Panel.md

@@ -0,0 +1,15 @@
+---
+category: Signature
+---
+
+**One per page.** The framed block at `--r-2xl` with `--shadow-4` — the widest
+offset in the ramp — and 70px of padding, holding the page's densest claim: the
+comparison, the pricing table, the screenshot that has to be believed.
+
+A second panel and neither is the panel. Everything else on the page is a card
+at `--shadow-3` or a chip at `--shadow-1`, and the step between them is what
+tells the reader which block matters.
+
+```tsx
+<Panel><PricingTable /></Panel>
+```

package/kits/bulletin/src/Panel.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+
+export interface PanelProps {
+  /** The page's densest claim. One per page — the pack says so. */
+  children: ReactNode;
+  className?: string;
+}
+
+export function Panel({ children, className }: PanelProps) {
+  return <div className={['bl-panel', className].filter(Boolean).join(' ')}>{children}</div>;
+}

package/kits/bulletin/src/Rail.md

@@ -0,0 +1,16 @@
+---
+category: Signature
+---
+
+The row of outlined circles that says *many*. Each mark is a 60px chip at
+`--r-pill` with a 1px `--line` and `--shadow-2-wide`; the rail of them is how
+this pack states breadth without a paragraph.
+
+It belongs in the first viewport. Putting it below the fold is the most common
+way to build this hero wrong — the rail *is* the argument, and the headline only
+introduces it. The circles carry no text, so `name` is what assistive tech
+reads and what the visible caption renders.
+
+```tsx
+<Rail items={[{ mark: 'in', name: 'LinkedIn' }, { mark: 'ig', name: 'Instagram' }]} />
+```