howone 0.1.28 → 0.1.30

package/templates/vite/.howone/skills/hallmark/references/components/n12-banner-retract.md

@@ -0,0 +1,34 @@
+### N12 · Announcement banner + retracting nav
+A coloured promo **banner** stacked above one real nav. On scroll-down the banner slides up and retracts, leaving a single clean nav docked to the top; on scroll-up it slides back. A dismiss × removes the banner for good (its height zeroes so no gap is left). Apple-style coupled bars, but the top tier is a *banner*, not a second nav — the colour contrast is what stops it reading as "two navs".
+*Use when:* there's a genuine, time-bound announcement (a launch, a sale, free shipping) worth a persistent strip, over a product/marketing page. Great for stat-led or commerce pages.
+*Don't confuse with:* a static announcement bar that never moves (fine, but not N12); N1b (single bar, no banner).
+
+```html
+<header class="nav" id="nav">
+  <div class="nav__banner" id="banner">
+    <p class="nav__banner-text"><span class="nav__banner-spark"></span> New — <b>shared habits</b>. <a class="nav__banner-link">Try it →</a></p>
+    <button class="nav__banner-x" id="banner-x" aria-label="Dismiss"><span></span></button>
+  </div>
+  <div class="nav__bar"><div class="nav__bar-inner">
+    <a class="nav__brand">Tally</a>
+    <nav class="nav__links">…</nav>
+    <a class="btn btn--accent">Start</a>
+  </div></div>
+</header>
+```
+```css
+:root { --banner-h: 42px; --bar-h: 64px; }
+.nav { position: fixed; inset: 0 0 auto; z-index: 500; transform: translateY(0); transition: transform 320ms var(--ease-out); }
+.nav.is-compact   { transform: translateY(calc(var(--banner-h) * -1)); }  /* banner hides, bar docks to top */
+.nav.is-dismissed { transform: none; }
+.nav.is-dismissed .nav__banner { display: none; }
+.nav__banner { height: var(--banner-h); display: flex; align-items: center; justify-content: center;
+  background: linear-gradient(100deg, var(--color-accent), var(--color-accent-deep)); color: var(--color-paper); }
+/* content clears both at rest; zero --banner-h on dismiss so calc() reflows with no gap */
+.demo-hero { padding-top: calc(var(--banner-h) + var(--bar-h) + 4rem); }
+```
+*JS:* track scroll direction — past ~48px going down → `.is-compact`; going up → remove it; near top → always show. Dismiss × sets `--banner-h: 0px` (via `documentElement.style`) and adds `.is-dismissed`.
+
+**Knobs** — *Banner fill:* solid accent · gradient (default) · tint+ink · *Dismiss:* yes (default) · none · *Bar scroll:* sticky (default) · also-frosts · *Banner content:* promo · status · countdown.
+*Anti-pattern:* never make the top tier a second set of nav links — that's the "two nav bars" smell the banner exists to avoid. Keep the banner one line, one link, one dismiss. Don't animate banner height directly (janky); translate the whole `.nav` and zero the height only on dismiss.
+*Mobile:* banner text truncates / drops the leading glyph; nav links collapse; the Buy/primary CTA stays.

package/templates/vite/.howone/skills/hallmark/references/components/n13-inline-cmdk-pill.md

@@ -0,0 +1,39 @@
+### N13 · Inline ⌘K search pill
+A **visible** search pill sits inline in the bar — placeholder text plus a `⌘K` kbd hint — alongside (not replacing) the links. Click it, or press ⌘K / Ctrl K, to open a spotlight modal with grouped, keyboard-navigable results. The opposite of N4 (which *hides* nav behind the shortcut): here the affordance is on the surface for newcomers, with the shortcut for power users. Tailwind, Linear, Raycast, docs sites.
+*Use when:* the product is search-heavy or docs-heavy and search is a primary action (dev tools, music/library apps, large content sites).
+*Don't confuse with:* N4 (no visible nav, ⌘K only); a plain search icon that just focuses an input in place.
+
+```html
+<header class="nav" id="nav"><div class="nav__inner">
+  <a class="nav__brand">Crank</a>
+  <button class="searchpill" id="searchpill" aria-label="Search (⌘K)">
+    <span class="searchpill__ico"></span><span class="searchpill__text">Search docs…</span>
+    <span class="searchpill__kbd"><kbd>⌘</kbd><kbd>K</kbd></span>
+  </button>
+  <nav class="nav__right"><a class="nav__link">Docs</a><a class="btn btn--accent">Start</a></nav>
+</div></header>
+<div class="cmdk" id="cmdk" aria-hidden="true">
+  <div class="cmdk__backdrop" data-close></div>
+  <div class="cmdk__panel" role="dialog" aria-modal="true">
+    <div class="cmdk__field"><span class="cmdk__field-ico"></span><input id="cmdk-input" placeholder="Search docs…"><kbd>esc</kbd></div>
+    <div class="cmdk__results"><p class="cmdk__group">Suggested</p><button class="cmdk__item is-active">…</button></div>
+    <div class="cmdk__foot"><span><kbd>↑</kbd><kbd>↓</kbd> navigate</span><span><kbd>↵</kbd> open</span><span><kbd>esc</kbd> close</span></div>
+  </div>
+</div>
+```
+```css
+.searchpill { display: flex; align-items: center; gap: 0.6rem; height: 40px; padding: 0 0.55rem 0 0.85rem;
+  background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: 999px; color: var(--color-muted);
+  transition: border-color 200ms, box-shadow 200ms; }
+.searchpill:hover { border-color: var(--color-rule-2); box-shadow: 0 4px 16px -10px oklch(0% 0 0 / 0.3); }
+.cmdk { position: fixed; inset: 0; z-index: 700; opacity: 0; visibility: hidden; transition: opacity 200ms, visibility 200ms; }
+.cmdk.is-open { opacity: 1; visibility: visible; }
+.cmdk__panel { position: absolute; top: 14vh; left: 50%; transform: translateX(-50%) translateY(-8px) scale(0.98);
+  width: min(560px, calc(100vw - 2rem)); transition: transform 240ms var(--ease-spring); }
+.cmdk.is-open .cmdk__panel { transform: translateX(-50%) translateY(0) scale(1); }
+```
+*JS:* ⌘K / Ctrl K toggles, Esc closes, backdrop-click closes, ↑/↓ move the active item, Enter selects, focus the input on open and lock body scroll.
+
+**Knobs** — *Pill placement:* centred (default) · right-of-brand · *Result groups:* flat · grouped (default) · *Footer hints:* shown (default) · hidden · *Open trigger:* pill+⌘K (default) · ⌘K only (→ that's N4, not N13).
+*Anti-pattern:* don't fake the modal with a `<div>` that traps no focus and ignores Esc — if you ship the pill you ship the keyboard model. The pill must look like search (icon + placeholder), not a generic button.
+*Mobile:* the pill collapses to a search icon; the modal goes full-height sheet.

package/templates/vite/.howone/skills/hallmark/references/components/n1b-saas-three-section.md

@@ -0,0 +1,35 @@
+### N1b · Canonical SaaS three-section
+Wordmark hard-left · a centred cluster of 4–6 links (some opening hover dropdowns) · a sign-in text link + filled CTA hard-right. The dominant marketing-nav of 2024–26 (Stripe, Linear, Vercel, Figma, Notion, PostHog). The structural opposite of N1's *minimal* two-link variant — this one is dense and balanced.
+*Use when:* a SaaS / product / dev-tool page with several real destinations and a clear primary action. The default reach for modern-minimal and (Hum-styled) playful product pages.
+*Don't confuse with:* N1a (wordmark + 2 links, no centre cluster); N5 (detached pill); N11 (mega-menu panels, not small dropdowns).
+
+```html
+<header class="nav"><div class="nav__inner">
+  <a class="nav__brand">Conduit</a>
+  <nav class="nav__center">
+    <div class="nav__item nav__item--menu">
+      <button class="nav__link" aria-expanded="false">Product <span class="nav__caret"></span></button>
+      <div class="nav__dropdown"><a class="nav__dropitem"><b>Gateway</b><i>one endpoint</i></a></div>
+    </div>
+    <a class="nav__link">Docs</a><a class="nav__link">Pricing</a>
+  </nav>
+  <div class="nav__right"><a class="btn btn--text">Sign in</a><a class="btn btn--accent">Start</a></div>
+</div></header>
+```
+```css
+.nav { position: fixed; inset: 0 0 auto; z-index: 500; background: transparent; border-bottom: 1px solid transparent;
+  transition: background 240ms, border-color 240ms, box-shadow 240ms; }
+.nav.is-scrolled { background: color-mix(in oklch, var(--color-paper) 72%, transparent);
+  backdrop-filter: blur(18px) saturate(160%); border-bottom-color: var(--color-rule); box-shadow: 0 8px 28px -18px oklch(0% 0 0 / 0.4); }
+.nav__inner { max-width: var(--page-max); margin: 0 auto; padding-inline: var(--page-gutter); height: 64px;
+  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
+.nav__brand { justify-self: start; } .nav__center { justify-self: center; display: flex; gap: 0.35rem; } .nav__right { justify-self: end; }
+.nav__dropdown { position: absolute; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98);
+  transition: opacity 200ms, transform 220ms var(--ease-spring), visibility 200ms; }
+.nav__item--menu:hover .nav__dropdown, .nav__item--menu:focus-within .nav__dropdown { opacity: 1; visibility: visible; transform: none; }
+```
+
+**Knobs** — *Centre links:* 3 · 4 · 5–6 · *Dropdowns:* none · 1 · 2 · *Scroll state:* frost-on-scroll (default) · always-solid · transparent-fixed · *CTA pair:* sign-in + fill · fill only.
+*Scroll behaviour (default):* transparent at rest over the hero, frosts (blur backdrop + hairline border + soft shadow) past ~24px, and tightens height ~8px. Always rAF-throttle the scroll handler.
+*Anti-pattern:* don't let the centre cluster collide with brand/CTA — if it can't sit centred with breathing room, drop to 3 links or route to N1a. Never ship a dropdown that opens on click only with no hover/focus affordance.
+*Mobile:* hide `.nav__center` below ~900px; brand + CTA (or hamburger) remain.

package/templates/vite/.howone/skills/hallmark/references/components/n9-edge-aligned-minimal.md

@@ -1,6 +1,6 @@
 ### N9 · Edge-aligned minimal
 Wordmark hard-left, single CTA hard-right, vast empty space between, no link row at all. The *absence* is the design — Apple product pages, Carl Hauser, luxury sites.
-*Use when:* the page is luxury / quiet / Atelier / Salon and the brand earns the silence.
+*Use when:* the page is luxury / quiet / Atelier / Garden and the brand earns the silence.
 *Don't confuse with:* N1 Wordmark + 2 links (which fills the middle).
 
 ```html

package/templates/vite/.howone/skills/hallmark/references/components/s3-sticky-pinned.md

@@ -11,9 +11,9 @@ Heading remains in viewport while content scrolls beneath. Orientation aid.
 ```
 ```css
 /* If the page has a sticky top nav, offset by its height so the sticky
-   head docks BENEATH it instead of bleeding over (slop-test gate 68).
+   head docks BENEATH it instead of bleeding over (slop-test gate 56).
    Use --z-sticky (in-page) so the nav's --z-sticky-nav out-paints it. */
 .head-sticky { position: sticky; top: var(--banner-height, 0px); background: var(--color-paper); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-ink); z-index: var(--z-sticky); }
 ```
 
-**Sticky pairing rule:** if the page emits a sticky `<header>` / `<nav>` / `.banner` (anything with `position: sticky; top: 0`), you MUST also declare `--banner-height` (a px value matching the nav's height) and `--z-sticky-nav` (≥ 1 above `--z-sticky`) in `tokens.css`. The S3 recipe above pulls both. Without those tokens the section head paints over the nav during scroll — see slop-test gate 68.
+**Sticky pairing rule:** if the page emits a sticky `<header>` / `<nav>` / `.banner` (anything with `position: sticky; top: 0`), you MUST also declare `--banner-height` (a px value matching the nav's height) and `--z-sticky-nav` (≥ 1 above `--z-sticky`) in `tokens.css`. The S3 recipe above pulls both. Without those tokens the section head paints over the nav during scroll — see slop-test gate 56.

package/templates/vite/.howone/skills/hallmark/references/copy.md

@@ -105,7 +105,7 @@ Three voice patterns: *poetic restraint*, *passion via enumeration*, *vulnerabil
 - *"Design engineer creating software that makes people feel something."* — rauno.me — emotional outcome over feature list; "feel something" avoids genre cliché
 - *"All I want to do is build websites. Typography, motion design, copywriting, performance — the web is an endless medium of opportunity."* — paco.me — passion via enumeration; vulnerability ("scratched the surface")
 - *"I craft UI demos that explore the power of the web and help others sharpen their skills."* — jhey.dev — names the verb (*craft*), names the audience (*others*)
-- *"Soft, but exact."* — Hallmark Plume — two short adjectives, one comma, full stop
+- *"Soft, but exact."* — Hallmark Hum — two short adjectives, one comma, full stop
 - *"This page is soft because the surface should be soft. The rules underneath are not."* — pairs claim with refusal
 
 ### Technical
@@ -127,9 +127,9 @@ Three voice patterns: *heritage with specifics*, *refusal as sophistication*, *n
 
 - *"The world's most acclaimed creative collective, where 23 partners work independently and collaboratively to shape the future of design."* — pentagram.com — heritage (implied longevity), named scale (23 partners)
 - *"By appointment."* — atelier-style — refusal as gatekeeping
-- *"A salon for the senses."* — Hallmark Salon — single nominal phrase, comma-free
-- *"A page should arrive like a person — composed, deliberate, in good clothes."* — Hallmark Salon — analogy treats the page as social
-- *"With pleasure, you are most welcome."* — Hallmark Salon salutation — formal address
+- *"A study in the senses."* — Hallmark Atelier — single nominal phrase, comma-free
+- *"A page should arrive like a person — composed, deliberate, in good clothes."* — Hallmark Atelier — analogy treats the page as social
+- *"With pleasure, you are most welcome."* — Hallmark Editorial salutation — formal address
 - *"Restraint, repeated, becomes a signature."* — Hallmark Atelier — three commas, four words, philosophical
 - *"A studied hand."* — three words; the determiner does the work
 - *"A small, opinionated craftsmanship engine that argues with your AI assistant on your behalf — and wins."* — Hallmark Atelier — names the role precisely, embraces the conflict
@@ -151,12 +151,12 @@ Three voice patterns: *analogy via pop-culture*, *food/sensory metaphor*, *antic
 
 Three voice patterns: *extreme abbreviation*, *principle as opening*, *refusal of marketing language*.
 
-- *"Hello."* — Hallmark Quiet salutation — one word; the period is the design
-- *"This is a page that doesn't try."* — Quiet — declares the position openly
+- *"Hello."* — Hallmark Coral salutation — one word; the period is the design
+- *"This is a page that doesn't try."* — Coral — declares the position openly
 - *"Things Become Other Things."* — craigmod.com — three words; treats brand as essay title
 - *"Lightness above weightiness, elevate everyone you encounter."* — craigmod.com — principle-first positioning
-- *"A quiet skill."* — Hallmark Quiet — three words; the article is doing work
-- *"Software can be soft and exact at once. That's the trick."* — Hallmark Plume — names the contradiction, names the resolution
+- *"A quiet skill."* — Hallmark Coral — three words; the article is doing work
+- *"Software can be soft and exact at once. That's the trick."* — Hallmark Hum — names the contradiction, names the resolution
 - *"One HTML file."* — Anya (test 06) footer — three words; the count is the boast
 - *"This page doesn't move."* — names the design decision openly
 

package/templates/vite/.howone/skills/hallmark/references/custom-craft.md

@@ -350,7 +350,7 @@ The Lottie Tell, version 2026: a generic LottieFiles pull where pure CSS would h
 **Brief:** "Build a landing page for a small bakery in Lisbon."
 
 **Step 2 (macrostructure):** Long Document — the bakery is a story-led brand, not a SaaS product.
-**Step 3 (theme):** Linen — warm-paper, prose-led, intimate.
+**Step 3 (theme):** Atelier — warm-paper, prose-led, intimate.
 **Step 4 (enrichment):** E5 Custom Illustration Centerpiece. Tier B (hand-built SVG).
 
 **The output:**
@@ -362,7 +362,7 @@ A 60-line SVG of a single loaf, three paths (crust + crumb + scoring marks), pos
  * H5 hero: Letter (intimate salutation + 2-paragraph body)
  * enrichment: E5 Custom Illustration · craft: tier-B SVG (60 lines)
  * animation: @property --rise (6s, alternate) + stroke-dasharray draw-on
- * theme: Linen · accent: warm-amber ~3% · studied: no
+ * theme: Atelier · accent: warm-amber ~3% · studied: no
  */
 ```
 

package/templates/vite/.howone/skills/hallmark/references/custom-theme.md

@@ -1,13 +1,17 @@
 # Custom theme — protocol
 
-Loaded only when the user has opted into the **custom** theme route in Step 1 of the Design flow. Custom produces a **complete OKLCH palette + free-font pairing tuned to this brief** — a one-off theme written inline into the page's `:root`, not a permanent catalog entry.
+Loaded only when the user has opted into the **custom** theme route in Step 1 of the Design flow. Custom is **made-to-measure for one brief**, written inline into the page's `:root`, never a permanent catalog entry. It spans a **spectrum of depth**: at its lightest, a complete OKLCH palette + free-font pairing tuned to the brief while keeping Hallmark's structures (the *combination* is per-brief); at its fullest — **bespoke** — the page's *structure and composition* are designed from first principles too, bound to no catalog theme, genre, or macrostructure. One route, chosen depth.
 
-**The freedom is the combination, not the rules.** Every constraint in [`color.md`](color.md), [`typography.md`](typography.md), and [`anti-patterns.md`](anti-patterns.md) still applies. The 65 slop-test gates fire unchanged. The Step 5 preview block surfaces the palette + pairing in plain text *before* any code is emitted, so the user can redirect.
+**The freedom is the combination — and, at the bespoke depth, the whole structure — but never the floor.** Every constraint in [`color.md`](color.md), [`typography.md`](typography.md), and [`anti-patterns.md`](anti-patterns.md) still applies, and **every slop-test gate fires unchanged at every depth** — the gates are the floor that never moves. The Step 5 preview surfaces the palette + pairing (plus the bespoke structure, when there is one) in plain text *before* any code is emitted, so the user can redirect.
 
-## Two words, plain English
+## Two routes, plain English
 
-- **catalog** — the named-theme catalogue. Hallmark's 22 themes (Specimen, Atelier, Brutal, Salon, Newsprint, Linen, Studio, Manifesto, Terminal, Midnight, Almanac, Garden, Quiet, Riso, Sport, Bloom, Coral, Violet, Aurora, Halo, Plume, Editorial). Each one is a fixed combination of paper-band, display-style, and accent-hue. The rotation rule cycles through them so two consecutive runs don't read alike. **This is the default.** Most briefs use it.
-- **custom** — made-to-measure. A one-off palette + font pairing constructed specifically for one brief. The skill builds the OKLCH values, picks fonts, and stamps the page — but does **not** extend the catalog with a new theme. The rules behind the catalog (paper L bands, accent chroma caps, font ban list, slop-test gates) all still apply; only the *combination* is per-brief.
+- **catalog** — the named-theme catalogue. Hallmark's 20 themes (Specimen, Midnight, Brutal, Garden, Atelier, Newsprint, Terminal, Manifesto, Almanac, Sport, Studio, Riso, Bloom, Coral, Cobalt, Aurora, Editorial, Carnival, Lumen, Hum). Each one is a fixed combination of paper-band, display-style, and accent-hue. The rotation rule cycles through them so two consecutive runs don't read alike. **This is the default.** Most briefs use it.
+- **custom** — made-to-measure, at the depth the brief needs:
+  - **Tuned** — a one-off OKLCH palette + font pairing built for one brief, *keeping* Hallmark's structures, archetypes, and macrostructures. The rules (paper L bands, accent chroma caps, font ban list, all slop-test gates) still apply; only the *combination* is per-brief.
+  - **Bespoke** — when the brief's *structure itself* is the ask, custom goes further and designs the whole page from first principles — its own palette, type, **and** composition — dropping the catalog's structures too, floored only by the universal slop-test gates. Same route, deeper end. See **§ Bespoke depth** below.
+
+  Either way, custom does **not** extend the catalog with a permanent theme.
 
 ## When to surface this fork — Step 1 trigger signals
 
@@ -15,12 +19,13 @@ Hallmark must **not** offer catalog-vs-custom on every prompt. That's friction,
 
 1. **Explicit ask** — the user types `custom`, "custom theme", "tailored to our brand", "make it ours", "something unique", "play around with the colors and fonts", "I want my own palette".
 2. **Named brand colour** — the user gives a specific anchor colour as a hex / OKLCH / brand name. Example: "use our terracotta", "the brand red is hex #c0392b", "anchor on sea-blue".
-3. **Multi-attribute aesthetic the catalog can't carry** — three or more vibe words pointing at a specific, off-catalog feel. Examples: "moss, lichen, soft pink, herbal" / "sun-drenched, market-day, carbon-black" / "late-night, neon, brutalist deli". Compare against the 22 catalog themes; if no single catalog theme is within one axis-step of the vibe, fire the fork. **One adjective ("warm", "technical", "playful") is not a signal — that's a tone, the catalog already carries it.**
+3. **Multi-attribute aesthetic the catalog can't carry** — three or more vibe words pointing at a specific, off-catalog feel. Examples: "moss, lichen, soft pink, herbal" / "sun-drenched, market-day, carbon-black" / "late-night, neon, brutalist deli". Compare against the 20 catalog themes; if no single catalog theme is within one axis-step of the vibe, fire the fork. **One adjective ("warm", "technical", "playful") is not a signal — that's a tone, the catalog already carries it.**
 4. **Brand-mood reference attached** — the user attaches a colour swatch, a moodboard, a Pantone chip. (If they attach a *page* screenshot, route to `study` instead; custom is for brand colour / mood, study is for design DNA.)
+5. **A singular structural vision** (→ the *bespoke* depth) — the brief names a *structure or composition*, not just a palette/mood: "no theme / from scratch / fully bespoke / ignore the catalog / art-direct it", or a one-of-a-kind page-shape the macrostructure catalog has no entry for (a scroll-assembling poem, a ticket-shaped page, an interactive periodic table). Routes to custom's **bespoke depth** (§ Bespoke depth below). A palette or mood that's merely off-catalog is *tuned* custom, not bespoke.
 
 If any signal fires, ask one short follow-up before picking a theme:
 
-> *"This brief reads like a custom palette would fit better than the 22 named themes. Want me to construct a custom OKLCH palette + free-font pairing tuned to <one-line summary of the vibe>, or stay on the catalog for variety + speed?"*
+> *"This brief reads like a custom palette would fit better than the 20 named themes. Want me to construct a custom OKLCH palette + free-font pairing tuned to <one-line summary of the vibe>, or stay on the catalog for variety + speed?"*
 
 Wait for the user to answer. If they say custom (or yes / go) → continue this protocol from § A. If they say catalog (or no / stay catalog) → drop the fork and proceed with the catalog route. **Default to catalog** — silence routes to catalog, not custom.
 
@@ -42,6 +47,39 @@ If the user gives just two or three words ("sun-drenched"), proceed; the recipe
 
 ---
 
+## § Bespoke depth — custom that designs the whole page
+
+Most custom runs are *tuned* (a palette + pairing on Hallmark's existing structures). **Bespoke** is the deep end, fired by signal 5: the brief's *structure itself* is the ask and no catalog shape fits. At this depth custom designs the page from first principles — palette, type, **and** composition — and the only thing it inherits is the floor.
+
+Confirm the route once (same discipline as any custom — default to catalog on silence), then take **one** input: *"the direction in a sentence or two — what should this page feel like and do that an off-the-shelf theme wouldn't?"*
+
+**It drops** (only at this depth):
+- the named-theme tokens — write the palette inline for this page only (§ B still governs *how*);
+- the genre cluster routing — no editorial / atmospheric / modern-minimal / playful archetype defaults;
+- the fixed macrostructure + archetype catalog — compose the page's structure for the brief; a novel hero, nav, or section is *encouraged* when it serves the idea;
+- the diversification rotation — bespoke is a one-off (like studied-DNA), though it shouldn't clone a recent bespoke run.
+
+**It keeps** — the non-negotiable floor, identical to tuned custom:
+- **every universal slop-test gate** ([`slop-test.md`](slop-test.md)) — the guarantee that survives the freedom;
+- accessibility & contrast (APCA / WCAG), a visible `:focus-visible`, `prefers-reduced-motion`, semantic landmarks, alt text;
+- the **font ban-list** (Gate 1) and free-baseline-only discipline (§ C);
+- **OKLCH palette discipline** (§ B) — tinted neutrals, no pure `#000`/`#fff`, accent kept to a signal unless the concept earns more;
+- one orchestrated motion; the Step 5 preview before code; the Step 6 stamp + log.
+
+**Process:** read the brief + the one-line direction → design the *system and the one central move* (the idea that makes it not-a-template) → run the gates *as you compose* → surface the preview (palette, type, structure, central idea) → build, stamp, log. Bespoke is **more** design judgment, not less — a bespoke page that reads generic, or trips a gate, has failed; re-design.
+
+**Stamp (bespoke runs):**
+```css
+/* Hallmark · route: custom (bespoke) · structure: <one-line shape> · idea: "<central move>"
+ * paper: oklch(...) · accent: oklch(...) · display: <font> · body: <font>
+ * axes: <paper-band> / <display-style> / <accent-hue> · gates: all-pass · studied: no
+ */
+```
+
+**Bespoke is rare.** Most briefs are catalog; some are tuned custom; few are bespoke. Reaching for bespoke on a vanilla brief is over-reach — route to catalog.
+
+---
+
 ## § B · Palette construction
 
 Build the palette in this order. Each step cites the rule it's obeying — do not restate the rule, just apply it.
@@ -95,9 +133,9 @@ These are not arbitrary. The L-step gives the palette **typographic depth** with
 
 ### B.7 · Verification
 
-- **Gate 8** (no pure #000 / #fff base): paper and ink both have chroma > 0. Pass.
-- **Gate 24** (no zero-chroma neutrals): every grey has chroma ≥ 0.005. Pass.
-- **Gate 25** (accent ≤ 5 % footprint): plan the accent's role on the page (active state, one wordmark dot, one CTA fill). Don't carpet a section in accent.
+- **Gate 7** (no pure #000 / #fff base): paper and ink both have chroma > 0. Pass.
+- **Gate 22** (no zero-chroma neutrals): every grey has chroma ≥ 0.005. Pass.
+- **Gate 23** (accent ≤ 5 % footprint): plan the accent's role on the page (active state, one wordmark dot, one CTA fill). Don't carpet a section in accent.
 
 ---
 
@@ -213,7 +251,7 @@ Custom runs extend the existing schema with a `theme_axes` field and an optional
   "brief": "Coffeebox · subscription" }
 ```
 
-Catalog entries continue to record `theme: <name>` and skip `theme_axes` (the catalog's axes are looked up from [`tokens.css`](../../site/css/tokens.css)). Step 2.5 logic uses the same diversification check on both — for catalog entries it reads the axes from tokens.css; for custom entries it reads them from the entry.
+Catalog entries continue to record `theme: <name>` and skip `theme_axes` (the catalog's axes are looked up from [`tokens.css`](../../../site/css/tokens.css)). Step 2.5 logic uses the same diversification check on both — for catalog entries it reads the axes from tokens.css; for custom entries it reads them from the entry.
 
 When rotating, **a custom run that follows another custom run must differ on at least one axis from the previous custom** — same rule as catalog-vs-catalog. A custom run that follows a catalog run must differ on at least one axis from the catalog's axes. The diversification rule is theme-route-blind.
 
@@ -321,7 +359,7 @@ The vibe names two hues: *moss* (greenish, ~140°) and *soft pink* (warm, ~350°
 ## What custom does **not** do (worth restating)
 
 1. **Does not invent themes that ignore the rules.** Every paper L band, accent chroma cap, neutral-tinting requirement, font ban, and slop-test gate carries forward. The freedom is the *combination* — not the rules.
-2. **Does not save themes for reuse.** A custom run is per-output. The skill does not write back to [`tokens.css`](../../site/css/tokens.css). If the user wants a permanent theme, they paste the custom palette into tokens.css themselves and name it.
+2. **Does not save themes for reuse.** A custom run is per-output. The skill does not write back to [`tokens.css`](../../../site/css/tokens.css). If the user wants a permanent theme, they paste the custom palette into tokens.css themselves and name it.
 3. **Does not ask multiple follow-up questions.** One vibe answer (+ optional anchor) is enough. The audience/use/tone from Step 1 plus the brief plus the macrostructure pick already give the model 80 % of the signal.
 4. **Does not relax the diversification rule.** Custom entries declare their three axes the same way catalog entries do; the rotation rule fires on both, theme-route-blind.
 5. **Does not bypass the Step 5 preview.** The custom palette + pairing surface in plain text *before* any code is emitted, so the user can redirect early.

package/templates/vite/.howone/skills/hallmark/references/export-formats.md

@@ -116,7 +116,7 @@ Or, if the project uses a CSS bundler / framework that doesn't honour bare `@imp
 }
 ```
 
-**Worked example — modern-minimal theme (Quiet-like):**
+**Worked example — modern-minimal theme (austere, pure-white):**
 
 ```css
 :root {

package/templates/vite/.howone/skills/hallmark/references/genres/atmospheric.md

@@ -8,33 +8,35 @@ Brief mentions any of: *AI tool, generative, music, video, image, voice, late-ni
 
 ## Themes that belong
 
-`Bloom` (canonical), `Midnight`, `Terminal`. Three dark-paper themes; the rotation walks them when atmospheric is active.
+`Bloom` (canonical light-paper), `Midnight`, `Terminal`, `Aurora`, `Lumen`. Five themes; the rotation walks them when atmospheric is active.
+
+`Lumen` is the premium AI-tool register — Modal / Anthropic / Together / ElevenLabs / Cluely / Adept / Granola. One focal CSS artefact + classical italic-serif headline + mono technical eyebrow. **Two palette drops** (Night Foundry — dark amber-gold, emits; Day Foundry — light indigo, refracts). The only atmospheric theme with a serif display and the only one whose canvas treatment is one *built* artefact rather than two diffuse blooms.
 
 ## Voice
 
 - **Display** — Geist Sans 600 or similar weighty sans, plain English, no ornament. Letter-spacing tight (`-0.03em` or tighter).
 - **Body** — same family, 400. Light grey on dark (`oklch(86% 0.008 40)`).
-- **Accent** — single warm hue (orange / amber / red / pink). Used in radial-gradient blooms on the canvas, on focus rings, on small tags. Never on display text (that's gate 5 universal — gradient text stays banned).
+- **Accent** — single warm hue (orange / amber / red / pink). Used in radial-gradient blooms on the canvas, on focus rings, on small tags. Never on display text (that's gate 2 universal — gradient text stays banned).
 - **Layout** — centred or near-centred heroes. The canvas itself is the design; the type sits on top of an atmospheric ground.
 - **Motion** — fade-in only. No slide, no bounce. The atmosphere does the work.
 - **Copy tone** — direct, slightly poetic, specific. *"Make a house song about quitting your job."* is the calibration.
 
 ## What this genre allows
 
-- **Radial-gradient bloom** on the body background — up to two blooms, each ~20–30 % footprint, fixed-attached, no animation. Gate 31 universal is loosened here.
-- **Centred heroes** — gate 7 universal is loosened. The canvas frames the type.
+- **Radial-gradient bloom** on the body background — up to two blooms, each ~20–30 % footprint, fixed-attached, no animation. Gate 29 universal is loosened here.
+- **Centred heroes** — gate 6 universal is loosened. The canvas frames the type.
 - **Pill-rounded CTAs** with accent fill — confident, not pastel.
 - **Glow shadows** on hover (cards lift toward the user with a soft warm shadow).
 - **Larger expressive type** — display can hit 6 rem (`clamp(3rem, 6vw + 1rem, 6rem)`).
 
 ## What this genre disallows
 
-- **Light-paper aesthetics** — the canvas is dark. Don't sneak white sections in.
-- **Italic serif body** — atmospheric stays sans top-to-bottom.
+- **Light-paper aesthetics** — the *default* canvas is dark. Bloom and Lumen's Day Foundry are the documented light-paper exceptions; both still emit/refract light from a focal canvas treatment. Don't sneak white sections into a dark-paper build.
+- **Italic in headers** — banned globally (a top AI tell). Atmospheric display is roman; Lumen ships Instrument Serif as a **roman** headline face, with the verb landmark carried by accent colour + a drawn underline, never italics. Body stays Geist Sans.
 - **Hairlines** — atmospheric uses elevated cards (`paper-2`, `paper-3`) instead of hairline-on-paper.
 - **Multiple accent hues** — one warm bloom + one secondary (pink/red) is the maximum. No teal-and-amber juggling.
 - **Glassmorphism** — banned. Atmospheric is *atmospheric*, not glass.
-- **Gradient text** — gate 5 universal. Stays banned.
+- **Gradient text** — gate 2 universal. Stays banned.
 
 ## Voice fixtures
 
@@ -43,6 +45,8 @@ Brief mentions any of: *AI tool, generative, music, video, image, voice, late-ni
 - *"A canvas, then a tool."*
 - *"Generate, refine, ship — between Tuesday and Wednesday."*
 - *"The instrument is dark. The output is yours."*
+- *"Built to think in real time."* — Lumen voice; the verb is the landmark via accent colour + underline, never italics.
+- *"A single primitive that scales down to zero."* — Lumen voice; technical, declarative.
 
 ## Nav and footer voice
 

package/templates/vite/.howone/skills/hallmark/references/genres/editorial.md

@@ -10,11 +10,13 @@ Default. Pick editorial when the brief does not name a specialised aesthetic —
 
 ## Themes that belong
 
-`Specimen`, `Newsprint`, `Atelier`, `Garden`, `Salon`, `Linen`, `Almanac`, `Studio`, `Riso`, `Sport`, `Brutal`, `Manifesto`. Twelve themes — plenty of variety inside the genre.
+`Specimen`, `Newsprint`, `Atelier`, `Garden`, `Almanac`, `Studio`, `Riso`, `Sport`, `Brutal`, `Manifesto`, `Editorial`, `Carnival`. Twelve themes — plenty of variety inside the genre.
+
+`Carnival` is the loud-maximalist editorial register — Dropout TV / Fly.io / Stones Throw / Third Man Records. Duo-tone accent system (mustard + oxblood), chunky variable display, decorative ornaments, hard-offset shadows. The loud sibling to Riso / Manifesto / Brutal.
 
 ## Voice
 
-- **Display** — italic serif, condensed sans, or display-heavy. Not Inter. Not Geist. The weight commits to an extreme (300 or 700+).
+- **Display** — roman serif, condensed sans, or display-heavy. Not Inter. Not Geist. The weight commits to an extreme (300 or 700+). Italic is body-emphasis only — never the header face (global rule).
 - **Body** — workhorse serif (Newsreader, Cormorant) or a plain non-default sans (The Future, Söhne). Readable at 45–75 ch.
 - **Accent** — single warm or cool hue, used at < 5 % of any viewport.
 - **Layout** — asymmetric. Hairlines, not card borders. Generous whitespace.
@@ -35,11 +37,11 @@ Default. Pick editorial when the brief does not name a specialised aesthetic —
 The universal slop-test gates apply, plus these editorial-specific bans:
 
 - **Pill-rounded buttons** with gradient fill — pill is fine, gradient on a pill is not.
-- **Centred-everything heroes** (gate 7 universal). Editorial heroes are left-biased or asymmetric.
+- **Centred-everything heroes** (gate 6 universal). Editorial heroes are left-biased or asymmetric.
 - **Card-in-card** layouts (gate 4 universal).
 - **Three-column equal-icon-tile feature grid** (gate 3 universal).
 - **Glassmorphism** — never; the medium is paper, not glass.
-- **Pure black or pure white** as paper or ink (gate 8). Tint everything toward the anchor.
+- **Pure black or pure white** as paper or ink (gate 7). Tint everything toward the anchor.
 
 ## Voice fixtures
 

package/templates/vite/.howone/skills/hallmark/references/genres/modern-minimal.md

@@ -8,7 +8,11 @@ Brief mentions any of: *SaaS, enterprise, API, platform, developer tool, infra,
 
 ## Themes that belong
 
-`Quiet` (canonical). Future themes can be added to this genre — anything monochrome or near-monochrome with Geist / Inter-class sans display and pill CTAs.
+`Coral` (canonical) — warm-grey paper, single warm coral accent, Geist throughout, soft pill CTAs. The "Stripe-not-Linear" warmth.
+
+`Cobalt` — the cool dev-tool / API / docs register (the GitBook + Firecrawl school, executed **cobalt-on-light, not orange**). Cool engineered near-white paper, one electric cobalt signal accent, Space Grotesk display + Inter body + JetBrains Mono code, ruler-drawn hairlines, tight 6 px radii, a bordered ⌘K nav, and a live code/API request–response hero. The technical, instrument-panel sibling to Coral's warmth — the rotation walks Coral ⇄ Cobalt when modern-minimal is active.
+
+The two differ on every axis a glance registers: Coral is warm-grey + coral + Geist + pills; Cobalt is cool-white + electric blue + Space Grotesk/mono + tight-radius bordered controls. Future themes can join this genre too — anything monochrome or near-monochrome with an Inter-class sans display and a single restrained accent.
 
 ## Voice
 
@@ -22,8 +26,8 @@ Brief mentions any of: *SaaS, enterprise, API, platform, developer tool, infra,
 ## What this genre allows
 
 - **Pill-rounded CTAs** — both filled and outlined. Black-filled primary + white-outlined secondary is the canonical pair.
-- **Pure white paper** (`#fff` / `oklch(100% 0 0)`) — gate 8 is loosened here.
-- **Zero-chroma neutrals** — gate 24 is loosened here. The Stripe / ElevenLabs school is monochrome by design.
+- **Pure white paper** (`#fff` / `oklch(100% 0 0)`) — gate 7 is loosened here.
+- **Zero-chroma neutrals** — gate 22 is loosened here. The Stripe / ElevenLabs school is monochrome by design.
 - **Two-column hero with title-left + paragraph-right** — explicitly canonical for this genre.
 - **Refined card surface** with very subtle border (`oklch(91% 0 0)`) and 8 px radius.
 - **Large, tight-set displays** (`clamp(2.5rem, 5vw + 0.5rem, 4.75rem)`).
@@ -34,8 +38,8 @@ Brief mentions any of: *SaaS, enterprise, API, platform, developer tool, infra,
 - **Hairline-everything** — borders are thin but visible, not the editorial 0.5 px hairline aesthetic.
 - **Asymmetric prose columns** — modern-minimal aligns left, justified to a regular grid.
 - **Drop caps, fleurons, ornament** — none of it.
-- **Bouncy / overshoot easings** — gate 13 universal applies strictly here.
-- **Gradient text** — gate 5 universal. Stays banned.
+- **Bouncy / overshoot easings** — gate 12 universal applies strictly here.
+- **Gradient text** — gate 2 universal. Stays banned.
 - **Glassmorphism** — banned.
 
 ## Voice fixtures
@@ -52,7 +56,7 @@ Brief mentions any of: *SaaS, enterprise, API, platform, developer tool, infra,
 - **Acceptable also:** N1 Wordmark + 2 links (when destinations are genuinely minimal); N9 Edge-aligned minimal (when the brand earns the silence).
 - **Default footer:** Ft2 Inline single line — wordmark + tagline + tiny credit, hairline rule above. Restrained.
 - **Acceptable also:** Ft1 Mast-headed; Ft5 Statement (when the page wants a closing line).
-- **Banned for modern-minimal:** N6 Newspaper masthead (editorial vocabulary); N7 Brutal slab (fights the restraint); Ft8 Marquee scroll (kinetic, wrong voice); Ft3 Index columns at full saturation (the AI-footer fingerprint — gate 52).
+- **Banned for modern-minimal:** N6 Newspaper masthead (editorial vocabulary); N7 Brutal slab (fights the restraint); Ft8 Marquee scroll (kinetic, wrong voice); Ft3 Index columns at full saturation (the AI-footer fingerprint — gate 43).
 
 See [`component-cookbook.md`](../component-cookbook.md) § Navigation and § Footers for the full archetypes + code.
 

package/templates/vite/.howone/skills/hallmark/references/genres/playful.md

@@ -8,7 +8,9 @@ Brief mentions any of: *fun, consumer, casual, family, kids, friendly, approacha
 
 ## Themes that belong
 
-`Plume` (canonical). The genre is small intentionally — playful is easy to overdo.
+`Hum` (vibrant, alive) is the genre's canonical theme — the post-Brilliant-alive register: multi-accent cream + pear + cyan + coral, mandatory motion, a single character moment. Pick it when the brief wants "feels alive in the room with you." For the quieter, more restrained end of friendly — "friendly but soft" rather than "alive" — reach instead for modern-minimal (Coral): a single low-chroma accent on warm paper, smooth easings, motion optional.
+
+`Hum` is the catalog's only **rounded-sans-multi-accent** theme — it relaxes several playful defaults: bouncy spring easings are allowed (and canonical) on its primary CTA, accent chroma goes higher than 0.16, and motion is mandatory not optional. It answers a specific brief: a learning platform for curious adults, a daily-curiosity app, a habit tracker with character — products that should feel warm and alive, not merely tidy.
 
 ## Voice
 
@@ -29,20 +31,23 @@ Brief mentions any of: *fun, consumer, casual, family, kids, friendly, approacha
 
 ## What this genre disallows
 
-- **Saturated consumer-app pinks / purples** — colour stays low chroma even if friendly.
+- **Saturated consumer-app pinks / purples** — playful keeps chroma low by default. **Hum is the documented exception** — pear-yellow at chroma 0.18, sky-cyan at 0.18, coral at 0.24 are allowed and canonical for Hum builds only.
 - **Emoji-as-decoration** — emoji can appear in copy ("we built X 🌱") but never as visual ornament replacing iconography.
-- **Comic Sans, Comic Neue, anything that signals "we're zany"** — playful stays sophisticated.
-- **Bouncy / overshoot easings** — gate 13 universal. Even playful uses smooth easings.
+- **Comic Sans, Comic Neue, anything that signals "we're zany"** — playful stays sophisticated, even at full vibrancy.
+- **Bouncy / overshoot easings** — playful uses smooth easings by default. **Hum is the documented exception** — spring overshoot (`cubic-bezier(0.34, 1.56, 0.64, 1)`) is canonical on the primary CTA and character moment (one each per page).
 - **Glassmorphism** — banned across all genres.
-- **Gradient text** — gate 5 universal. Stays banned.
+- **Gradient text** — gate 2 universal. Stays banned.
 
 ## Voice fixtures
 
-- *"Made for teams who write together."*
-- *"Soft, but exact."*
-- *"Software can be soft and exact at once. That's the trick."*
-- *"For the people who keep things tidy."*
-- *"A small tool, gently opinionated."*
+- *"Made for teams who write together."* — Hum voice
+- *"Soft, but exact."* — Hum voice
+- *"Software can be soft and exact at once. That's the trick."* — Hum voice
+- *"A small tool, gently opinionated."* — Hum voice
+- *"Your daily 30-second curio."* — Hum voice
+- *"Get really good at one thing this quarter."* — Hum voice
+- *"Notice yourself, in 30 seconds."* — Hum voice
+- *"Learn something genuinely new today."* — Hum voice
 
 ## Nav and footer voice
 

package/templates/vite/.howone/skills/hallmark/references/hero-enrichment.md

@@ -68,7 +68,7 @@ If the brief contains explicit visual cues, pick from this map:
   • "bakery", "kitchen", "café", "atelier" + craft brief  → E5 custom illustration (Tier B SVG)
   • "agency", "studio", "portfolio"                       → E8 photography or no enrichment
   • "manifesto", "essay", "book", "letter"                → no enrichment (typography only)
-  • Quiet theme picked                                    → no enrichment (the theme IS restraint)
+  • Coral theme picked                                    → no enrichment (the theme IS restraint)
 
 Else if the brief is genuinely ambiguous, ask one question:
   "Want me to add a demo video, an illustration, or keep it
@@ -99,7 +99,7 @@ A display headline left, a demo video right, and the rightmost ~10–20 % of the
 - Aspect ratio (16/10 · 16/9 · 4/3)
 - Frame treatment (hairline 1 px frame · browser chrome · none)
 
-**Example.** Tracejam (SaaS observability — see [`site/_tests/05-tracejam-saas/`](../../site/_tests/05-tracejam-saas/)). Display headline left ("Distributed tracing that explains itself."); hand-built CSS-art trace waterfall right, tilted -0.4°, extending 12 vw past the viewport's right edge. Aspect 16/10. Hairline frame. **Not a real video** — the mockup is custom-built CSS at Tier A (rectangles on a percentage grid simulating a flame chart). Mobile (< 60 rem): drop the clip, stack vertically.
+**Example.** Tracejam (SaaS observability — see [`site/_tests/05-tracejam-saas/`](../../../site/_tests/05-tracejam-saas/)). Display headline left ("Distributed tracing that explains itself."); hand-built CSS-art trace waterfall right, tilted -0.4°, extending 12 vw past the viewport's right edge. Aspect 16/10. Hairline frame. **Not a real video** — the mockup is custom-built CSS at Tier A (rectangles on a percentage grid simulating a flame chart). Mobile (< 60 rem): drop the clip, stack vertically.
 
 ```html
 <section class="hero hero--clipped">
@@ -204,7 +204,7 @@ A hand-built SVG (the default, Tier B) or a generated raster (Tier C, when chara
 - Animation (none · loop · scroll-linked)
 - Scale (small accent · dominant)
 
-**Example.** Maple Street Bread (bakery — see [`site/_tests/03-maple-bakery/`](../../site/_tests/03-maple-bakery/)). Letter-style hero copy left ("Saturday, 6:14 a.m. The dough went in at midnight."), 60-line hand-built SVG loaf right, 3 paths (body, shade, score-marks). Animated with `@property --rise` for a subtle 4 px breathing-loop over 6 s, alternating; the score-marks draw themselves on first paint via `stroke-dasharray`. Tier B, dominant scale, animation: loop. Reduced-motion fallback is a static keyframe.
+**Example.** Maple Street Bread (bakery — see [`site/_tests/03-maple-bakery/`](../../../site/_tests/03-maple-bakery/)). Letter-style hero copy left ("Saturday, 6:14 a.m. The dough went in at midnight."), 60-line hand-built SVG loaf right, 3 paths (body, shade, score-marks). Animated with `@property --rise` for a subtle 4 px breathing-loop over 6 s, alternating; the score-marks draw themselves on first paint via `stroke-dasharray`. Tier B, dominant scale, animation: loop. Reduced-motion fallback is a static keyframe.
 
 For *how* to build a hand-drawn loaf in 60 lines of SVG and animate its breath with `@property`, see [`custom-craft.md`](custom-craft.md) — there's a full bakery worked example, plus four more recipes (workflow diagram, mascot, architectural diagram, botanical accent).
 
@@ -227,7 +227,7 @@ A small custom-built loop — an orbiting dot, a breathing rectangle, an animate
 A two-colour CSS gradient at low chroma, overlaid with SVG `<feTurbulence>` grain at < 0.1 opacity. *Not* aurora; *not* purple-to-cyan mesh; *not* floating orbs. The point is *texture you can barely see* — paper-quality, not decoration.
 
 *Use when:* the page would feel synthetic with a flat surface.
-*Avoid when:* the theme already has a paper feel (Specimen, Linen, Riso). Doubling the grain is muddy.
+*Avoid when:* the theme already has a paper feel (Specimen, Atelier, Riso). Doubling the grain is muddy.
 
 **Knobs:**
 - Gradient direction (45° / 135° / radial)
@@ -358,10 +358,10 @@ hero?.addEventListener('pointermove', (e) => {
 
 ### HP4 · Decorative-numeral
 
-A huge edition number / year / chapter glyph set in display-italic in a hero corner. The numeral *means something* — issue 22, year 2026, chapter 03, version 0.8. Reads as editorial · salon · newsprint · almanac.
+A huge edition number / year / chapter glyph set in display-italic in a hero corner. The numeral *means something* — issue 22, year 2026, chapter 03, version 0.8. Reads as editorial · newsprint · almanac.
 
 *Use when:* the page genuinely has an edition / issue / chapter / version semantic — magazines, journals, archived work, dated essays.
-*Avoid when:* the numeral has no semantic anchor. A random "42" in the corner reads as decoration, which is slop (see slop-test gate 55).
+*Avoid when:* the numeral has no semantic anchor. A random "42" in the corner reads as decoration, which is slop (see slop-test gate 45).
 
 ```html
 <header class="hero hero--num">
@@ -385,9 +385,10 @@ A huge edition number / year / chapter glyph set in display-italic in a hero cor
 
 Every hero — enriched or not, polished or not — obeys these rules.
 
-- **Footprint.** The hero takes 70–90 % of the first viewport's height — no more, no less. `min-height: 100vh / 100dvh` is the AI fingerprint (gate 7); a hero that's only 20 % of the viewport feels like a header. Aim for `min-height: clamp(60vh, 75dvh, 88dvh)` and let content settle inside.
-- **Asymmetric padding.** `padding-block-end` ≥ 1.3× `padding-block-start`. The hero sits *into* the page; symmetric padding floats. Slop-test gate 54 enforces this.
-- **Never centre everything.** Eyebrow + title + lede + CTA all stacked centred is the AI fingerprint. Pick at most *two* centred elements; break alignment for the others. Gate 53 enforces this. Centred-narrow heroes are admissible only when the genre is editorial / salon / atelier *and* the eyebrow or CTA breaks alignment.
+- **Footprint.** The hero takes 70–90 % of the first viewport's height — no more, no less. `min-height: 100vh / 100dvh` is the AI fingerprint (gate 6); a hero that's only 20 % of the viewport feels like a header. Aim for `min-height: clamp(60vh, 75dvh, 88dvh)` and let content settle inside.
+- **Fit the fold — content, not just the box.** The Footprint rule caps the hero's *height*; this caps its *content*. On a 13″ laptop (~800 px tall) the eyebrow + headline + lede + primary CTA must all be visible **without scrolling**. When they aren't, it's almost always wasted vertical space — an oversized display `clamp()` max, display line-height near 1.2, a 3-line lede, or `padding-block` bloat. Pull the clamp max down, set display line-height 1.0–1.1, hold the lede to ~2 lines, trim the padding. **Right-size, don't cramp** — a hero that already fits needs no shrinking, and this never means tiny type or no whitespace. Slop-test gate 44 enforces this.
+- **Asymmetric padding.** `padding-block-end` ≥ 1.3× `padding-block-start`. The hero sits *into* the page; symmetric padding floats. Slop-test gate 44 enforces this.
+- **Never centre everything.** Eyebrow + title + lede + CTA all stacked centred is the AI fingerprint. Pick at most *two* centred elements; break alignment for the others. Gate 6 enforces this. Centred-narrow heroes are admissible only when the genre is editorial / atelier *and* the eyebrow or CTA breaks alignment.
 - **Entrance animation.** Pick one of {fade, sweep, none} per element — never both fade *and* sweep on the same element. Duration ≤ 220 ms. Disable on `prefers-reduced-motion: reduce`. Cross-reference the "One orchestrated reveal per page" rule below.
 - **Headline typography.** Prefer one display weight + tight tracking (-0.02em to -0.04em) over default 0; line-height 0.95–1.05 for display, never 1.2 (which inherits the body line-height and reads as un-set type). Avoid two display weights on the same headline (a `<strong>` in a different weight inside the title is AI's idea of "emphasis"; pick one weight, let the words carry).
 - **One polish pattern, max.** HP1–HP4 are mutually exclusive on a single hero. A vertical rail *and* a marquee-overflow *and* a cursor spotlight *and* a decorative numeral on one hero is a panic attack. Pick one.
@@ -438,7 +439,7 @@ Every question must answer *yes* before the enrichment ships. If any answer is *
 5. If illustration: built or generated with intent? **Not picked from a Lottie library as a shortcut?**
 6. If background: under one accent colour at < 5 % footprint? (Aurora and mesh-gradients fail this.)
 7. Does it survive being deleted? (If the hero still works without it, it earned its place. If the hero collapses without it, you propped weak typography on a crutch.)
-8. Does its tone match the page's tone? (Risograph illustration on a Brutal page = wrong. Hand-drawn doodle on a Workbench developer-tool page = wrong. Three.js bloom on a Quiet page = wrong.)
+8. Does its tone match the page's tone? (Risograph illustration on a Brutal page = wrong. Hand-drawn doodle on a Workbench developer-tool page = wrong. Three.js bloom on a Coral page = wrong.)
 
 The slop test ([`SKILL.md`](../SKILL.md) §5) carries four binary gates that mirror these questions; the audit verb runs them.
 
@@ -454,7 +455,7 @@ When you ship enrichment, the macrostructure stamp records the choice:
  * polish: HP3 Cursor-spotlight (scoped to hero, reduced-motion fallback pinned at 50%/30%)
  * nav: N5 Floating pill · footer: Ft5 Statement
  * craft: tier-A CSS art (no real video — pure custom-built mockup)
- * theme: Linen · accent: steel-blue ~3% · studied: no
+ * theme: Newsprint · accent: steel-blue ~3% · studied: no
  */
 ```
 
@@ -468,7 +469,7 @@ This signals to future Hallmark runs (and to the audit verb) what was chosen and
 
 - **Defaulting to E5 illustration on every brief.** Most heroes don't want an illustration. Reach for E0 (typography only) first; reach for E1–E4 when there's a *thing* to show; reach for E5 only when illustration genuinely matches the tone.
 - **Using a stock Lottie checkmark as the hero animation.** That's tier E used to skip tiers A–D. Build the checkmark in pure CSS (`stroke-dasharray` animated to draw the tick); it's 8 lines.
-- **Adding a grain background everywhere.** Grain is a treatment, not a default. Half the existing themes already carry texture (Riso, Linen, Specimen). Don't double up.
+- **Adding a grain background everywhere.** Grain is a treatment, not a default. Half the existing themes already carry texture (Riso, Atelier, Specimen). Don't double up.
 - **Treating the abstract background as the hero.** It isn't. The headline is. The background is paper.
 - **Shipping the unmodified Storyset SVG.** That's tier D ungrounded — the library look. Customise the colour to your anchor hue at minimum; recompose if you can.
 - **A clipped-edge video on mobile.** The clip reads as broken on a 375-px viewport. Always collapse to stacked at < 60 rem.