Launch · hero sizing, greenfield auto-trigger, section-tag default off

- Hero headline size brackets in typography.md; SKILL.md Step 6 enforces ≤7 words / ≤50 chars when AI-written, aggressive-display themes auto-step down past 50 chars
- SKILL.md frontmatter now auto-fires on greenfield full-page / full-site builds, stays silent on component-scope and iteration on existing styled UI
- Eyebrows / section tags default OFF (anti-patterns.md strengthened); tag-left / header-right two-column section heads banned outright by new slop-test gate 66; structure.md Left-margin + Numbered display and layout-and-space.md Hanging headers marked opt-in only

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

skill/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: hallmark
-description: Use this skill ONLY when the user explicitly wants Hallmark's anti-AI-slop discipline applied. Triggers are narrow on purpose — (1) the user names one of Hallmark's three explicit verbs (`audit`, `redesign`, `study`, e.g. "audit this UI", "redesign this page", "study this screenshot", "study this URL"); (2) the user says a UI "feels AI-generated", "looks templated", "looks like every other AI page", or asks to "make it less AI-generated"; (3) the user attaches a screenshot OR pastes a URL of a design they admire and wants the DNA extracted (the `study` verb); (4) the user invokes the skill by name ("use Hallmark", "/hallmark"). DO NOT trigger on generic UI requests — "design a button", "build me a form", "make a dashboard", "build a landing page", "add a navbar". Those are handled by frontend-design or other UI skills. Hallmark is the opinionated anti-slop ruleset; it should only run when the user explicitly wants that specific discipline, not as a default UI builder.
+description: Use this skill when ANY of these fire — (1) the user names one of Hallmark's explicit verbs (`audit`, `redesign`, `study`, e.g. "audit this UI", "redesign this page", "study this screenshot", "study this URL"); (2) the user says a UI "feels AI-generated", "looks templated", "looks like every other AI page", or asks to "make it less AI-generated"; (3) the user attaches a screenshot OR pastes a URL of a design they admire and wants the DNA extracted (the `study` verb); (4) the user invokes the skill by name ("use Hallmark", "/hallmark"); OR (5) the user asks for a GREENFIELD full-page or full-site build with no existing styled UI to preserve — e.g. "build me a landing page for X", "make the marketing site for Y", "design the homepage for Z", "create a new product page from scratch", "build a portfolio site". DO NOT trigger on (i) component-scope requests ("design a button", "add a navbar", "fix this form", "build me a modal"); (ii) iteration on an existing styled page or codebase ("tweak the spacing", "update the hero copy on my page", "make the CTA bigger", "add a section to this layout") — anything where preserving the current aesthetic matters; (iii) any request inside a codebase that already has a design system or styled pages, unless the user explicitly invokes Hallmark by name. The decisive signal — is there existing styled UI here that the user wants preserved? If yes, stay silent and let frontend-design or other tools handle it. If no (true greenfield page/site), fire.
 version: 1.0.0
 ---
 
@@ -474,6 +474,8 @@ Emit code that satisfies the tone and structural fingerprint. Match the complexi
 
 Always:
 
+- **Hero headline — match font-size to copy length.** When you write the headline yourself (no user-supplied copy), aim for **≤ 7 words and ≤ 50 chars** from the start. For longer headlines, apply the size-by-length brackets in [`typography.md § Hero headline sizing`](references/typography.md): 21–50 chars use `--text-display`; 51–90 chars cap at `--text-display-s`; > 90 chars rewrite shorter or cap at `--text-4xl`. Aggressive-display themes (Brutal, Riso, Manifesto) auto-step down one rung past 50 chars — their 6.5–9rem ceiling is for short statements only.
+- **Section tags / eyebrows — default OFF.** Do NOT emit `01 · THE TOUR`, `02 / FEATURES`, `Chapter Three`, or any uppercase mono-cap section number / kicker / label unless either (a) the user explicitly asked for chapter / step / section numbering, OR (b) the macrostructure is Long Document, Manifesto, or Catalogue numbered AND the content is genuinely ordinal. Cap at 1–2 per page even then. **When a tag IS used, always stack vertical — tag above, heading directly underneath in the same column.** The tag-left / heading-right two-column pattern (a.k.a. hanging header, left-margin label) is banned outright — it is the single most reliable templated-editorial tell, and slop-test gate **66** auto-fails it.
 - Use OKLCH for every colour. Declare tokens as CSS custom properties at `:root`.
 - Use a 4pt spacing scale with semantic names (`--space-sm`, `--space-md`, …).
 - Pick a distinctive display face and a refined body face. Pairings, not single-font pages — *unless* the single-font choice IS the design (a true terminal-aesthetic page is monospace-only on purpose; that's allowed).

skill/references/anti-patterns.md

@@ -138,11 +138,13 @@ Headline centred, body centred, button centred, section after section of centred
 
 ### Eyebrow on every section
 
-Every section starts with an uppercase mono-cap eyebrow — `01 / EXAMPLES`, `02 / WHAT'S INSIDE`, `03 / INSTALL` — above its heading. The labels look like editorial chapters but read as a tic. The page becomes a list of *labelled lists.*
+Every section starts with an uppercase mono-cap eyebrow — `01 / EXAMPLES`, `02 / WHAT'S INSIDE`, `03 / INSTALL`, `01 · THE TOUR` — above (or worse, *beside*) its heading. The labels look like editorial chapters but read as a tic. The page becomes a list of *labelled lists.*
 
-Section eyebrows are an *occasional* device, not a default. Used everywhere they erase the hierarchy they were meant to create — when every section is "chaptered," none of them are.
+Eyebrows are **default OFF**. They are not a stylistic flourish you reach for to look editorial — they are an ordinal device, valid only when the section is genuinely numbered or chaptered. Used as decoration they erase the hierarchy they were meant to create; when every section is "chaptered," none of them are.
 
-**Fix.** Default to no eyebrow. Only use one when the section is genuinely ordinal (a numbered manifesto, a multi-step process, a chaptered long document) or when the section name is too short to read as a heading on its own. At most 1–2 eyebrows per page. If the macrostructure is not Long Document, Manifesto, or Catalogue, ship the page without any.
+**Fix.** Ship the page with **zero eyebrows** unless either (a) the user explicitly asked for chapter / step / section numbering, OR (b) the macrostructure is **Long Document, Manifesto, or Catalogue numbered** AND the content is genuinely ordinal (steps you must do in order, chapters that build, items in a deliberate sequence). Even then: cap at 1–2 per page.
+
+**Hard ban: tag-left / header-right two-column section heads.** Patterns like `01 · THE TOUR` in a narrow left column with the section title to its right (a.k.a. *hanging header*, *left-margin label*) are the single most reliable AI-templated tell for editorial-style SaaS pages. When an eyebrow IS used, **the heading goes directly underneath it, in the same column** — vertical stack only. Never a two-column section-head grid. Gate 66 enforces this.
 
 ### Shadow-glow on dark
 

skill/references/layout-and-space.md

@@ -41,8 +41,8 @@ Layout is where "AI-generated" gets caught. Equal columns, everything centred, e
 
 ## Asymmetry techniques
 
-- **Wide left margin.** Treat the left as a permanent negative space — narrow column of labels, wide column of content.
-- **Hanging headers.** Section labels sit in the left margin; content flows to the right.
+- **Wide left margin.** Treat the left as a permanent negative space — narrow column of labels, wide column of content. **Labels must NOT be section eyebrows / numbers paired with the heading** — that's gate-66-banned. Reserve this technique for body-level micro-labels (caption, footnote, date) alongside body copy.
+- **Hanging headers.** ⚠️ **Opt-in only.** Section labels sit in the left margin; content flows to the right. Permitted only when the user explicitly asks for an editorial / hanging-header layout AND no eyebrow / number / chapter tag sits in the left margin. The eyebrow-left / heading-right pattern is banned by slop-test gate 66 — it's the most reliable templated-editorial AI tell. Default to a stacked single-column section head.
 - **Offset grids.** Odd columns wider than even. Or the other way.
 - **Grid-breaks.** One element that deliberately extends past a column boundary: a pull-quote, a photograph, a rule, a number.
 - **Generous top, tight bottom** (or vice-versa). Sections don't need to be evenly padded.

skill/references/slop-test.md

@@ -190,7 +190,9 @@ Universal. Every emitted page must render flawlessly at 320 px, 375 px, 414 px,
 
 65. **CSS-only radio tab pattern that scroll-jumps.** When implementing tab toggles via `<input type="radio">` siblings + `:checked` selectors, does the artifact either (a) keep the radios in normal document flow with zero size + opacity 0 (no `position: absolute; top: 0`), OR (b) ship a JS handler that intercepts label clicks, calls `e.preventDefault()`, manually sets `radio.checked = true`, dispatches `change`, and focuses with `{ preventScroll: true }`? If the radios are at `position: absolute; top: 0` with no JS guard, fail. Default-position radios cause the page to jump to the section's top on every tab click — visible on every viewport but most disruptive on mobile.
 
-The CSS stamp at Step 6 records mobile pass alongside contrast: `· mobile: pass (36, 59, 61–65)`.
+66. **Section eyebrow / tag beside the heading (tag-left, header-right).** Does any section render an eyebrow / number / mono-cap label (`01 · THE TOUR`, `02 / FEATURES`, `Chapter Three`) in a column to the left of, or to the right of, the section heading on the same horizontal row? Auto-fail. The pattern reads as a templated editorial-SaaS tell within seconds. When an eyebrow is used at all (see [`anti-patterns.md § Eyebrow on every section`](anti-patterns.md) — default OFF), the heading goes **directly underneath it in the same column**, vertical stack only. Concretely: any `.section__head`, `.section__intro`, or equivalent wrapper that contains both an eyebrow element and a heading element MUST have `display: block` or `display: flex; flex-direction: column` (or `grid-template-columns: 1fr` with the eyebrow + heading as separate rows). Multi-column section heads with an eyebrow in one column are banned regardless of macrostructure, theme, or viewport. This supersedes the "Left-margin" axis in [`structure.md`](structure.md) and the "Hanging headers" pattern in [`layout-and-space.md`](layout-and-space.md) for any head that carries an eyebrow.
+
+The CSS stamp at Step 6 records mobile pass alongside contrast: `· mobile: pass (36, 59, 61–66)`.
 
 ---
 

skill/references/structure.md

@@ -14,13 +14,13 @@ Where does a section's title live in space? Pick one per page.
 
 | Pattern | Description | Real-world reference |
 | --- | --- | --- |
-| **Left-margin** | Eyebrow / number / label sits in a narrow left column; heading and body to the right. Editorial / specimen. | The New York Times Magazine; our Specimen theme. |
+| **Left-margin** | ⚠️ **Opt-in only — never default.** Eyebrow / number / label in a narrow left column with heading + body to the right. Reads as a templated-editorial AI tell when applied to SaaS / dev-tool / consumer pages. Permitted ONLY when the user explicitly asks for an editorial / specimen layout AND no eyebrow is paired with the heading (label may sit beside body copy; heading must stay in its own row above). The eyebrow-left / heading-right variant is banned outright by slop-test gate 66. | The New York Times Magazine; our Specimen theme — when the user explicitly requests that voice. |
 | **Hanging** | Heading floats in negative space *above* the section, with generous breathing room. | David Airey's portfolio; minimal modernist. |
 | **Centered display** | Heading dominates centre stage, symmetrical. Formal, welcoming, can feel static if used everywhere. | Apple product pages; Atelier-style runway invitations. |
 | **Bottom-aligned** | Heading anchors the *base* of a section, content flows above. Inverts hierarchy. | Swiss editorial; Newsprint masthead-below pattern. |
 | **Overlapping image** | Heading layered atop photography or colour block. Demands strong contrast. | Pentagram project pages; Manifesto posters. |
 | **Sticky / pinned** | Heading remains visible while content scrolls beneath. Orientation aid. | GSAP ScrollTrigger docs; Almanac-style references. |
-| **Numbered display** | "01." with a rule line and the heading right beside it. Procedural, sequenced. | Rauno Freiberg's portfolio. |
+| **Numbered display** | ⚠️ **Opt-in only — never default.** "01." with a rule line and the heading right beside it. Procedural, sequenced. Banned for default SaaS / consumer / dev-tool pages by slop-test gate 66 (the tag-beside-heading pattern is a templated tell). Permitted only when the user explicitly asks for ordinal / chaptered numbering AND the macrostructure is Long Document, Manifesto, or Catalogue numbered. Even then, prefer the stacked variant: number on its own line above the heading. | Rauno Freiberg's portfolio — when the user explicitly invokes that voice. |
 | **Inline with body** | No section break — the heading emerges from the paragraph flow. Conversational. | Medium articles; long-form essays. |
 
 ### 2. Body composition

skill/references/typography.md

@@ -189,6 +189,19 @@ Pick a ratio. The default for Hallmark work is **1.25** (major third). Build the
 
 **Display max — keep it ≤ 5.5rem (88 px).** Above that, hero headlines crowd themselves on 1280–1440 px viewports and require multi-line wrapping that almost always reads as drama, not gravity. Even on Manifesto / Brutal display-heavy themes, cap at 6rem (96 px). The exception is a single-line, single-word display (e.g. a stat) that occupies ≤ 12 ch — it can grow to 7rem. **Default emit format is `clamp(2.75rem, 5vw + 1rem, 5.25rem)`.**
 
+### Hero headline sizing — match size to copy length
+
+Count characters in the rendered hero `h1`. Pick the cap by bucket — the rule applies on top of any per-theme `--text-display` clamp:
+
+| Headline length | Size cap | Notes |
+| --- | --- | --- |
+| **≤ 20 chars** (e.g. *"Limitless"*, *"Made not generated"*) | full `--text-display`; single-word can grow to 7rem | Display-heavy themes only |
+| **21–50 chars** (the default sweet spot) | `--text-display` | If it wraps past 2 lines at 414 px, step down to `--text-display-s` |
+| **51–90 chars** | cap at `--text-display-s` | Strongly consider splitting into eyebrow + headline |
+| **> 90 chars** | rewrite shorter, or cap at `--text-4xl` with tighter leading | A 100-char headline at display size is the single most reliable AI tell |
+
+**Aggressive-display themes step down one rung when headline > 50 chars.** Brutal, Riso, and Manifesto clamp `--text-display` at 6.5–9rem — that ceiling is for ≤ 50-char statements only. Past 50 chars, route them to `--text-display-s` automatically. **When you write the headline yourself (no user-supplied copy), aim for ≤ 7 words and ≤ 50 chars from the start** — imperative or nominal phrase, never a gerund opener.
+
 Use no more than five sizes on a single page. If you need more hierarchy, use weight and colour, not another size.
 
 ## Weights