sheleg-design-skill 1.50.0 → 1.50.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +21 -0
- package/README.md +10 -0
- package/kits/field-notes/src/styles.css +9 -0
- package/kits/orchard/src/styles.css +8 -1
- package/package.json +1 -1
- package/plugins/sheleg-design/.claude-plugin/plugin.json +1 -1
- package/plugins/sheleg-design/skills/sheleg-design/SKILL.md +17 -75
- package/plugins/sheleg-design/skills/sheleg-design/STYLE_PACK_INDEX.md +67 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/field-notes.md +22 -17
- package/plugins/sheleg-design/skills/sheleg-design/styles/manpage.md +42 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/orchard.md +52 -6
- package/plugins/sheleg-design/skills/sheleg-design/styles/pigeonhole.md +49 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/roster.md +29 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/tokens/field-notes.css +9 -0
- package/plugins/sheleg-design/skills/sheleg-design/styles/tokens/orchard.css +8 -1
package/CHANGELOG.md
CHANGED
|
@@ -6,6 +6,27 @@ follow [SemVer](https://semver.org/spec/v2.0.0.html).
|
|
|
6
6
|
|
|
7
7
|
## [Unreleased]
|
|
8
8
|
|
|
9
|
+
## [1.50.2] - 2026-08-26
|
|
10
|
+
|
|
11
|
+
### Router carriers and shared guard provenance
|
|
12
|
+
|
|
13
|
+
The compact description again carries `hero`, `style pack` and `красивее`,
|
|
14
|
+
the phrases the umbrella router actually matches. The eval and social-preview
|
|
15
|
+
validators now identify their umbrella-owned shared mechanisms.
|
|
16
|
+
|
|
17
|
+
## [1.50.1] - 2026-08-26
|
|
18
|
+
|
|
19
|
+
### A catalogue that loads when it is needed
|
|
20
|
+
|
|
21
|
+
The 35-pack chooser moved from the always-loaded skill body into
|
|
22
|
+
`STYLE_PACK_INDEX.md`. The index remains exhaustive, contract-checked, mirrored
|
|
23
|
+
to Cursor and shipped by both installers; the base skill drops to about 3.9k
|
|
24
|
+
tokens and keeps every routing carrier. The repository also gains a root skill
|
|
25
|
+
card, portable evals, a pinned house-audit CI job, a generated social preview and
|
|
26
|
+
an install-first README viewport. The five catalogue self-test plants now mutate
|
|
27
|
+
the new index rather than silently targeting the old location. No model
|
|
28
|
+
evaluation result is claimed.
|
|
29
|
+
|
|
9
30
|
## [1.50.0] - 2026-08-25
|
|
10
31
|
|
|
11
32
|
### Onionskin, the thirty-fifth pack — two bases, and everything quiet is an alpha
|
package/README.md
CHANGED
|
@@ -5,6 +5,16 @@
|
|
|
5
5
|
[](./LICENSE)
|
|
6
6
|
[](https://skills.sshlg.me/skills/sheleg-design/)
|
|
7
7
|
|
|
8
|
+
**Give coding agents a deliberate visual system: style packs, tokens, motion doctrine and a clean Figma seam.**
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npx skills add ssheleg/sheleg-design-skill
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
Ask: `Design a calm dark dashboard and map its tokens into the component layer.`
|
|
15
|
+
|
|
16
|
+
**[Detailed docs →](https://skills.sshlg.me/skills/sheleg-design/)**
|
|
17
|
+
|
|
8
18
|
**[Docs, and every skill →](https://skills.sshlg.me/)** · [this skill's page](https://skills.sshlg.me/skills/sheleg-design/) · [follow @sshlg93 on X](https://x.com/intent/follow?screen_name=sshlg93)
|
|
9
19
|
|
|
10
20
|
Loads in **DeepSeek Harness** (`dsh`) with **no plugin to write**: it reads the
|
|
@@ -250,6 +250,15 @@
|
|
|
250
250
|
17.0:1 for body ink, 8.3:1 for verify, 5.9:1 for the brand. */
|
|
251
251
|
[data-theme="dark"],
|
|
252
252
|
.dark {
|
|
253
|
+
/* The dawn hero is a LIGHT-THEME object, and this is measured rather than decided.
|
|
254
|
+
The reference's own `.dark` block declares 43 tokens and not one of them is a
|
|
255
|
+
dawn stop — so the gradient has no dark counterpart there either. Left
|
|
256
|
+
un-redeclared, `--hero-dawn` kept its light ramp and ended on #e9ecdf at 98%
|
|
257
|
+
meeting the dark field at 100%: a near-white hard edge across two percent of the
|
|
258
|
+
gradient, which this pack's own Bans forbid. In dark the hero is the flat field.
|
|
259
|
+
Re-read 2026-08-26 (B-112). */
|
|
260
|
+
--hero-dawn: var(--bg);
|
|
261
|
+
|
|
253
262
|
color-scheme: dark;
|
|
254
263
|
|
|
255
264
|
--bg: #14110e;
|
|
@@ -24,7 +24,14 @@
|
|
|
24
24
|
--primary: #78934a; /* sage — 3.4:1 on --bg: a FILL and large-text colour */
|
|
25
25
|
--primary-deep: #61783b; /* the text-safe green: 4.9:1 on --bg under --on-primary */
|
|
26
26
|
--primary-light: #aaca73; /* the mark / illustration green */
|
|
27
|
-
--primary-tint: rgba(120, 147, 74, 0.1); /* quiet rows
|
|
27
|
+
--primary-tint: rgba(120, 147, 74, 0.1); /* quiet rows and a quiet row's hover */
|
|
28
|
+
/* MEASURED 2026-08-26 by hovering the reference's own sage control in a browser:
|
|
29
|
+
the fill does not darken or tint, it INVERTS to a warm cream. A fetch cannot see
|
|
30
|
+
this and the earlier passes did not. A fill, never text. */
|
|
31
|
+
--primary-hover: #f9eedc; /* 1.13:1 on --bg */
|
|
32
|
+
/* MEASURED the same pass — the hero slab's fill, one element, 892px tall against a
|
|
33
|
+
900px viewport. A fill, never text. */
|
|
34
|
+
--surface-warm: #f7ecdc; /* 1.15:1 on --bg */
|
|
28
35
|
|
|
29
36
|
/* ---- The one action colour ------------------------------------------- */
|
|
30
37
|
--cta: #fa7241; /* candy orange — 2.8:1 on --bg: a fill only, never text */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sheleg-design-skill",
|
|
3
|
-
"version": "1.50.
|
|
3
|
+
"version": "1.50.2",
|
|
4
4
|
"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-five 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 and onionskin. Colour, slop and fork-reciprocity gates run as scripts, not opinions. Works with Cursor, Claude Code and any agent that reads a SKILL.md.",
|
|
5
5
|
"bin": {
|
|
6
6
|
"sheleg-design-skill": "bin/cli.js"
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "sheleg-design",
|
|
3
3
|
"displayName": "SHELEG Design",
|
|
4
4
|
"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-five 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).",
|
|
5
|
-
"version": "1.50.
|
|
5
|
+
"version": "1.50.2",
|
|
6
6
|
"author": {
|
|
7
7
|
"name": "ssheleg",
|
|
8
8
|
"url": "https://x.com/sshlg93"
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: sheleg-design
|
|
3
|
-
description: Use when deciding how something LOOKS or MOVES
|
|
3
|
+
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.
|
|
4
4
|
license: MIT
|
|
5
5
|
metadata:
|
|
6
|
-
version: 1.50.
|
|
6
|
+
version: 1.50.2
|
|
7
7
|
---
|
|
8
8
|
|
|
9
9
|
# SHELEG Design
|
|
@@ -60,80 +60,22 @@ the style-pack half and nothing else.
|
|
|
60
60
|
|
|
61
61
|
## Style packs
|
|
62
62
|
|
|
63
|
-
The
|
|
64
|
-
pack
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
| Pack | Look | Choose for |
|
|
68
|
-
|---|---|---|
|
|
69
|
-
| [`instrument-console`](./styles/instrument-console.md) | near-black aerospace console | technical / systems / infra · **core contract** |
|
|
70
|
-
| [`editorial-luxury`](./styles/editorial-luxury.md) | cream and espresso ink | editorial / research / premium B2B · **core contract** |
|
|
71
|
-
| [`workbench`](./styles/workbench.md) | quiet light/dark product UI | dashboards / admin / internal & dev tools (standalone) · **core contract** |
|
|
72
|
-
| [`briefing-room`](./styles/briefing-room.md) | dark 16:9 deck | investor & board decks, briefings, talks as a page (standalone) · **core contract** |
|
|
73
|
-
| [`atrium`](./styles/atrium.md) | cream daylight | consumer health, longevity, wellness, high-trust DTC |
|
|
74
|
-
| [`babylove`](./styles/babylove.md) | white + one orange | the same job answered with **seven tokens** — SEO/AI-visibility SaaS on Tailwind defaults, long time-to-value, first-class disconnected states · **widened** |
|
|
75
|
-
| [`patchbay`](./styles/patchbay.md) | near-black + one mint-cyan | a **live schematic** — 8% hairlines and no shadow, and an architecture diagram whose cords carry SMIL particles on a 2–3.5s clock under light layers on an 8.5–11s one; for engines, buses, pipelines and open-source front doors · **widened** |
|
|
76
|
-
| [`nameplate`](./styles/nameplate.md) | cool near-white slab + one coral ramp | **square on 87% of its elements** — 1,091 of 1,251 measured — with 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, 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, review aggregation (standalone) · **widened** |
|
|
77
|
-
| [`rimlight`](./styles/rimlight.md) | white + one blue + coloured light | **elevation made of light rather than shadow** — a sixteen-layer rig, six lit and ten held at alpha 0, on one control per viewport; a monospace carrying every label and button against a grotesque carrying every sentence, no bold anywhere, and one near-black act; for a studio's front door and its service and case-study pages (standalone) · **widened** |
|
|
78
|
-
| [`onionskin`](./styles/onionskin.md) | white sheet + one blue, **96.5% square** | **two bases and everything quiet is an alpha of one** — text dims through the ink, structure through a navy that is never a word, so the pack has no grey ramp at all; a dot grid, dashed hairlines, three faces and an 11px working size; for developer and AI infrastructure whose front page is a working document (standalone) · **widened** |
|
|
79
|
-
| [`outrank`](./styles/outrank.md) | white + one violet | a **marketing page and a working tool in one brand** — SEO/growth SaaS, agent-run back-office, anything shipping a landing and a dashboard together · **widened** |
|
|
80
|
-
| [`orchard`](./styles/orchard.md) | warm oat slabs | friendly consumer biotech, DTC wellness, kits & supplements · **core contract** |
|
|
81
|
-
| [`field-notes`](./styles/field-notes.md) | green-cast paper ruled by hairlines | open-source & developer tools sold on auditability (standalone) |
|
|
82
|
-
| [`showroom`](./styles/showroom.md) | white gallery | product-led companies whose best argument is the app on screen |
|
|
83
|
-
| [`blueprint`](./styles/blueprint.md) | white stock | infrastructure sold on precision — vector search, storage, query engines |
|
|
84
|
-
| [`prism`](./styles/prism.md) | iridescent wash with a hard edge | an OSS infrastructure project's front door, where step one is a command |
|
|
85
|
-
| [`maquette`](./styles/maquette.md) | near-black table | enterprise data infrastructure sold to an architecture buyer |
|
|
86
|
-
| [`cyclorama`](./styles/cyclorama.md) | pastel field on a 32s loop | enterprise AI transformation and applied-AI consultancies |
|
|
87
|
-
| [`scoreboard`](./styles/scoreboard.md) | warm paper | products whose argument is an accumulating number — growth, ads, SEO |
|
|
88
|
-
| [`datasheet`](./styles/datasheet.md) | off-white spec sheet | B2B SaaS whose product is a verdict about the visitor, request or device — fraud, bot and device intelligence, identity, API products |
|
|
89
|
-
| [`manpage`](./styles/manpage.md) | cream paper | developer products whose buyer reads code — APIs, SDKs, CLIs, MCP servers, developer infrastructure |
|
|
90
|
-
| [`pigeonhole`](./styles/pigeonhole.md) | white field | products that file the reader's incoming mess into named categories — email triage, ticket routing, digests, organisers, CRM inboxes |
|
|
91
|
-
| [`roster`](./styles/roster.md) | white field in a faint square grid | products whose argument is **who already carries them** — AI-search visibility, SEO and content platforms, agencies, marketplaces |
|
|
92
|
-
| [`ora`](./styles/ora.md) | warm coal field | products whose output is **a machine's verdict about the reader** — agent-readiness and crawlability scores, SEO/AEO audits, agent-run traces, MCP and protocol surfaces · **dark by default** (standalone) |
|
|
93
|
-
| [`tenor`](./styles/tenor.md) | warm paper | products arguing a **management thesis** — AI-workforce and agent-operations platforms, autonomous back-office, revenue and sales operations, sold to the director who will have to manage it (standalone) |
|
|
94
|
-
| [`ledger`](./styles/ledger.md) | warm cream paper ruled by a hairline at 12% ink — no shadow on any card — radius 15 nested concentrically | the console of a product that answers questions **about data** — AI analysts, BI surfaces, query workspaces, agents that read a warehouse and write back a figure (standalone) |
|
|
95
|
-
| [`paperclip`](./styles/paperclip.md) | neutral coal with **no functional colour at all** — every control monochrome | products that ask a person to **run something that runs itself** — agent teams and orchestrators, autonomous back-office, schedulers, job runners, budget-governed compute (standalone) |
|
|
96
|
-
| [`awning`](./styles/awning.md) | white forecourt where **the accent is black** and no hue reaches the chrome at all; a pill whose radius is a declared component token | commerce and platform front doors — the surface that sells a system other businesses will run their storefront, payroll, billing or logistics on (standalone) · **core contract** |
|
|
97
|
-
| [`router`](./styles/router.md) | near-white field with a trace of blue, white cards standing on it, **hairline seams instead of shadows anywhere** — body at 14px and weight 450 | **product consoles and the pages that have to look like them** — dashboards, admin and developer platforms, billing and usage surfaces, and a landing page whose argument is an inventory rather than a promise (standalone) |
|
|
98
|
-
| [`daylight`](./styles/daylight.md) | cool near-white portal field with generous radii and **one very large soft shadow spent on a single object per screen** | **client-facing portals and the pages that sell them** — onboarding, workspaces a customer logs into, service dashboards, scheduling and billing (standalone) |
|
|
99
|
-
| [`notation`](./styles/notation.md) | near-white page drawn **entirely in hairlines**, radii of 2 and 4px, a slab serif at weight 300 against a monospace, **no bold anywhere** | **developer and technical products sold on restraint** — open source front pages, workspaces for people who dislike being sold to, documentation homes (standalone) |
|
|
100
|
-
| [`almanac`](./styles/almanac.md) | **oatmeal paper rather than white**, seams at 2px with **no 1px anywhere**, a display set below a line-height of one, mono tags notched through drawn boxes | **pages that assert a category** — a manifesto, a company saying what this kind of thing is, a product whose argument is editorial rather than functional (standalone) |
|
|
101
|
-
| [`vitrine`](./styles/vitrine.md) | white field drawn **entirely in hairlines**, a serif display over a sans body, an ink primary, and one framed record with a 1px inset highlight | **the front door of a product sold on trust** — B2B software under evaluation, security and compliance surfaces, specification and comparison pages (standalone) |
|
|
102
|
-
| [`proscenium`](./styles/proscenium.md) | 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 | **product-led marketing front doors whose argument is a demonstration** — SaaS home pages, launch and tour pages, any page with six or more acts that needs a repeated beat (standalone) |
|
|
103
|
-
| [`bulletin`](./styles/bulletin.md) | 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** | **front doors whose argument is breadth** — a tool doing many things across many channels for many clients, sold cheerfully to a small team or an agency: social and content platforms, scheduling and inbox products, all-in-one SMB SaaS (standalone) |
|
|
104
|
-
|
|
105
|
-
**A materialized kit answers part of what a core pack leaves out.** `npx
|
|
106
|
-
sheleg-design-skill --kit <pack>` produces `src/styles.css`, whose component half is
|
|
107
|
-
authored CSS for the states a core pack declines to specify — `:hover`,
|
|
108
|
-
`:focus-visible`, `:disabled`, selected. It does not ship with this skill, so an agent
|
|
109
|
-
reading only this bundle will invent them. **A kit exists for every pack, not only
|
|
110
|
-
the core ones** — fetch it whenever you are building components, and treat any
|
|
111
|
-
difference between kit and pack as a defect in one of them rather than a choice.
|
|
112
|
-
For a widened pack the kit and the pack's `## Components` must agree; for a core
|
|
113
|
-
pack the kit is the only answer either of them gives.
|
|
114
|
-
|
|
115
|
-
**Six of the thirty-five are on the core contract, and it changes what you get.**
|
|
116
|
-
A pack marked **core contract** does not specify `## Components`, `## Hero`,
|
|
117
|
-
`## Responsive` or `## Signature element` — so per-component states, the
|
|
118
|
-
opening viewport and its line ceiling, the collapse rules, and the single
|
|
119
|
-
element the page is remembered by are **yours to decide**, and you say so out
|
|
120
|
-
loud when you do. The other twenty-nine answer all four. This asymmetry is the one
|
|
121
|
-
thing about the library most likely to make you invent a value and believe you
|
|
122
|
-
read it: what a core pack *does* state is measured to two decimals, and that
|
|
123
|
-
precision is not evidence about the half it leaves silent. Each pack declares
|
|
124
|
-
its own level on a `Contract:` line above its Register.
|
|
125
|
-
|
|
126
|
-
Read the chosen pack in full before styling anything — it supplies the
|
|
127
|
-
palette, type, texture, motion-token values, signature motifs, and bans.
|
|
128
|
-
Each pack ships a ready-made token layer in `styles/tokens/<pack>.css` —
|
|
129
|
-
copy that file verbatim instead of transcribing tables. For a new style,
|
|
130
|
-
copy [`styles/STYLE_PACK_TEMPLATE.md`](./styles/STYLE_PACK_TEMPLATE.md) and
|
|
131
|
-
keep every heading — Register / Palette / Type / Texture & surface /
|
|
132
|
-
Components / Hero / Responsive / Motion tokens / Signature motifs / Signature
|
|
133
|
-
element / Motion flavor (cinematic packs only) / Micro-interactions / Bans /
|
|
134
|
-
Gotchas — then author its `tokens/<pack>.css` in the same change; never invent
|
|
135
|
-
token values ad hoc.
|
|
63
|
+
The visual identity comes from a style pack. Before choosing one, read
|
|
64
|
+
[the style-pack index](./STYLE_PACK_INDEX.md); then read the chosen pack in full
|
|
65
|
+
and copy its token layer from `styles/tokens/<pack>.css`. Do not transcribe token
|
|
66
|
+
tables or infer values from screenshots.
|
|
136
67
|
|
|
68
|
+
A materialized kit supplies component states:
|
|
69
|
+
|
|
70
|
+
```bash
|
|
71
|
+
npx sheleg-design-skill --kit <pack>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
The generated `src/styles.css` is authoritative for states a core pack leaves
|
|
75
|
+
open. A widened pack's kit and `## Components` section must agree. To author a
|
|
76
|
+
pack, start from
|
|
77
|
+
[`styles/STYLE_PACK_TEMPLATE.md`](./styles/STYLE_PACK_TEMPLATE.md) and ship its
|
|
78
|
+
token file in the same change.
|
|
137
79
|
## Calibration — three dials
|
|
138
80
|
|
|
139
81
|
A pack answers *which register*. It does not answer *how far*. Two landing
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
# Style-pack index
|
|
2
|
+
|
|
3
|
+
Load this file only when selecting or authoring a visual system. The pack file,
|
|
4
|
+
not this index, is authoritative for tokens, components, responsive behavior,
|
|
5
|
+
motion and bans.
|
|
6
|
+
|
|
7
|
+
## Defaults
|
|
8
|
+
|
|
9
|
+
- Product UI with no stronger signal: [workbench](./styles/workbench.md).
|
|
10
|
+
- Marketing page with no stronger signal: [showroom](./styles/showroom.md).
|
|
11
|
+
- Presentation or board deck: [briefing-room](./styles/briefing-room.md).
|
|
12
|
+
- Cinematic systems or infrastructure page: [instrument-console](./styles/instrument-console.md).
|
|
13
|
+
|
|
14
|
+
**Six of the thirty-five are on the core contract.
|
|
15
|
+
The other twenty-nine answer all four widened sections.** A pack marked **core contract** leaves component
|
|
16
|
+
states, hero, responsive rules and the signature element open. Generate its kit
|
|
17
|
+
before building components.
|
|
18
|
+
|
|
19
|
+
## Catalogue
|
|
20
|
+
|
|
21
|
+
| Pack | Register | Good fit |
|
|
22
|
+
|---|---|---|
|
|
23
|
+
| [`instrument-console`](./styles/instrument-console.md) | near-black aerospace console | technical systems and infrastructure · **core contract** |
|
|
24
|
+
| [`editorial-luxury`](./styles/editorial-luxury.md) | cream and espresso | editorial, research, premium B2B · **core contract** |
|
|
25
|
+
| [`workbench`](./styles/workbench.md) | quiet light/dark UI | dashboards, admin, internal tools · (standalone) · **core contract** |
|
|
26
|
+
| [`briefing-room`](./styles/briefing-room.md) | dark 16:9 deck | investor and board presentations · (standalone) · **core contract** |
|
|
27
|
+
| [`atrium`](./styles/atrium.md) | cream daylight | consumer health and high-trust DTC |
|
|
28
|
+
| [`babylove`](./styles/babylove.md) | white with orange | SEO SaaS, long time-to-value, disconnected states |
|
|
29
|
+
| [`patchbay`](./styles/patchbay.md) | black with mint-cyan | engines, buses, pipelines, OSS front doors |
|
|
30
|
+
| [`nameplate`](./styles/nameplate.md) | cool slab with coral | press, certification and third-party trust · (standalone) |
|
|
31
|
+
| [`rimlight`](./styles/rimlight.md) | white with blue light | studios, services and case studies · (standalone) |
|
|
32
|
+
| [`onionskin`](./styles/onionskin.md) | white working sheet | developer and AI infrastructure · (standalone) |
|
|
33
|
+
| [`outrank`](./styles/outrank.md) | white with violet | one brand across marketing and product |
|
|
34
|
+
| [`orchard`](./styles/orchard.md) | warm oat slabs | friendly biotech and wellness · **core contract** |
|
|
35
|
+
| [`field-notes`](./styles/field-notes.md) | ruled green paper | auditable open-source developer tools · (standalone) |
|
|
36
|
+
| [`showroom`](./styles/showroom.md) | white gallery | product-led companies selling the app |
|
|
37
|
+
| [`blueprint`](./styles/blueprint.md) | white technical stock | vector, storage and query infrastructure |
|
|
38
|
+
| [`prism`](./styles/prism.md) | iridescent hard edge | command-first OSS infrastructure |
|
|
39
|
+
| [`maquette`](./styles/maquette.md) | near-black table | enterprise data infrastructure |
|
|
40
|
+
| [`cyclorama`](./styles/cyclorama.md) | looping pastel field | applied-AI consultancies |
|
|
41
|
+
| [`scoreboard`](./styles/scoreboard.md) | warm paper | growth, ads and accumulating metrics |
|
|
42
|
+
| [`datasheet`](./styles/datasheet.md) | off-white specification | fraud, identity and device intelligence |
|
|
43
|
+
| [`manpage`](./styles/manpage.md) | cream manual | APIs, SDKs, CLIs and MCP servers |
|
|
44
|
+
| [`pigeonhole`](./styles/pigeonhole.md) | filed white field | inbox, ticket and CRM triage |
|
|
45
|
+
| [`roster`](./styles/roster.md) | faint square grid | platforms sold through who uses them |
|
|
46
|
+
| [`ora`](./styles/ora.md) | warm coal | machine verdicts, audits and protocol traces · (standalone) |
|
|
47
|
+
| [`tenor`](./styles/tenor.md) | warm management paper | agent operations and autonomous back office · (standalone) |
|
|
48
|
+
| [`ledger`](./styles/ledger.md) | cream ruled console | analysts, BI and warehouse agents · (standalone) |
|
|
49
|
+
| [`paperclip`](./styles/paperclip.md) | monochrome coal | orchestrators, schedulers and job runners · (standalone) |
|
|
50
|
+
| [`awning`](./styles/awning.md) | white commerce forecourt | storefront, payroll and billing platforms · (standalone) · **core contract** |
|
|
51
|
+
| [`router`](./styles/router.md) | pale console with hairlines | dashboard, billing and inventory surfaces · (standalone) |
|
|
52
|
+
| [`daylight`](./styles/daylight.md) | bright portal with one shadow | client onboarding and service portals · (standalone) |
|
|
53
|
+
| [`notation`](./styles/notation.md) | restrained technical hairlines | OSS, docs and developer workspaces · (standalone) |
|
|
54
|
+
| [`almanac`](./styles/almanac.md) | oatmeal editorial paper | manifestos and category-defining pages · (standalone) |
|
|
55
|
+
| [`vitrine`](./styles/vitrine.md) | serif trust display | evaluated B2B, security and compliance · (standalone) |
|
|
56
|
+
| [`proscenium`](./styles/proscenium.md) | white demo sequence | product tours and launch pages · (standalone) |
|
|
57
|
+
| [`bulletin`](./styles/bulletin.md) | cheerful outlined bands | broad SMB and agency platforms · (standalone) |
|
|
58
|
+
|
|
59
|
+
## Selection protocol
|
|
60
|
+
|
|
61
|
+
When candidates overlap, mount both on the same populated page behind
|
|
62
|
+
`?variant=<pack>`; change only the token layer. Pick from real content and
|
|
63
|
+
density, record the decision, then remove the comparison harness. A placeholder
|
|
64
|
+
route cannot expose the difference.
|
|
65
|
+
|
|
66
|
+
The pack wins on values. The calibration dials in `SKILL.md` win on amount.
|
|
67
|
+
Neither may invent a token the chosen pack does not define.
|
|
@@ -125,9 +125,9 @@ thirty overrides. What it changes:
|
|
|
125
125
|
|
|
126
126
|
| Token | Dark value | Note |
|
|
127
127
|
|---|---|---|
|
|
128
|
-
| `--bg` / `--surface` | `#14110E` / `#1C1815` | the warm-brown family
|
|
129
|
-
| `--surface-2` / `--surface-3` | `#262019` / `#262019` | **the same value**: the
|
|
130
|
-
| `--ink` / `--ink-2` | `#F7F3EC` / `#F7F3EC` | also
|
|
128
|
+
| `--bg` / `--surface` | `#14110E` / `#1C1815` | the warm-brown family, **measured**: the reference's own `.dark` declares `--background #14110e` and `--card #1c1815` |
|
|
129
|
+
| `--surface-2` / `--surface-3` | `#262019` / `#262019` | **the same value, and faithfully so**: the reference's dark has two steps above the field — `#1c1815` and `#262019` — and no third |
|
|
130
|
+
| `--ink` / `--ink-2` | `#F7F3EC` / `#F7F3EC` | also one value, and also faithful: the reference's dark carries `--foreground` and `--muted-foreground` and nothing between them |
|
|
131
131
|
| `--ink-soft` | `#A89E8F` | 7.1:1 on `--bg` in this theme |
|
|
132
132
|
| `--brand` / `--brand-ink` | `#CF7A52` / `#CF7A52` | the light theme's `--brand-on-dark`, now the brand itself |
|
|
133
133
|
| `--verify` | `#2BC0A8` | 8.3:1 on `--bg` — **safe as text here**, which it is not in light |
|
|
@@ -137,8 +137,11 @@ thirty overrides. What it changes:
|
|
|
137
137
|
**The dawn does not follow.** No `--dawn-*` stop is re-declared in the dark block,
|
|
138
138
|
so `--hero-dawn` still ends `--dawn-7` `#E9ECDF` at 98% and `--bg` at 100% — in
|
|
139
139
|
dark that is near-white meeting `#14110E` across two percent of the gradient,
|
|
140
|
-
which is the hard edge this pack's own Bans forbid.
|
|
141
|
-
|
|
140
|
+
which is the hard edge this pack's own Bans forbid. **Settled 2026-08-26**: the
|
|
141
|
+
reference's `.dark` declares no dawn stop of any kind, so the gradient has no dark
|
|
142
|
+
counterpart there either — and the layer now redeclares `--hero-dawn: var(--bg)` in
|
|
143
|
+
dark. **In dark the hero is the flat field**, which is a rule with a measurement
|
|
144
|
+
behind it rather than a hold.
|
|
142
145
|
|
|
143
146
|
Three rules carry this palette:
|
|
144
147
|
|
|
@@ -469,20 +472,22 @@ first thing to correct when porting this look:
|
|
|
469
472
|
theme, so UA form controls and scrollbars follow the OS while the page follows
|
|
470
473
|
the class. This token layer sets it **per theme** — the same trap that bit
|
|
471
474
|
`workbench`; never `light dark`.
|
|
472
|
-
- **
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
`
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
475
|
+
- **The dark theme was read off the reference after all, and the prose was what was
|
|
476
|
+
wrong.** An earlier pass concluded the reference serves no dark mode — measured
|
|
477
|
+
against the served HTML, where nothing carries the class. Re-read 2026-08-26 against
|
|
478
|
+
the two stylesheets it loads: `.dark { … }` declares **43 tokens**, and the layer
|
|
479
|
+
here matches them value for value — `--background #14110e` = `--bg`, `--card
|
|
480
|
+
#1c1815` = `--surface`, `--secondary/--muted/--accent #262019` = `--surface-2`,
|
|
481
|
+
`--foreground #f7f3ec` = `--ink`, `--muted-foreground #a89e8f` = `--ink-soft` at
|
|
482
|
+
7.12:1. So the warm brown is MEASURED, not a slip, and the sentence claiming the
|
|
483
|
+
forest family was kept in dark is the thing that was false. It is corrected below.
|
|
481
484
|
- **The reference runs three unrelated dark palettes**: a warm-brown `.dark`
|
|
482
485
|
theme (`#14110E`), forest bands on the page (`#072820`), and a navy terminal
|
|
483
|
-
(`#0B101D`).
|
|
484
|
-
|
|
485
|
-
|
|
486
|
+
(`#0B101D`). **The forest is the hero's own gradient and belongs to the light
|
|
487
|
+
theme**; the dark theme takes the reference's `.dark` block, which is the warm
|
|
488
|
+
brown, and the terminal takes a darker step of the forest family in light. Reading
|
|
489
|
+
"keeps the forest family" as a claim about the dark theme is what made this pack
|
|
490
|
+
look self-contradicting for six days. If you port the reference verbatim you inherit three
|
|
486
491
|
systems and no rule for choosing between them.
|
|
487
492
|
- **Its app layer drifts from its page layer.** The reference's `--sidebar-*`
|
|
488
493
|
neutrals are browner than the page's green-cast ones and its sidebar ring is a
|
|
@@ -395,6 +395,48 @@ mono, `--success` for `GET`, `--info` for `POST`, each on its `-weak` tint at
|
|
|
395
395
|
Focus: `--focus-color` ring, border `--accent-ink`. Error: border `--danger`, with
|
|
396
396
|
the message in `--danger` **and** an icon.
|
|
397
397
|
|
|
398
|
+
**Loader — the reference paints none, and this pack's answer is a swap rather
|
|
399
|
+
than a spinner.** Measured 2026-08-26 by rendering the origin at 1440 and at 900:
|
|
400
|
+
the whole page runs **two** perpetual animations and both are 8px round dots at 2s
|
|
401
|
+
`cubic-bezier(0.4, 0, 0.6, 1)` — one green beside *579,406 posts this week*, one
|
|
402
|
+
violet beside *22,271 accounts connected this week*, each sitting above a 200×40
|
|
403
|
+
sparkline tinted to its own dot. Those are the opposite of a loader: a loader says
|
|
404
|
+
the number has not arrived, a liveness dot says the number is still moving. There
|
|
405
|
+
is no spinner, no skeleton and no shimmer anywhere in the render, and the page
|
|
406
|
+
carries zero `aria-live`, zero `role="status"` and zero `aria-busy`. So the rules
|
|
407
|
+
below are this pack's decisions, stated rather than left to the reader — a
|
|
408
|
+
documentation register acquires async surfaces a marketing page never has: a
|
|
409
|
+
playground call, a key being minted, a log tail.
|
|
410
|
+
|
|
411
|
+
- **A pending control keeps its width.** Everything here is mono, so a pending
|
|
412
|
+
label is padded to the settled label's cell count and the button never resizes.
|
|
413
|
+
This is the one register where that is exact rather than approximate.
|
|
414
|
+
- **A waiting region is a skeleton, and the skeleton holds still.** `--surface-2`
|
|
415
|
+
blocks at the row's own height inside the same `--rule` card at `--r-control`,
|
|
416
|
+
and no shimmer: the page's entire perpetual budget is two 8px dots, and a
|
|
417
|
+
shimmer would be the third and by far the largest.
|
|
418
|
+
- **A long-running region reuses the reference's own dot** — 8px, `--success` or
|
|
419
|
+
`--info`, with its word beside it, and it takes the `aria-live="polite"` the
|
|
420
|
+
reference omits.
|
|
421
|
+
- **Never a spinner.** Motion flavor here is entry only and Bans calls this the
|
|
422
|
+
calmest pack in the family; a rotating glyph is perpetual motion carrying a
|
|
423
|
+
status with no word beside it.
|
|
424
|
+
|
|
425
|
+
**Empty state — the reference has a surface that could be empty and paints no
|
|
426
|
+
empty variant of it.** Same pass: the only data surfaces are the two sparklines
|
|
427
|
+
and their counters, every list on the page is editorial — a numbered list of
|
|
428
|
+
setup steps — and zero elements name themselves empty, no-results or placeholder.
|
|
429
|
+
So this is a decision too, and it is prose rather than a picture: the same
|
|
430
|
+
`--r-card` card on `--surface` with its `--rule` hairline, one 14px line in
|
|
431
|
+
`--ink` naming what is not there, one in `--ink-soft` saying how to fill it, and
|
|
432
|
+
the **secondary** button where there is an action — never the primary, which
|
|
433
|
+
belongs to the page's one argument. No illustration: the code frame is the only
|
|
434
|
+
image this pack allows itself, and a drawing in a documentation register reads as
|
|
435
|
+
a different product. An emptiness that is a failure rather than a state is not
|
|
436
|
+
this component at all — it carries `--danger`, its word and an icon, exactly as
|
|
437
|
+
the input's error does.
|
|
438
|
+
|
|
439
|
+
|
|
398
440
|
## Hero
|
|
399
441
|
|
|
400
442
|
The opening viewport, in order:
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
# Style pack — Orchard
|
|
2
2
|
|
|
3
3
|
Origin: **gutgutgoose.com** (2026), a production consumer-biotech site built in
|
|
4
|
-
Framer. Every value below was read off its live computed styles
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
Framer. Every value below was read off its live computed styles, **with one role
|
|
5
|
+
that the page as served today does not confirm** — the orange, and the Gotchas carry
|
|
6
|
+
the measurement. A warm oat field carrying a stack of **rounded slabs**, a sage-green
|
|
7
|
+
brand, one candy orange the pack reserves for the action, a rounded geometric display
|
|
8
|
+
face, and buttons made of light rather than of shadow. It reads the way good packaging
|
|
8
9
|
does: friendly enough to pick up, precise enough to trust.
|
|
9
10
|
|
|
10
11
|
Contract: core — this pack does **not** specify `## Components`, `## Hero`,
|
|
@@ -179,8 +180,9 @@ to read as a fact.
|
|
|
179
180
|
sheen, wearing `--shadow-cta` (both inset white hairlines plus the orange
|
|
180
181
|
ambient glow) at pill radius, `16px 24px 14px` padding — the extra top pad is
|
|
181
182
|
what makes the label sit optically centred. Exactly one of these per view.
|
|
182
|
-
|
|
183
|
-
|
|
183
|
+
Exactly one per view is the pack's rule, and it is a **pack decision rather than
|
|
184
|
+
a reading of the reference** — see the Gotchas: on the page as served today the
|
|
185
|
+
orange fills no control at all.
|
|
184
186
|
- **Slabs as sections.** Each section is a rounded rectangle with its own fill:
|
|
185
187
|
oat for explanation, sage for invitation, cacao for emphasis. Adjacent slabs
|
|
186
188
|
never repeat a fill; the field between them is the separator.
|
|
@@ -257,6 +259,50 @@ button.
|
|
|
257
259
|
|
|
258
260
|
## Gotchas
|
|
259
261
|
|
|
262
|
+
**The sage control's hover INVERTS, and a white label does not survive it.** Measured
|
|
263
|
+
2026-08-26 by hovering the reference's own control in a browser — which is the only way
|
|
264
|
+
to see it; a fetch shows nothing. At rest the primary is `--primary` sage `#78934a` at a
|
|
265
|
+
50px radius, 42px tall, `8px 18px`; on hover the fill becomes `--primary-hover`, the warm
|
|
266
|
+
cream `#f9eedc`. **The label must therefore be `--surface-ink` `#3a1b13`, which is 4.51:1
|
|
267
|
+
on the sage and 13.59:1 on the cream — it survives both.** White is 3.46:1 on the sage
|
|
268
|
+
and **1.15:1 on the cream**: a white label on this control is legible at rest, fails AA
|
|
269
|
+
at rest, and *disappears entirely* the moment a pointer touches it.
|
|
270
|
+
|
|
271
|
+
**The reference ships no focus style and no disabled state.** Both controls compute
|
|
272
|
+
`outline: 1px auto rgb(0, 95, 204)` — the user agent's own ring — and the page carries
|
|
273
|
+
zero `[disabled]` or `[aria-disabled]` elements at any of the three widths. Neither is
|
|
274
|
+
copied here: a pack that inherited a UA focus ring would ship a different ring in every
|
|
275
|
+
browser.
|
|
276
|
+
|
|
277
|
+
**The secondary control has no hover at all.** Measured: cream `#fffef4` at rest, cream
|
|
278
|
+
on hover, nothing else changes. If you give it one, you are extending the reference
|
|
279
|
+
rather than reading it.
|
|
280
|
+
|
|
281
|
+
|
|
282
|
+
**The orange is the pack's decision, not the served page's behaviour, and the
|
|
283
|
+
difference is measured.** Re-read on 2026-08-26 by rendering the reference at 1440×900
|
|
284
|
+
and walking all 1,115 visible elements of 1,223: `#fa7241` appears as a
|
|
285
|
+
`background-color` **0 times**, as `color` **0 times** and as a border colour **0
|
|
286
|
+
times**. It survives on **2 SVG `<path>` fills** — illustration — and inside 18
|
|
287
|
+
gradients. What fills a control there is the sage `#78934a`: the primary action on the
|
|
288
|
+
served page is `background-color: rgb(120, 147, 74)` at a 50px radius, 42px tall.
|
|
289
|
+
|
|
290
|
+
**Three readings were possible and the render eliminates one of them.** The pill is
|
|
291
|
+
*not* hydrated late — 1,115 elements render and the controls among them carry their
|
|
292
|
+
fills statically. Of the two that remain, neither can be settled: the pack may have
|
|
293
|
+
read a page this site no longer serves (`/pricing`, `/shop` and `/product` all answer
|
|
294
|
+
**404** as of 2026-08-26), or the role may have been assigned to a colour sampled from
|
|
295
|
+
artwork. **The pack is not rewritten on that ambiguity** — `--cta` stays the action
|
|
296
|
+
colour here, because a pack is a design decision and this one is coherent. What
|
|
297
|
+
changes is that it no longer claims to be a measurement of the current page, and the
|
|
298
|
+
claim that the pill *"is the only orange object on the page"* is gone, because on that
|
|
299
|
+
page there are eighteen gradients and two illustration paths carrying the same hue and
|
|
300
|
+
no control carrying it at all.
|
|
301
|
+
|
|
302
|
+
**If you are matching the reference rather than using the pack**, the action fill you
|
|
303
|
+
will see is `--primary`, and `--cta` will look like an invention. Both readings are
|
|
304
|
+
legitimate; the pack tells you which one it is.
|
|
305
|
+
|
|
260
306
|
The reference is strong on composition and weak on contrast. All three failures
|
|
261
307
|
below are real, measured, and fixable from inside the palette — treat them as
|
|
262
308
|
the first thing to correct when porting this look:
|
|
@@ -325,6 +325,55 @@ height, `--ink-faint` treatment. It is the one continuous animation in the pack,
|
|
|
325
325
|
under reduced motion it is **paused** rather than shortened — see Motion flavor,
|
|
326
326
|
because collapsing its duration would strobe it.
|
|
327
327
|
|
|
328
|
+
**Loader — the reference paints none, and the budget for one is already spent.**
|
|
329
|
+
Measured 2026-08-26 by rendering the origin at 1440: the page runs **four**
|
|
330
|
+
`marquee` tracks and nothing else perpetual — one row, 112px tall, 36 logos, each
|
|
331
|
+
track 1484px wide at 100s linear, which is `--dur-marquee` and the logo wall
|
|
332
|
+
above. No spinner, no skeleton, no shimmer. The one `aria-live` region on the page
|
|
333
|
+
is an empty invisible `<section>`, the framework's route announcer rather than a
|
|
334
|
+
loader, and it should not be read as one. So:
|
|
335
|
+
|
|
336
|
+
- **A skeleton is a tint, never a shimmer.** `--surface-2` inside the panel it
|
|
337
|
+
stands in, at `--radius-panel`, and it holds still. A shimmer would be the
|
|
338
|
+
page's second continuous animation, and under reduced motion — where the logo
|
|
339
|
+
wall is **paused** rather than shortened — it would be the only thing still
|
|
340
|
+
moving, which inverts the rule it stands next to.
|
|
341
|
+
- **A chip's skeleton keeps both layers.** Outer `--radius-chip`, inner
|
|
342
|
+
`--radius-chip-inner`, and the inner takes the outer's own `--cat-step-150` to
|
|
343
|
+
`--cat-step-200` pair rather than the light `--cat-step-50` to `--cat-step-100`
|
|
344
|
+
one, so the shape reads as solid rather than as a chip with a blank label. The
|
|
345
|
+
1px between the two radii is the inner layer's padding, and a single-layer
|
|
346
|
+
placeholder therefore resizes the chip when the word lands. A skeleton never
|
|
347
|
+
borrows a category ramp: a hue that names a category before the category is
|
|
348
|
+
known is the hue-only chip this pack bans.
|
|
349
|
+
- **A pending primary button keeps its gradient, its `--shadow-cta` and its word,
|
|
350
|
+
and does not translate.** The −1px belongs to `:hover`, and a control already
|
|
351
|
+
pressed must not look liftable. The `:disabled` pair is wrong here —
|
|
352
|
+
`--surface-2` with `--ink-faint` says *cannot be used*, and a pending control is
|
|
353
|
+
one that is working.
|
|
354
|
+
|
|
355
|
+
**Empty state — the reference's only depiction of one is a photograph.** Same
|
|
356
|
+
pass: the page ships eleven images wider than 200px, three of them full-width
|
|
357
|
+
product screenshots, and the largest at 1152×703 is captioned *an organized
|
|
358
|
+
inbox*. The product is named for an empty state and the page paints that state as
|
|
359
|
+
a raster screenshot, so there is nothing in markup to read values off — every
|
|
360
|
+
`<ul>` on the page is a pricing feature list and zero elements name themselves
|
|
361
|
+
empty or no-results. This pack's decision, then:
|
|
362
|
+
|
|
363
|
+
- **An empty state is a panel, not a page.** `--surface`, `--radius-panel`, the
|
|
364
|
+
`--rule` hairline and `--shadow-card` — the same card as everything else,
|
|
365
|
+
because the surface is not broken.
|
|
366
|
+
- **One `--size-body-lg` `--weight-emphasis` line naming what is not there, one
|
|
367
|
+
`--size-body` `--ink-soft` line saying how to fill it, and the primary button.**
|
|
368
|
+
Never `--ink-faint`, which the token layer confines to a disabled control's
|
|
369
|
+
label; this prose is live text.
|
|
370
|
+
- **No pastel, with one exception.** A feature card may swap its fill for a
|
|
371
|
+
category's 50→100 gradient; an empty state may not, because the pastel names a
|
|
372
|
+
category and an empty surface has none yet. The exception is a surface that IS a
|
|
373
|
+
category — an empty view of one takes that category's pair and carries the
|
|
374
|
+
ordinary chip with its word, which is the rule the chip already obeys.
|
|
375
|
+
|
|
376
|
+
|
|
328
377
|
## Hero
|
|
329
378
|
|
|
330
379
|
The first viewport, at 1440×900, holds exactly this and in this order: the nav,
|
|
@@ -269,6 +269,35 @@ shadow. The chevron rotates 180°.
|
|
|
269
269
|
`--surface` fill, a `--radius-control` accent CTA at the right, and a 1px `--rule` bottom
|
|
270
270
|
edge that appears on scroll.
|
|
271
271
|
|
|
272
|
+
**Input — two shapes, and the second lives on a dark panel.** Measured 2026-08-26 by
|
|
273
|
+
rendering the reference and reading its four visible fields.
|
|
274
|
+
|
|
275
|
+
The *light* one is the hero's URL field: **44px tall, zero radius, 16px**, a transparent
|
|
276
|
+
background and **no border of its own** — it sits inside a bordered wrapper ruled by
|
|
277
|
+
the pack's own `--rule`, which the render resolved to the same `#e5e7eb` the token layer
|
|
278
|
+
carries. `#e5e7eb` measures 1.24:1 on `#ffffff`: a rule rather than a mark.
|
|
279
|
+
Its text is `--ink`, which is 17.93:1 on `--bg`.
|
|
280
|
+
Its placeholder is `--ink-faint`, which WCAG exempts as a placeholder and which this
|
|
281
|
+
pack forbids as live text.
|
|
282
|
+
|
|
283
|
+
The *dark* one is the closing form's email and URL fields: **52px tall, 12px radius,
|
|
284
|
+
14px, `0 16px` padding**, filled with **white at 8%** and bordered with **white at 15%**
|
|
285
|
+
on the dark panel. The two shapes are not interchangeable — the zero-radius one belongs
|
|
286
|
+
to a field standing on the white sheet, the 12px one to a control on ink.
|
|
287
|
+
|
|
288
|
+
**Loaders — none, and that is the answer.** The reference runs exactly three perpetual
|
|
289
|
+
animations and none of them is a loader: `ebook-float-primary`, `-secondary` and
|
|
290
|
+
`-tertiary`, at 5.5s, 6.5s and 7.5s, which drift the ebook mockups. There is no async
|
|
291
|
+
surface on the page to wait for. If you build one, the pack's Motion tokens have no
|
|
292
|
+
loader duration to spend, and inventing a shimmer here would be the only perpetual motion
|
|
293
|
+
on a page whose whole budget is entrance, hover and two slow floats.
|
|
294
|
+
|
|
295
|
+
**Empty states — none, and for the same reason.** Three forms and no data surface: there
|
|
296
|
+
is nothing on this page that can be empty. A product built on this pack that *does* have
|
|
297
|
+
one should take the `--surface-2` band, a `--rule` hairline, body copy at `--ink-soft`
|
|
298
|
+
and no illustration — the page's own vocabulary for a quiet region — but that is an
|
|
299
|
+
extension of the pack rather than a reading of it, and it is marked as one here.
|
|
300
|
+
|
|
272
301
|
## Hero
|
|
273
302
|
|
|
274
303
|
The first viewport at 1440×900 holds, in this order: the sticky nav; the display headline
|
|
@@ -250,6 +250,15 @@
|
|
|
250
250
|
17.0:1 for body ink, 8.3:1 for verify, 5.9:1 for the brand. */
|
|
251
251
|
[data-theme="dark"],
|
|
252
252
|
.dark {
|
|
253
|
+
/* The dawn hero is a LIGHT-THEME object, and this is measured rather than decided.
|
|
254
|
+
The reference's own `.dark` block declares 43 tokens and not one of them is a
|
|
255
|
+
dawn stop — so the gradient has no dark counterpart there either. Left
|
|
256
|
+
un-redeclared, `--hero-dawn` kept its light ramp and ended on #e9ecdf at 98%
|
|
257
|
+
meeting the dark field at 100%: a near-white hard edge across two percent of the
|
|
258
|
+
gradient, which this pack's own Bans forbid. In dark the hero is the flat field.
|
|
259
|
+
Re-read 2026-08-26 (B-112). */
|
|
260
|
+
--hero-dawn: var(--bg);
|
|
261
|
+
|
|
253
262
|
color-scheme: dark;
|
|
254
263
|
|
|
255
264
|
--bg: #14110e;
|
|
@@ -24,7 +24,14 @@
|
|
|
24
24
|
--primary: #78934a; /* sage — 3.4:1 on --bg: a FILL and large-text colour */
|
|
25
25
|
--primary-deep: #61783b; /* the text-safe green: 4.9:1 on --bg under --on-primary */
|
|
26
26
|
--primary-light: #aaca73; /* the mark / illustration green */
|
|
27
|
-
--primary-tint: rgba(120, 147, 74, 0.1); /* quiet rows
|
|
27
|
+
--primary-tint: rgba(120, 147, 74, 0.1); /* quiet rows and a quiet row's hover */
|
|
28
|
+
/* MEASURED 2026-08-26 by hovering the reference's own sage control in a browser:
|
|
29
|
+
the fill does not darken or tint, it INVERTS to a warm cream. A fetch cannot see
|
|
30
|
+
this and the earlier passes did not. A fill, never text. */
|
|
31
|
+
--primary-hover: #f9eedc; /* 1.13:1 on --bg */
|
|
32
|
+
/* MEASURED the same pass — the hero slab's fill, one element, 892px tall against a
|
|
33
|
+
900px viewport. A fill, never text. */
|
|
34
|
+
--surface-warm: #f7ecdc; /* 1.15:1 on --bg */
|
|
28
35
|
|
|
29
36
|
/* ---- The one action colour ------------------------------------------- */
|
|
30
37
|
--cta: #fa7241; /* candy orange — 2.8:1 on --bg: a fill only, never text */
|