sheleg-design-skill 1.32.0 → 1.34.0

package/CHANGELOG.md

@@ -4,6 +4,97 @@ All notable changes to this project are documented in this file. The format
 follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); versions
 follow [SemVer](https://semver.org/spec/v2.0.0.html).
 
+## [1.34.0] - 2026-08-15
+
+**The pack was applied correctly and the result still read as somebody else's typography.**
+Everything measured green — zero radius, zero shadow, two hues, AA on every pair — and the
+dashboard was flat. This release is what the flatness turned out to be, and most of it is a
+correction to the `### On a product surface` section shipped two versions ago.
+
+### Fixed — in `tenor`
+
+- **"A dashboard has no display type" threw away the rule that makes this pack legible.** The
+  section rhythm is a page value and stays out; the *tracking rule* is not, and it only acts on
+  type large enough to show it. A screen title at 30px tracked `-0.02em` is the rule acting on
+  nothing. The section now separates the **ramp** (out) from the **rule** (in) and gives the three
+  steps a dashboard actually has — screen title, section head, metric — with sizes, tracking and
+  line-height for each. All three at weight **400**: ranking by size is this pack's device and
+  ranking by weight is the one it replaced. Measured against a ramp of 30 / 16 / 13, where the
+  jump from title to section head was **3:1 with nothing between** — two sizes that far apart stop
+  reading as a hierarchy.
+- **A stat row built as four bordered boxes breaks the inversion.** `## Components` already said
+  three equal blocks share one lattice and never read as three cards; what it did not say is that
+  the construction is load-bearing on a product surface. Container draws top and left, each cell
+  draws right and bottom, **gap zero**. Build it with boxes 12px apart and the hover inversion
+  leaves a seam down every border it touches.
+- **A colour earns its place where the column varies, and the chip rule only covered half of it.**
+  1.32.0 dropped the box from a chip repeated down a table; the hue stayed. Measured across twenty
+  routes: on the agent-connections screen, **82 rows all reading `ACTIVE` and 421 green marks**,
+  none of which told the reader anything, because a value that never changes is not a status. Two
+  screens away the audit log spends the same green across 200 rows against the warn value and it
+  carries the whole distinction. Set the severity value only on rows that differ from the column's
+  norm; leave the norm in `--ink`.
+
+### Added — in `tenor`
+
+- **The motion budget of a product surface, stated.** Every motion token in this pack is a page
+  value — a 640ms fade, an 820ms travel, a 110ms stagger four steps deep — spent on a block a
+  reader scrolls to once. `MOTION_DOCTRINE.md` §1 puts a dashboard's screens in the row where
+  animation is cut to the floor, so **the entrance budget on a product surface is zero**: nothing
+  plays on load, on client navigation or on a keystroke. What remains is the whole budget and it is
+  enough — the cell inversion, the nav underline, the focus ring, the fill on a hovered control.
+  Each is caused by the reader's own pointer, which is what makes it read as a response rather
+  than as a delay.
+
+## [1.33.0] - 2026-08-15
+
+**Three things the pack asserts that a running page disproved.** Same dashboard as 1.32.0,
+audited a second time — but by walking the **computed styles of every element** rather
+than by re-reading the source. That is the difference this entry is about: all three
+findings are invisible to a grep over the stylesheets, and two of them are invisible to
+the stylesheets entirely.
+
+### Fixed — in `tenor`
+
+- **The second-hue ban was being broken by the pack's own token, on every render.** Bans
+  said "the orange is the entire chromatic budget", flatly, while the Palette section
+  three hundred lines above derived `--good` and explained why a product surface needs it.
+  Measured on a live screen, hue 150 appeared **36 times on one page** — checklist marks
+  and success chips. The ban now names its exception and states the real rule: no hue you
+  did not find in this file, and the only two in it are the orange and `--good`.
+- **Two bans the browser breaks for you, with no stylesheet involved.** `<strong>` renders
+  at **700** against "no weight above 500" and `<em>` renders italic against "no italics".
+  Neither appears in any CSS, so neither is greppable and neither surfaces in review;
+  both were found by reading computed styles. `tokens/tenor.css` now ships the three-line
+  base layer, and emphasis resolves the pack's own way — by **value**, not by weight or
+  slant. **Every pack in this library that bans a weight or a slant owes the same block**,
+  and none of the twenty ships one; filed as `B-044`.
+- **The 25px orange rule conflated a measurement with a limit.** It is the size of the
+  reference's investor lockup, not a threshold derived from anything, and a product's own
+  lockup will not be 25px. The rule it stands for is *one small resting orange object per
+  screen*; the entry now says which half is which.
+
+### Added — in `tenor`
+
+- **`--data-rest`**, a role over the value ramp the staircase already spends — `--stair-3`
+  on the paper (3.37:1 on `--bg`, over the non-text floor) and `--ink-faint` on the band.
+  It exists because this pack has **one border weight**: a design system carrying
+  `--border` and `--border-strong` as two steps collapses both onto `--line` here, and a
+  chart that reached for the stronger of the two paints its resting bars in the exact
+  colour of the rule between its own rows. Measured on a dashboard's account table — the
+  two resolved identically and the bars matched the row separator to the byte. Nothing
+  errors, because both names resolve; that is the failure mode.
+- The `### On a product surface` section gains the chart rule, and repeats the standing
+  instruction that charts in any pack go through `dataviz` first.
+
+### Note
+
+Two contrast claims in this diff named `--line`, which is declared with alpha and is
+therefore dropped from the validator's solids — so no claim naming it can ever be checked.
+`validate_stated_ratios` caught the one that sat on a checkable line and stayed silent on
+the one that did not, which is the hole `B-003` already describes. Both are now written as
+arguments with their resolved hex rather than as measurements.
+
 ## [1.32.0] - 2026-08-15
 
 **The pack met a product surface, and three of its own measurements did not survive

package/kits/tenor/src/styles.css

@@ -108,6 +108,20 @@
   --stair-2: oklch(89% 0 0);
   --stair-3: oklch(62% 0 0);
 
+  /* A resting data mark — a sparkline bar, an unemphasised column, a track.
+     A role name over the value ramp above rather than a new value, on the same
+     pattern as --sev-*. It exists because this pack has ONE border weight, so a
+     system carrying `--border` and `--border-strong` as two steps collapses both
+     onto --line here, and a chart that reached for the stronger of the two ends
+     up painting a quantity in the colour of the rule between its own rows.
+     --stair-3 resolves to #868686, and
+     --data-rest is 3.37:1 on --bg — over the 3:1 non-text floor for a mark.
+     Against the hairline it is 2.38, computed on the resolved #d2d1ce and NOT
+     checkable from here: --line is declared with alpha, so the validator drops
+     it from the solids and no claim naming it can be verified. Stated as an
+     argument rather than as a measurement, deliberately. */
+  --data-rest: var(--stair-3);
+
   /* ── geometry: there is no radius and there are no shadows ───────────────
      Zero occurrences of border-radius and zero of box-shadow in the whole
      stylesheet. Separation is the hairline; emphasis is a filled rectangle. */
@@ -231,6 +245,12 @@
   /* --accent-ink is deliberately NOT overridden: the orange is the same orange
      on both fields, so the one label that can be read on it is the same coal. */
   --sev-limit: #4a4a48;
+  /* The value ramp is a paper-page device and inverts to nothing useful here, so
+     the resting mark takes the band's own faint ink instead, where
+     --data-rest is 4.69:1 on --bg. Against the hairline it is 2.64 on the
+     resolved #3e3e3c — same caveat as the light block: --line carries alpha and
+     cannot be checked from here. */
+  --data-rest: var(--ink-faint);
   /* DERIVED, same reasoning as the light block and re-measured on this field:
      8.45:1 on --bg, and 10.7 from the accent under deuteranopia. A surface
      block that remaps eleven tokens and forgets the status set is a defect this
@@ -239,6 +259,25 @@
   --danger: #f7f6f2;
 }
 
+/* The base layer, and it is three lines because the browser breaks two of this
+   pack's bans on its own. `<strong>` renders at 700 against "no weight above
+   500", and `<em>` renders italic against "no italics" — with no stylesheet
+   involved either time, so neither violation is greppable and neither appears in
+   review. Found by walking the computed styles of a running page rather than the
+   source.
+
+   Emphasis resolves the pack's own way, by VALUE: both take the full ink against
+   prose set in --ink-soft-aa, and `<strong>` stops at the pack's ceiling weight.
+   Any pack in this library that bans a weight or a slant owes the same block. */
+strong, b {
+  font-weight: var(--weight-mono);
+  color: var(--ink);
+}
+em, i {
+  font-style: normal;
+  color: var(--ink);
+}
+
 /* Reduced motion. The reference collapses every duration to 0.01ms with
    iteration-count clamped to 1, which lands an animation on its final frame
    rather than strobing it, and then names its one infinite loop separately to

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sheleg-design-skill",
-  "version": "1.32.0",
+  "version": "1.34.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 twenty locked style packs with ready-made design tokens — instrument-console, editorial-luxury, workbench, briefing-room, atrium, orchard, field-notes, cyclorama, showroom, blueprint, prism, maquette, scoreboard, datasheet, manpage, pigeonhole, roster, ora, tenor and paperclip. 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"

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 twenty 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 (friendly consumer biotech), 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). 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.",
-  "version": "1.32.0",
+  "version": "1.34.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 building or upgrading a cinematic scroll-driven landing page, marketing site or hero (particle/WebGL background, scroll-linked animation, parallax, scrubbed sections) — when such a page feels busy or janky or its motion layers drift out of sync — or when styling product UI with its style packs - dashboards, admin panels, internal/dev tools, mobile app screens, design tokens, light/dark themes - or when carrying a visual system across the Figma border (publishing tokens as variables, implementing a design without importing raw values). Triggers - "cinematic landing" / "кинематографичный лендинг", "scroll animation" / "скролл-анимация", "dashboard style" / "стиль дашборда", "design tokens" / "дизайн-токены", "light/dark theme" / "светлая/тёмная тема", "figma variables / figma to code" / "переменные фигмы, фигма в код", "chat/agent UI" / "интерфейс чата или агента", "streaming output" / "стриминг ответа", "mobile screen" / "мобильный экран".
 license: MIT
 metadata:
-  version: 1.32.0
+  version: 1.34.0
 ---
 
 # SHELEG Design

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

@@ -297,15 +297,87 @@ mounting the pack on a populated twenty-route dashboard rather than reasoned abo
   the status as the word alone in its severity value, with `--warn` kept for the
   mark beside it. Panels and tiles are unaffected: the same lattice at four cells
   across a dashboard's stat row reads exactly as it does on the page.
+
+  **And dropping the box is only half of it: a colour earns its place where the
+  column varies.** Measured across twenty routes of one dashboard — on the screen
+  listing agent connections, **82 rows all reading `ACTIVE`, 421 green marks, and
+  not one of them told the reader anything**, because a value that never changes
+  is not a status. Two screens away the audit log spends the same green across 200
+  rows against the warn value, and there it carries the whole distinction. The
+  rule: **set the severity value only on the rows that differ from the column's
+  own norm**, and leave the norm in `--ink`. A constant column is prose, and prose
+  is not coloured here.
 - **Prose sits on two fields at once and `--ink-soft` fails on the second.** This
   is what produced `--ink-soft-aa`; see Gotcha 1.
-
-What does **not** change on a product surface: the spacing scale and the type
-ramp. Tenor's section rhythm is `clamp(40px, 4.5vw, 64px)` and its display slope
-runs to 8rem in an 8–12ch measure — both are page values, and a dashboard has
-neither a section rhythm nor display type. Keep the product's own scale and take
-the pack's *surface*: the field, the zero radius, the single hairline, the hue
-that only appears under the cursor, and the two tracking ramps.
+- **A data mark must not borrow the hairline, and in this pack it silently will.**
+  Tenor has one border weight and no strong variant, so a design system that
+  carries `--border` and `--border-strong` as two steps collapses them onto one
+  value here. A sparkline whose resting bars were painted with the *stronger* of
+  those two is then painted in the exact colour of the rule between the rows it
+  sits in — a quantity rendered in the token reserved for chrome, and nothing
+  errors, because both names resolve. Measured on a dashboard's account table:
+  the two resolved identically and the bars matched the row separator to the
+  byte. **Use `--data-rest`**, which the token layer maps onto the value ramp the
+  staircase already spends: `--stair-3` on the paper (3.37:1 on `--bg`, and 2.38
+  against `--line`, so it separates from the rule) and `--ink-faint` on the band.
+  The emphasised mark stays `--accent-ink`-on-`--ink` or whatever the chart's own
+  emphasis rule says; only the resting one changes. Charts in any pack go through
+  `dataviz` first — token names are not uniform across the twenty, and an aliased
+  one fails exactly this quietly.
+
+**The type ramp is where this section was wrong, and the correction matters more
+than the error.** It used to say a dashboard has "neither a section rhythm nor
+display type" and to keep the product's own scale outright. The first half holds
+— the section rhythm is a page value. The second half threw away the thing that
+makes this pack legible: **the tracking rule only acts on type large enough to
+show it.** A screen title at 30px tracked `-0.02em` is the rule acting on
+nothing, and a product mounted that way reads as the pack's palette with somebody
+else's typography inside it.
+
+So the distinction is between the *ramp* and the *rule*. The marketing ramp stays
+out: no `clamp(3rem, 6.5vw, 6.6rem)`, no 8–12ch measures, no section head at
+6.6rem. The tracking rule comes in, and a dashboard has exactly **three steps**
+for it to act on:
+
+| Step | Size | Tracking | Weight |
+|---|---|---|---|
+| The screen title — one per screen | `clamp(2.35rem, 3vw, 3.15rem)` | `-0.04em` | 400 |
+| A section head | `clamp(1.2rem, 1.4vw, 1.45rem)` | `-0.03em` | 400 |
+| A metric — the argument of the screen | `clamp(2.1rem, 2.4vw, 2.75rem)` | `-0.045em` | 500, mono |
+
+Line-height goes to `0.98` on the title and `1` on the metric — below the prose
+leading, which is what makes a title read as a drawn object rather than as a
+large sentence. **All three drop to weight 400 in the sans**, because ranking by
+size is the pack's device and ranking by weight is the one it replaced; a heading
+distinguished by being semibold at body size is a heading with no step under it.
+Measured on a dashboard whose ramp was 30 / 16 / 13: the jump from title to
+section head was 3:1 with nothing between, and two sizes that far apart stop
+reading as a hierarchy and start reading as two unrelated decisions.
+
+**A stat row is a lattice, and it is built per cell or the inversion breaks.**
+The `## Components` entry says three equal blocks share one lattice and never read
+as three cards; on a product surface that is the row of metric tiles, and the
+construction is load-bearing rather than stylistic. The container draws its top
+and left edge, each cell draws its right and bottom, and **the gap is zero** — a
+lattice has no gap. Build it with four bordered boxes 12px apart and the hover
+inversion leaves a seam down every border it touches, which is the exact failure
+`border-collapse` and a background line also produce.
+
+**Motion on a product surface is pointer-driven and nothing else.** Tenor's motion
+tokens are page values — a 640ms fade, an 820ms travel, a 110ms stagger four steps
+deep — and every one of them is spent on a block a reader scrolls to once.
+`MOTION_DOCTRINE.md` §1 puts a dashboard's screens in the row where animation is
+cut to the floor, because the same screen is opened tens of times a day, so **the
+entrance budget on a product surface is zero**: nothing plays on load, on client
+navigation, or on a keystroke. What is left is the whole budget and it is enough —
+the cell inversion at `--dur-panel`, the nav underline at `--dur-nav`, the focus
+ring, and the fill on a hovered control. Each is caused by the reader's own
+pointer, which is what makes it feel like a response rather than like a delay.
+
+What still does **not** change: the spacing scale and the section rhythm. Keep the
+product's own spacing and take the pack's *surface* — the field, the zero radius,
+the single hairline, the hue that only appears under the cursor, and the two
+tracking ramps.
 
 ## Hero
 
@@ -457,11 +529,35 @@ hierarchy is spent.
   drawing.
 - **No shadows, and no elevation model at all.** Something is either filled or it
   is not. A card with a shadow is a different pack.
-- **No second hue.** The orange is the entire chromatic budget, and it is spent on
-  hover and focus. A resting orange fill larger than 25px is out of register.
+- **No second hue — with one named exception, and it is `--good`.** The orange is
+  the chromatic budget of the *page*, spent on hover and focus. The pack also
+  ships a derived success value at hue 150 for the product surfaces it dresses,
+  because a marketing site paints no success state and a dashboard has to. So the
+  ban as it stands is: **no hue you did not find in this file**, and the only two
+  in it are the orange and `--good`. A screen may carry both; nothing else.
+
+  *This used to read "the orange is the entire chromatic budget", flatly, while
+  the Palette section three hundred lines above derived `--good` and said why.
+  Measured on a dashboard running this pack, hue 150 appeared **36 times on one
+  screen** — checklist marks and success chips — so the ban was being broken by
+  the pack's own token on every render.*
+
+  A resting orange fill larger than 25px is out of register. **That number is a
+  measurement of the reference's investor lockup, not a limit derived from
+  anything** — a product's own lockup will not be 25px, and the rule it stands
+  for is *one small resting orange object per screen*. Treat the size as the
+  reference's and the count as the rule.
 - **No weight above 500, and no weight above 400 in the sans.** Emphasis comes
   from size, measure and fill.
 - **No italics.** The reference contains none.
+- **Both of the two above need a base layer, because the browser breaks them for
+  you.** `<strong>` renders at **700** and `<em>` renders italic with no
+  stylesheet involved, so neither violation appears in any CSS a grep can read
+  and neither shows up in review. `tokens/tenor.css` ships the reset; emphasis
+  resolves the pack's own way, by **value** — `<strong>` takes weight 500 and the
+  full `--ink` against prose set in `--ink-soft-aa`, and `<em>` drops the slant
+  and takes the ink too. Any pack in this library that bans a weight or a slant
+  owes the same three lines.
 - **No gradient with a hue in it.** The one gradient in the system is an
   achromatic greyscale wash behind a single feature cell.
 - **No centred display type**, except the hero below 620px and the closing panel.

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

@@ -108,6 +108,20 @@
   --stair-2: oklch(89% 0 0);
   --stair-3: oklch(62% 0 0);
 
+  /* A resting data mark — a sparkline bar, an unemphasised column, a track.
+     A role name over the value ramp above rather than a new value, on the same
+     pattern as --sev-*. It exists because this pack has ONE border weight, so a
+     system carrying `--border` and `--border-strong` as two steps collapses both
+     onto --line here, and a chart that reached for the stronger of the two ends
+     up painting a quantity in the colour of the rule between its own rows.
+     --stair-3 resolves to #868686, and
+     --data-rest is 3.37:1 on --bg — over the 3:1 non-text floor for a mark.
+     Against the hairline it is 2.38, computed on the resolved #d2d1ce and NOT
+     checkable from here: --line is declared with alpha, so the validator drops
+     it from the solids and no claim naming it can be verified. Stated as an
+     argument rather than as a measurement, deliberately. */
+  --data-rest: var(--stair-3);
+
   /* ── geometry: there is no radius and there are no shadows ───────────────
      Zero occurrences of border-radius and zero of box-shadow in the whole
      stylesheet. Separation is the hairline; emphasis is a filled rectangle. */
@@ -231,6 +245,12 @@
   /* --accent-ink is deliberately NOT overridden: the orange is the same orange
      on both fields, so the one label that can be read on it is the same coal. */
   --sev-limit: #4a4a48;
+  /* The value ramp is a paper-page device and inverts to nothing useful here, so
+     the resting mark takes the band's own faint ink instead, where
+     --data-rest is 4.69:1 on --bg. Against the hairline it is 2.64 on the
+     resolved #3e3e3c — same caveat as the light block: --line carries alpha and
+     cannot be checked from here. */
+  --data-rest: var(--ink-faint);
   /* DERIVED, same reasoning as the light block and re-measured on this field:
      8.45:1 on --bg, and 10.7 from the accent under deuteranopia. A surface
      block that remaps eleven tokens and forgets the status set is a defect this
@@ -239,6 +259,25 @@
   --danger: #f7f6f2;
 }
 
+/* The base layer, and it is three lines because the browser breaks two of this
+   pack's bans on its own. `<strong>` renders at 700 against "no weight above
+   500", and `<em>` renders italic against "no italics" — with no stylesheet
+   involved either time, so neither violation is greppable and neither appears in
+   review. Found by walking the computed styles of a running page rather than the
+   source.
+
+   Emphasis resolves the pack's own way, by VALUE: both take the full ink against
+   prose set in --ink-soft-aa, and `<strong>` stops at the pack's ceiling weight.
+   Any pack in this library that bans a weight or a slant owes the same block. */
+strong, b {
+  font-weight: var(--weight-mono);
+  color: var(--ink);
+}
+em, i {
+  font-style: normal;
+  color: var(--ink);
+}
+
 /* Reduced motion. The reference collapses every duration to 0.01ms with
    iteration-count clamped to 1, which lands an animation on its final frame
    rather than strobing it, and then names its one infinite loop separately to