sheleg-design-skill 1.51.1 → 1.52.0

package/CHANGELOG.md

@@ -6,6 +6,97 @@ follow [SemVer](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+## [1.52.0] - 2026-08-27
+
+### The front door is the designs
+
+Opening the published catalogue used to mean reading three tiles and clicking one before
+seeing a single pack. It now opens **on the packs**, behind a tab strip of three real
+screens: **Designs** (the front door, and it is the gallery), **Audit** and **Method** —
+the prose that used to occupy the index. `packs.html` stays as a canonical alias for the
+URL the gallery lived at, because two URLs serving one gallery is duplicate content.
+
+The tabs are links to pages rather than panels toggled in one document, and that is the
+SEO decision, not a shortcut: one URL per screen, every screen fully in the HTML, nothing
+behind a click a crawler has to execute. `rel="prefetch"` buys the tab feel back.
+
+### What the SEO pass changed
+
+- **Structured data, with one publisher everybody points at.** A `CollectionPage` whose
+  `mainEntity` is an `ItemList` of all thirty-six packs, each with its own anchor
+  (`/#pack-<name>`), so an answer engine can lift the list without running the filter JS;
+  a `SoftwareApplication` on Method; `BreadcrumbList` on both sub-pages; and an
+  `Organization` node referenced by `@id` from every page. The family site shipped the
+  opposite of that for two releases — a publisher node nothing pointed at.
+- **A `404.html`**, a three-URL sitemap that lists only indexable screens, `llms.txt`
+  rewritten for the new shape, and `max-image-preview:large`, `color-scheme`,
+  `theme-color`, `og:site_name` and `og:locale` on every page.
+- **Two defects the pass found in the old pages:** `method.html` was emitting its
+  canonical and description **twice** (the shared `HEAD` and `page_meta` both fired), and
+  the published dark-field count was **wrong** — `gallery.py` could not parse
+  `oklch()`, so `briefing-room`'s near-black field read as light and the site, its
+  `llms.txt` and its gallery all said five dark packs where six ship.
+
+### `deskmate`, corrected by its own audit
+
+A blind read of the pack (T34a, which also routed correctly and rejected `tenor` on the
+quoted clause) found nine defects. The important one is a colour pairing no gate can see:
+`--surface` stays white on the dusk surface while `--ink` inverts to white, so **a card
+that painted its heading in `--ink` painted white on white** inside an inverted section.
+The pack now ships `--on-surface` and `--on-surface-soft` — words on a card take those,
+words on the field take `--ink` — and the kit consumes them.
+
+Also fixed: the focus ring shipped derived-only, so a browser without `color-mix()` got
+**no ring at all** (literal first now, derived inside `@supports`, the mechanism
+`showroom` established); the slab's inset was 40px in the pack and 80px in the token
+layer; the gutter ramp stated four steps and shipped two tokens; the measure stated in
+prose (62ch/68ch) had no token; the entrance duration's two measurements (0.64s declared,
+0.7s computed) were never reconciled; "the smallest radius that ships" and "every control
+is 56px" were both contradicted by the pack's own body; and the provenance promise was
+broader than the layer delivers.
+
+One finding was rejected: `deskmate` is absent from `MOTION_DOCTRINE.md`'s ceiling
+passage, and that passage is a named selection whose home the gate declares to be the
+pack's own Register.
+
+### `onionskin` gets the same focus-ring guard
+
+The audit that read `deskmate` measured the whole library for the same shape: three
+packs derive a focus ring, and only `showroom` guarded it. `onionskin`'s ring was
+`color-mix()`-only, so a browser without `color-mix()` painted **no ring at all** — the
+one degradation both packs say they may not ship. The literal now sits in `:root` and the
+derived form in an `@supports` block; no computed value changed, and its kit's token
+block was resynced with it.
+
+### A count nothing could check, and now can
+
+`SURFACE_COMPOSITION.md` claimed `--accent` in **twenty-nine** of the packs at a true
+**thirty-three**, and named two of the three packs that call the accent something else —
+omitting `babylove` entirely, so a reader following that sentence would look for a token
+that pack does not have. `validate_counted_claims` cannot read a count whose noun is
+"packs that declare a token", so `validate_token_population_counts` now derives both that
+figure and the `@role non-text:` population from the token layers, and refuses a pack
+that declares neither an `--accent` nor an `@role accent:` marker. The same sweep found
+`SKILL.md` still saying "the twenty-nine".
+
+### The scenario that produced all of this, and the half of it that did not run
+
+`T34` is the behavioural scenario shipped with `deskmate`, and 1.52.0 is the first
+release where one of these branches was actually run rather than filed. **`T34a`
+passed**: it routed to the pack, quoted the deciding clause, rejected `tenor` on the
+clause that rules it out, and stayed inside the bundle directory. It then did the half
+these scenarios have always asked for and never exercised — read the chosen pack in full
+and report defects with quotes — and returned nine, eight of which are fixed above.
+
+**`T34b`, the negative branch, terminated on an account spend limit before reporting a
+verdict, and is not counted as a result.** A positive-only pass cannot detect the failure
+that branch exists to detect. `test/scenarios.md` records both outcomes.
+
+### Ratchets
+
+`validate.py` 5047 → 5060, `validate_palette.py` 3013 → 3023, `computed_at_least`
+686 → 691. Thirteen of the first delta are the new gate.
+
 ## [1.51.1] - 2026-08-27
 
 ### `deskmate`, the thirty-sixth pack — a colleague, quoted

package/kits/deskmate/src/styles.css

@@ -58,6 +58,13 @@
      rules and it bars, and an icon that must be READ takes --ink-soft instead. */
   --ink-faint: #9693a3;
   --on-ink: #ffffff; /* 17.36:1 on --ink */
+  /* THE RULE THIS PACK CANNOT BE READ WITHOUT: --ink is for words on --bg, and
+     --on-surface is for words on --surface. On the light field the two are the same
+     value and the distinction looks decorative. On the dusk surface it is the whole
+     difference: --surface stays white there, measured, so a card that paints its text
+     in --ink paints white on white. Every component that sits on a card takes these. */
+  --on-surface: #1a182b; /* 17.36:1 on --surface */
+  --on-surface-soft: #716f7e; /* 4.91:1 on --surface */
 
   /* ---- The accent: it writes, it fills, and it needed no correction ---- */
   /* MEASURED. #6e47ff is the reference's purple-500 and its only functional accent:
@@ -121,9 +128,18 @@
   /* MEASURED — `ring-3` is 3px, and the ring's alpha IS its specification: 50% behind
      a control, 40% behind a field. Composited over white #ffffff the ring is
      #b6a3ff at 2.17:1, which is why the control's own border moves colour in the
-     same state. */
-  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 50%, transparent);
-  --focus-ring-field: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
+     same state.
+
+     THE LITERAL IS HERE AND THE DERIVED FORM IS IN THE `@supports` BLOCK AT THE END OF
+     THIS FILE, and the order is not a style preference. A custom property accepts
+     almost any token sequence, so `--focus-ring: color-mix(…)` parses even where
+     `color-mix()` is unsupported and wins the cascade; the invalidity surfaces only
+     where it is substituted, as invalid-at-computed-value-time, and by then the literal
+     is gone and `var(--focus-ring)` resolves to `unset` — an INVISIBLE FOCUS RING, on
+     the one degradation this pack says it may not ship. `showroom` is the worked
+     example this copies. */
+  --focus-ring: 0 0 0 3px rgba(110, 71, 255, 0.5);
+  --focus-ring-field: 0 0 0 3px rgba(110, 71, 255, 0.4);
 
   /* ---- Radii: a pill for the hand, a slab for the eye ----------------- */
   /* MEASURED at 1440: 977 of 1,191 visible elements compute 0px, 52 take the 32px
@@ -160,14 +176,20 @@
   --space-28: 112px; /* MEASURED — the section's own vertical rhythm */
 
   --page-max: 90rem; /* 1440px — MEASURED */
-  --gutter: 20px; /* MEASURED — and it steps 40, 56, 80 outward */
-  --gutter-wide: 80px; /* MEASURED at 1440 */
+  /* MEASURED, and the ramp ships as four tokens rather than as a sentence: the page's
+     gutter steps 20 → 40 → 56 → 80 across the reference's own breakpoints, and a step a
+     consumer cannot reach through a variable is a step the pack did not ship. */
+  --gutter: 20px;
+  --gutter-2: 40px; /* from 40rem */
+  --gutter-3: 56px; /* from 48rem */
+  --gutter-wide: 80px; /* from 64rem, and the value at 1440 */
   --control-h: 56px; /* MEASURED — the button and the field are the same height */
   --control-h-sm: 40px; /* MEASURED — the navigation's own pair, and see --tap-min */
   --control-px: 40px; /* MEASURED — 24px on the small size */
   /* The navigation slab is not a control and does not take a control's height:
-     MEASURED at 65px with a 30px bottom radius at 1440, and 57px at the narrow
-     width, inset 80px from each side of the page and 12px below 40rem. */
+     MEASURED at 65px with a 30px bottom radius at 1440 and 57px at the narrow width,
+     inset 40px from each side of the viewport and 12px below 40rem. That inset is the
+     SLAB's, and it is not the page's gutter — the gutter is 80px at the same width. */
   --slab-h: 65px;
   --slab-h-sm: 57px;
   --r-slab: 30px;
@@ -204,6 +226,13 @@
   --t-display-mid: 4.5rem; /* 72px from 40rem */
   --t-display-sm: 4rem; /* 64px below 40rem */
 
+  /* The reference holds its lede in a grid column and sets `max-width: none` on both
+     the headline and the paragraph, so these two are a PACK DECISION rather than a
+     measurement: the measure the reference implies, stated in `ch` so it survives the
+     face substitution below. */
+  --measure-lede: 62ch;
+  --measure-body: 68ch;
+
   --lh-display: 1.1; /* MEASURED — 88px on 80px */
   --lh-body: 1.4; /* MEASURED — 22.4px on 16px */
   --lh-ui: 1.5;
@@ -230,7 +259,12 @@
   --dur-fast: 0.15s; /* a colour, a border or an opacity */
   --dur-base: 0.2s; /* MEASURED — 23 elements */
   --dur-slow: 0.3s; /* MEASURED — 9 elements, a disclosure opening */
-  --dur-enter: 0.64s; /* MEASURED — the reference's own enter-duration token */
+  /* MEASURED, and the two halves of the measurement disagree by 60ms: the reference
+     DECLARES `--enter-duration` as .6s, .64s and .68s across three sections, while the
+     transition on the 19 entering elements COMPUTES 0.7s. The pack ships the declared
+     middle value, because that is the number the reference's own author chose and the
+     0.7s is one section's instance of it. */
+  --dur-enter: 0.64s;
   --stagger: 60ms; /* MEASURED — its enter-delay steps 0, 40, 60, 80, 120ms */
   --enter-y: 16px; /* MEASURED — the entrance travels 8px or 16px, never further */
 
@@ -294,6 +328,10 @@
      a muted icon here anyway, because its role is set by the light block. */
   --ink-faint: #9693a3;
   --on-ink: #150079;
+  /* A card on this surface stays WHITE — that is the measurement — so these two do NOT
+     invert with the field. They are the light block's values, and that is the point. */
+  --on-surface: #1a182b; /* 17.36:1 on --surface */
+  --on-surface-soft: #716f7e; /* 4.91:1 on --surface */
 
   --accent: #d2c6ff; /* 10.14:1 on --bg — SELECTED, the reference's own on-dusk eyebrow */
   --on-accent: #150079; /* 10.14:1 on --accent */
@@ -307,8 +345,12 @@
   --hairline-quiet: color-mix(in srgb, #ffffff 15%, var(--bg));
 
   --focus-color: #bcaaff; /* 7.90:1 on --bg, over the 3:1 mark floor */
-  --focus-ring: 0 0 0 3px color-mix(in srgb, #8b6cff 50%, transparent);
-  --focus-ring-field: 0 0 0 3px color-mix(in srgb, #8b6cff 40%, transparent);
+  /* MEASURED — the reference's on-dusk focus outline is its purple-400, and it is a
+     token here so the ring below derives from something rather than from a loose hex.
+     Literal first, derived in the `@supports` block, for the reason stated above. */
+  --focus-ring-base: #8b6cff;
+  --focus-ring: 0 0 0 3px rgba(139, 108, 255, 0.5);
+  --focus-ring-field: 0 0 0 3px rgba(139, 108, 255, 0.4);
   --gradient-word-fallback: #d2c6ff; /* 10.14:1 on --bg */
 
   /* DERIVED, and remapped rather than inherited: the light set measures 2.6-4.1:1 on
@@ -343,6 +385,22 @@
   }
 }
 
+/* THE LITERALS ABOVE ARE THE FALLBACK, AND THEY ONLY WORK FROM IN HERE. The derived
+   form tracks the accent — change `--accent` and the ring follows — which is what a
+   literal cannot do; the literal exists so that a browser without `color-mix()` still
+   paints a ring at all. Both fields get one. */
+@supports (color: color-mix(in srgb, red, red)) {
+  :root {
+    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 50%, transparent);
+    --focus-ring-field: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
+  }
+
+  [data-surface="dusk"] {
+    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--focus-ring-base) 50%, transparent);
+    --focus-ring-field: 0 0 0 3px color-mix(in srgb, var(--focus-ring-base) 40%, transparent);
+  }
+}
+
 /* Body copy here is weight 500 on 146 nodes, and an unset `font-weight` gives 400 —
    one step light across the whole page. The UA's own 700 for `strong` and `b` is a
    step the other way and lands on the display's heading weight, so emphasis is pinned
@@ -367,10 +425,15 @@ b {
 /* PAGE — the page's own gutter, on the element a consumer never nests: a
    container query here would ask a component's box how wide the page is. */
 @media (min-width: 40rem) {
-  .dm-page { padding-inline: var(--space-10); }
+  .dm-page { padding-inline: var(--gutter-2); }
 }
-/* PAGE — same rule, the wide step. */
-@media (min-width: 80rem) {
+/* PAGE — the middle step. */
+@media (min-width: 48rem) {
+  .dm-page { padding-inline: var(--gutter-3); }
+}
+
+/* PAGE — the wide step, and the value measured at 1440. */
+@media (min-width: 64rem) {
   .dm-page { padding-inline: var(--gutter-wide); }
 }
 
@@ -486,15 +549,15 @@ b {
   font-size: var(--t-h3);
   font-weight: var(--weight-strong);
   letter-spacing: var(--track-display);
-  color: var(--ink);
+  color: var(--on-surface);
 }
 
 .dm-card__meta {
   font-size: var(--t-sm);
-  color: var(--ink-soft);
+  color: var(--on-surface-soft);
 }
 
-.dm-card__body { color: var(--ink-soft); font-size: var(--t-body); line-height: var(--lh-body); }
+.dm-card__body { color: var(--on-surface-soft); font-size: var(--t-body); line-height: var(--lh-body); max-width: var(--measure-body); }
 
 /* ---- Chip ------------------------------------------------------------ */
 .dm-chip {
@@ -508,7 +571,7 @@ b {
   background-color: var(--surface);
   font-size: var(--t-sm);
   font-weight: var(--weight-body);
-  color: var(--ink);
+  color: var(--on-surface);
   transition: border-color var(--dur-fast) var(--ease);
 }
 
@@ -617,7 +680,7 @@ b {
   margin-bottom: var(--space-2);
   font-size: var(--t-body);
   font-weight: var(--weight-body);
-  color: var(--ink);
+  color: var(--on-surface);
 }
 
 .dm-field__input {
@@ -632,11 +695,11 @@ b {
   font-family: var(--font-body);
   font-size: var(--t-body);
   font-weight: var(--weight-regular);
-  color: var(--ink);
+  color: var(--on-surface);
   transition: border-color var(--dur-fast) var(--ease);
 }
 
-.dm-field__input::placeholder { color: var(--ink-soft); }
+.dm-field__input::placeholder { color: var(--on-surface-soft); }
 
 .dm-field__input:focus-visible {
   outline: none;
@@ -665,7 +728,7 @@ b {
   font-size: var(--t-sm);
 }
 
-.dm-slab__brand { color: var(--ink); font-weight: var(--weight-strong); }
+.dm-slab__brand { color: var(--on-surface); font-weight: var(--weight-strong); }
 .dm-slab__nav { display: flex; gap: var(--space-2); margin-inline-end: auto; }
 
 .dm-slab__nav a {
@@ -674,7 +737,7 @@ b {
   min-height: var(--tap-min);
   padding: var(--space-2) var(--space-3);
   border-radius: var(--r-pill);
-  color: var(--ink);
+  color: var(--on-surface);
   text-decoration: none;
   transition: background-color var(--dur-fast) var(--ease);
 }
@@ -791,10 +854,10 @@ b {
   font-size: var(--t-h3);
   font-weight: var(--weight-strong);
   letter-spacing: var(--track-display);
-  color: var(--ink);
+  color: var(--on-surface);
 }
 
-.dm-qcard__body { color: var(--ink-soft); font-size: var(--t-body); line-height: var(--lh-body); }
+.dm-qcard__body { color: var(--on-surface-soft); font-size: var(--t-body); line-height: var(--lh-body); }
 
 /* The card's halves answer to the CARD's box, not to the screen: at 34rem of
    container the artefact sits beside the sentence instead of under it. */
@@ -812,8 +875,8 @@ b {
   text-align: center;
 }
 
-.dm-empty__title { margin: 0; font-size: var(--t-body); font-weight: var(--weight-body); color: var(--ink); }
-.dm-empty__detail { margin: var(--space-2) 0 0; font-size: var(--t-body); color: var(--ink-soft); }
+.dm-empty__title { margin: 0; font-size: var(--t-body); font-weight: var(--weight-body); color: var(--on-surface); }
+.dm-empty__detail { margin: var(--space-2) 0 0; font-size: var(--t-body); color: var(--on-surface-soft); }
 .dm-empty__action { margin-top: var(--space-6); }
 
 /* ---- Skeleton -------------------------------------------------------- */

package/kits/onionskin/src/styles.css

@@ -108,8 +108,15 @@
   --shadow-hair: 0 1px 0 0 color-mix(in srgb, var(--ink) 6%, transparent); /* MEASURED */
   --shadow-lift: 0 32px 64px -24px color-mix(in srgb, var(--ink) 28%, transparent); /* MEASURED — once */
 
-  --focus-ring: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent),
-                0 4px 10px -3px color-mix(in srgb, var(--accent) 45%, transparent); /* MEASURED */
+  /* MEASURED, and declared LITERAL FIRST with the derived form in the `@supports` block
+     at the end of this file. The order is the guard, not a style: a custom property
+     accepts almost any token sequence, so a `color-mix()` value parses even where
+     `color-mix()` is unsupported and wins the cascade; it fails only at substitution, by
+     which point the literal is gone and `var(--focus-ring)` resolves to `unset` — an
+     invisible focus ring. Added 1.52.0; `showroom` is the pack that established the
+     mechanism and `deskmate` carries the same guard. */
+  --focus-ring: 0 0 0 4px rgba(5, 98, 239, 0.1),
+                0 4px 10px -3px rgba(5, 98, 239, 0.45);
   --focus-w: 2px;
   --focus-offset: 2px;
   --focus-color: var(--accent); /* 5.25:1 on --bg, over the 3:1 mark floor */
@@ -262,6 +269,16 @@
   }
 }
 
+/* THE LITERALS ABOVE ARE THE FALLBACK, AND THEY ONLY WORK FROM IN HERE. The derived form
+   tracks `--accent`; the literal exists so a browser without `color-mix()` still paints a
+   ring at all. The dark band inherits this ring, and its lighter accent with it. */
+@supports (color: color-mix(in srgb, red, red)) {
+  :root {
+    --focus-ring: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent),
+                  0 4px 10px -3px color-mix(in srgb, var(--accent) 45%, transparent);
+  }
+}
+
 /* The pack bans bold, and a ban the UA overrides is not a ban: `strong` and `b` are 700
    by default in every browser. 500 is the heaviest weight this page spends at scale, so
    emphasis here is the medium weight — or, better, the mono. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sheleg-design-skill",
-  "version": "1.51.1",
+  "version": "1.52.0",
   "description": "Design taste as an installable agent skill. Cinematic scroll-driven landing pages built on one scroll clock and layered degrade-to-calm motion, a motion doctrine that decides whether to animate before it decides how, three calibration dials, and thirty-six locked style packs with ready-made design tokens — instrument-console, editorial-luxury, workbench, briefing-room, atrium, orchard, outrank, babylove, patchbay, nameplate, field-notes, cyclorama, showroom, blueprint, prism, maquette, scoreboard, datasheet, manpage, pigeonhole, roster, ora, tenor, paperclip, ledger, router, daylight, notation, almanac, vitrine, proscenium, awning, bulletin, rimlight, onionskin and deskmate. Colour, slop and fork-reciprocity gates run as scripts, not opinions. Works with Cursor, Claude Code and any agent that reads a SKILL.md.",
   "bin": {
     "sheleg-design-skill": "bin/cli.js"
@@ -53,7 +53,7 @@
     "type": "git",
     "url": "git+https://github.com/ssheleg/sheleg-design-skill.git"
   },
-  "homepage": "https://github.com/ssheleg/sheleg-design-skill#readme",
+  "homepage": "https://skills.sshlg.me/skills/sheleg-design/",
   "bugs": {
     "url": "https://github.com/ssheleg/sheleg-design-skill/issues"
   }

package/plugins/sheleg-design/.claude-plugin/plugin.json

@@ -2,7 +2,7 @@
   "name": "sheleg-design",
   "displayName": "SHELEG Design",
   "description": "SHELEG Design methodology: cinematic scroll-driven landing pages (single scroll clock, layered degrade-to-calm motion, WebGL particle formations), a motion doctrine that decides whether to animate before it decides how, and thirty-six pluggable visual style packs — instrument-console (dark console), editorial-luxury (warm editorial), workbench (light/dark product UI for dashboards and tools), briefing-room (dark 16:9 deck), atrium (warm consumer health), orchard, outrank, babylove (friendly consumer biotech), patchbay (a dark live schematic: one mint-cyan, 8% hairlines and no shadow, and an architecture diagram whose cords carry SMIL particles), field-notes (warm paper for dev tools sold on auditability), cyclorama (a pastel field on a 32s cycle), showroom (the product as the exhibit), blueprint (a drawing sheet, zero radius), prism (one iridescent wash over mono body), maquette (cream axonometric models on a dark table), scoreboard (warm paper, pixel numerals, a dark ledger of results), datasheet (an off-white spec sheet whose live instrument goes dark when it detects the reader is hiding), manpage (a developer landing page set in the reader's own system monospace on cream paper, with coral label chips that are real headings and a dark code frame as the argument), pigeonhole (a white sorting wall whose nine pastel categories are a filing scheme rather than a mood, each a two-layer chip whose label word is mandatory), roster (a white field in a faint grid of squares whose argument is other people's marks — client logotypes in pill-labelled industry columns, an engine's wordmark inside the headline — where the proof is a name rather than a number), ora (a warm coal field with cream ink and no third hue — the accent is the inverted field — a serif carrying every human sentence over a monospace carrying every machine fact, a terminal surface cut below the page, and a six-step verdict ramp, for products whose output is a machine's verdict about the reader), tenor (warm paper with zero radius and zero shadow, one hairline weight, an orange that exists only on hover and on focus, a sans tracked negative against a mono tracked positive, display at a line-height below one in an eight-to-twelve-character measure, and product proof delivered as silent looping video, for products arguing that a new kind of thing must be managed like an existing organisation), paperclip (neutral coal with no functional colour at all — every control monochrome and elevation made of hairlines, with the whole chromatic budget spent on a curtain of gradient capsules and twelve gradient section badges that cannot be clicked — for products that ask a person to run something that runs itself: agent teams, autonomous back-office, schedulers and budget-governed compute), ledger (warm cream paper ruled by a hairline at 12% ink and no shadow on any card, radius 15 nested concentrically, an ink primary button and a terracotta accent that never fills a control — it labels, as a 10px monospace uppercase kicker — with a seal on every card stating how its number is known, for the console of a product that answers questions about data: AI analysts, BI surfaces, query workspaces), router (a near-white field with a trace of blue and white cards standing on it, hairline seams instead of shadows anywhere, body at 14px and weight 450, and a status triplet in which the colour you paint with is not the colour you write with, for product consoles and the landing pages that have to look like them), daylight (a cool near-white portal field with generous radii and one very large soft shadow spent on a single object per screen, for client portals), notation (a near-white page drawn entirely in hairlines with a light serif over a monospace, no bold anywhere and an ink primary, for developer products sold on restraint), almanac (oatmeal paper with 2px seams and no 1px anywhere, a display set below a line-height of one, and mono tags notched through drawn boxes, for pages that assert a category), vitrine (a white hairline field with a serif display, an ink primary and one framed record carrying the evidence, for the front door of a product sold on trust). Ships the sheleg-design skill, the architecture reference, the motion doctrine, the Figma and Claude Design bridges, AI-surface patterns, style packs with ready-made token CSS, and the /sheleg-design command, and 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, and a single three-layer shadow, for commerce and platform front doors), and proscenium (a white field carrying two cool acts and one deep indigo act at the middle, an electric violet filling a control that stays nearly square at 4px against cards at 16, one family at nine weights, and a framed product panel the fold cuts off, for product-led marketing front doors whose argument is a demonstration), and bulletin (warm cream paper cut by flat pastel bands, every card and control a 1px ink outline standing on a hard zero-blur ink offset it travels into when pressed, a display face at 800 inside controls and 700 in the headline, and no tracking at any size, for front doors whose argument is breadth), and nameplate (a cool near-white slab under a page that is square on 87% of its elements, where the one round shape is 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), and 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 and tracked negative at every size, whose only elevation is a sixteen-layer coloured light rig — six layers lit and ten held at alpha 0, thrown from below-left — for a studio's own front door and the pages that sell what it makes), and onionskin (a white technical sheet at 96.5% zero radius — the squarest page in the library — where two bases do all the work and everything quiet is one of them at an alpha: text dims through the ink, structure dims through a navy that is never a word, over a dot grid with dashed hairlines and three faces at an 11px working size, for developer and AI infrastructure whose front page is a working document), and deskmate (a warm beige working day lit from one source above the top edge, where a single four-stop ramp — peach, lilac, violet, deep navy — washes the field, fills a panel and fills one word of a heading, everything a hand touches is a pill at 56px and everything else a 32px slab, elevation is a field step with two shadows on a 10,211px page, and the set piece is a framed transcript whose quoted chat client keeps its own face, ink and status colours under a --quoted-* namespace, for products sold as a colleague rather than a tool: AI employees and chat-native agents).",
-  "version": "1.51.1",
+  "version": "1.52.0",
   "author": {
     "name": "ssheleg",
     "url": "https://x.com/sshlg93"

package/plugins/sheleg-design/skills/sheleg-design/SKILL.md

@@ -3,7 +3,7 @@ name: sheleg-design
 description: Use when deciding how something LOOKS or MOVES — cinematic landing pages and hero sections, particle/WebGL backgrounds, scroll-linked or scrubbed motion, layers that drift, dashboards, admin or internal tools, mobile screens, chat or agent interfaces, tokens, themes, palettes, typography and the Figma border. Triggers include "design a landing" / "дизайн лендинга", "build a landing page" / "сделай лендинг", "scroll animation" / "скролл-анимация", "dashboard style" / "стиль дашборда", "design tokens, style pack" / "дизайн-токены", "light/dark theme" / "светлая/тёмная тема", "figma variables" / "переменные фигмы, фигма в код", "mobile screen" / "мобильный экран", "palette, colors" / "палитра, цвета", "typography, font" / "типографика, шрифт", "how it looks, make it prettier" / "выглядит, красиво, красивее", "visual reference" / "визуальные референсы", "investor deck" / "презентация". Not for structure, copy or backend behavior.
 license: MIT
 metadata:
-  version: 1.51.1
+  version: 1.52.0
 ---
 
 # SHELEG Design
@@ -154,8 +154,8 @@ as a definition of done, in that order:
   before writing CSS for a cinematic page. A scene has planes; everything on one
   plane is the failure no amount of easing repairs.
 - **Charts — hand the pack to `dataviz`** (same file), before drawing a chart in
-  any pack. Token names are not uniform across the twenty-nine — only `--bg` and
-  `--ink` resolve everywhere — and an undefined custom property does not error,
+  any pack. Token names are not uniform across the thirty-six packs — only `--bg`
+  and `--ink` resolve in every one — and an undefined custom property does not error,
   it silently falls back. Guessing one is the quietest way to ship a wrong chart.
 - **Mobile surfaces** ([`MOBILE_SURFACES.md`](./MOBILE_SURFACES.md)), when the
   brief is a native app screen or a mobile-web view — not a desktop page whose

package/plugins/sheleg-design/skills/sheleg-design/SURFACE_COMPOSITION.md

@@ -60,10 +60,13 @@ the runnable palette validation; a pack is the *parameter set* it consumes.
 **Read the chosen pack's own token names before you write a single `var()`.**
 This table is by *role*, not by token, because the names are not uniform across
 the thirty-six packs: only `--bg` and `--ink` resolve in every pack. The accent is
-`--accent` in twenty-nine of the thirty-six packs, `--brand` in `field-notes` and `--cta` in `orchard` (each
-declares `@role accent:` in its token layer). **A second marker joins it in 1.26.0:**
+`--accent` in thirty-three of the thirty-six packs; the other three name it themselves —
+`--brand` in `babylove` and `field-notes`, `--cta` in `orchard` — and each declares
+`@role accent:` in its token layer, which is the marker to read rather than the name.
+(`roster` also ships a `--cta`, beside its `--accent`: that one is a component slot, not
+the accent role, and the missing `@role accent:` marker is what says so.) **A second marker joins it in 1.26.0:**
 a semantic colour that sits below WCAG AA on its own field declares
-`@role non-text:` with the reason and the ratio, because nineteen of the token layers
+`@role non-text:` with the reason and the ratio, because twenty-three of the token layers
 carry such a colour and each said so in a different phrasing — "never text on the field",
 "a FILL and large-text colour", "a fill, not a text colour", "No coral word under 24px",
 "category marks" — which is exactly why nothing could check it.

package/plugins/sheleg-design/skills/sheleg-design/styles/deskmate.md

@@ -52,8 +52,9 @@ appears zero times in 364,905 bytes and exactly one element is fixed — so
 `MOTION_INTENSITY` above **4** has nothing legal to buy here.
 
 **Not for:** dense operator chrome. The elevation model is a field step and a 1.25px
-hairline, the smallest radius that ships is 8.4px, and every control is 56px tall — a
-fourth nested panel has nothing to sit on and a toolbar of pills is a novelty item. That
+hairline, the smallest radius in the ramp is 8.4px, and a control is 56px tall or 44px
+at the small size — a fourth nested panel has nothing to sit on and a toolbar of pills
+is a novelty item. That
 is `workbench`'s half, and `router`'s. Not for regulated, clinical or public-sector
 pages, where a peach-to-violet bleed under the fold reads as a consumer app. Not for
 anything sold on austerity: this page spends 38 gradient fills, and a pack that spends
@@ -94,8 +95,10 @@ ramp that hangs is this one.
 
 ## Palette
 
-Copy [`tokens/deskmate.css`](./tokens/deskmate.css) verbatim. Every value there carries
-its provenance — MEASURED, SELECTED or DERIVED — and its ratio.
+Copy [`tokens/deskmate.css`](./tokens/deskmate.css) verbatim. Every **colour** there
+carries its provenance — MEASURED, SELECTED or DERIVED — and its ratio. The geometry
+ramps (spacing, radii, type sizes) carry a provenance note per band rather than per
+value, because a band was measured as a band.
 
 | Role | Token | Value | On `--bg` |
 |---|---|---|---|
@@ -109,6 +112,16 @@ its provenance — MEASURED, SELECTED or DERIVED — and its ratio.
 | Eyebrow | `--accent-deep` | `#4e32b5` | 7.93:1 |
 | Warm stop | `--peach` | `#ffbb98` | 1.51:1 — declared non-text, a stop and a star |
 | Last stop | `--dusk` | `#150079` | 14.83:1 — and the dusk surface's own field |
+| On a card | `--on-surface` | `#1a182b` | 17.36:1 on `--surface`, and it does NOT invert |
+| On a card, quiet | `--on-surface-soft` | `#716f7e` | 4.91:1 on `--surface` |
+
+**`--ink` is for words on `--bg`; `--on-surface` is for words on a card.** On the light
+field the two are the same value and the distinction reads as decoration. On the dusk
+surface it is the whole difference: `--surface` stays white there — measured on
+`/business`, where a card inside an inverted section keeps its white fill — so a card
+that paints its heading in `--ink` paints **white on white**. Every component that sits
+on a card takes the `--on-surface` pair, and the four that sit on the field
+(the display, the lede, a stat's figure, a section's own heading) take `--ink`.
 
 **One accent, and it needed no correction.** It writes and it fills: `#6e47ff` is
 4.84:1 on the field `#faf5f1`, and `#ffffff` on `#6e47ff` is 5.24:1. A single token
@@ -174,8 +187,8 @@ is quoting a different library.
 
 **A measure in `ch`, and the reference has none.** It holds its lede in a grid column
 rather than in a measure — `max-width: none` on both the headline and the paragraph — so
-this pack states the measure the reference implies: **62ch** for a lede, **68ch** for
-body copy, measured against Gellix at 16px. Where the two faces are substituted the
+this pack states the measure the reference implies and ships it as
+`--measure-lede` (62ch) and `--measure-body` (68ch), against Gellix at 16px. Where the two faces are substituted the
 column holds and the character count moves, which is the point of stating it in `ch`.
 
 **Both brand faces are licensed and the substitutes are a pack decision.** Ulm Grotesk
@@ -191,8 +204,11 @@ library's own rule.
 **Elevation is a field step.** 68 white fills sit on a beige field with 51 hairlines
 between them, and the entire 10,211px page carries **two** shadows, which is why the
 pack ships exactly two shadow tokens and no ramp: `--shadow-panel` is the 5% whisper
-under the signature frame (`0 3.863px 17.769px`) and `--glow-bloom` is the one purple
-bloom on the page (`0 0 16px 8px` of purple-900 at 8%). A card is white on beige; a
+under the signature frame (`0 3.863px 17.769px`), and `--glow-bloom` is the single purple
+bloom (`0 0 16px 8px` of purple-900 at 8%) that the reference spends **once on the whole
+page**. The pack does not prescribe where — the census records one instance and not which
+element carried it — so the rule is the count: one bloom per page, on the object the page
+is about, and if you cannot name that object do not spend it. A card is white on beige; a
 panel inside a card is beige on white; the third step is a hairline and there is no
 fourth.
 
@@ -253,9 +269,10 @@ grid:
 - The **message half** takes `--gradient-dusk`, white text, a byline row (a name, a small
   `APP` badge, a time), and under it an illustration of the artefact produced — a file
   tile, a set of connected tool marks, a checklist. Radius `--r-card` on the top corners.
-- The **explanation half** is `--surface`, a 24px heading in `--ink` and a 16px paragraph
-  in `--ink-soft`, with 24px/32px/32px of padding. Radius `--r-card` on the bottom
-  corners.
+- The **explanation half** is `--surface`, a 24px heading in `--on-surface` and a 16px
+  paragraph in `--on-surface-soft`, with 24px/32px/32px of padding. Radius `--r-card` on
+  the bottom corners. Those two tokens rather than `--ink`: a card keeps its white fill
+  inside a dusk section, so the ink that sits on it cannot invert with the field.
 - No border and no shadow on either half; the two fills are the separation.
 - The small tile — a chip, a logo, a status row — is `--surface` at `--r-chip` with a
   `--rule-w` hairline at the ink's 5% and 10px of padding.
@@ -299,8 +316,8 @@ would be the liveliest thing on it.
 **Empty states.** The reference's is a measured refusal, not an absence: a search on
 `/integrations` matching nothing collapses the grid to 1280×0 at 1440 and says nothing at
 all — no message, no count, no reset. The pack's answer is a `--surface` card at
-`--r-card` holding a 16px/500 line in `--ink`, one sentence in `--ink-soft`, and a
-secondary pill that clears the filter. An empty result is a state, and a state that
+`--r-card` holding a 16px/500 line in `--on-surface`, one sentence in
+`--on-surface-soft`, and a secondary pill that clears the filter. An empty result is a state, and a state that
 paints nothing is indistinguishable from a broken query.
 
 Every interactive element takes `--tap-min` (44px) as a height floor. This is a
@@ -312,8 +329,10 @@ the navigation toggle at 48×32 and the transcript's reaction pills at 42×24.
 A marketing opening: full width, not full height, and it ends in the set piece rather
 than beginning with it.
 
-- The page holds `--page-max` (90rem) with `--gutter` stepping 20 → 40 → 56 → 80px, and
-  the hero's own top padding is 176px at 1440 because the navigation slab hangs into it.
+- The page holds `--page-max` (90rem) and its gutter steps through four tokens —
+  `--gutter` 20px, `--gutter-2` 40px, `--gutter-3` 56px, `--gutter-wide` 80px — because a
+  step a consumer cannot reach through a variable is a step the pack did not ship. The
+  hero's own top padding is 176px at 1440, because the navigation slab hangs into it.
 - Field `--bg` with `--gradient-dawn` blooming from above the headline, and the slab's
   bottom corners rounded at `--r-section` where the field bleeds into `--gradient-fold`.
 - A two-column grid at `1.15fr / 1fr` with a 56px gap: **the argument on the left, the
@@ -346,8 +365,10 @@ Three widths, measured: 1440, 768 and the sub-640 branch read at 500.
   collides its own ascenders at the awkward widths between the steps.
 - **The hero grid collapses to one column** and its gap goes 56px → 32px. The control pair
   goes full width at `--control-h`, which is how a 56px pill stays a 56px pill.
-- **Gutters step 80 → 56 → 40 → 20px** and the navigation slab's inset goes 40px → 12px,
-  its height 65px → 57px. Section rhythm halves: 112px → 56px.
+- **Gutters step 80 → 56 → 40 → 20px** through the four `--gutter*` tokens. The
+  navigation slab's own inset goes 40px → 12px and its height 65px → 57px — that inset is
+  the slab's and not the page's gutter, which is 80px at the same width. Section rhythm
+  halves: 112px → 56px.
 - **The frame's radius does not scale.** 47.319px at 1440 and at 500, with the same 15px
   inset — the concentric relationship is the object's identity and rescaling it makes the
   frame read as a different component.
@@ -437,7 +458,9 @@ cards made of the same material.
   a flicker.
 - **Focus-visible:** the control's own border takes `--focus-color` **and** the ring
   appears outside it. Both, always: the ring alone composites to `#b6a3ff` on white
-  `#ffffff`, which is 2.17:1, and that is why the border moves in the same state.
+  `#ffffff`, which is 2.17:1, and that is why the border moves in the same state. The
+  ring ships as a **literal first** and derives from the accent inside an `@supports`
+  block — see Gotchas, because getting that order wrong removes the ring entirely.
 - **Disclosure row:** 62px tall at `--r-root`, transparent until focus, opening over
   `--dur-slow`. The row's chevron rotates; the row does not.
 - **Section reveal:** opacity and `--enter-y` on `--ease-out` over `--dur-enter`, with
@@ -519,3 +542,23 @@ nodes, `#1264a3` on `#e8f5fa` for a mention at 5.59:1, `#007c58` for an approval
 for a decline rule. They ship under `--quoted-*` so a status dot cannot reach them by
 accident. A page that lifts them into its own palette has adopted somebody else's design
 system one token at a time.
+
+**A card does not invert with the field, and painting its text in `--ink` is the trap.**
+`--surface` is white on both blocks — measured, because a chat-client card inside an
+inverted section is still a white card — while `--ink` inverts to `#ffffff` on the dusk
+surface. A card whose heading takes `--ink` therefore renders white on white inside a
+dusk section — `#ffffff` on `#ffffff` is 1.00:1 — and no gate can see it: both tokens are
+legal, both clear their own field, and the pairing only exists at render time. That is what `--on-surface` and
+`--on-surface-soft` are for, and it is why they do not invert. Found by reading this
+pack's own kit on a dusk section, which is the second defect that render caught after the
+secondary control painting white on white — the same mechanism, one component along.
+
+**The focus ring is declared literal-first, and the order is the guard.** A custom
+property accepts almost any token sequence, so `--focus-ring: color-mix(…)` parses even
+where `color-mix()` is unsupported, wins the cascade, and fails only at substitution — by
+which point the literal is gone and `var(--focus-ring)` resolves to `unset`. An invisible
+focus ring is the one degradation this pack may not ship, so the literal sits in `:root`
+and the derived form sits in an `@supports (color: color-mix(in srgb, red, red))` block at
+the end of the layer. `showroom` is the pack that learned this first; this one copies its
+mechanism rather than its syntax, because the derived form here is a mix rather than a
+relative colour.

package/plugins/sheleg-design/skills/sheleg-design/styles/tokens/deskmate.css

@@ -58,6 +58,13 @@
      rules and it bars, and an icon that must be READ takes --ink-soft instead. */
   --ink-faint: #9693a3;
   --on-ink: #ffffff; /* 17.36:1 on --ink */
+  /* THE RULE THIS PACK CANNOT BE READ WITHOUT: --ink is for words on --bg, and
+     --on-surface is for words on --surface. On the light field the two are the same
+     value and the distinction looks decorative. On the dusk surface it is the whole
+     difference: --surface stays white there, measured, so a card that paints its text
+     in --ink paints white on white. Every component that sits on a card takes these. */
+  --on-surface: #1a182b; /* 17.36:1 on --surface */
+  --on-surface-soft: #716f7e; /* 4.91:1 on --surface */
 
   /* ---- The accent: it writes, it fills, and it needed no correction ---- */
   /* MEASURED. #6e47ff is the reference's purple-500 and its only functional accent:
@@ -121,9 +128,18 @@
   /* MEASURED — `ring-3` is 3px, and the ring's alpha IS its specification: 50% behind
      a control, 40% behind a field. Composited over white #ffffff the ring is
      #b6a3ff at 2.17:1, which is why the control's own border moves colour in the
-     same state. */
-  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 50%, transparent);
-  --focus-ring-field: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
+     same state.
+
+     THE LITERAL IS HERE AND THE DERIVED FORM IS IN THE `@supports` BLOCK AT THE END OF
+     THIS FILE, and the order is not a style preference. A custom property accepts
+     almost any token sequence, so `--focus-ring: color-mix(…)` parses even where
+     `color-mix()` is unsupported and wins the cascade; the invalidity surfaces only
+     where it is substituted, as invalid-at-computed-value-time, and by then the literal
+     is gone and `var(--focus-ring)` resolves to `unset` — an INVISIBLE FOCUS RING, on
+     the one degradation this pack says it may not ship. `showroom` is the worked
+     example this copies. */
+  --focus-ring: 0 0 0 3px rgba(110, 71, 255, 0.5);
+  --focus-ring-field: 0 0 0 3px rgba(110, 71, 255, 0.4);
 
   /* ---- Radii: a pill for the hand, a slab for the eye ----------------- */
   /* MEASURED at 1440: 977 of 1,191 visible elements compute 0px, 52 take the 32px
@@ -160,14 +176,20 @@
   --space-28: 112px; /* MEASURED — the section's own vertical rhythm */
 
   --page-max: 90rem; /* 1440px — MEASURED */
-  --gutter: 20px; /* MEASURED — and it steps 40, 56, 80 outward */
-  --gutter-wide: 80px; /* MEASURED at 1440 */
+  /* MEASURED, and the ramp ships as four tokens rather than as a sentence: the page's
+     gutter steps 20 → 40 → 56 → 80 across the reference's own breakpoints, and a step a
+     consumer cannot reach through a variable is a step the pack did not ship. */
+  --gutter: 20px;
+  --gutter-2: 40px; /* from 40rem */
+  --gutter-3: 56px; /* from 48rem */
+  --gutter-wide: 80px; /* from 64rem, and the value at 1440 */
   --control-h: 56px; /* MEASURED — the button and the field are the same height */
   --control-h-sm: 40px; /* MEASURED — the navigation's own pair, and see --tap-min */
   --control-px: 40px; /* MEASURED — 24px on the small size */
   /* The navigation slab is not a control and does not take a control's height:
-     MEASURED at 65px with a 30px bottom radius at 1440, and 57px at the narrow
-     width, inset 80px from each side of the page and 12px below 40rem. */
+     MEASURED at 65px with a 30px bottom radius at 1440 and 57px at the narrow width,
+     inset 40px from each side of the viewport and 12px below 40rem. That inset is the
+     SLAB's, and it is not the page's gutter — the gutter is 80px at the same width. */
   --slab-h: 65px;
   --slab-h-sm: 57px;
   --r-slab: 30px;
@@ -204,6 +226,13 @@
   --t-display-mid: 4.5rem; /* 72px from 40rem */
   --t-display-sm: 4rem; /* 64px below 40rem */
 
+  /* The reference holds its lede in a grid column and sets `max-width: none` on both
+     the headline and the paragraph, so these two are a PACK DECISION rather than a
+     measurement: the measure the reference implies, stated in `ch` so it survives the
+     face substitution below. */
+  --measure-lede: 62ch;
+  --measure-body: 68ch;
+
   --lh-display: 1.1; /* MEASURED — 88px on 80px */
   --lh-body: 1.4; /* MEASURED — 22.4px on 16px */
   --lh-ui: 1.5;
@@ -230,7 +259,12 @@
   --dur-fast: 0.15s; /* a colour, a border or an opacity */
   --dur-base: 0.2s; /* MEASURED — 23 elements */
   --dur-slow: 0.3s; /* MEASURED — 9 elements, a disclosure opening */
-  --dur-enter: 0.64s; /* MEASURED — the reference's own enter-duration token */
+  /* MEASURED, and the two halves of the measurement disagree by 60ms: the reference
+     DECLARES `--enter-duration` as .6s, .64s and .68s across three sections, while the
+     transition on the 19 entering elements COMPUTES 0.7s. The pack ships the declared
+     middle value, because that is the number the reference's own author chose and the
+     0.7s is one section's instance of it. */
+  --dur-enter: 0.64s;
   --stagger: 60ms; /* MEASURED — its enter-delay steps 0, 40, 60, 80, 120ms */
   --enter-y: 16px; /* MEASURED — the entrance travels 8px or 16px, never further */
 
@@ -294,6 +328,10 @@
      a muted icon here anyway, because its role is set by the light block. */
   --ink-faint: #9693a3;
   --on-ink: #150079;
+  /* A card on this surface stays WHITE — that is the measurement — so these two do NOT
+     invert with the field. They are the light block's values, and that is the point. */
+  --on-surface: #1a182b; /* 17.36:1 on --surface */
+  --on-surface-soft: #716f7e; /* 4.91:1 on --surface */
 
   --accent: #d2c6ff; /* 10.14:1 on --bg — SELECTED, the reference's own on-dusk eyebrow */
   --on-accent: #150079; /* 10.14:1 on --accent */
@@ -307,8 +345,12 @@
   --hairline-quiet: color-mix(in srgb, #ffffff 15%, var(--bg));
 
   --focus-color: #bcaaff; /* 7.90:1 on --bg, over the 3:1 mark floor */
-  --focus-ring: 0 0 0 3px color-mix(in srgb, #8b6cff 50%, transparent);
-  --focus-ring-field: 0 0 0 3px color-mix(in srgb, #8b6cff 40%, transparent);
+  /* MEASURED — the reference's on-dusk focus outline is its purple-400, and it is a
+     token here so the ring below derives from something rather than from a loose hex.
+     Literal first, derived in the `@supports` block, for the reason stated above. */
+  --focus-ring-base: #8b6cff;
+  --focus-ring: 0 0 0 3px rgba(139, 108, 255, 0.5);
+  --focus-ring-field: 0 0 0 3px rgba(139, 108, 255, 0.4);
   --gradient-word-fallback: #d2c6ff; /* 10.14:1 on --bg */
 
   /* DERIVED, and remapped rather than inherited: the light set measures 2.6-4.1:1 on
@@ -343,6 +385,22 @@
   }
 }
 
+/* THE LITERALS ABOVE ARE THE FALLBACK, AND THEY ONLY WORK FROM IN HERE. The derived
+   form tracks the accent — change `--accent` and the ring follows — which is what a
+   literal cannot do; the literal exists so that a browser without `color-mix()` still
+   paints a ring at all. Both fields get one. */
+@supports (color: color-mix(in srgb, red, red)) {
+  :root {
+    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 50%, transparent);
+    --focus-ring-field: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
+  }
+
+  [data-surface="dusk"] {
+    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--focus-ring-base) 50%, transparent);
+    --focus-ring-field: 0 0 0 3px color-mix(in srgb, var(--focus-ring-base) 40%, transparent);
+  }
+}
+
 /* Body copy here is weight 500 on 146 nodes, and an unset `font-weight` gives 400 —
    one step light across the whole page. The UA's own 700 for `strong` and `b` is a
    step the other way and lands on the display's heading weight, so emphasis is pinned

package/plugins/sheleg-design/skills/sheleg-design/styles/tokens/onionskin.css

@@ -108,8 +108,15 @@
   --shadow-hair: 0 1px 0 0 color-mix(in srgb, var(--ink) 6%, transparent); /* MEASURED */
   --shadow-lift: 0 32px 64px -24px color-mix(in srgb, var(--ink) 28%, transparent); /* MEASURED — once */
 
-  --focus-ring: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent),
-                0 4px 10px -3px color-mix(in srgb, var(--accent) 45%, transparent); /* MEASURED */
+  /* MEASURED, and declared LITERAL FIRST with the derived form in the `@supports` block
+     at the end of this file. The order is the guard, not a style: a custom property
+     accepts almost any token sequence, so a `color-mix()` value parses even where
+     `color-mix()` is unsupported and wins the cascade; it fails only at substitution, by
+     which point the literal is gone and `var(--focus-ring)` resolves to `unset` — an
+     invisible focus ring. Added 1.52.0; `showroom` is the pack that established the
+     mechanism and `deskmate` carries the same guard. */
+  --focus-ring: 0 0 0 4px rgba(5, 98, 239, 0.1),
+                0 4px 10px -3px rgba(5, 98, 239, 0.45);
   --focus-w: 2px;
   --focus-offset: 2px;
   --focus-color: var(--accent); /* 5.25:1 on --bg, over the 3:1 mark floor */
@@ -262,6 +269,16 @@
   }
 }
 
+/* THE LITERALS ABOVE ARE THE FALLBACK, AND THEY ONLY WORK FROM IN HERE. The derived form
+   tracks `--accent`; the literal exists so a browser without `color-mix()` still paints a
+   ring at all. The dark band inherits this ring, and its lighter accent with it. */
+@supports (color: color-mix(in srgb, red, red)) {
+  :root {
+    --focus-ring: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent),
+                  0 4px 10px -3px color-mix(in srgb, var(--accent) 45%, transparent);
+  }
+}
+
 /* The pack bans bold, and a ban the UA overrides is not a ban: `strong` and `b` are 700
    by default in every browser. 500 is the heaviest weight this page spends at scale, so
    emphasis here is the medium weight — or, better, the mono. */