sheleg-design-skill 1.38.0 → 1.40.0

package/CHANGELOG.md

@@ -4,6 +4,124 @@ 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.40.0] - 2026-08-17
+
+**A reference sweep has been in this pack since the Lazyweb bridge and could never be asked
+for.** `SKILL.md` carries an *Optional — real-world references (Lazyweb, Mobbin, Refero)*
+section, step 1 of *How to Apply* says to sweep before any layout exists to defend, and
+`DESIGN_SYNC_BRIDGE.md` §4 tells the three servers apart by what each returns — Lazyweb web
+products and growth mechanics, Mobbin evenly-spaced preview images per step, Refero visually
+similar screens and flows as structure. None of it was in the `description`, so
+`нужны визуальные референсы` reached no route.
+
+Two triggers now do, and one of them cost nothing at all:
+
+| Trigger | What it cost |
+|---|---|
+| `style pack` | **zero** — the description has said *"Product UI through its style packs"* since the style packs existed. The word was advertised and unroutable for as long as this router has had a table |
+| `visual reference` / `визуальные референсы` | 42 characters, paid for by compressing two clauses |
+
+**The unqualified word went to `super-ux` instead, on this pack's own rule.**
+`DESIGN_SYNC_BRIDGE.md` §4 opens with *"A reference sweep answers what a good version of
+this screen contains — sections, hierarchy, content order. It never answers what it looks
+like."* Structure is `super-ux`'s ground, so `референсы` routes there (`super-ux` 0.43.0) and
+only the visual half lands here. A prompt naming both raises both.
+
+### What was refused, and it is the word the operator actually types
+
+`подбери стиль` reaches nothing and stays that way. Measured against control sentences from
+this machine's own vocabulary: the bare `стиль` fires on «стиль кода» and «стиль коммитов»,
+the phrase `подбери стиль` fires on both as well because the matcher tolerates a qualifier
+between the words, and the English `pick a style` fires on *pick a style guide for python*.
+Every form an operator would naturally type carries a second trade, so the route takes the
+qualified phrases and lets the ambiguous ones reach nothing rather than the wrong craft.
+`вдохновение` was refused the same way — it fires on «вдохновение закончилось».
+
+**Budget, and it was tight before this change.** 948 → 955 characters against a 970 working
+limit: 15 free. Two clauses were compressed to pay for it, and one of them briefly took
+`heroes` out of the description — which the umbrella's `triggers_test.js` caught immediately,
+because `hero` is a routed trigger. The word is back.
+
+## [1.39.0] - 2026-08-17
+
+**Five packs at once, and the library goes from twenty-two to twenty-seven.** All five
+were extracted from live references while building one product's landing site and are
+ported back here whole: `router`, `daylight`, `notation`, `almanac` and `vitrine`. Every
+one is on the **widened** contract, carries an addressable origin, a token layer whose
+every stated ratio the palette gate recomputes, and a reference kit whose spine props are
+byte-identical to `workbench`'s.
+
+### Added
+
+- **`router`**, from [openrouter.ai](https://openrouter.ai) — and **the first pack in this
+  library measured from a running product rather than from a served stylesheet.** A
+  near-white field with a trace of blue and white cards standing on that tint, hairline
+  seams instead of shadows anywhere, body at 14px and weight 450, one royal blue at 97%
+  saturation doing every accent job and none of the chart work. The second reading
+  corrected three values the first had wrong, all named in the pack's Gotchas: their
+  `--text-xs` is 14px and not 12, the sidebar is 224 and not 244, and the border asymmetry
+  that reads as a register decision belongs to `--sidebar-border` alone.
+- **`daylight`**, from [taskip.net](https://taskip.net) — a cool portal field with generous
+  radii whose whole depth is **one very large soft shadow spent on a single object per
+  screen**, Inter Tight 700 tracked negative over Manrope 400.
+- **`notation`**, from [twenty.com](https://twenty.com) — a near-white page drawn **entirely
+  in hairlines instead of cards**, radii of 2 and 4px, a slab serif held at 300 against a
+  monospace, **no bold anywhere**, an ink primary, and one chamfered corner per page.
+- **`almanac`**, from [auxia.io](https://www.auxia.io) — **oatmeal paper rather than white**,
+  seams at 2px with **no 1px anywhere**, a 104px display at weight 500 set **below a
+  line-height of one**, and uppercase mono tags notched through the edges of drawn boxes.
+- **`vitrine`**, from [attio.com](https://attio.com) — a white hairline field with a serif
+  display, an **ink primary** so the accent stays free to mark what can be read, and one
+  framed record with a 1px inset highlight carrying the page's evidence.
+- **Five reference kits**, each with the six-component spine plus `StatusDot`, `Skeleton`
+  and the pack's own signature component — `LiftPanel`, `Eyebrow`, `TaggedBox`, `Frame`.
+
+### The idiom worth naming: the status triplet
+
+Every status in `router` holds **three** tokens rather than one — `--ok-mark` is painted,
+`--ok` is written, `--ok-weak` is laid under. The reference's own delta is drawn in
+`#00bf6f` and set in `#007544`: *the colour you paint with is not the colour you write
+with.* The `-mark` values are identical in both registers because only the words have to
+be read, and the split is what lets a 97%-saturated hue be an accent without becoming an
+unreadable label. `StatusDot` ships it as one object with a **required** label.
+
+### What the gates decided, rather than taste
+
+- **`router`'s `--info` was authored as a teal and refused**: 9.0 apart from `--ok` at full
+  colour against a hard floor of 10.0 — two semantic states in one colour, which secondary
+  encoding does not excuse. The reference had already answered it; its `--color-info` and
+  its `--or-royal` are the same hex.
+- **`almanac`'s derived `--danger` is a crimson, not a red**, for the same reason: an
+  orange-red beside its burnt-orange `--warn` measured 6.4 apart. Moved along the hue until
+  it separated at the floor.
+- **`router`'s dark `--danger` is not the reference's.** Theirs is 5.02 on the field and
+  clears, but **4.38 on its own chip tint** — and a danger chip is where the word most
+  needs to be read.
+- **`vitrine`'s `--shadow-1` had to be reordered.** Written colour-first the palette gate
+  reads it as a colour it cannot compute; written length-first it is the same shadow and
+  is checkable.
+- **Three packs ship a derived `--danger`** — `daylight`, `notation` and `almanac`, whose
+  references are marketing sites that paint no error state. Each is marked derived **at
+  the declaration**, so a later reader cannot mistake it for a measurement.
+
+### Two findings from the palette work, recorded in the packs' Gotchas
+
+- **Six chart series will not fit and the arithmetic says so.** Six distinguishable steps
+  need about 60 L* of range; the dark end is bounded by usefulness and the light end runs
+  into the page, so the palest measured **1.38** against the field. Four is what clears, at
+  3.31 light and 4.61 dark. **The number of series is a decision of the palette, not of the
+  data.**
+- **A monochrome chart palette is the weakest, not the safest** — it holds two series on
+  white (3.22) and three on ink (4.25); a third ink step on white lands at 2.72, under the
+  non-text floor.
+
+### Changed
+
+- Every counted claim moved from twenty-two to twenty-seven, in all nine sources the
+  counted-claims check reads. **The remainder beside the total moved with it** — the stale
+  remainder is precisely the failure that check was written for, and it fired once during
+  this change, exactly as its own comment predicts.
+
 ## [1.38.0] - 2026-08-16
 
 ### The routing table stopped being a second copy of the packs
@@ -589,6 +707,11 @@ reproduced before an edit; every one is fixed here.
 
 ## [1.30.0] - 2026-08-14
 
+> **Never released on its own.** There is no `v1.30.0` tag and no `1.30.0` on npm,
+> so `npm install sheleg-design-skill@1.30.0` and `git checkout v1.30.0` both fail. This section
+> describes work that shipped inside a later version. The note is here because
+> the section reads as a release (2026-08-17, umbrella `B-71`).
+
 A twentieth pack, **`paperclip`**, extracted from a live reference rather than composed:
 <https://paperclip.ing>, read from the two shipped stylesheets
 (`/_next/static/chunks/0sw-z-v7xc9dd.css`, 622 rules; `/_next/static/chunks/19xj4kovk13jy.css`,
@@ -744,6 +867,11 @@ reasons they exist were all legible in the source instead of having to be recons
 
 ## [1.28.0] - 2026-08-14
 
+> **Never released on its own.** There is no `v1.28.0` tag and no `1.28.0` on npm,
+> so `npm install sheleg-design-skill@1.28.0` and `git checkout v1.28.0` both fail. This section
+> describes work that shipped inside a later version. The note is here because
+> the section reads as a release (2026-08-17, umbrella `B-71`).
+
 > Authored and gated on its own, **released inside `v1.29.0`**: the `tenor` pack followed
 > it in the same session before a tag was cut, and splitting the two after the fact would
 > have produced an intermediate commit whose ratchet floors no longer matched its own
@@ -2183,6 +2311,11 @@ and so far only pack on the thirteen-heading contract.
 
 ## [1.5.0] - 2026-08-04
 
+> **Never released on its own.** There is no `v1.5.0` tag and no `1.5.0` on npm,
+> so `npm install sheleg-design-skill@1.5.0` and `git checkout v1.5.0` both fail. This section
+> describes work that shipped inside a later version. The note is here because
+> the section reads as a release (2026-08-17, umbrella `B-71`).
+
 The register the skill was missing for its own audience: a developer tool that
 does not live on a dark console. Six packs could dress a landing page, a
 dashboard, a deck and two kinds of consumer health, and none of them had an
@@ -2269,6 +2402,11 @@ the software the people using this skill actually build.
 
 ## [1.4.0] - 2026-08-03
 
+> **Never released on its own.** There is no `v1.4.0` tag and no `1.4.0` on npm,
+> so `npm install sheleg-design-skill@1.4.0` and `git checkout v1.4.0` both fail. This section
+> describes work that shipped inside a later version. The note is here because
+> the section reads as a release (2026-08-17, umbrella `B-71`).
+
 Two packs for the warm consumer register, extracted from two production sites
 that solve the same brief in opposite ways — one premium and editorial, one
 friendly and modular. Between them they replace the reflex a generated wellness
@@ -2566,6 +2704,11 @@ change what an existing token means. Removing or renaming either is a major.
 
 ## [0.9.1] - 2026-07-28
 
+> **Never released on its own.** There is no `v0.9.1` tag and no `0.9.1` on npm,
+> so `npm install sheleg-design-skill@0.9.1` and `git checkout v0.9.1` both fail. This section
+> describes work that shipped inside a later version. The note is here because
+> the section reads as a release (2026-08-17, umbrella `B-71`).
+
 ### Added
 
 - Optional **Lazyweb MCP** step: when `mcp__lazyweb__*` tools are present, the
@@ -2663,6 +2806,11 @@ Review pass.
 
 ## [0.6.0] - 2026-07-20
 
+> **Published, never tagged.** `0.6.0` is installable from npm but there is no
+> `v0.6.0` tag, so the artifact exists and the commit it was cut from cannot be
+> checked out. A bug report against this version has no source tree to read
+> (2026-08-17, umbrella `B-71`).
+
 ### Added
 
 - Ready-made token layers `styles/tokens/<pack>.css` for all three packs
@@ -2689,6 +2837,11 @@ Review pass.
 
 ## [0.5.0] - 2026-07-20
 
+> **Never released on its own.** There is no `v0.5.0` tag and no `0.5.0` on npm,
+> so `npm install sheleg-design-skill@0.5.0` and `git checkout v0.5.0` both fail. This section
+> describes work that shipped inside a later version. The note is here because
+> the section reads as a release (2026-08-17, umbrella `B-71`).
+
 ### Added
 
 - **`workbench` style pack** — quiet light+dark utilitarian product UI for
@@ -2702,6 +2855,11 @@ Review pass.
 
 ## [0.4.0] - 2026-07-19
 
+> **Published, never tagged.** `0.4.0` is installable from npm but there is no
+> `v0.4.0` tag, so the artifact exists and the commit it was cut from cannot be
+> checked out. A bug report against this version has no source tree to read
+> (2026-08-17, umbrella `B-71`).
+
 ### Added
 
 - **Style packs** (`styles/`): the motion methodology is now style-agnostic
@@ -2717,6 +2875,11 @@ Review pass.
 
 ## [0.3.0] - 2026-07-19
 
+> **Published, never tagged.** `0.3.0` is installable from npm but there is no
+> `v0.3.0` tag, so the artifact exists and the commit it was cut from cannot be
+> checked out. A bug report against this version has no source tree to read
+> (2026-08-17, umbrella `B-71`).
+
 ### Added
 
 - Claude Code marketplace layout: `.claude-plugin/marketplace.json` +
@@ -2738,6 +2901,11 @@ Review pass.
 
 ## [0.2.0] - 2026-07-19
 
+> **Published, never tagged.** `0.2.0` is installable from npm but there is no
+> `v0.2.0` tag, so the artifact exists and the commit it was cut from cannot be
+> checked out. A bug report against this version has no source tree to read
+> (2026-08-17, umbrella `B-71`).
+
 ### Changed
 
 - SKILL.md reworked to skill-authoring canon: trigger-only description

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-two locked style
+decides whether to animate before it decides how, and **twenty-seven locked style
 packs** with ready-made design tokens, so what it builds reads as one system
 instead of a pile of effects.
 
@@ -66,6 +66,11 @@ into the cinematic layer, and says so in its own *Motion flavor* section.
 | `tenor` | warm paper with **zero radius and zero shadow anywhere**, a single hairline weight assembling every lattice, and one orange that exists only on hover and on focus — so the page screenshots with no colour in it at all — a sans held at weight 400 and tracked negative against a mono tracked positive, display at a line-height below one in an eight-to-twelve-character measure, and proof delivered as silent looping video in a 1px rectangle | products arguing a **management thesis** — that a new kind of thing has to be run like an existing organisation: AI-workforce and agent-operations platforms, autonomous back-office, revenue and sales operations, sold to the director who will have to manage it |
 | `paperclip` | neutral coal with **no functional colour at all** — every control monochrome, elevation made of hairlines, and the whole chromatic budget spent on a curtain of 96 gradient capsules and twelve gradient section badges that cannot be clicked — a tight grotesque over a plain one over a monospace, and the capsule as the shape of everything from a button to a 10 × 20 schedule tick | products that ask a person to **run something that runs itself** — agent teams and orchestrators, autonomous back-office, schedulers, job runners, budget-governed compute |
 | `awning` | white forecourt where **the accent is black** and no hue reaches the chrome at all; a pill whose radius is a declared component token, one variable grotesque at **420 / 550 with no 700**, two rule weights and a single three-layer shadow | commerce and platform front doors — the surface that sells a system other businesses will run their storefront, payroll, billing or logistics on |
+| `router` | a near-white field with a trace of blue and white cards standing on that tint, **hairline seams instead of shadows anywhere** — one lift exists and it is a menu — body at 14px and weight 450, one royal blue at 97% saturation doing every accent job and none of the chart work, and a status triplet in which the colour you paint with is not the colour you write with | **product consoles and the pages that have to look like them** — dashboards, admin and developer platforms, billing and usage surfaces, and a landing page whose argument is an inventory rather than a promise (standalone) |
+| `daylight` | a cool near-white portal field with generous radii and **one very large soft shadow spent on a single object per screen**, Inter Tight 700 tracked negative over Manrope 400, and a four-step blue tile ramp for stacked bands | **client-facing portals and the pages that sell them** — onboarding, workspaces a customer logs into, service dashboards, scheduling and billing (standalone) |
+| `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) |
 | `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
@@ -141,7 +146,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-two style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
+| `styles/*.md` | The twenty-seven 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 |
 
@@ -212,7 +217,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-two kits, so switching packs swaps identity rather than API,
+identical in all twenty-seven 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.
@@ -258,7 +263,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 twenty-two
+installers and `diff -r`s the result against the source, then builds all twenty-seven
 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/              twenty-two style packs — instrument-console (dark console),
+  styles/              twenty-seven 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
@@ -265,7 +265,18 @@ ${c("bold", "What it installs")}
                        awning (a white forecourt where the accent is black and
                        no hue reaches the chrome, a pill whose radius is a
                        declared component token, and one variable grotesque at
-                       420/550 with no 700) —
+                       420/550 with no 700),
+                       router (a near-white field with a trace of blue, hairline
+                       seams instead of shadows, body at 14px and weight 450, and
+                       a status triplet where the painted colour is not the
+                       written one), daylight (a cool portal field whose whole
+                       depth is one very large soft shadow spent on one object),
+                       notation (hairlines instead of cards, a light serif over
+                       a monospace, an ink primary and one chamfered corner),
+                       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) —
                        plus a ready-made token CSS per pack and
                        STYLE_PACK_TEMPLATE.md for authoring more
 `);

package/cursor/rules/sheleg-design.mdc

@@ -65,6 +65,28 @@ awning — a white forecourt where the accent is black and no hue reaches the
 chrome at all, a pill whose radius is a declared component token, one variable
 grotesque at 420/550 with no 700, two rule weights and a single three-layer
 shadow, for commerce and platform front doors);
+router — a near-white field with a trace of blue and white cards standing on
+that tint, hairline seams instead of shadows anywhere, body at 14px and weight
+450, one royal blue at 97% saturation doing every accent job and none of the
+chart work, and a status triplet in which the colour you paint with is not the
+colour you write with, for product consoles, developer platforms and the landing
+pages that have to look like them;
+daylight — a cool near-white portal field with generous radii whose whole depth
+is one very large soft shadow spent on a single object per screen, Inter Tight
+700 tracked negative over Manrope 400, for client-facing portals and the pages
+that sell them;
+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 with no bold
+anywhere, an ink primary that leaves the accent free to mark what can be read,
+and one chamfered corner per page, for developer products sold on restraint;
+almanac — oatmeal paper rather than white, seams at 2px with no 1px anywhere, a
+104px display at weight 500 set below a line-height of one, uppercase mono tags
+notched through the edges of drawn boxes, and one object per page floating on
+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);
 otherwise follow the contract below (self-contained on purpose).
 
 ## Whether to animate at all — before how

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

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

@@ -0,0 +1,32 @@
+# Almanac — the contract this design system ships under
+
+**Register.** Choose Almanac for **pages that assert a category**: a manifesto page, a
+company saying what this kind of thing is, a product whose argument is editorial. The
+field is **oatmeal `#f0efe3`, not white**, and it is the whole first impression. Light
+is the default register and dark is a first-class twin; both come from the same
+tokens, so build every screen against `var(--…)` and never a literal.
+
+**Seams are 2px and there is no 1px anywhere.** Structure is read by mass rather than
+by contrast, which is why the seam values sit far under a hairline pack's and are not
+a defect. Neither seam carries meaning alone: every panel edge in this pack has an
+uppercase mono tag notched through it.
+
+**One object floats per page**, on four stacked shadow stops whose deepest is 162px
+of blur. A second floating object is the fastest way to lose the effect.
+
+**`--warn` is two different colours and swapping them is silent.** `#993f0e` on the
+light register and `#fa6838` on the dark are the same orange at two steps, because
+the bright one measures 2.32 on oatmeal. Using the bright value on the light field
+ships a warning nobody can read and nothing on screen looks broken.
+
+**Status is never by colour alone.** Every state is a mono tag or a dot **plus a
+word**. `--danger` is **derived** and is a crimson on purpose: an orange-red beside
+this pack's burnt-orange warn fails the palette gate's hard floor.
+
+**Bans** (verbatim from the pack):
+
+- No 1px anywhere; no second floating object; no drawn box without its tag.
+- No sentence in the mono — it is the label voice.
+- No weight 700 as the default emphasis; 500 is the pack's weight.
+- No white field. The oatmeal is the identity.
+- No status by colour alone.

package/kits/almanac/README.md

@@ -0,0 +1,22 @@
+# @sheleg-design/almanac
+
+The React reference kit for the SHELEG **Almanac** style pack — an oatmeal-paper grammar (light default, dark twin) with 2px seams and no 1px anywhere, a display set below a line-height of one, and uppercase mono tags notched through the edges of drawn boxes.
+
+It is generated from the pack, not authored beside it: `src/styles.css` opens with
+`styles/tokens/almanac.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. Switching packs swaps identity, not API.
+
+## This pack's own
+
+`StatusDot` carries the status triplet with a **required** label, because this pack
+states that status is never by colour alone. `Skeleton` is static. `TaggedBox` is the
+pack's signature element — see [`styles/almanac.md`](../../plugins/sheleg-design/skills/sheleg-design/styles/almanac.md).

package/kits/almanac/package.json

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

@@ -0,0 +1,21 @@
+---
+category: Actions
+---
+
+Height 36, radius 6, weight 500, label at 14 — the reference's own control, and
+every variant wears the same radius. `primary` fills with the accent and states
+its label colour on the rule rather than inheriting it, because an anchor reset
+that says `color: inherit` will otherwise win the label and paint ink on accent.
+`secondary` is the 1px `--edge` bordered one; `ghost` carries no border at all
+and belongs in toolbars and table rows, where a border adds a line the eye has
+to parse.
+
+Hover moves background, border and colour. **Nothing translates and nothing
+scales** — the reference presses nothing, and a button that pops on click has
+left this pack.
+
+```tsx
+<Button onClick={connect}>Connect account</Button>
+<Button variant="secondary" onClick={exportAll}>Export</Button>
+<Button variant="ghost" size="sm" onClick={dismiss}>Dismiss</Button>
+```

package/kits/almanac/src/Button.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+
+export interface ButtonProps {
+  /** `primary` is the accent fill — the pack allows 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={['al-btn', `al-btn--${variant}`, `al-btn--${size}`, className]
+        .filter(Boolean)
+        .join(' ')}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}

package/kits/almanac/src/Card.md

@@ -0,0 +1,18 @@
+---
+category: Surfaces
+---
+
+`--panel` on `--bg`, a 1px seam, radius 8, **no shadow**. That is the whole
+elevation model of this pack: the reference sets `box-shadow: none` almost
+everywhere and the single lift it owns is a menu.
+
+**Use a card when the content is a record.** A list of paragraphs takes a seam
+between them and no box — the reference's own settings pages are seams, not
+cards, and boxing prose is the fastest way to make this pack look like a
+template.
+
+```tsx
+<Card title="Managed accounts" meta="4 held">
+  <DataRows />
+</Card>
+```

package/kits/almanac/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, a window, a state. */
+  meta?: string;
+  children: ReactNode;
+  className?: string;
+}
+
+export function Card({ title, meta, children, className }: CardProps) {
+  const head = title !== undefined || meta !== undefined;
+  return (
+    <section className={['al-card', className].filter(Boolean).join(' ')}>
+      {head && (
+        <div className="al-card__head">
+          {title !== undefined && <h3 className="al-card__title">{title}</h3>}
+          {meta !== undefined && <span className="al-card__meta">{meta}</span>}
+        </div>
+      )}
+      <div className="al-card__body">{children}</div>
+    </section>
+  );
+}

package/kits/almanac/src/Chip.md

@@ -0,0 +1,16 @@
+---
+category: Foundations
+---
+
+A pill at `--r-pill`, 12px, weight 500. `neutral` sits on `--panel-2`;
+`accent` takes the accent at 7.8% with the accent as its word — the reference's
+own tint alpha, and the same pair its selected sidebar item wears.
+
+`selected` adds a 2px rail on the leading edge. **Selected is not hover:** a
+selected chip keeps its tint and rail after the pointer leaves, and a hovered
+one does not.
+
+```tsx
+<Chip>30d</Chip>
+<Chip tone="accent" selected>Overview</Chip>
+```

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

package/kits/almanac/src/Heading.md

@@ -0,0 +1,17 @@
+---
+category: Foundations
+---
+
+Three levels and no more: `--t-page` 30, `--t-section` 24, `--t-card` 16. All
+three carry `--track-tight`; level 3 is the same size as body and separates by
+weight alone, which is what keeps a dense screen from turning into a ladder of
+sizes.
+
+The hero's 36px display is **not** in this component. It belongs to the landing
+register, is fluid, and is capped at 17ch — a headline that reaches five lines
+is a broken hero, not a long one.
+
+```tsx
+<Heading level={1}>Managed accounts</Heading>
+<Heading>Volume by account</Heading>
+```

package/kits/almanac/src/Heading.tsx

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