sheleg-design-skill 1.48.0 → 1.49.0

package/CHANGELOG.md

@@ -6,6 +6,160 @@ follow [SemVer](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [1.49.0] - 2026-08-24
+
+### Rimlight, the thirty-fourth pack — elevation made of light
+
+Extracted from `peppermint.global/services/web-design`, a design studio's service page.
+The site is Webflow: one shared stylesheet of 230,354 bytes declaring 82 custom
+properties, and an interaction engine that ships on the page and drives exactly **one**
+element. Every value was read off **computed styles on the live page** through CDP at
+1440×900 — 487 visible of 562 elements on a 12,410px page — and at a device-emulated
+390×844.
+
+**The signature is a light, not a shadow.** The primary control wears a **sixteen-layer**
+`box-shadow`: six layers lit — a white rim, a teal spill, a cyan throw, two insets that
+keep it from reading as a sticker, and a mint bloom at 44px of blur offset −14.78px in x
+— and **ten pre-declared at alpha 0**, every offset already in place so a direction can
+be lit by moving alpha alone with no relayout. The light sits below and to the left. On a
+page otherwise made of ink, one blue and two greys, that bloom is the only chromatic
+event, so the most saturated thing on the screen is also the thing you are meant to click.
+No pack in the library had elevation made of coloured light.
+
+**Reading the render mattered twice, in opposite directions**, which is exactly what the
+template's new rule 7 was written for a release earlier. The uppercase micro-labels *look*
+generously tracked and are not — `letter-spacing` computes to `normal` on every one, and
+the openness is Source Code Pro's own advance width, so a pack matched from a screenshot
+ships a tracking value that does not exist. And the button's elevation *looks* like one
+soft shadow; sixteen layers only resolve under `getComputedStyle`.
+
+**The palette is split by field, and that is the pack's central law.** Every one of the
+reference's five secondary hues measures 6.5–10.5:1 on the dark act and **1.65–2.65:1 on
+the white page**. They did not fail — they were designed for the dark, and the light field
+is where they must be held back. So the hues live in `[data-surface="dark"]`, which is a
+**surface variant and not a theme twin**: one section is dark, the document never inverts,
+and the four statuses are remapped rather than inherited because the light set measures
+1.1–1.5:1 there.
+
+**The blue is two tokens because it does two jobs.** `--accent` is 3.03:1 on `--bg` —
+below the 4.5:1 body floor and above the 3:1 large-text one — so it is declared
+`@role non-text` with its exemption stated: legal on a word only at ≥ 24px, which is where
+the reference spends it, at 86px in the headline's first phrase. Anything smaller takes
+`--accent-ink` at 5.16:1.
+
+**Four corrections travel with the pack.** Secondary copy is `#9d9fa3` at 2.65:1 on the
+page. The tertiary grey `#767676` passes the page at 4.54:1 and fails the act separator at
+4.05:1. The reference's secondary set is a palette and not a scheme — eight of its
+twenty-one pairs are too close to separate under dichromacy — so the four status roles were
+derived from its own hues rather than adopted from its names. And 26 of 37 visible
+interactive elements at 390 are under 44px.
+
+**Two doctrine corrections the gates caught, both worth recording.** The pack prescribed
+its press at the reference's own 200ms, which sits outside the doctrine's 100–160ms band,
+so `--dur-press` takes the band's ceiling instead of the nearest measured value — the one
+motion value here that is not measured, and it says so. And the pack bans bold while the
+token layer shipped no base rule for it: the UA supplies `strong { font-weight: 700 }`
+whether a pack does or not, so a ban with no rule is invisible. The layer now sets
+`strong, b { font-weight: var(--weight-label) }` — 500, the heaviest weight this pack has.
+
+**Rendering the kit caught a defect the gates could not**, for the third release running.
+The light control variant rendered *dark* inside the dark act: it was built on
+`--surface`, which `[data-surface="dark"]` remaps to `#242424`, so a control that is white
+by definition followed the field and the rig lit nothing. `--lit-light-fill` does not
+follow the field. A gate reads structure, not layout.
+
+`MOTION_INTENSITY` is pinned at **2** — the lowest ceiling in the library beside
+`bulletin`. 432 of 487 elements compute `transition-duration: 0s`, `animation-timeline`
+appears zero times, and the rig is a **static** light: animating it is the pack's first
+ban and the fastest way to turn it into a toy.
+
+The fork against `showroom` is written from both ends: both are white and both spend a big
+layered elevation on one object, and the distinction is that `showroom` lights the
+application in a neutral shadow dropped from above while this lights a control in coloured
+light thrown from the side — and this hero carries no product at all. `ADR-0001` gains a
+further application, with `halation`, `limelight` and `luminaire` weighed and rejected.
+
+Gates: 4626 → **4754**, 2681 → **2784**, 692 → **706**. Both palette ceilings held for the
+second consecutive release; `computed_at_least` rises 572 → 600.
+
+## [1.48.1] - 2026-08-24
+
+### The assembly rule is written down, and the render step earned its place within the hour
+
+The procedure for adding a pack lived in three homes — `CONTRIBUTING.md`'s authoring
+steps, `docs/DOCMAP.md`'s propagation row, and the release section — and three things
+the `nameplate` run actually did were in none of them. They are now in the home that
+already owns each, rather than in a fourth document, which `DOCMAP`'s single-homes
+discipline forbids.
+
+**`STYLE_PACK_TEMPLATE.md` gains rules 7 and 8**, and both ship inside the bundle so an
+author holding only the installed skill sees them. Rule 7 is *read the render, not the
+stylesheet*: a dead token reads as the brand, a gradient hides from a
+`background-color` census because its element's is transparent, and vendor CSS
+outnumbers authored CSS — three traps met in one run, each with the shipped pack that
+met it. Rule 8 is *write a ratio so the gate can compute it*, with all four shapes that
+fail: a line break between the number and its partner, a token whose name contains
+another's (`--on-action` resolves as `--action`, a gradient that pairs with nothing), a
+table row stating a bare ratio, and a line whose **only** token is the partner, so it
+fills both slots and pairs with itself.
+
+**`CONTRIBUTING.md` gains step 8: render the kit and check its computed values against
+what the pack claims.** Not a screenshot for the eye — mount it on real content at
+1440, 768 and an emulated 390, then read `getComputedStyle` back. The step existed
+only as a sentence in `bulletin`'s CHANGELOG entry, so whether it happened depended on
+the next author reading that paragraph. **It caught a defect within the hour of being
+written:** the `Mark` tile added in this same release rendered 60×60 against a declared
+50, because `.np-mark` was not in the kit's `border-box` list — the same defect as the
+plate one release earlier, in the component added to close a different gap.
+
+### The mark set, and what measuring it changed
+
+`nameplate`'s reference repeats one object per feature on the report surface it embeds:
+a 50×50 tile at 16px radius wearing a **5px solid ring**, a wash at 9–12% alpha and a
+glyph in the matching solid. Six hue pairs drive it and the pack carried none of them,
+so an agent building the reference's own feature row would have invented six colours.
+
+**Measuring them changed the answer from "carry six hues" to "carry a mechanism and a
+ban".** The set does not separate from itself: seven of its fifteen pairs are tight,
+and the reference's own indigo `#5b4bd4` and violet `#6c5ce7` are 5.58 OKLab units
+apart at full colour — one colour wearing two names. So the hue is variety, never
+meaning; it does not encode which feature this is; and the tokens are **numbered**
+rather than named so nothing can misread them as semantic. That is the measured
+difference from `pigeonhole`, whose hues *are* a taxonomy and whose label word is
+therefore mandatory, and the fork is now written from both ends.
+
+The sixth hue was dropped for a second measured reason: the reference's red `#d94558`
+sits **2.92** units from `--action-to` and 1.12 under the worst dichromacy — the same
+colour to every reader, not only to a colourblind one. A mark in the action's colour
+reads as a control, so the coral stays with `--action` and the sixth slot takes
+`--mark-neutral`. All six clear the 3:1 non-text floor on their own composited tile,
+and none may carry a word: `--mark-4` is 3.89:1 on the slab, `--mark-2` is 4.27:1, and
+the dropped red was 3.96:1.
+
+Ships `Mark` as the kit's twelfth component, with `tone` as a number precisely because
+it means nothing.
+
+### A claim that was wider than its evidence
+
+The pack said *the reference has no dark band anywhere*, and what had been checked was
+the home page at 1440. The authored stylesheets declare **eight** dark fills, and both
+kinds were then checked: `.bg-header-blue` (`#231b66`) is dead CSS no served page uses,
+and the one that renders (`#1f2937`) sits inside a **mock of another product's
+interface** in the hero image. The claim holds in substance and now states the width it
+was measured at, in the Bans and in the token layer's own comment. A claim wider than
+its evidence is this repository's own defect class, and it does not get an exemption
+for being ours.
+
+### Still open, and named rather than quietly dropped
+
+`T31` is unrun — it needs fresh contexts reading blind. And 29% of the reference's
+authored CSS is still unmeasured into the pack: the checkout (`order-form-cro.css`,
+66,546 B) and the report surface (71,302 B) of 500,051 B total. The pack describes a
+front door and says nothing about the payment step. That is an extension to a second
+surface, not a loose end.
+
+Gates: 4617 → **4626**, 2659 → **2681**, 692 unchanged. Both palette ceilings held.
+
 ## [1.48.0] - 2026-08-24
 
 ### Nameplate, the thirty-third pack — the proof is a borrowed name

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 **thirty-three locked style
+decides whether to animate before it decides how, and **thirty-four locked style
 packs** with ready-made design tokens, so what it builds reads as one system
 instead of a pile of effects.
 
@@ -53,6 +53,7 @@ into the cinematic layer, and says so in its own *Motion flavor* section.
 | `babylove` | white with one orange in six steps and nothing else declared — seven tokens over Tailwind's defaults, two card levels nested at 16 and 8px, no shadow and no dark theme | SEO and AI-visibility SaaS with a long time-to-value — the minimal-system answer to the same brief `outrank` answers maximally |
 | `patchbay` | near-black under a faint 40px grid, one mint-cyan doing every functional job, elevation made of 8% hairlines with no shadow anywhere, and a live architecture diagram whose cords carry SMIL particles | engines, message buses, pipelines, schedulers and open-source front doors — anything whose argument is an architecture rather than a promise |
 | `nameplate` | a cool near-white slab under a page that is **square on 87% of its elements** — 1,091 of 1,251 measured — where the one round shape is reserved for a white 1px-bordered pill carrying somebody else's publication name **as type rather than as a logo**, one family with the body at **weight 500**, and two uppercase registers tracked 0.06em and 0.175em | **pages whose argument is that named third parties will vouch for you** — press and media placement, PR distribution, trust marks and badges, certification, review aggregation and "as featured in" surfaces (standalone) |
+| `rimlight` | a white field with a cool grey act separator and one near-black act, a grotesque for every sentence and a **monospace for every piece of chrome**, square on 84% of its elements, tracked negative at every size and with **no bold anywhere** — and an elevation made of **coloured light**: a sixteen-layer rig, six layers lit and ten held at alpha 0, thrown from below-left onto one control per viewport | **a studio's own front door and the pages that sell what it makes** — design and engineering agencies, product studios, service and case-study pages (standalone) |
 | `outrank` | white field with one violet that carries text in both directions, a 5px light ring standing in for a button shadow, and two type families split by how long a thing is read | SEO and growth SaaS, agent-run back-office — the pack for a product that ships a landing and a dashboard at once |
 | `orchard` | warm oat field of rounded slabs, sage brand + one candy-orange action, rounded geometric display, soft-3D pills built from inset light | friendly consumer biotech, DTC wellness, testing kits & supplements |
 | `field-notes` | warm green-cast paper ruled by hairlines, one rust accent, a hero that dissolves into the page instead of ending, numbered mono eyebrows, crop marks, colour that encodes how a claim is known | open-source & developer tools sold on auditability — code intelligence, provenance, evals, agent memory |
@@ -153,7 +154,7 @@ skills.
 | `DESIGN_SYNC_BRIDGE.md` | The Claude Design contract: what a pack sends to claude.ai/design and in what shape, the rule for each of the four reference types, and the border motion does not cross |
 | `FIGMA_BRIDGE.md` | The design↔code contract: how a pack's tokens map onto Figma variable collections and modes, how to implement a design without importing raw values, and what cannot cross the border |
 | `AI_PRODUCT_PATTERNS.md` | The surfaces a model drives: the five states of a call, streaming instead of spinners, latency, provenance and uncertainty, agent confirmations, and the bans that keep it honest |
-| `styles/*.md` | The thirty-three style packs — palette, type, texture, motion tokens, motifs, bans, and the traps each one carries |
+| `styles/*.md` | The thirty-four 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 |
 
@@ -224,7 +225,7 @@ cd ./ds-workbench && npm install && npm run build
 then `/design-sync` in that directory, from Claude Code. Three layers cross: the
 pack's **bans** as the design system's own README, `styles.css` built from
 `tokens/<pack>.css` verbatim, and the components — a six-name spine that is
-identical in all thirty-three kits, so switching packs swaps identity rather than API,
+identical in all thirty-four 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.
@@ -270,7 +271,7 @@ a pack's four widened sections used to make two gates *quieter* and still green.
 One honest limit: the npx installer is checked by asserting its runtime bundle
 walker exists, not by reading a file list — it has none by design. What proves
 it ships the right files is CI, which installs the bundle through **both**
-installers and `diff -r`s the result against the source, then builds all thirty-three
+installers and `diff -r`s the result against the source, then builds all thirty-four
 kits.
 
 `test/scenarios.md` (T1–T30) is the behavioral harness: fresh subagents given a

package/bin/cli.js

@@ -234,14 +234,17 @@ ${c("bold", "What it installs")}
   DESIGN_SYNC_BRIDGE.md   the Claude Design contract (what a pack sends, and
                        what does not cross)
   AI_PRODUCT_PATTERNS.md  chat / agent / streaming surfaces (honest state)
-  styles/              thirty-three style packs — instrument-console (dark console),
+  styles/              thirty-four style packs — instrument-console (dark console),
                        editorial-luxury (warm editorial), workbench (light/dark
                        product UI), briefing-room (dark 16:9 presentation deck),
                        atrium (warm cream consumer health), patchbay (dark live
                        schematic), nameplate (a cool near-white slab under a
                        square page, the one round shape reserved for a white
                        bordered pill carrying somebody else's publication name
-                       as type), babylove (white +
+                       as type), rimlight (a white field and one near-black
+                       act, a monospace carrying every label and button, and
+                       an elevation made of coloured light rather than a
+                       shadow), babylove (white +
                           one orange, seven tokens over Tailwind defaults),
                           outrank (white +
                           one violet, a landing and a dashboard in one brand),

package/cursor/rules/sheleg-design.mdc

@@ -107,7 +107,12 @@ the one round shape reserved for a white 1px-bordered pill carrying somebody
 else's publication name as type, one family with the body at weight 500, and two
 uppercase registers tracked 0.06em and 0.175em, for pages whose argument is that
 named third parties will vouch for you: press placement, trust marks,
-certification and review aggregation);
+certification and review aggregation;
+rimlight — a white field with a cool grey act separator and one near-black act, a
+grotesque for every sentence and a monospace for every piece of chrome, square on 84%
+of its elements, tracked negative at every size and with no bold anywhere, whose only
+elevation is a sixteen-layer coloured light rig thrown from below-left onto one
+control per viewport, for a studio's front door and its service and case-study pages);
 otherwise follow the contract below (self-contained on purpose).
 
 ## Whether to animate at all — before how

package/kits/nameplate/src/Mark.md

@@ -0,0 +1,24 @@
+---
+category: Signature
+---
+
+The report surface's one repeated object: a `--mark-tile` (50px) square at
+`--mark-tile-r`, wearing a **5px solid ring** in `--mark-tile-ring` — not a hairline —
+with a 1px `--mark-tile-edge` outside it, a wash background at 9–12% alpha and a glyph
+in the matching solid.
+
+**`tone` is variety, not meaning, and that is why it is a number.** The five hues do
+not separate from each other — seven of their fifteen pairs are tight, and the
+reference's own indigo and violet are 5.58 OKLab units apart at full colour — so no
+reader can reliably tell two marks apart and nothing may require it. The icon and the
+label carry which feature this is. `tone="neutral"` exists because the reference's
+sixth hue was its red, 2.92 units from `--action-to`: a mark in the action's colour
+reads as a control, so the coral stays with the action.
+
+The glyph clears the 3:1 non-text floor on its own tile and nothing more. It is never
+a word, and the tile is never a button.
+
+```tsx
+<Mark tone={1} label="Distribution">{/* icon */}</Mark>
+<Mark tone="neutral" label="Reporting">{/* icon */}</Mark>
+```

package/kits/nameplate/src/Mark.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+
+export interface MarkProps {
+  /** The glyph. An icon, never a word — the hue clears only the non-text floor. */
+  children: ReactNode;
+  /** Decorative variety across a grid, 1–5, or the neutral. It carries no meaning:
+   *  the set does not separate from itself, so nothing may depend on telling two
+   *  marks apart. The icon and the label say which feature this is. */
+  tone?: 1 | 2 | 3 | 4 | 5 | 'neutral';
+  /** Accessible name for the tile, since the glyph inside is decorative. */
+  label?: string;
+  className?: string;
+}
+
+export function Mark({ children, tone = 1, label, className }: MarkProps) {
+  return (
+    <span
+      className={['np-mark', `np-mark--${tone}`, className].filter(Boolean).join(' ')}
+      role={label ? 'img' : undefined}
+      aria-label={label}
+      aria-hidden={label ? undefined : true}
+    >
+      {children}
+    </span>
+  );
+}

package/kits/nameplate/src/index.ts

@@ -23,3 +23,5 @@ export { Frame } from './Frame.js';
 export type { FrameProps } from './Frame.js';
 export { Eyebrow } from './Eyebrow.js';
 export type { EyebrowProps } from './Eyebrow.js';
+export { Mark } from './Mark.js';
+export type { MarkProps } from './Mark.js';

package/kits/nameplate/src/styles.css

@@ -257,6 +257,50 @@
   --lift-sm: 1px;
   --reveal-y: 10px;
 
+  /* ---- Marks: decorative variety across a grid, NOT a taxonomy -------- */
+  /* MEASURED off the report showcase the home page embeds: a 50x50 icon tile at
+     16px radius, a 5px solid ring in --mark-tile-ring, a 1px outer ring at 8%
+     ink, its background one tint at 9-12% alpha and its glyph the matching
+     solid. The reference ships six of these pairs and this pack ships five plus
+     a neutral, for two measured reasons.
+
+     FIRST, the sixth is the action. The reference's red mark #d94558 sits 2.92
+     OKLab units from --action-to and 1.12 under the worst dichromacy: the same
+     colour to everyone, not only to a colourblind reader. A mark in the action's
+     colour reads as a control, so the coral belongs to --action alone and the
+     sixth slot takes --mark-neutral.
+
+     SECOND, and this is why the tokens are numbered rather than named: the set
+     does NOT separate from itself. Seven of the fifteen pairs are tight, and the
+     reference's own indigo #5b4bd4 and violet #6c5ce7 are 5.58 apart at full
+     colour, which is one colour wearing two names. So the hue here is variety,
+     never meaning -- it does not encode WHICH feature this is, and nothing may
+     depend on telling two marks apart. The icon and the label carry that, and a
+     numbered token cannot be mistaken for a semantic one. */
+  --mark-tile-r: 16px; /* MEASURED */
+  --mark-tile: 50px; /* MEASURED */
+  --mark-tile-ring: #f7f8fc; /* MEASURED — a 5px solid ring, not a hairline */
+  --mark-tile-ring-w: 5px; /* MEASURED */
+  --mark-tile-edge: rgba(34, 36, 76, 0.08); /* MEASURED — 0 0 0 1px, outside the ring */
+
+  /* Each solid clears the 3:1 non-text floor on its own composited tile, which is
+     the only floor it owes: it is a glyph. None of them may carry a word — see
+     the pack's Bans, where three of the five miss AA on --field as text. */
+  --mark-1: #187c59; /* 4.53:1 on #ecf1f2, its own tile */
+  --mark-1-wash: rgba(31, 157, 107, 0.1); /* MEASURED */
+  --mark-2: #247cb0; /* 4.01:1 on #ecf0f7, its own tile */
+  --mark-2-wash: rgba(49, 144, 199, 0.1); /* MEASURED */
+  --mark-3: #5b4bd4; /* 5.36:1 on #eeeefa, its own tile */
+  --mark-3-wash: rgba(108, 92, 231, 0.1); /* MEASURED */
+  --mark-4: #b36b18; /* 3.69:1 on #f5f0ef, its own tile */
+  --mark-4-wash: rgba(227, 165, 60, 0.12); /* MEASURED — the one tint at 12% */
+  --mark-5: #6c5ce7; /* 4.26:1 on #efeffa, its own tile */
+  --mark-5-wash: rgba(108, 92, 231, 0.09); /* MEASURED — 9%, the lightest */
+  /* DERIVED, and it replaces the reference's red for the reason above. It is
+     --ink-mid, so a grid whose sixth block has no hue left still has a mark. */
+  --mark-neutral: #374151; /* 8.84:1 on #ecedf2, its own tile */
+  --mark-neutral-wash: rgba(55, 65, 81, 0.1);
+
   /* ---- Status: the action is red, so danger goes dark ----------------- */
   /* SELECTED, all four — a marketing site paints no error state — and each is a
      step of a hue the reference itself carries: its #187c59 green, its #b36b18
@@ -281,10 +325,13 @@
   font-weight: var(--weight-body);
 }
 
-/* No dark theme block, and that is a measurement rather than an omission: the
-   page has no dark band anywhere. Its declared layer carries a #181b31 navy and
-   a set of on-dark link colours, and nothing paints them — the footer computes
-   white. A pack that shipped a dark variant here would be inventing one. */
+/* No dark theme block, and that is a measurement rather than an omission. No dark
+   band PAINTS on any served page: every full-bleed block was walked at 1440 and the
+   footer computes white. The authored stylesheets do declare eight dark fills, and
+   both kinds were checked -- .bg-header-blue (#231b66) is dead CSS no served page
+   uses, and the one that renders (#1f2937) sits inside a mock of another product's
+   interface in the hero image. The #181b31 navy and the on-dark link colours beside
+   it paint nothing. A pack that shipped a dark variant here would be inventing one. */
 
 /* The reference ships a real reduced-motion contract — 23 blocks across 7 of
    its 11 authored stylesheets — and, unusually, gets the important part right:
@@ -325,6 +372,7 @@
 .np-chip,
 .np-frame,
 .np-band,
+.np-mark,
 .np-shell {
   box-sizing: border-box;
 }
@@ -760,3 +808,25 @@ a.np-plate:active {
   font-size: var(--t-sm);
   letter-spacing: var(--track-caps-control);
 }
+
+/* ---- The mark tile: variety across a grid, never a control ------------- */
+
+.np-mark {
+  display: grid;
+  place-items: center;
+  inline-size: var(--mark-tile);
+  block-size: var(--mark-tile);
+  border: var(--mark-tile-ring-w) solid var(--mark-tile-ring);
+  border-radius: var(--mark-tile-r);
+  box-shadow: 0 0 0 var(--line-w) var(--mark-tile-edge);
+  transition:
+    color var(--dur-base) var(--ease-out),
+    background-color var(--dur-base) var(--ease-out);
+}
+
+.np-mark--1 { background: var(--mark-1-wash); color: var(--mark-1); }
+.np-mark--2 { background: var(--mark-2-wash); color: var(--mark-2); }
+.np-mark--3 { background: var(--mark-3-wash); color: var(--mark-3); }
+.np-mark--4 { background: var(--mark-4-wash); color: var(--mark-4); }
+.np-mark--5 { background: var(--mark-5-wash); color: var(--mark-5); }
+.np-mark--neutral { background: var(--mark-neutral-wash); color: var(--mark-neutral); }

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

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

@@ -0,0 +1,62 @@
+# Rimlight — the contract this design system ships under
+
+**Register.** Choose Rimlight for **a studio's own front door and the pages that sell
+what it makes**: design and engineering agencies, product studios, service and
+case-study pages, B2B surfaces whose argument is craft rather than a feature list. A
+white field, a cool grey act separator, one near-black act, and coloured light where
+other systems put a shadow. Build every screen against `var(--…)` and never a literal.
+
+**Elevation is a light, and it belongs to one control.** `--glow-rig` is sixteen
+layers — six lit and ten held at alpha 0, thrown from below and to the left. Exactly
+one control per viewport wears it. Two lit controls and the light stops meaning *this
+one*.
+
+**The rig is static.** It does not change on hover, press or focus: the fill moves one
+step and the light stays. Pulsing, rotating or hover-growing it is the first ban here,
+and it is the single change that turns this pack into a novelty.
+
+**The only other shadows are the tile's.** `--shadow-tile` on the 80px icon tile and
+`--shadow-tile-inner` on its 68px image. Nothing else carries one — 483 of the
+reference's 487 visible elements compute `box-shadow: none`. A card has no shadow and
+no border; it is separated by the field it sits on.
+
+**The monospace is the chrome.** Every nav item, button and label is Source Code Pro;
+every sentence is Archivo. That split is how a reader tells a control from a statement
+without reading either, and it is not decorative.
+
+**Do not track the monospace.** `letter-spacing` computes to `normal` on every label
+in the reference — the openness is the face's own advance width. Adding tracking is
+the trap this pack sets for anyone matching it from a screenshot.
+
+**No bold anywhere.** 500 is the heaviest weight and it belongs to the mono label; the
+display runs at 400 and the lede at 300. The display is loud because it is 86px.
+
+**Tracking is negative at every size and tightens as the display shrinks** —
+`--track-display` (−0.02em) at 86px, `--track-display-narrow` (−0.04em) at the 40px
+narrow headline.
+
+**The blue is two tokens because it does two jobs.** `--accent` is 3.03:1 on `--bg`:
+legal on a word only at WCAG large text, which at weight 400 means ≥ 24px. Anything
+smaller takes `--accent-ink`. A 16px link in `--accent` is a word below the floor and
+is the commonest way to break this pack while believing you matched it.
+
+**The colours live in the dark act.** Every one of the reference's five secondary hues
+is 6.5–10.5:1 on `#1b1b1b` and 1.65–2.65:1 on white. They were designed for the dark;
+on a light field they are not text.
+
+**`[data-surface="dark"]` is a section, never the document.** There is no toggle and
+no second palette for the page — one band is dark and the rest stays light. Putting it
+on `:root` inverts a page that was never designed to invert, and the light field's four
+statuses measure 1.1–1.5:1 if they arrive unremapped.
+
+**Status is never by colour alone** — every state takes a glyph or a label beside its
+colour. The four roles are derived rather than adopted: the reference's own secondary
+set is a palette, not a scheme, with eight of its twenty-one pairs too close to
+separate under dichromacy.
+
+**Every control clears `--tap-min` (44px).** A correction: 26 of the reference's 37
+visible interactive elements at 390px are shorter than that.
+
+**Nothing travels in space.** No parallax, no scrub, no `animation-timeline`, no press
+translation. `MOTION_INTENSITY` above 2 has nothing legal to buy, and reduced motion
+collapses every duration to zero.

package/kits/rimlight/README.md

@@ -0,0 +1,39 @@
+# @sheleg-design/rimlight
+
+The React reference kit for the SHELEG **Rimlight** style pack — a white field, one
+near-black act, a monospace carrying every piece of chrome, and an elevation made of
+coloured light rather than shadow.
+
+It is generated from the pack, not authored beside it: `src/styles.css` opens with
+`styles/tokens/rimlight.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
+
+`LitButton` (the sixteen-layer rig, one per viewport), `Tile` (the 80px icon square
+that opens a section, and one of only two objects allowed an ordinary shadow), `Label`
+(the monospace chrome — untracked, always) and `Act` (a full-bleed section, including
+the dark one, which is a surface variant and never a document theme).
+
+## The three rules that carry the kit
+
+1. **One lit control per viewport.** The rig is the only chromatic event on a page
+   otherwise made of ink, one blue and two greys — so the most saturated thing on the
+   screen is also the thing you are meant to click. Two of them and that stops working.
+2. **The light does not move.** It is deliberately absent from `.rl-lit`'s transition
+   list. A static light reads as craft; an animated one reads as a toy.
+3. **The monospace is chrome and the grotesque is prose.** Never mix the two roles, and
+   never track the monospace.
+
+**Motion does not cross into a design tool.** A kit is the static half of a pack: this
+one is unusually literal about that, because the pack's whole motion budget is a 0.3s
+colour transition.

package/kits/rimlight/package.json

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

@@ -0,0 +1,19 @@
+---
+category: Surfaces
+---
+
+A full-bleed section on one of the pack's three fields. `field="dark"` sets
+`data-surface="dark"`, which remaps the palette **for that band only**.
+
+**It is not a dark mode.** The reference has no toggle and no second palette for the
+document: one section carries the dark treatment and the rest of the page stays light.
+Putting `data-surface="dark"` on `:root` inverts a page that was never designed to
+invert.
+
+The dark act is where the reference's colours finally work — every one of its
+secondary hues is 6.5–10.5:1 there against 1.65–2.65:1 on white.
+
+```tsx
+<Act>…</Act>
+<Act field="dark">…</Act>
+```

package/kits/rimlight/src/Act.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+
+export interface ActProps {
+  children: ReactNode;
+  /** `page` is white, `field` the cool grey separator, `dark` the near-black act. */
+  field?: 'page' | 'field' | 'dark';
+  className?: string;
+}
+
+/** A full-bleed section. `dark` sets data-surface, which remaps the palette for the
+ *  band only — it is a surface variant, never a document theme. */
+export function Act({ children, field = 'page', className }: ActProps) {
+  return (
+    <section
+      className={['rl-act', `rl-act--${field}`, className].filter(Boolean).join(' ')}
+      data-surface={field === 'dark' ? 'dark' : undefined}
+    >
+      {children}
+    </section>
+  );
+}

package/kits/rimlight/src/Button.md

@@ -0,0 +1,17 @@
+---
+category: Actions
+---
+
+The ordinary control: transparent with a `1px solid --ink-faint` border at `--r-pill`
+(160px), its label the monospace at 16–18px/500 uppercase, height `--control-h` (48px)
+or `--control-h-lg` (60px).
+
+`primary` fills with `--ink` and takes `--on-ink`. **It does not wear the rig** — that
+belongs to `LitButton`, one per viewport. Hover moves the border to `--ink` and never
+adds a fill; nothing on this page travels in space.
+
+Every size honours `--tap-min` (44px) as a floor.
+
+```tsx
+<Button variant="secondary">View project</Button>
+```

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