sheleg-design-skill 1.48.1 → 1.49.0

package/CHANGELOG.md

@@ -6,6 +6,82 @@ 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

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/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>
+  );
+}

package/kits/rimlight/src/Card.md

@@ -0,0 +1,14 @@
+---
+category: Surfaces
+---
+
+`--surface` on `--field`, or `--field` on `--bg`, at `--r-sm` (12px), with **no border
+and no shadow**. Inside a dark `Act` it becomes `#242424` on `#1b1b1b` — separated by
+tone in both cases, never by a line.
+
+483 of the reference's 487 visible elements carry no shadow at all. A card is not one
+of the four that do.
+
+```tsx
+<Card title="Discovery" meta="01">…</Card>
+```

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

package/kits/rimlight/src/Chip.md

@@ -0,0 +1,12 @@
+---
+category: Foundations
+---
+
+A small tag at `--r-sm`, `--field` fill, label in the monospace at `--t-xs`. `accent`
+tints with `--accent-wash` and takes `--accent-ink` for the word — **never `--accent`
+itself**, which is 3.03:1 and legal only above 24px.
+
+```tsx
+<Chip>SaaS</Chip>
+<Chip tone="accent" selected>DevTools</Chip>
+```

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

package/kits/rimlight/src/Heading.md

@@ -0,0 +1,14 @@
+---
+category: Foundations
+---
+
+Three levels in Archivo at `--weight-body` (400) — never bold — with
+`--track-display` (−0.02em): 1 is the hero at `--t-hero` (86px, and 40px at 390 where
+the tracking tightens to −0.04em), 2 is the section at `--t-section` (60px), 3 a card
+title at `--t-card` (32px).
+
+The display is loud because it is large, not because it is heavy.
+
+```tsx
+<Heading level={1}>Web design for SaaS</Heading>
+```

package/kits/rimlight/src/Heading.tsx

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

package/kits/rimlight/src/Label.md

@@ -0,0 +1,16 @@
+---
+category: Foundations
+---
+
+The monospace, uppercase, at `--t-label` (16px) and `--weight-label` (500). It carries
+every nav item, every button and every section eyebrow — the grotesque carries only
+sentences, and that split is the pack's most legible rule.
+
+**Do not track it.** `letter-spacing` computes to `normal` on every label in the
+reference; the openness is Source Code Pro's own advance width. Adding tracking is the
+trap this pack sets for anyone matching it from a screenshot.
+
+```tsx
+<Label>Services</Label>
+<Label role="eyebrow">How we measure success</Label>
+```

package/kits/rimlight/src/Label.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+
+export interface LabelProps {
+  children: ReactNode;
+  /** `chrome` is nav and button furniture; `eyebrow` opens a section. */
+  role?: 'chrome' | 'eyebrow';
+  className?: string;
+}
+
+/** Every label in this pack is the monospace. It is how a reader tells a control
+ *  from a statement without reading either. */
+export function Label({ children, role = 'chrome', className }: LabelProps) {
+  return (
+    <span className={['rl-label', `rl-label--${role}`, className].filter(Boolean).join(' ')}>
+      {children}
+    </span>
+  );
+}

package/kits/rimlight/src/LitButton.md

@@ -0,0 +1,22 @@
+---
+category: Actions
+---
+
+The pack's signature and its whole idea: a near-black pill at `--r-glow` (100px)
+wearing `--glow-rig` — sixteen shadow layers, six lit and ten held at alpha 0, thrown
+from below and to the left. `surface="light"` swaps to `--glow-rig-light`, where the
+rim goes black and the inset goes white.
+
+**One per viewport.** Two lit controls and the light stops meaning *this one*.
+
+**The rig does not change on hover.** It is a static light; the fill moves one step
+and the rig stays. Pulsing, rotating or growing it is the pack's first ban, and it is
+the fastest way to turn this pack into a novelty. Disabled drops the rig entirely.
+
+The label is the monospace at 18px/500 uppercase with `letter-spacing: normal` — the
+openness is the face's own width, not tracking.
+
+```tsx
+<LitButton>Book a call</LitButton>
+<LitButton surface="light">Request a quote</LitButton>
+```

package/kits/rimlight/src/LitButton.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+
+export interface LitButtonProps {
+  children: ReactNode;
+  /** `dark` is the near-black control on a light field; `light` is its inverse.
+   *  Both wear the same rig — only the rim and the inset swap. */
+  surface?: 'dark' | 'light';
+  disabled?: boolean;
+  onClick?: () => void;
+  className?: string;
+}
+
+/** The pack's signature, and there is ONE per viewport. The rig is a static light:
+ *  it does not change on hover, and animating it is the pack's first ban. */
+export function LitButton({ children, surface = 'dark', disabled = false, onClick, className }: LitButtonProps) {
+  return (
+    <button
+      type="button"
+      className={['rl-lit', `rl-lit--${surface}`, className].filter(Boolean).join(' ')}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}

package/kits/rimlight/src/Rule.md

@@ -0,0 +1,13 @@
+---
+category: Foundations
+---
+
+`hairline` is a 1px `--ink-faint` line — the only line the pack draws. `strong` takes
+`--ink-quiet`.
+
+There is no other border width here, and a rule is never a substitute for the field
+change that normally separates two acts.
+
+```tsx
+<Rule />
+```

package/kits/rimlight/src/Rule.tsx

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