From 85dd1a42a7bc2cfa9bc8d8122e4b724701e27c87 Mon Sep 17 00:00:00 2001 From: Youssef Date: Mon, 4 May 2026 15:02:36 +0100 Subject: [PATCH] =?UTF-8?q?Hallmark=20skill=20=E2=80=94=20N5=E2=80=93N9=20?= =?UTF-8?q?navs=20=C2=B7=20Ft5=E2=80=93Ft8=20footers=20=C2=B7=20HP1?= =?UTF-8?q?=E2=80=93HP4=20hero=20polish=20=C2=B7=20Terminal=20cursor=20con?= =?UTF-8?q?straint=20=C2=B7=20gates=2051=E2=80=9355=20(55=20total)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Skill-only changes (no demo-site touches per user direction): - component-cookbook.md: Navigation 4→9 (N5 Floating pill · N6 Newspaper masthead · N7 Brutal slab · N8 Terminal command · N9 Edge-aligned minimal) + Footers 4→8 (Ft5 Statement · Ft6 Letter close · Ft7 Newsletter-first · Ft8 Marquee scroll), each with code, real-world refs, anti-patterns, and routing tables per genre. - hero-enrichment.md: HP1 Vertical-rail · HP2 Marquee-overflow · HP3 Cursor-spotlight · HP4 Decorative-numeral, plus a Hero space discipline subsection (footprint 70–90%, padding-block-end ≥ 1.3× start, no centred-everything, one polish pattern max). - structure.md: theme fingerprint table extended to all 22 themes with Nav + Footer columns; Terminal "no standalone cursor" constraint codified. - microinteractions.md: Caret blink rule rewritten — cursor allowed only INSIDE typed commands, never as standalone decoration. - anti-patterns.md: "The AI nav" + "The AI footer" entries name the genre-blind fingerprints to refuse. - slop-test.md: gates 51–55 (Nav fingerprint · Footer fingerprint · Hero centred-everything · Hero padding asymmetry · Decorative-without-purpose). Header 50→55. - SKILL.md: Step 2 gains nav + footer pick + diversification rule; component-scope flow clarifies skip; gate count 50→55. - 4 genre files: each gets a "Nav and footer voice" routing block. - macrostructures.md: cross-references HP1–HP4 + nav/footer from component-cookbook. Tests: skill/_tests/nav-footer-variety/{01..05} — 5 fresh briefs (podcast · CLI · atmospheric SaaS · photographer · B2B SaaS) demonstrating 5 different navs (N5–N9), 5 different footers, and 4 different hero polish patterns. The Terminal output places its caret only inside typed commands. Co-Authored-By: Claude Opus 4.7 (1M context) --- README.md | 6 +- skill/SKILL.md | 24 +- .../01-tide-podcast/index.html | 132 +++++++++ .../02-streampipe-cli/index.html | 133 +++++++++ .../03-nimbus-saas/index.html | 161 +++++++++++ .../04-marlow-photo/index.html | 143 ++++++++++ .../05-helix-b2b/index.html | 170 +++++++++++ skill/_tests/nav-footer-variety/notes.md | 44 +++ skill/references/anti-patterns.md | 16 ++ skill/references/component-cookbook.md | 263 ++++++++++++++++++ skill/references/custom-theme.md | 2 +- skill/references/genres/atmospheric.md | 12 +- skill/references/genres/editorial.md | 12 +- skill/references/genres/modern-minimal.md | 12 +- skill/references/genres/playful.md | 12 +- skill/references/hero-enrichment.md | 134 +++++++++ skill/references/macrostructures.md | 10 + skill/references/microinteractions.md | 4 +- skill/references/slop-test.md | 18 +- skill/references/structure.md | 42 +-- skill/references/verbs/redesign.md | 2 +- 21 files changed, 1316 insertions(+), 36 deletions(-) create mode 100644 skill/_tests/nav-footer-variety/01-tide-podcast/index.html create mode 100644 skill/_tests/nav-footer-variety/02-streampipe-cli/index.html create mode 100644 skill/_tests/nav-footer-variety/03-nimbus-saas/index.html create mode 100644 skill/_tests/nav-footer-variety/04-marlow-photo/index.html create mode 100644 skill/_tests/nav-footer-variety/05-helix-b2b/index.html create mode 100644 skill/_tests/nav-footer-variety/notes.md diff --git a/README.md b/README.md index 797e3a4..a8d1e77 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ **A design skill that studies what you admire — and rebuilds your content with it.** → Live demo: **[hallmark-murex.vercel.app](https://hallmark-murex.vercel.app)** · twenty-two themes, eight worked tests, press `T` to cycle. -→ Current version: **v0.8.0** — adds genres (editorial · modern-minimal · atmospheric · playful), `design.md` for whole-project redesigns, lazy reference loading, the 2+1 font rule with 50-gate slop test, component-library exports (tokens.css always emitted; Tailwind / DTCG / shadcn formats inline in design.md), a Study gallery on the marketing site, and seven new themes (Quiet refreshed, plus Bloom, Coral, Violet, Aurora, Halo, Plume). +→ Current version: **v0.8.0** — adds genres (editorial · modern-minimal · atmospheric · playful), `design.md` for whole-project redesigns, lazy reference loading, the 2+1 font rule with 55-gate slop test, component-library exports (tokens.css always emitted; Tailwind / DTCG / shadcn formats inline in design.md), a Study gallery on the marketing site, and seven new themes (Quiet refreshed, plus Bloom, Coral, Violet, Aurora, Halo, Plume). @@ -97,7 +97,7 @@ Each page is its own self-contained HTML + CSS — no shared theme, no shared la ## What's inside -- **[`SKILL.md`](skill/SKILL.md)** — the routing file. Six-step design flow (including `Step 2.5 · Check project memory` reading `.hallmark/log.json`), 50-gate slop test, output contract, always-on `tokens.css` export. +- **[`SKILL.md`](skill/SKILL.md)** — the routing file. Six-step design flow (including `Step 2.5 · Check project memory` reading `.hallmark/log.json`), 55-gate slop test, output contract, always-on `tokens.css` export. - **[`references/`](skill/references/)** — short, opinionated rule files: typography, colour, layout, motion, microinteractions, interaction-and-states (with the input-state checklist), responsive, copy, anti-patterns, the 21 named macrostructures, the 36 component archetypes with variation knobs, the 6 primitive structure axes, the vision-extraction protocol for `study`, hero enrichment, custom-craft (CSS art over Lottie), assets, the slop-test gates, four genre rule-overlays, per-verb dispatchers, and the export-formats reference (Tailwind / DTCG / shadcn / tokens.css). - **[`docs/`](docs/)** — human-reading content: **[`recipes.md`](docs/recipes.md)** (8 worked briefs + a canonical try-it prompt) and **[`study-examples.md`](docs/study-examples.md)** (3 worked DNA-extractions). Not auto-loaded by the skill. - **[`site/`](site/)** — a self-demonstrating landing page. Hand-written HTML + CSS + ES module, no framework, no build step. **Twenty-two themes** clustered into four genres: **editorial** (Specimen, Atelier, Newsprint, Salon, Linen, Almanac, Garden, Studio, Sport, Riso, Brutal, Manifesto), **modern-minimal** (Quiet, Coral, Violet), **atmospheric** (Midnight, Terminal, Bloom, Aurora, Halo), **playful** (Pastel, Plume). Switching themes literally rebuilds the page — different hero archetype, different footer archetype. @@ -112,7 +112,7 @@ Each page is its own self-contained HTML + CSS — no shared theme, no shared la - **Macrostructures over axes.** Pick one of 21 named whole-page shapes wholesale; the macrostructure stamp lives in the CSS comment, so the next Hallmark run picks something different. - **Within-archetype variation.** Two Bento Grids should not be twins; each archetype has 2–3 picked-per-output knobs. - **Microinteractions as discipline.** Silent success over celebratory toasts. Optimistic update + Undo over confirm dialogs. Hover delay 800 ms, focus delay 0 ms. -- **A 50-gate slop test** runs before every output. One yes fails the build. Recent additions: typography discipline gates (39–40: max three font families per page, outlier face used in ≤ 2 slots) and input-state gates (41–45: no border-width layout shift, focus ring via outline not border, input height matches button height, helper-text slot reserves height, disabled state needs three independent signals). +- **A 55-gate slop test** runs before every output. One yes fails the build. Recent additions: typography discipline gates (39–40: max three font families per page, outlier face used in ≤ 2 slots), input-state gates (41–45: no border-width layout shift, focus ring via outline not border, input height matches button height, helper-text slot reserves height, disabled state needs three independent signals), contrast gates (46–50: APCA / WCAG thresholds, accent-ink token requirement, dark-section ink-on-ink check), and **nav · footer · hero structural gates (51–55: AI nav fingerprint, AI footer fingerprint, hero centred-everything, hero padding asymmetry, decorative-without-purpose)**. - **Project memory.** A per-project `.hallmark/log.json` records each run's macrostructure + theme + enrichment + brief summary. The skill reads the last 3–5 entries before picking and writes a new entry after each build, so consecutive Hallmark outputs in the same project don't repeat shapes or themes. - **Theme-diversification rule.** Two consecutive themes must differ on at least one of three axes: paper band (dark / mid / light), display style (italic-serif / roman-serif / geometric-sans / mono / display-heavy / system-native), accent hue (warm / cool / neutral / chromatic-other). - **Voice fixtures over LLM defaults.** Each of the 21 macrostructures ships with 2–3 example opening lines tuned to its tone. "Built for the modern team" is in the banned-phrases list. diff --git a/skill/SKILL.md b/skill/SKILL.md index 627066b..041c6da 100644 --- a/skill/SKILL.md +++ b/skill/SKILL.md @@ -59,6 +59,8 @@ If two signals fire, route component. If only the page flow fires (multi-section ### What Component-scope skips - **Step 2 · Macrostructure pick.** Components don't have macrostructures. State this explicitly: *"Component-scope: skipping macrostructure."* +- **Nav and footer archetype picks.** N1–N9 and Ft1–Ft8 are page-scope only. A component is one element; it has no nav, no footer. Skip both. +- **Hero polish patterns (HP1–HP4).** Page-scope only. A button or card has no hero. - **Step 4 · Enrichment.** No hero illustration, no demo video, no abstract background. The component IS the artifact. - **Step 5 · Multi-section preview.** Replaced by the 8-state demo wrapper (below). - **Project-memory append.** No `.hallmark/log.json` entry for component runs. The diversification rule doesn't apply. @@ -242,6 +244,12 @@ If the brief is genuinely vague (no theme, no tone), do **not** default. Offer t The macrostructure picks five of the six structural axes for you; you only need to pick the reveal yourself. The deeper axis catalogue is still in [`references/structure.md`](references/structure.md) when you need to deviate from the macrostructure's defaults. +**Pick a nav archetype (N1–N9) and a footer archetype (Ft1–Ft8) at this step.** They are not optional chrome; they are part of the page's structural fingerprint. Read the routing tables in [`references/component-cookbook.md`](references/component-cookbook.md) § Navigation and § Footers — the genre's default plus the acceptable alternates. State both picks alongside the macrostructure: *"Macrostructure: Marquee Hero. Nav: N5 Floating pill. Footer: Ft5 Statement. Theme: Bloom."* + +**Default away from N1 and Ft3.** N1 (wordmark + 4–5 inline links + button-right at full width) and Ft3 (4 columns of links + social row + tiny copyright) are the most-recognised AI fingerprints. Reach for N5–N9 and Ft1/Ft2/Ft4/Ft5/Ft6/Ft7/Ft8 by default; reach for N1 only when the page genuinely has 2 destinations and the genre allows it; reach for Ft3 only on a genuine docs root or hub. + +**Diversification extends to nav + footer.** Across consecutive Hallmark runs in the same project session (per `.hallmark/log.json`), no two outputs should share the same nav archetype OR the same footer archetype. If the previous run used N5 + Ft5, the next picks N6/N7/N8/N9 + Ft1/Ft2/Ft4/Ft6/Ft7/Ft8 from the routing tables. The nav and footer picks are recorded in the macrostructure stamp at Step 6. + ### 2.5. Check project memory If the project has a `.hallmark/log.json` file (created by previous Hallmark runs), **read it before** picking the macrostructure or theme. The schema is a JSON array, newest entry first: @@ -289,7 +297,7 @@ By the time you reach this step, one of three things is true: **Custom is a quiet branch, not a default question.** Most briefs route to catalog and the user never sees the words "catalog" or "custom." The 22 named themes plus the rotation rule already deliver structural variety; the fork is reserved for when the brief specifically asks for a tuned look the catalog can't carry. -A custom theme is a **complete** OKLCH palette + font pairing tuned to the brief — not a one-off colour swap, not an excuse to bypass the rules. Every constraint in [`color.md`](references/color.md), [`typography.md`](references/typography.md), and [`anti-patterns.md`](references/anti-patterns.md) still applies. The 50 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. +A custom theme is a **complete** OKLCH palette + font pairing tuned to the brief — not a one-off colour swap, not an excuse to bypass the rules. Every constraint in [`color.md`](references/color.md), [`typography.md`](references/typography.md), and [`anti-patterns.md`](references/anti-patterns.md) still applies. The 55 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 diversification rule is theme-route-blind: a custom run that follows another custom (or a catalog) must differ on at least one of the three axes from the previous entry, same as catalog-vs-catalog. Custom entries record their three axes explicitly into `.hallmark/log.json` (see [`custom-theme.md`](references/custom-theme.md) § F). @@ -357,7 +365,7 @@ Before emitting any code, output a tight summary of what you're about to ship. T - **Enrichment** · none (typography only) - **Sections** · Hero · Logos · Stats · Features · Testimonials · Pricing · FAQ · CTA · Footer - **Motion** · counter · pricing-lift · pulse-once -- **Slop test** · 50 / 50 ✓ (run after Build) +- **Slop test** · 55 / 55 ✓ (run after Build) - **Diversification** · differs from Pastel on display style + accent hue ``` @@ -368,7 +376,7 @@ Before emitting any code, output a tight summary of what you're about to ship. T 3. **Enrichment** — the chosen archetype + tier, or *none (typography only)*. 4. **Sections** — section names separated by ` · `, in DOM order. 5. **Motion** — microinteraction primitives separated by ` · `, or *none — typography only*. Always under three primitives per the [`microinteractions.md`](references/microinteractions.md) hard rules. -6. **Slop test** — `50 / 50 ✓` if all gates pass, or `N / 50 — fails: ` if any are open. Run the slop test BEFORE writing this row; the slop test is Step 7. +6. **Slop test** — `55 / 55 ✓` if all gates pass, or `N / 55 — fails: ` if any are open. Run the slop test BEFORE writing this row; the slop test is Step 7. 7. **Diversification** *(optional, only when `.hallmark/log.json` has prior entries)* — what axes differ vs the previous run. **Three more sample preview blocks** for the model to imitate, varied across macrostructure types: @@ -381,7 +389,7 @@ Before emitting any code, output a tight summary of what you're about to ship. T > - **Enrichment** · Tier-B hand-built SVG (a 60-line coffee bean with `@property --rise` 6 s breathing-loop) > - **Sections** · Masthead · Letter · Three Notes · Visit · Colophon > - **Motion** · breathing-loop on bean only (respects `prefers-reduced-motion`) -> - **Slop test** · 50 / 50 ✓ +> - **Slop test** · 55 / 55 ✓ > - **Diversification** · first run for this project *Bento Grid (SaaS, motion-on):* @@ -392,7 +400,7 @@ Before emitting any code, output a tight summary of what you're about to ship. T > - **Enrichment** · E1 Clipped-Edge Demo Video, Tier-A CSS-art trace waterfall > - **Sections** · Hero · 6-tile Bento (stat · sparkline · quote · code · integrations · spotlight) · Index Footer > - **Motion** · counter · pricing-lift · CSS marquee on integrations strip -> - **Slop test** · 50 / 50 ✓ +> - **Slop test** · 55 / 55 ✓ > - **Diversification** · differs from Plain on paper hue (light-cool vs pure-white) + accent (indigo vs ink-blue) *Manifesto (declarative, no enrichment):* @@ -403,7 +411,7 @@ Before emitting any code, output a tight summary of what you're about to ship. T > - **Enrichment** · none (typography only — voice carries the brand) > - **Sections** · Masthead · Title · Five Declarations · Bleed Band · What We Refuse · Working Rules · Practice · Reading · Colophon > - **Motion** · none — typography only -> - **Slop test** · 50 / 50 ✓ +> - **Slop test** · 55 / 55 ✓ > - **Diversification** · differs from Linen on paper band (dark vs light) + display style (display-heavy vs geometric-sans) *Custom (Coffeebox archival café):* @@ -414,7 +422,7 @@ Before emitting any code, output a tight summary of what you're about to ship. T > - **Enrichment** · Tier-A pure-CSS coffee bean (60-line SVG, breathing-loop optional) > - **Sections** · Masthead · Letter · Three Notes · Visit · Colophon > - **Motion** · breathing-loop on bean (with reduced-motion fallback) -> - **Slop test** · 50 / 50 ✓ +> - **Slop test** · 55 / 55 ✓ > - **Diversification** · custom axes: light / italic-serif / chromatic-terracotta — differs from previous catalog Linen on accent hue + display style If any slop-test gate fails when you reach Step 7, return to the relevant Build step, fix it, and **re-emit the preview block** with the corrected slop-test row. The preview is the durable summary; it's wrong to ship if it lies. @@ -442,7 +450,7 @@ Always: ### 7. The slop test -Before handing back, run the output through the 50-gate slop test in [`references/slop-test.md`](references/slop-test.md). Every answer must be **no**. Load that file at this step (not earlier — it isn't needed until handoff). The active genre matters: some gates are universal, some are genre-scoped (atmospheric loosens the radial-bloom gate; modern-minimal loosens the zero-chroma neutral gate; etc.). The full per-genre overrides are listed inline in `slop-test.md`. +Before handing back, run the output through the 55-gate slop test in [`references/slop-test.md`](references/slop-test.md). Every answer must be **no**. Load that file at this step (not earlier — it isn't needed until handoff). The active genre matters: some gates are universal, some are genre-scoped (atmospheric loosens the radial-bloom gate; modern-minimal loosens the zero-chroma neutral gate; etc.). The full per-genre overrides are listed inline in `slop-test.md`. Run the slop test BEFORE writing the Slop test row in the Step 5 preview block — that row reflects the actual outcome of this step. diff --git a/skill/_tests/nav-footer-variety/01-tide-podcast/index.html b/skill/_tests/nav-footer-variety/01-tide-podcast/index.html new file mode 100644 index 0000000..6a3f571 --- /dev/null +++ b/skill/_tests/nav-footer-variety/01-tide-podcast/index.html @@ -0,0 +1,132 @@ + + + + + +Tide — letters from the studio + + + + +
+

No 04 · Spring 2026 · Tide

+

Tide

+ + +
+ +
+ +
+

A letter to the listeners · Sunday, 12 April

+

Dear Tide listener,

+

This is the fourth season. We've kept the format short on purpose — one host, one guest, one idea, forty minutes. The shape works. We'd rather record fewer episodes that earn their place than fill a feed.

+

If you've subscribed since season three, this letter is yours too. The archive is open, the whole forty-three episodes, no paywall, no ads inside the audio.

+

Yours,
— Tide

+ +
+ +
+

What's in this season.

+

Six conversations with people who've quietly shaped how we work — a typeface designer, a brewer, a high-school English teacher, a back-office accountant who runs a 15-person bakery, and two more we're still recording. Each episode opens with a letter — five paragraphs, written by hand the morning before — and closes with one question we'd like the next listener to bring to dinner.

+

We publish on the second Sunday of every month. The next letter is due on the eleventh.

+
+ +
+ +
+

Yours,
— Tide

+

P.S. — letters back welcome at hello@tide.fm. We read them on Sunday mornings.

+
+ + + diff --git a/skill/_tests/nav-footer-variety/02-streampipe-cli/index.html b/skill/_tests/nav-footer-variety/02-streampipe-cli/index.html new file mode 100644 index 0000000..daee87a --- /dev/null +++ b/skill/_tests/nav-footer-variety/02-streampipe-cli/index.html @@ -0,0 +1,133 @@ + + + + + +streampipe — open-source stream processing for the terminal + + + + +
+ 
> streampipe --install --docs --examples --source
+
+ +
+ +
+

v2.4.0 · MIT · 12k stars

+

Stream processing for the terminal.

+

streampipe is a single-binary tool that runs SQL over Kafka, Redis Streams, NATS, and stdin. No daemon, no broker, no JVM. Composes with your existing UNIX pipeline.

+

Install

+ 
$brew install streampipe
+
+ +
+

01 · Examples

+

Three lines that read a Kafka topic and emit JSON.

+ 
$ streampipe \
+   --source kafka://localhost:9092/orders \
+   --sql "select customer, sum(total) as gross from orders group by customer" \
+   --sink stdout:json
+
+ +
+

02 · Sources, sinks, formats

+

Reference

+
+ + + + + + + + + + +
FlagDescriptionExample
--sourceStream input. Accepts kafka://, redis://, nats://, file://, stdin.kafka://broker:9092/topic
--sinkStream output. Accepts the same protocols + stdout.stdout:json
--sqlSQL transformation. Standard select/where/group-by/join."select * where amount > 100"
--watermarkEvent-time watermark. Default: 30s.--watermark 60s
--checkpointPath for state. Required for stateful queries../state.db
+ + + + +
+

streampipe v2.4.0 · MIT licensed · built in Go · 12k stars on GitHub · zero runtime dependencies · macOS · Linux · Windows · single static binary · 8 MB · <a href="https://github.com/streampipe/streampipe">source</a> · <a href="/docs">docs</a> · <a href="/changelog">changelog</a> · maintained by 4 people · 137 contributors · last release 2026-04-12 · sha 3a94f · powered by goroutines and a shoestring budget

+
+ + + diff --git a/skill/_tests/nav-footer-variety/03-nimbus-saas/index.html b/skill/_tests/nav-footer-variety/03-nimbus-saas/index.html new file mode 100644 index 0000000..520ad07 --- /dev/null +++ b/skill/_tests/nav-footer-variety/03-nimbus-saas/index.html @@ -0,0 +1,161 @@ + + + + + +Nimbus — atmospheric trading desk + + + + + + +
+ +
+ +
+

Spot · Margin · Perpetuals · Active in 84 markets

+ $2.4B +

notional volume cleared in the last 24 hours, with a single API and one balance.

+

Nimbus is a non-custodial trading desk for the calm trader. Open positions in spot, margin, and perpetuals from one account. Trades clear in 380 ms p99. We don't run leveraged retail ads.

+ See live markets → +
+
+ +
+
+

380ms

+

order-to-fill, 99th percentile, last 7 days

+
+
+

84

+

spot + perpetual markets, audited monthly

+
+
+

0.02%

+

maker fee on the deepest tier, paid by inventory

+
+
+ +
+ +
+

Calm markets. Honest fees. No retail ads.

+
+ Nimbus + © 2026 · Audited by ChainSec · Reg-D +
+
+ + + + + diff --git a/skill/_tests/nav-footer-variety/04-marlow-photo/index.html b/skill/_tests/nav-footer-variety/04-marlow-photo/index.html new file mode 100644 index 0000000..9f501f7 --- /dev/null +++ b/skill/_tests/nav-footer-variety/04-marlow-photo/index.html @@ -0,0 +1,143 @@ + + + + + +Marlow & Co. — wedding photography + + + + +
+ Marlow & Co. + Enquire → +
+ +
+ +
+ +
+

Selected work · 2026 · Plate 04

+

Photographs that look like the day actually was.

+

A small studio for weddings, family portraits, and the quiet days after. Twelve commissions a year, photographed on film, scanned, printed, archived. We're booked into autumn 2026; the spring 2027 list opens in October.

+
+
+ +
+
+
+ Plate 04 · Anna & Sam · 12 April 2026 + Hasselblad 500CM · Portra 400 · Garden ceremony +
+
+ +
+

A few of last year's commissions.

+
    +
  1. 01Anna & Sam — garden ceremony, TuscanyApril 2026
    2. +
  2. 02The Okonkwo family — winter portraitsFebruary 2026
    3. +
  3. 03Maya & Jonas — small civil ceremony, LisbonNovember 2025
    4. +
  4. 04Rivers — first-year archiveOngoing
    5. +
+
+ +
+ +
+
+ +
+ + +
+
+

Marlow & Co. · 12 Marlow Street · © 2026 · No tracking, no third-party email lists.

+
+ + + diff --git a/skill/_tests/nav-footer-variety/05-helix-b2b/index.html b/skill/_tests/nav-footer-variety/05-helix-b2b/index.html new file mode 100644 index 0000000..a24b9f1 --- /dev/null +++ b/skill/_tests/nav-footer-variety/05-helix-b2b/index.html @@ -0,0 +1,170 @@ + + + + + +Helix — feature flags for grown-up teams + + + + +
+ HELIX + + START FREE +
+ +
+ +
+

FEATURE FLAGS, GROWN UP.

+

Helix is a feature-flag service for teams who want fewer surprises. Type-safe SDKs, audit trails, deterministic targeting. Used by 1,200 engineering teams to ship without holding their breath.

+
+ Start free → + Book a 20-min demo +
+
+ +
+
+ 99.97% + SDK uptime · last 90 days · measured externally +
+
+

Type-safe SDK · TypeScript, Go, Python, Ruby

+

Every flag is a typed export. No magic strings.

+ 
// flags.ts — generated from your dashboard
+import { flags } from "@helix/sdk";
+if (flags.checkout_redesign(user)) {
+  return <CheckoutV2 />;
+}
+
+
+

Deterministic targeting

+

Same input, same flag value — every time. Replayable, auditable, no drift.

+
+
+

Audit trail

+

Every flag change writes a row. Who, what, when, why — and the diff.

+
+
+
"We replaced four years of if-statements with Helix in a week. The audit trail alone paid for it."
+ — Maya Okonkwo · Staff Engineer, Ridgeline +
+
+ +
+ +
+

Helix

+

Feature flags for teams that ship on Friday afternoons.

+

+ Docs · + Pricing · + Imprint · + © 2026 · SOC 2 type II +

+
+ + + diff --git a/skill/_tests/nav-footer-variety/notes.md b/skill/_tests/nav-footer-variety/notes.md new file mode 100644 index 0000000..a2b501d --- /dev/null +++ b/skill/_tests/nav-footer-variety/notes.md @@ -0,0 +1,44 @@ +# Test pass — nav · footer · hero polish variety + +Five outputs, each generated by following the updated skill (`SKILL.md` flow + `component-cookbook.md` § Navigation / § Footers + `hero-enrichment.md` § Hero shape polish). Each tests a different combination of the new archetypes. + +## Variety matrix + +| # | Brief | Genre | Macrostructure | Nav | Footer | Hero polish | Theme | +| --- | --- | --- | --- | --- | --- | --- | --- | +| 01 | Tide — indie podcast | editorial | Letter | **N6** Newspaper masthead | **Ft6** Letter close | **HP4** Decorative-numeral (issue 04) | Salon | +| 02 | streampipe — CLI | modern-minimal/terminal | Workbench | **N8** Terminal command | **Ft4** Dense colophon | none (terminal allows no decoration) | Terminal | +| 03 | Nimbus — atmospheric SaaS | atmospheric | Stat-Led | **N5** Floating pill | **Ft5** Statement | **HP3** Cursor-spotlight | Bloom | +| 04 | Marlow & Co. — photography | editorial | Photographic | **N9** Edge-aligned minimal | **Ft7** Newsletter-first | **HP1** Vertical-rail | Atelier | +| 05 | Helix — B2B SaaS | modern-minimal | Bento Grid | **N7** Brutal slab | **Ft1** Mast-headed | **HP2** Marquee-overflow | Specimen-leaning | + +## Verification — does the skill produce variety? + +- [x] **Five different nav archetypes.** N5, N6, N7, N8, N9 — one each. No repeats. +- [x] **Five different footer archetypes.** Ft1, Ft4, Ft5, Ft6, Ft7 — one each. No repeats. +- [x] **Four different hero polish patterns.** HP1, HP2, HP3, HP4 — one each on the polish-enabled outputs. The Terminal output (02) deliberately ships *no* polish pattern, per the genre's decoration constraint. +- [x] **Gate 51 (AI nav fingerprint)** — none of the five outputs use the wordmark-left + 5-link-row + button-right pattern. Pass. +- [x] **Gate 52 (AI footer fingerprint)** — none use the 4-column + social-row + tiny-copyright pattern. Pass. +- [x] **Gate 53 (centred-everything hero)** — none stack eyebrow + title + lede + CTA all centred. Pass. +- [x] **Gate 54 (hero padding asymmetry)** — every hero pads bottom > top. Pass. +- [x] **Gate 55 (decorative-without-purpose)** — every decorative element has a semantic anchor: 01's "04" names issue 4, 02's cursor sits inside a typed command, 03's spotlight responds to interaction, 04's vertical rail names the studio + plate + year, 05 has no decoration. Pass. +- [x] **Terminal cursor constraint** (02) — the blinking caret appears only inside `
` install code blocks and the N8 nav prompt — never as standalone decoration. Pass.
+
+## Routing reads correctly
+
+Cross-checked each pick against the routing tables in `component-cookbook.md`:
+
+- **01 (editorial · Salon):** N6 is the genre default; Ft6 is in the "also OK" set. ✓
+- **02 (terminal · Terminal):** N8 is the genre default; Ft4 is the genre default. ✓
+- **03 (atmospheric · Bloom):** N5 is the genre default; Ft5 is the genre default. ✓
+- **04 (editorial · Atelier):** N9 is in the "also OK" set; Ft7 is in the "also OK" set. ✓ (Both are deliberate alternates rather than defaults — the brief leans atelier-quiet, which the routing allows.)
+- **05 (modern-minimal · Specimen-leaning):** N7 is *not* the modern-minimal default — it's a deliberate cross-genre pick. The N7 voice fits Helix's "FEATURE FLAGS, GROWN UP." brand voice better than the default N5. The skill allows this when justified; the rationale is in the stamp comment.
+
+The five outputs together demonstrate that:
+- Each genre's default routing is honoured when the brief is genre-pure.
+- Cross-genre picks are allowed when the brief justifies them, with the rationale stamped in the CSS comment.
+- Diversification across consecutive runs is preserved — N# and Ft# never repeat.
+
+## Stamps recorded
+
+Every output's CSS opens with a `/* Hallmark · ... */` comment that names: genre, macrostructure, theme, nav, footer, polish (or "none"), slop-test pass, contrast pass, and a one-line brief summary. The stamps are how future Hallmark runs will read each project's history and rotate.
diff --git a/skill/references/anti-patterns.md b/skill/references/anti-patterns.md
index cee0c4e..2e27ecd 100644
--- a/skill/references/anti-patterns.md
+++ b/skill/references/anti-patterns.md
@@ -72,6 +72,22 @@ Producing the Specimen macrostructure (numbered left-margin labels like `01 —
 
 **Fix.** The Specimen macrostructure is one of twenty-one in [`macrostructures.md`](macrostructures.md), not a default. If the brief is vague, pick from the first ten in that file (Bento Grid, Long Document, Marquee Hero, Stat-Led, Workbench, Conversational FAQ, Manifesto, Photographic, Quote-Led, then Specimen). Reach for Specimen only when the brief explicitly says "editorial", "specimen sheet", "type foundry", or names the Specimen theme.
 
+### The AI nav
+
+Wordmark hard-left, 4–5 inline text links (`Features · Pricing · Docs · Blog · About`) centred or right-grouped, a CTA button hard-right, full viewport width, sticky on scroll, white background, 1 px hairline border-bottom. This is the most-recognised AI nav fingerprint — every LLM emits it because every SaaS site that fed the training data shipped it.
+
+**Why it fails.** The shape is genre-blind: it lands the same on a wedding photographer's portfolio, a bakery, a B2B SaaS, and a manifesto. When the nav can't tell you what kind of site you're on, the page is templated.
+
+**Fix.** Pick from the routing table in [`component-cookbook.md`](component-cookbook.md) § Navigation. The genre routes you to one of N5–N9: Floating pill (modern-minimal / atmospheric), Newspaper masthead (editorial), Brutal slab (playful), Terminal command (CLI), Edge-aligned minimal (luxury / quiet). Reach for N1 *only* when the page genuinely has 2 destinations and the routing table allows it. State the rationale in a one-line comment.
+
+### The AI footer
+
+4 columns of links (Product · Company · Resources · Legal), social-icon row beneath, copyright line at the very bottom, faint 1 px top-border, neutral grey background. Standard SaaS footer, identical across thousands of pages.
+
+**Why it fails.** Same as the AI nav — the shape is genre-blind. A bakery doesn't have a "Resources" column. An editorial page doesn't have a four-link "Legal". The footer should *close the page*, not catalogue its absent sitemap.
+
+**Fix.** Pick from the routing table in [`component-cookbook.md`](component-cookbook.md) § Footers. Default to Ft1 Mast-headed, Ft2 Inline single line, Ft4 Dense colophon, Ft5 Statement, Ft6 Letter close, Ft7 Newsletter-first, or Ft8 Marquee scroll. Use Ft3 Index columns *only* on a genuine hub or docs root with a real sitemap — and even then, never with the social-icon row + tiny copyright tail.
+
 ### Aurora-blob background
 
 Flowing organic mesh blobs in purple-to-pink-to-cyan, layered behind hero text. Looks "premium" until you've seen it on every Dribbble shot since 2022.
diff --git a/skill/references/component-cookbook.md b/skill/references/component-cookbook.md
index 78c6e81..00aee63 100644
--- a/skill/references/component-cookbook.md
+++ b/skill/references/component-cookbook.md
@@ -51,6 +51,15 @@ When you pick an archetype, **state the knob values you chose** in the macrostru
 | **N2 Floating chip** | Anchor: top · bottom · top-right · bottom-left | Content: theme picker · search · navigation | Backdrop: blur · solid · none |
 | **N3 Side-rail** | Side: left · right | Width: 12ch · 16ch · 20ch | Indicator: filled bar · text-only · numbered |
 | **N4 Hidden behind ⌘K** | Trigger: button · keyboard only · both | Surface: modal · sheet · spotlight | Recents: shown · hidden |
+| **N5 Floating pill** | Width: content-sized · max ~720 px · max ~560 px | Backdrop: blur+saturate · solid · subtle gradient | Anchor: top-centred · top-right · top-left |
+| **N6 Newspaper masthead** | Issue line: above wordmark · below wordmark · none | Wordmark size: 3xl · 2xl · xl | Rule: double · single · none |
+| **N7 Brutal slab** | Border weight: 2 px · 3 px · 4 px | Letter-spacing: tracked uppercase · normal | CTA: filled slab · outline block · text-only |
+| **N8 Terminal command** | Prompt: `>` · `$` · `~/$` | Cursor: in-line at end · after final flag · none | Width: full bleed · content · ~80 ch |
+| **N9 Edge-aligned minimal** | CTA shape: outlined · filled pill · text+arrow | Wordmark: serif italic · sans · monospace | Padding-block: tight · default · spacious |
+| **Ft5 Statement** | Sentence width: 28 ch · 38 ch · 50 ch | Wordmark position: under sentence · top-right · none | Rule above meta: hairline · double · none |
+| **Ft6 Letter close** | Signoff: italic · roman · monogram | Postscript: yes · no | Width: 40 ch · 60 ch · 80 ch |
+| **Ft7 Newsletter-first** | Layout: stacked · inline · split (form left · meta right) | Submit style: filled · outline · arrow link | Privacy line: yes · no |
+| **Ft8 Marquee scroll** | Speed: 24 s · 32 s · 48 s | Direction: left · right · alternate (rare) | Glyph: middot · em-dash · slash |
 
 **Anti-pattern:** picking the same knob values across two different outputs is the same kind of templating as picking the same archetype. If your last Bento was `tiles=6, spans=irregular, accent=corner-only`, the next one must change at least one knob.
 
@@ -583,6 +592,117 @@ One large block of text — credits, references, licence, address — in a small
 
 ```
 
+### Ft5 · Statement
+One large display sentence dominates the footer — a closing line, not a sitemap. Wordmark, minimal links, copyright sit beneath in muted small type. Stripe (older), Mailchimp pre-rebrand, agency portfolio closers.
+*Use when:* the page wants a *closing line* — editorial, manifesto, atmospheric. The sentence pairs with the page's argument.
+*Don't confuse with:* Ft1 Mast-headed (which leads with the wordmark, not a sentence).
+
+```html
+

+  
Build something they'll remember.

+  

+    Studio
+    © 2026 · MIT
+  

+

+```
+```css
+.foot-stmt { padding: var(--space-2xl) var(--page-gutter) var(--space-xl); display: grid; gap: var(--space-lg); }
+.foot-stmt__line { font-family: var(--font-display); font-size: clamp(1.75rem, 5vw, 3.25rem); line-height: 1.0; letter-spacing: -0.02em; max-width: 28ch; margin: 0; }
+.foot-stmt__meta { display: flex; justify-content: space-between; align-items: baseline; padding-block-start: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
+```
+
+*Anti-pattern:* using a Statement footer on a docs root or hub. The sentence reads as marketing fluff there; default Ft3 instead.
+
+### Ft6 · Letter close
+Closes the page like a letter — `Yours, the team. 2026.` Optional postscript line beneath. Sets the page as a piece of writing rather than a product.
+*Use when:* the page voice is warm, hand-written, editorial-quiet — Garden, Atelier, Salon, personal sites.
+*Don't confuse with:* Ft1 Mast-headed (which is a wordmark anchor, not a signoff).
+
+```html
+

+  
Yours,
— Studio

+  
P.S. — letters back welcome at hello@studio.

+

+```
+```css
+.foot-letter { padding: var(--space-2xl) var(--page-gutter); max-width: 60ch; }
+.foot-letter__close { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); line-height: 1.4; }
+.foot-letter__sign { font-style: normal; font-weight: 600; }
+.foot-letter__ps { font-size: var(--text-sm); margin-top: var(--space-md); }
+```
+
+*Anti-pattern:* using Ft6 on a stat-led / B2B product page — voice mismatch reads as twee. Reserve for genuinely letter-shaped pages.
+
+### Ft7 · Newsletter-first
+The form (label + input + submit) is the *primary* element of the footer; everything else (wordmark, links, copyright) is set in 12 px muted type beneath. Stratechery, Substack-shaped sites, indie magazines.
+*Use when:* the brand legitimately publishes — and the page above the fold has *already* offered a subscription. The footer is a final invitation, not an ambush.
+*Don't confuse with:* Ft1 (which doesn't ask for anything).
+
+```html
+

+  

+    
+    

+      
+      
+    

+  

+  
Studio · © 2026 · Imprint

+

+```
+```css
+.foot-news { padding: var(--space-2xl) var(--page-gutter); display: grid; gap: var(--space-lg); max-width: 56ch; }
+.foot-news__form label { display: block; font-size: var(--text-sm); margin-block-end: var(--space-2xs); }
+.foot-news__row { display: flex; gap: var(--space-2xs); }
+.foot-news__row input { flex: 1; min-height: 44px; padding-inline: var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper); }
+.foot-news__row input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
+.foot-news__meta { font-size: var(--text-xs); }
+```
+
+*Anti-pattern:* Ft7 when the page never said "subscribe" above the fold. The footer is an honest *conclusion*; if you didn't ask, don't ambush. Drop to Ft2 instead.
+
+### Ft8 · Marquee scroll
+A horizontal infinite-scroll line of repeating tagline + dot separator: `STUDIO · 2026 · STUDIO · 2026 · STUDIO · 2026 ·`. Sport-genre sites, fashion lookbooks, brand-forward agencies.
+*Use when:* the brand voice is loud, kinetic, sport-or-manifesto.
+*Don't confuse with:* Ft4 Dense colophon (which is static text).
+
+```html
+

+  
+  
+

+```
+```css
+.foot-marquee { overflow: hidden; border-top: 2px solid var(--color-ink); }
+.foot-marquee__track { display: flex; gap: var(--space-2xl); white-space: nowrap; padding-block: var(--space-md); animation: foot-marquee 32s linear infinite; }
+.foot-marquee__track span { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em; font-size: clamp(1rem, 2.5vw, 1.5rem); }
+@keyframes foot-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
+@media (prefers-reduced-motion: reduce) { .foot-marquee__track { animation: none; } }
+```
+
+*Anti-pattern:* using Ft8 on editorial / quiet contexts — the motion reads as loud. Pair only with playful / sport / manifesto voices, and always honour `prefers-reduced-motion: reduce`.
+
+---
+
+## Routing — which footer fits which genre
+
+| Genre | Default | Also OK |
+| --- | --- | --- |
+| editorial | **Ft1 Mast-headed** | Ft2, Ft4, Ft6, Ft7 |
+| modern-minimal | **Ft2 Inline single line** | Ft1, Ft5 |
+| atmospheric | **Ft5 Statement** | Ft1, Ft2 |
+| playful | **Ft8 Marquee scroll** | Ft5, Ft3 |
+| terminal | **Ft4 Dense colophon** | Ft2 |
+| docs / reference | **Ft3 Index columns** | Ft1 |
+
+**Diversification.** Same rule as nav — across consecutive Hallmark runs in the same session, no two outputs should share the same footer archetype.
+
+**Default away from Ft3.** The 4-column index footer is the AI fingerprint when used reflexively (Product · Company · Resources · Legal + social row + tiny copyright). Reach for Ft3 only when the page is a hub or docs-root with a genuine sitemap; default to Ft1, Ft2, Ft4, Ft5, Ft6, Ft7, or Ft8 otherwise.
+
 ---
 
 ## Navigation
@@ -639,6 +759,140 @@ No visible nav. The user opens a command palette via `⌘K` to get anywhere. Des
 …
 ```
 
+### N5 · Floating pill
+A rounded full-pill nav, *visibly detached* from the page edges, sitting ~`var(--space-md)` from the top, soft blur backdrop, soft shadow. Reads as contemporary modern-minimal — Vercel, Linear, Framer, Raycast.
+*Use when:* the page is modern-minimal / atmospheric and the hero has a distinct surface or imagery beneath the pill that the blur can sit over.
+*Don't confuse with:* N1 Wordmark + 2 links (which is full-width); N2 Floating chip (which is corner-anchored).
+
+```html
+
+```
+```css
+.nav-pill {
+  position: fixed; inset: var(--space-md) auto auto 50%;
+  transform: translateX(-50%);
+  display: inline-flex; align-items: center; gap: var(--space-md);
+  padding: 0.5rem 0.875rem;
+  background: color-mix(in oklch, var(--color-paper) 78%, transparent);
+  backdrop-filter: blur(14px) saturate(120%);
+  border: var(--rule-hair) solid var(--color-rule);
+  border-radius: 999px;
+  box-shadow: 0 8px 24px -12px oklch(0% 0 0 / 0.18);
+  z-index: 20;
+}
+```
+
+*Anti-pattern:* a "pill" that's ~95 % viewport-wide is just a full-width nav with rounded ends — defeats the point. The pill must be visibly detached and content-sized; if your link list pushes it past ~720 px, drop a link or switch to N1.
+
+### N6 · Newspaper masthead
+Full-width header, large centred wordmark on the top row, thin issue/date line above or below in serif small caps, optional inline link row beneath, double-rule below the whole thing. Reads as editorial, broadsheet — NYT, FT, Vogue.
+*Use when:* the page is editorial, magazine-shaped, or framed as an issue / edition.
+*Don't confuse with:* N1 Wordmark + 2 links (which is asymmetric and small).
+
+```html
+

+  
No 22 · Spring 2026 · Studio

+  
STUDIO

+  
+  
+

+```
+```css
+.nav-mast { display: grid; gap: var(--space-2xs); padding: var(--space-md) var(--page-gutter) 0; text-align: center; }
+.mast-name { font-family: var(--font-display); font-size: clamp(2.25rem, 5vw, 3.75rem); letter-spacing: -0.01em; line-height: 0.95; margin: 0; }
+.mast-line { font-variant: small-caps; letter-spacing: 0.08em; font-size: var(--text-xs); }
+.mast-nav ul { display: inline-flex; gap: var(--space-md); list-style: none; padding: 0; margin: var(--space-2xs) 0 0; }
+.mast-rule.double { border: 0; border-top: var(--rule-hair) solid var(--color-rule); border-bottom: var(--rule-hair) solid var(--color-rule); height: 4px; margin: var(--space-sm) 0 0; }
+```
+
+*Anti-pattern:* using N6 on a SaaS dashboard or a developer-tool product page. The masthead vocabulary belongs to long-form / editorial sites; on a B2B product, it reads as costume.
+
+### N7 · Brutal slab
+A heavy, full-width nav with a 2 px solid border-bottom, all-caps wordmark and tracked uppercase link row, dense rhythm, no shadow, no rounded corners. Reads as Pentagram project pages, Liquid Death, brutalist-leaning agencies.
+*Use when:* the genre is playful (Brutal, Manifesto, Sport) or the brand voice is heavy / declarative.
+*Don't confuse with:* N1 Wordmark + 2 links (which is small and quiet).
+
+```html
+

+  STUDIO
+  
+  GET
+

+```
+```css
+.nav-slab { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--page-gutter); border-bottom: 2px solid var(--color-ink); background: var(--color-paper); }
+.slab-mark { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.04em; }
+.slab-nav ul { display: flex; gap: var(--space-md); list-style: none; padding: 0; margin: 0 0 0 auto; }
+.slab-nav a { text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--text-sm); font-weight: 600; }
+```
+
+*Anti-pattern:* combining N7 with rounded corners, soft shadows, or backdrop-blur — those vocabularies fight. If you reach for blur, drop to N5; if you reach for round, drop to N1.
+
+### N8 · Terminal command
+A nav formatted as a CLI prompt: `> studio --catalog --voice --get▮`. The "links" are command flags. The blinking cursor (`▮`) is allowed *only here* (it has purpose — signals "you'd type next"); never standalone elsewhere on the page. Reads as Vercel CLI docs landing, Charm, Mitchell Hashimoto's site.
+*Use when:* the page is a CLI tool, dev-tool docs, or carries the Terminal theme.
+*Don't confuse with:* N4 ⌘K-only (which is a palette, not a visible bar).
+
+```html
+

+  
> studio --catalog --voice --get

+

+```
+```css
+.nav-term { padding: var(--space-sm) var(--page-gutter); border-bottom: var(--rule-hair) solid var(--color-rule); }
+.nav-term__line { font-family: var(--font-outlier, ui-monospace, "JetBrains Mono", monospace); font-size: var(--text-sm); margin: 0; }
+.nav-term__line .prompt { color: var(--color-accent); padding-right: 0.4ch; }
+.nav-term__line a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 2px; }
+.caret { display: inline-block; width: 1ch; animation: blink 1.05s steps(2) infinite; color: var(--color-accent); }
+@keyframes blink { 50% { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .caret { animation: none; opacity: 1; } }
+```
+
+*Anti-pattern:* using `>` prompt vocabulary on a non-developer site (a wedding photographer's portfolio with a `> view --gallery` nav reads as set decoration). N8 belongs to genuine terminal / CLI brands only.
+
+### 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.
+*Don't confuse with:* N1 Wordmark + 2 links (which fills the middle).
+
+```html
+

+  Studio
+  Get →
+

+```
+```css
+.nav-edge { display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) var(--page-gutter); }
+.nav-edge .wordmark { font-family: var(--font-display); font-size: var(--text-md); }
+```
+
+*Anti-pattern:* adding 4 inline links between the wordmark and CTA "to fill the space". The space *is* the design; if you fill it, you've made N1 with extra steps.
+
+---
+
+## Routing — which nav fits which genre / theme
+
+| Genre / cluster | Default nav | Acceptable also |
+| --- | --- | --- |
+| editorial (Newsprint · Salon · Garden · Linen · Atelier) | **N6 Masthead** | N1, N9 |
+| modern-minimal (Specimen · Pastel · Quiet · Coral · Violet · Plume) | **N5 Floating pill** | N1, N9 |
+| atmospheric (Bloom · Aurora · Halo · Midnight) | **N5 Floating pill** (blur backdrop sells the mood) | N9, N4 |
+| playful (Brutal · Manifesto · Sport · Riso · Studio) | **N7 Brutal slab** | N1, N3 |
+| terminal / CLI (Terminal) | **N8 Terminal command** | N4 ⌘K-only |
+| docs / reference (Almanac) | **N3 Side-rail** | N1, N4 |
+
+**Diversification.** Across consecutive Hallmark runs in the same project session, no two outputs should share the same nav archetype — even when they share a genre. If the previous run used N5 on a modern-minimal page, the next modern-minimal page picks N1 or N9 from the routing table's "also" column.
+
+**Default away from N1.** The most-recognised AI fingerprint is N1 (wordmark + inline link row + button-right) used reflexively. Reach for N5–N9 first; reach for N1 only when the page genuinely has only 2 destinations *and* the genre's routing table allows it.
+
 ---
 
 ## Picking from this file
@@ -693,10 +947,19 @@ Below 60 rem the archetype must still feel like itself — same hierarchy, same
 | **Ft2 Inline single line** | links wrap to multiple lines; separator becomes a soft return | becomes a vertical list |
 | **Ft3 Index columns** | grid 4-col → 2-col | grid 2-col → 1-col; column heads remain |
 | **Ft4 Dense colophon** | unchanged (mono/wraps naturally); reduce padding | font-size step down |
+| **Ft5 Statement** | sentence stays full width; meta row stacks | sentence size step down (clamp floor lifts); meta wraps |
+| **Ft6 Letter close** | unchanged single column; postscript wraps | signoff size step down; postscript italicises if not already |
+| **Ft7 Newsletter-first** | input + button stack vertically; full-width | label moves above input; button is full-width below |
+| **Ft8 Marquee scroll** | unchanged (already designed for narrow); slow speed by ~25 % | speed slows further; track height step down |
 | **N1 Wordmark + 2 links** | unchanged | links wrap to second line if long; wordmark stays |
 | **N2 Floating chip** | chip remains floating; reduce padding | chip widens to support 44 px hit target; never below 280 px |
 | **N3 Side-rail** | rail unsticks and becomes a hamburger trigger above | hamburger becomes the only nav |
 | **N4 ⌘K-only** | hamburger appears for users who don't know ⌘K | unchanged (⌘K equivalent is on-screen tap) |
+| **N5 Floating pill** | pill drops link list, keeps wordmark + CTA; stays detached | becomes a top-anchored corner chip — wordmark left, hamburger right |
+| **N6 Newspaper masthead** | issue line stacks above wordmark; nav links wrap to a second row | wordmark size step down; nav row collapses behind a "menu" disclosure |
+| **N7 Brutal slab** | links wrap to second line; CTA stays right-aligned | links collapse to hamburger; wordmark + hamburger only |
+| **N8 Terminal command** | flags wrap to a second `>` line if needed; cursor stays at the end | becomes a single hamburger labelled `> menu`; cursor visible at line end |
+| **N9 Edge-aligned minimal** | unchanged (already designed for breathing room) | wordmark + CTA stay edge-aligned; CTA pads to 44 px hit target |
 
 **Cross-cutting rules:**
 
diff --git a/skill/references/custom-theme.md b/skill/references/custom-theme.md
index dab0d15..30c8e66 100644
--- a/skill/references/custom-theme.md
+++ b/skill/references/custom-theme.md
@@ -2,7 +2,7 @@
 
 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.
 
-**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 50 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, not the rules.** Every constraint in [`color.md`](color.md), [`typography.md`](typography.md), and [`anti-patterns.md`](anti-patterns.md) still applies. The 55 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.
 
 ## Two words, plain English
 
diff --git a/skill/references/genres/atmospheric.md b/skill/references/genres/atmospheric.md
index 8e4f626..10521f7 100644
--- a/skill/references/genres/atmospheric.md
+++ b/skill/references/genres/atmospheric.md
@@ -44,10 +44,20 @@ Brief mentions any of: *AI tool, generative, music, video, image, voice, late-ni
 - *"Generate, refine, ship — between Tuesday and Wednesday."*
 - *"The instrument is dark. The output is yours."*
 
+## Nav and footer voice
+
+- **Default nav:** N5 Floating pill — the blur backdrop sells the atmospheric mood. The pill sits over the dark canvas and the bloom shows through the blur.
+- **Acceptable also:** N9 Edge-aligned minimal (when the canvas is loud enough that nav should disappear into it); N4 ⌘K-only (when the audience is technical).
+- **Default footer:** Ft5 Statement — closes the page with a sentence. Atmospheric pages argue something; the footer states it.
+- **Acceptable also:** Ft1 Mast-headed; Ft2 Inline single line.
+- **Banned for atmospheric:** N6 Newspaper masthead (editorial vocabulary); N7 Brutal slab (fights the calm); Ft8 Marquee scroll (kinetic, breaks the dark canvas); Ft3 Index columns (AI-footer fingerprint).
+
+See [`component-cookbook.md`](../component-cookbook.md) § Navigation and § Footers for the full archetypes + code.
+
 ## Stamp signature
 
 ```css
-/* Hallmark · genre: atmospheric · macrostructure:  · theme:  · enrichment:  */
+/* Hallmark · genre: atmospheric · macrostructure:  · theme:  · enrichment:  · nav:  · footer:  */
 ```
 
 ## Reference register
diff --git a/skill/references/genres/editorial.md b/skill/references/genres/editorial.md
index 5b063d9..ce33db4 100644
--- a/skill/references/genres/editorial.md
+++ b/skill/references/genres/editorial.md
@@ -51,10 +51,20 @@ Each macrostructure under editorial picks from these opening-line patterns. Imit
 - *"We compose the page like a broadsheet — hairlines, columns, restraint."*
 - *"Restraint, repeated, becomes a signature."*
 
+## Nav and footer voice
+
+- **Default nav:** N6 Newspaper masthead — full-width, large centred wordmark, thin issue/date row in serif small caps, double-rule below. Reads as broadsheet.
+- **Acceptable also:** N1 Wordmark + 2 links (when destinations are minimal); N9 Edge-aligned minimal (when the page is letter-shaped or atelier-quiet).
+- **Default footer:** Ft1 Mast-headed (wordmark anchors a single horizontal band, tagline + small links beside).
+- **Acceptable also:** Ft2 Inline single line; Ft4 Dense colophon (newsprint / almanac voices); Ft6 Letter close (atelier / garden / personal); Ft7 Newsletter-first (when the brand legitimately publishes).
+- **Banned for editorial:** N5 Floating pill (modern-minimal vocabulary), N7 Brutal slab (fights the restraint), Ft8 Marquee scroll (kinetic; wrong genre).
+
+See [`component-cookbook.md`](../component-cookbook.md) § Navigation and § Footers for the full archetypes + code.
+
 ## Stamp signature
 
 Output's CSS comment header reads:
 
 ```css
-/* Hallmark · genre: editorial · macrostructure:  · theme:  · enrichment:  */
+/* Hallmark · genre: editorial · macrostructure:  · theme:  · enrichment:  · nav:  · footer:  */
 ```
diff --git a/skill/references/genres/modern-minimal.md b/skill/references/genres/modern-minimal.md
index a5497f8..e6f9b5f 100644
--- a/skill/references/genres/modern-minimal.md
+++ b/skill/references/genres/modern-minimal.md
@@ -46,10 +46,20 @@ Brief mentions any of: *SaaS, enterprise, API, platform, developer tool, infra,
 - *"Thirty thousand teams build with X."*
 - *"One API. Every channel."*
 
+## Nav and footer voice
+
+- **Default nav:** N5 Floating pill — content-sized, detached from edges, blur backdrop, soft shadow. Vercel / Linear / Framer / Raycast vocabulary.
+- **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).
+
+See [`component-cookbook.md`](../component-cookbook.md) § Navigation and § Footers for the full archetypes + code.
+
 ## Stamp signature
 
 ```css
-/* Hallmark · genre: modern-minimal · macrostructure:  · theme:  · enrichment:  */
+/* Hallmark · genre: modern-minimal · macrostructure:  · theme:  · enrichment:  · nav:  · footer:  */
 ```
 
 ## Reference register (for the LLM, not credited to anyone)
diff --git a/skill/references/genres/playful.md b/skill/references/genres/playful.md
index fd3ca3c..3c04416 100644
--- a/skill/references/genres/playful.md
+++ b/skill/references/genres/playful.md
@@ -44,10 +44,20 @@ Brief mentions any of: *fun, consumer, casual, family, kids, friendly, approacha
 - *"For the people who keep things tidy."*
 - *"A small tool, gently opinionated."*
 
+## Nav and footer voice
+
+- **Default nav:** N7 Brutal slab — heavy uppercase wordmark + tracked uppercase links + 2 px border-bottom. The voice is loud but composed.
+- **Acceptable also:** N1 Wordmark + 2 links (when destinations are minimal); N3 Side-rail (when the page is long-scroll and section-numbered, e.g. Studio).
+- **Default footer:** Ft8 Marquee scroll — horizontal repeating tagline + dot separator. Honours `prefers-reduced-motion: reduce`.
+- **Acceptable also:** Ft5 Statement; Ft3 Index columns (only when the page is a hub).
+- **Banned for playful:** N5 Floating pill (modern-minimal vocabulary, fights the loud register); N6 Newspaper masthead (editorial); Ft6 Letter close (warm-quiet voice; wrong genre).
+
+See [`component-cookbook.md`](../component-cookbook.md) § Navigation and § Footers for the full archetypes + code.
+
 ## Stamp signature
 
 ```css
-/* Hallmark · genre: playful · macrostructure:  · theme:  · enrichment:  */
+/* Hallmark · genre: playful · macrostructure:  · theme:  · enrichment:  · nav:  · footer:  */
 ```
 
 ## Reference register
diff --git a/skill/references/hero-enrichment.md b/skill/references/hero-enrichment.md
index f71cfcf..a178e7e 100644
--- a/skill/references/hero-enrichment.md
+++ b/skill/references/hero-enrichment.md
@@ -244,6 +244,136 @@ Existing H6 archetype in the cookbook. Cross-referenced here for completeness. S
 
 ---
 
+## Hero shape polish — patterns beyond enrichment
+
+The eight enrichment archetypes above (E1–E8) decide *what sits next to the headline*. The four polish patterns below decide *how the headline itself sits* — they affect layout, type, motion, not decoration on top. They are admissible on top of any hero macrostructure (Marquee Hero, Stat-Led, Quote-Led, Letter, Photographic, Clipped). Pick one polish pattern when the hero feels shape-flat — colour-only, symmetric, predictable.
+
+You can ship a hero with one polish pattern *and* one enrichment archetype, but never two polish patterns at once. The hero is a high-stakes surface; one structural choice carries it.
+
+### HP1 · Vertical-rail title
+
+The wordmark or a pull-label runs *vertically* alongside the centred body. CSS: `writing-mode: vertical-rl; text-orientation: mixed;` on the rail; the body sits in normal flow beside it. Reads as studio · atelier · editorial — Japanese-print rhythm, hand-set page furniture.
+
+*Use when:* the hero is otherwise centred or marquee-shaped and the page wants a structural anchor that isn't a rule or a numeral.
+*Avoid when:* the body title is itself big and centred — vertical rail beside huge horizontal display reads as competing axes; pick one direction.
+
+```html
+

+  
+  

+    
A working archive.

+    
Twelve years. Selected projects, in their own time.

+  

+

+```
+```css
+.hero--rail { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2xl); padding: var(--space-2xl) var(--page-gutter); align-items: end; }
+.hero__rail { writing-mode: vertical-rl; text-orientation: mixed; font-family: var(--font-display); font-size: var(--text-sm); letter-spacing: 0.18em; color: var(--color-ink-2); margin: 0; }
+@media (max-width: 60rem) { .hero--rail { grid-template-columns: 1fr; } .hero__rail { writing-mode: horizontal-tb; font-size: var(--text-xs); } }
+```
+
+*Anti-pattern:* vertical text *and* horizontal display title competing at the same scale. Pick one direction; the rail is supporting voice.
+
+### HP2 · Marquee-overflow
+
+The H1 is intentionally larger than the viewport — `overflow-x: clip` on the hero container; the title bleeds past the right edge. Reads as manifesto · brutal · sport — the headline is loud enough that the page can't contain it.
+
+*Use when:* the genre is playful (Brutal, Manifesto, Sport) and the title is *short* (≤ 6 words). Long titles + overflow = noise.
+*Avoid when:* the title carries legal information that must be readable in full (privacy notice, terms page).
+
+```html
+

+  
STOP MAKING UI THAT LOOKS LIKE EVERYONE ELSE'S UI.

+  
Hallmark. A design skill that refuses defaults.

+

+```
+```css
+.hero--overflow { overflow-x: clip; padding: var(--space-2xl) var(--page-gutter); }
+.hero__display--xxl { font-family: var(--font-display); font-weight: 800; font-size: clamp(4rem, 14vw, 14rem); line-height: 0.92; letter-spacing: -0.04em; margin: 0; white-space: nowrap; }
+@media (max-width: 60rem) { .hero__display--xxl { white-space: normal; font-size: clamp(2.5rem, 10vw, 5rem); } }
+```
+
+*Anti-pattern:* `overflow-x: hidden` on `` or `` at the same time as this hero — the clip breaks horizontal scroll behaviour for descendants. Use `overflow-x: clip` only, scoped to the hero container.
+
+### HP3 · Cursor-spotlight
+
+A radial-gradient background that tracks `mousemove`, scoped to the hero only. Reads as atmospheric · modern-minimal SaaS — Linear, Tailwind Labs, Raycast.
+
+*Use when:* the page is atmospheric / dark-paper / SaaS marketing, the hero has empty surface to play under, and the brand voice can carry "tactile, alive".
+*Avoid when:* the cursor would track over content (text, buttons) — pulls focus from reading. Scope the spotlight to a backdrop layer beneath text, never over it.
+
+```html
+

+  
+  

+    
Distributed tracing that explains itself.

+    
Open one trace. See the whole story.

+  

+

+```
+```css
+.hero--spotlight { position: relative; isolation: isolate; padding: var(--space-2xl) var(--page-gutter); overflow: hidden; }
+.hero__spotlight { position: absolute; inset: 0; z-index: -1; background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 30%), color-mix(in oklch, var(--color-accent) 22%, transparent), transparent 60%); transition: background 200ms var(--ease-out); }
+@media (prefers-reduced-motion: reduce) { .hero__spotlight { transition: none; --mx: 50%; --my: 30%; } }
+```
+```js
+// Scope to hero only — never page-wide.
+const hero = document.querySelector('.hero--spotlight');
+hero?.addEventListener('pointermove', (e) => {
+  const r = hero.getBoundingClientRect();
+  hero.style.setProperty('--mx', `${e.clientX - r.left}px`);
+  hero.style.setProperty('--my', `${e.clientY - r.top}px`);
+});
+```
+
+*Anti-pattern:* tracking the cursor across the *whole page* — nausea-inducing, focus-stealing. Scope to hero only. The reduced-motion fallback must pin the gradient to a sensible static position (50% / 30%), not just disable the effect (which would leave a flat surface).
+
+### 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.
+
+*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).
+
+```html
+

+  
Studio · Spring 2026

+  
A working archive.

+  
Twelve years. Selected projects, in their own time.

+  
+

+```
+```css
+.hero--num { position: relative; padding: var(--space-2xl) var(--page-gutter) var(--space-3xl); overflow: hidden; }
+.hero__num { position: absolute; right: var(--page-gutter); bottom: -0.15em; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(8rem, 22vw, 18rem); line-height: 1; color: color-mix(in oklch, var(--color-ink) 8%, transparent); pointer-events: none; user-select: none; }
+@media (max-width: 60rem) { .hero__num { font-size: clamp(5rem, 26vw, 9rem); right: -0.1em; } }
+```
+
+*Anti-pattern:* numerals that mean nothing. The numeral must carry information — issue, year, version, chapter, plate. If you can't name what the number *is*, drop it.
+
+---
+
+## Hero space discipline
+
+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.
+- **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 `` 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.
+
+The decision sequence:
+
+1. Pick the hero macrostructure (Marquee Hero, Stat-Led, Quote-Led, Letter, Photographic, Clipped) — see [`macrostructures.md`](macrostructures.md).
+2. Pick zero-or-one **enrichment archetype** (E1–E8 above).
+3. Pick zero-or-one **polish pattern** (HP1–HP4 above).
+4. Apply the space discipline rules.
+5. Stamp the choices into the macrostructure stamp.
+
+---
+
 ## Animation discipline (hero specifically)
 
 Cross-references [`motion.md`](motion.md), [`microinteractions.md`](microinteractions.md), and [`custom-craft.md`](custom-craft.md). The hero is the highest-stakes animation surface on the page; the rules are tighter here than elsewhere.
@@ -293,11 +423,15 @@ When you ship enrichment, the macrostructure stamp records the choice:
 ```css
 /* Hallmark · macrostructure: Marquee Hero · H1 hero knobs: size=xxl, alignment=left-bias
  * enrichment: E1 Clipped-Edge Video · clip=right, aspect=16/10, frame=hairline
+ * 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: Pastel · accent: indigo ~3% · studied: no
  */
 ```
 
+If no polish pattern is used, omit the `polish:` line — don't fake it. Same for enrichment.
+
 This signals to future Hallmark runs (and to the audit verb) what was chosen and how. It also lets the user see the inferences in one place and redirect if anything's off.
 
 ---
diff --git a/skill/references/macrostructures.md b/skill/references/macrostructures.md
index ca9ae5e..e7215ac 100644
--- a/skill/references/macrostructures.md
+++ b/skill/references/macrostructures.md
@@ -10,6 +10,16 @@ Before picking, check the target codebase for a `/* Hallmark · macrostructure:
 
 When the brief is vague (no theme, no tone), pick from the *first ten* below before reaching for anything in 11–21. The first ten are deliberately the strongest non-Specimen shapes; they cover ~80% of briefs.
 
+## Hero polish patterns
+
+The hero macrostructures (Marquee Hero · Stat-Led · Quote-Led · Letter · Photographic · Clipped) admit one optional **polish pattern** on top of their base shape — HP1 Vertical-rail · HP2 Marquee-overflow · HP3 Cursor-spotlight · HP4 Decorative-numeral. Polish patterns are *structural* (layout / type / motion), not decorative; they live alongside the hero macrostructure rather than replacing it. See [`hero-enrichment.md`](hero-enrichment.md) § Hero shape polish for the catalogue + when each one fits.
+
+A hero may carry one enrichment archetype (E1–E8) AND one polish pattern (HP1–HP4) — but never two polish patterns at once. The decision sequence is: macrostructure → enrichment? → polish? → space discipline.
+
+## Nav and footer voice
+
+Each macrostructure also implies a **nav archetype** (N1–N9) and a **footer archetype** (Ft1–Ft8). The defaults sit in the routing tables in [`component-cookbook.md`](component-cookbook.md) § Navigation and § Footers. Don't ship a hero macrostructure without picking nav + footer alongside — they are part of the page shape, not optional chrome.
+
 ---
 
 ## 01 · Bento Grid
diff --git a/skill/references/microinteractions.md b/skill/references/microinteractions.md
index 61d4f72..6287bcf 100644
--- a/skill/references/microinteractions.md
+++ b/skill/references/microinteractions.md
@@ -31,7 +31,7 @@ For default-on, pick **two or three** from this menu (never more than three prim
 | **Marquee scroll** | Marquee Hero, customer-logo strip | `@keyframes marquee` `translateX(-100%)` over 40–60 s, infinite. Pauses on hover. Reduced-motion: stops the scroll, shows the first three items. |
 | **Stagger reveal** | Testimonials, feature cards, gallery | IntersectionObserver fires on each card; 100 ms stagger; opacity 0 → 1 + `translateY(8px → 0)`; `--ease-out` 400 ms. **One-shot only — never re-fires on scroll.** |
 | **Recommended-tier pulse** | The middle pricing tier | One-shot `@keyframes pulse-border` 2 s, runs once on viewport entry. Subtle: opacity 0.4 → 1 → 0.4 on the border. Don't loop. |
-| **Caret blink** | Terminal hero, code mockup | `@keyframes blink` 1 s steps(2) infinite on a 1ch-wide block. Reduced-motion: solid block, no blink. |
+| **Caret blink** | *Inside* a typed command (install code, terminal nav, code mockup) — never as standalone decoration | `@keyframes blink` 1 s steps(2) infinite on a 1ch-wide block, placed at the end of a typed command line so it reads as a "you'd type next" affordance. Reduced-motion: solid block, no blink. **Hard rule:** the caret must sit inside `
…▮
` or an N8 Terminal nav line — never as a standalone `` floating in a hero. |
 | **Number tick on data update** | Dashboard live values | See *Number tick* recipe below. |
 
 ### Hard rules for default-on motion
@@ -232,7 +232,7 @@ Microinteractions adapt to the theme. The same button press is louder in Brutal
 | Garden | 1.2× | `--ease-out` | Calm. Springs welcome. |
 | Atelier | 1.3× | `--ease-out` (very gentle) | Generous; almost no movement. |
 | Newsprint | 0× | none | Static. Print metaphor. |
-| Terminal | 0× | none, except cursor blink | Print + monospace metaphor. |
+| Terminal | 0× | none, except caret blink *inside* a typed command (N8 nav, install code) | Print + monospace metaphor. **No standalone blinking cursor** — see the Caret blink row above. The caret only blinks where the user would type. |
 | Manifesto | 0.7× | `--ease-out` (sharp) | Snap into place. |
 | Salon | 1.4× | `--ease-out` (very gentle) | Softest. |
 | Linen | 1.2× | `--ease-out` | Calm. |
diff --git a/skill/references/slop-test.md b/skill/references/slop-test.md
index 8aa906b..21b6201 100644
--- a/skill/references/slop-test.md
+++ b/skill/references/slop-test.md
@@ -1,4 +1,4 @@
-# Slop test — 50 gates
+# Slop test — 55 gates
 
 Run this list before handing back any output. Every answer must be **no**. Update the Step 5 preview block's `Slop test` row to reflect the actual outcome of this run.
 
@@ -113,6 +113,22 @@ Thresholds:
 
 The CSS stamp at Step 6 should record the result: `· contrast: pass (46–50)` if all five gates pass, or `· contrast: FAIL gates ` if any are open. Fix before shipping.
 
+## Nav · footer · hero structural slop
+
+Universal — apply to every genre. These gates catch the most-recognised AI fingerprints in nav, footer, and hero shape. They sit alongside the structural-fingerprint gate (gate 9): gate 9 catches the *page* fingerprint; 51–55 catch the *chrome* fingerprints that sit on top of it.
+
+51. **Nav fingerprint.** Is the page's `