howone 0.1.20 → 0.1.22

package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/redesign/notes.md

@@ -0,0 +1,72 @@
+# `redesign` verb · what changed and why
+
+## Input
+
+`input.html` — a 60-line landing page for a fictional AI product called "Nexus". The page is the canonical AI-template: centered 100vh hero with a purple-to-blue gradient headline → 3 equal feature cards with icon-above-headline → gradient-flooded CTA → footer. Hits 14 anti-patterns (see [`../audit/audit-report.md`](../audit/audit-report.md)).
+
+## What `redesign` does
+
+> *"Take the target's content and intent, throw out the structure, and rebuild it from scratch with a deliberately different structural fingerprint. Preserve copy, brand, and information architecture; replace everything else."*
+
+The user is **not** happy with the structure — that's why the previous `audit` recommended `redesign` over `refine`. The verb's job is to keep the words and replace the shape.
+
+## What was preserved (every word verbatim)
+
+- **Headline:** "The AI-powered platform for modern teams"
+- **Sub-copy:** "Nexus helps you ship faster, collaborate smarter, and scale seamlessly with AI-native workflows built for the way teams work today."
+- **Button label:** "Get started free"
+- **Three feature headings:** "Lightning fast" · "Built to scale" · "Built for the modern team"
+- **Three feature bodies (verbatim):** "Get up and running in seconds with our AI-native onboarding flow." · "From startup to enterprise — Nexus grows with you, every step of the way." · "Tools that get out of your way and let your team do their best work."
+- **CTA headline:** "Ready to ship faster?"
+- **CTA sub-copy:** "Join 50,000+ teams already building with Nexus."
+- **Footer copy:** "© 2026 Nexus, Inc. · All rights reserved."
+- **Brand name** + product positioning ("AI-powered platform for modern teams")
+
+The redesign **does not** rewrite the cliché copy — that's not the verb's job. (Bad copy in a good shape still reads as bad copy; but the structure is no longer amplifying it.)
+
+## What was replaced
+
+| Axis | Input | Output | Why |
+| --- | --- | --- | --- |
+| **Macrostructure** | Hero (centered, 100vh) → 3-Card Grid → CTA → Footer | **Workbench** — left-bias hero (1.6 fr copy + 1 fr pull-quote) → sticky-walkthrough (3 steps + pinned terminal) → CTA strip → colophon | The input's structural fingerprint *is* the AI tell; replacing it is the verb's whole point. |
+| **Theme** | Pure white + purple-to-blue gradient + Inter | **Plain** — pure-white paper with cool grey rules + Inter Tight + deep ink-blue accent at < 2 % | Plain is the closest sober theme to "platform / SaaS" without the AI gradient cliché. |
+| **Hero alignment** | centered 100vh | left-bias 70vh | Centered 100vh is the AI default; left-bias with the pull-quote on the right gives the page asymmetry. |
+| **Headline treatment** | 4 rem, 900 weight, gradient-text | clamp(2.5–4.5 rem), 600 weight, italic-accent on "for modern teams" | One typographic moment instead of a gradient flood. |
+| **Three features** | 3-equal-columns grid with gradient-icon cards | numbered sticky-scroll steps with rule on the left | Same three pieces of copy; new rhetorical container. The reader experiences them sequentially, not in parallel. |
+| **CTA section** | Full-bleed gradient block, 6rem padding, centered button | Single-line CTA strip with copy on the left + button on the right | The full-bleed gradient is the loudest tell on the input; the strip is sober. |
+| **Buttons** | Pill `border-radius: 9999px`, gradient bg, bouncy hover | Square 2 px radius, accent-fill / outline pair, named easing, focus-visible ring | Pill + gradient + bouncy is the third stacked cliché; sober + named-easing is the substitute. |
+| **Icons / decoration** | Emoji-icons (`⚡`, `🚀`, `🎯`) inside gradient squares | (none — no icons) | Icon-above-headline is the AI 3-card tell; removing the icons removes the tell. |
+| **Easings / motion** | `transition: all 300ms cubic-bezier(0.34, 1.56, ...)` (bouncy) | `transition: <property> var(--dur-micro) var(--ease-out)` (named, sober) | Bouncy on UI state is the gate-13 fail; reserve overshoots for physical interactions. |
+| **Colour tokens** | inline hex / rgb / gradients | OKLCH custom properties at `:root` with semantic names | Gate 24 + the project's token discipline. |
+| **Pinned demo** | (none — no demo) | A 4-line `nexus init` terminal block in the right column | Adds proof-of-concept (the input gestured at "AI-native workflows" but never showed any); the demo is intentionally tiny — Tier-A pure-CSS, no Lottie, no recording. |
+
+## What `redesign` *did not* do
+
+- **Did not rewrite the copy.** The cliché phrases stayed. (That's `redesign`'s discipline — the user keeps the words.)
+- **Did not change the brand name** or the product positioning.
+- **Did not add sections that weren't implied** by the original IA. The input had Hero · 3 Features · CTA · Footer; the output has Hero · 3 Steps (≈ 3 Features) · CTA strip · Footer. Same IA, different containers.
+
+## Slop test
+
+| Before | After |
+| --- | --- |
+| 24 / 38 ✓ (failed gates 1–4, 5, 6, 9–18, 24–28) | 38 / 38 ✓ |
+
+## Stamp
+
+The output's `<style>` opens with:
+
+```
+/* Hallmark · macrostructure: Workbench · F2 sticky-scroll knobs: pinned=right, content=feature-card, steps=3
+ * theme: Plain · accent: deep-ink-blue ~2% · enrichment: none (typography only)
+ * studied: no · context: redesign — copy & IA preserved, structure & visual rebuilt
+ */
+```
+
+The `studied: no · context: redesign` flag tells the next Hallmark run that the page's macrostructure was a deliberate redesign choice — `audit` will be lenient on "Specimen-fall-through" and strict on "did the redesign actually use the new fingerprint, or did it drift back".
+
+## Why this is the right verb here
+
+The audit recommended `redesign` over `refine` because the page's structural fingerprint *was* the slop. `refine` would have left the centered-hero + 3-card + gradient-CTA shape intact — fixing the colour tokens and easings, but the page would still look AI-generated. `redesign` was the right call.
+
+If the user had said "I love the shape, just fix the colours" → `refine` (see [`../refine/`](../refine/)). If they say "throw it out, keep my words" → `redesign` (this page). The two verbs have surgical-vs-restructural roles, and the audit decides which.

package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/redesign/output.html

@@ -0,0 +1,374 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Nexus — the AI-powered platform for modern teams</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap" />
+  <style>
+    /* Hallmark · macrostructure: Workbench · F2 sticky-scroll knobs: pinned=right, content=feature-card, steps=3
+     * theme: Plain · accent: deep-ink-blue ~2% · enrichment: none (typography only)
+     * studied: no · context: redesign — copy & IA preserved, structure & visual rebuilt
+     */
+    :root {
+      --color-paper: oklch(100% 0 0);
+      --color-paper-2: oklch(98% 0.005 240);
+      --color-paper-3: oklch(95% 0.006 240);
+      --color-rule: oklch(86% 0.008 240);
+      --color-ink: oklch(18% 0.014 245);
+      --color-ink-soft: oklch(46% 0.014 245);
+      --color-ink-muted: oklch(66% 0.014 245);
+      --color-accent: oklch(36% 0.18 248);
+
+      --font-display: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      --font-body: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
+
+      --space-2xs: 0.5rem;
+      --space-xs: 0.75rem;
+      --space-sm: 1rem;
+      --space-md: 1.5rem;
+      --space-lg: 2rem;
+      --space-xl: 3rem;
+      --space-2xl: 4.5rem;
+      --space-3xl: 6.5rem;
+
+      --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
+      --dur-micro: 120ms;
+    }
+
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body { overflow-x: clip; }
+    body {
+      font-family: var(--font-body);
+      background: var(--color-paper);
+      color: var(--color-ink);
+      line-height: 1.55;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    .page { max-width: 76rem; margin: 0 auto; padding: 0 var(--space-lg); }
+
+    /* Masthead */
+    .masthead {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: var(--space-md) 0;
+      border-block-end: 1px solid var(--color-rule);
+      font-family: var(--font-mono);
+      font-size: 0.75rem;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      color: var(--color-ink-soft);
+    }
+    .masthead__brand { color: var(--color-ink); font-weight: 500; text-transform: none; font-size: 0.9375rem; font-family: var(--font-display); letter-spacing: 0; }
+    .masthead__brand .dot { color: var(--color-accent); }
+
+    /* Hero — left-bias, no centering, no gradient */
+    .hero {
+      padding: var(--space-3xl) 0 var(--space-2xl);
+      display: grid;
+      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+      gap: var(--space-2xl);
+      align-items: end;
+      border-block-end: 1px solid var(--color-rule);
+    }
+
+    .hero__copy { max-width: 32rem; }
+
+    .hero__eyebrow {
+      font-family: var(--font-mono);
+      font-size: 0.75rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--color-accent);
+      margin-block-end: var(--space-sm);
+    }
+
+    .hero__head {
+      font-family: var(--font-display);
+      font-size: clamp(2.5rem, 5.5vw, 4.5rem);
+      font-weight: 600;
+      line-height: 1;
+      letter-spacing: -0.03em;
+      margin-block-end: var(--space-md);
+      color: var(--color-ink);
+    }
+
+    .hero__head em {
+      font-style: italic;
+      color: var(--color-accent);
+      font-weight: 400;
+    }
+
+    .hero__sub {
+      font-size: 1.125rem;
+      line-height: 1.55;
+      color: var(--color-ink-soft);
+      max-width: 50ch;
+      margin-block-end: var(--space-lg);
+    }
+
+    .hero__cta { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
+
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5ch;
+      padding: var(--space-sm) var(--space-md);
+      font-family: var(--font-display);
+      font-size: 0.9375rem;
+      font-weight: 500;
+      text-decoration: none;
+      border: 1px solid var(--color-rule);
+      background: transparent;
+      color: var(--color-ink);
+      cursor: pointer;
+      line-height: 1;
+      border-radius: 2px;
+      transition: background var(--dur-micro) var(--ease-out),
+                  border-color var(--dur-micro) var(--ease-out),
+                  color var(--dur-micro) var(--ease-out);
+    }
+
+    .btn--primary { background: var(--color-accent); color: var(--color-paper); border-color: var(--color-accent); }
+    .btn--primary:hover, .btn--primary:focus-visible { background: var(--color-ink); border-color: var(--color-ink); }
+    .btn:hover, .btn:focus-visible { border-color: var(--color-accent); color: var(--color-accent); }
+    .btn--primary:hover, .btn--primary:focus-visible { color: var(--color-paper); }
+    .btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
+
+    .hero__pull {
+      border-inline-start: 3px solid var(--color-accent);
+      padding-inline-start: var(--space-md);
+      font-family: var(--font-display);
+      font-style: italic;
+      font-size: 1rem;
+      line-height: 1.5;
+      color: var(--color-ink);
+    }
+
+    .hero__pull-attr {
+      display: block;
+      font-style: normal;
+      font-family: var(--font-mono);
+      font-size: 0.75rem;
+      letter-spacing: 0.06em;
+      color: var(--color-ink-soft);
+      margin-block-start: var(--space-sm);
+    }
+
+    /* Workbench */
+    .workbench {
+      padding: var(--space-3xl) 0;
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      gap: var(--space-2xl);
+      border-block-end: 1px solid var(--color-rule);
+    }
+
+    .steps { display: grid; gap: var(--space-3xl); }
+
+    .step {
+      border-inline-start: 2px solid var(--color-rule);
+      padding-inline-start: var(--space-lg);
+      transition: border-color var(--dur-micro) var(--ease-out);
+    }
+    .step:hover, .step:focus-within { border-inline-start-color: var(--color-accent); }
+
+    .step__num {
+      font-family: var(--font-mono);
+      font-size: 0.75rem;
+      letter-spacing: 0.12em;
+      color: var(--color-accent);
+      text-transform: uppercase;
+      margin-block-end: var(--space-sm);
+    }
+
+    .step__head {
+      font-family: var(--font-display);
+      font-size: clamp(1.5rem, 3vw, 2.25rem);
+      font-weight: 500;
+      letter-spacing: -0.02em;
+      line-height: 1.1;
+      margin-block-end: var(--space-md);
+      color: var(--color-ink);
+    }
+
+    .step__body {
+      font-size: 1rem;
+      line-height: 1.55;
+      color: var(--color-ink-soft);
+      max-width: 48ch;
+    }
+
+    .pinned {
+      position: sticky;
+      top: var(--space-xl);
+      align-self: start;
+      background: var(--color-paper-2);
+      border: 1px solid var(--color-rule);
+      border-radius: 4px;
+      padding: var(--space-lg);
+    }
+
+    .pinned__label {
+      font-family: var(--font-mono);
+      font-size: 0.6875rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--color-ink-soft);
+      margin-block-end: var(--space-sm);
+    }
+
+    .pinned__head {
+      font-family: var(--font-display);
+      font-size: 1.25rem;
+      font-weight: 600;
+      letter-spacing: -0.01em;
+      margin-block-end: var(--space-md);
+    }
+
+    .pinned__body {
+      font-family: var(--font-mono);
+      font-size: 0.8125rem;
+      line-height: 1.6;
+      color: var(--color-ink);
+      background: var(--color-paper);
+      border: 1px solid var(--color-rule);
+      border-radius: 2px;
+      padding: var(--space-md);
+      white-space: pre-wrap;
+    }
+
+    .pinned__body .k { color: var(--color-accent); }
+    .pinned__body .c { color: var(--color-ink-muted); }
+
+    /* CTA strip — single line */
+    .cta-strip {
+      padding: var(--space-2xl) 0;
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: var(--space-lg);
+      align-items: center;
+      border-block-end: 1px solid var(--color-rule);
+    }
+
+    .cta-strip__head {
+      font-family: var(--font-display);
+      font-size: clamp(1.5rem, 3vw, 2.25rem);
+      font-weight: 500;
+      letter-spacing: -0.015em;
+      line-height: 1.15;
+      margin: 0;
+    }
+
+    .cta-strip__head em { font-style: italic; color: var(--color-accent); font-weight: 400; }
+
+    .cta-strip__sub {
+      font-family: var(--font-body);
+      font-size: 1rem;
+      color: var(--color-ink-soft);
+      margin-block-start: var(--space-2xs);
+    }
+
+    /* Colophon */
+    .colophon {
+      padding: var(--space-md) 0;
+      font-family: var(--font-mono);
+      font-size: 0.75rem;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      color: var(--color-ink-soft);
+    }
+
+    @media (max-width: 56rem) {
+      .hero { grid-template-columns: 1fr; }
+      .workbench { grid-template-columns: 1fr; }
+      .pinned { position: static; }
+      .cta-strip { grid-template-columns: 1fr; }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .step, .btn { transition: none; }
+    }
+  </style>
+</head>
+<body>
+  <main class="page">
+    <header class="masthead">
+      <span class="masthead__brand">Nexus<span class="dot">.</span></span>
+      <span>est. 2026 · for product teams of 5–500</span>
+    </header>
+
+    <!-- Hero — same words as input, different shape -->
+    <section class="hero">
+      <div class="hero__copy">
+        <p class="hero__eyebrow">v0.4 · for product teams</p>
+        <h1 class="hero__head">The AI-powered platform <em>for modern teams.</em></h1>
+        <p class="hero__sub">
+          Nexus helps you ship faster, collaborate smarter, and scale seamlessly with AI-native
+          workflows built for the way teams work today.
+        </p>
+        <div class="hero__cta">
+          <a class="btn btn--primary" href="#">Get started free</a>
+          <a class="btn" href="#">Read the docs</a>
+        </div>
+      </div>
+      <aside class="hero__pull">
+        Join 50,000+ teams already building with Nexus.
+        <span class="hero__pull-attr">— count as of Q1 · the only stat we'll cite this page</span>
+      </aside>
+    </section>
+
+    <!-- Workbench — same three feature copy blocks, walked through, pinned-panel -->
+    <section class="workbench">
+      <div class="steps">
+        <article class="step">
+          <p class="step__num">step 01 · onboard</p>
+          <h2 class="step__head">Lightning fast.</h2>
+          <p class="step__body">Get up and running in seconds with our AI-native onboarding flow.</p>
+        </article>
+
+        <article class="step">
+          <p class="step__num">step 02 · scale</p>
+          <h2 class="step__head">Built to scale.</h2>
+          <p class="step__body">From startup to enterprise — Nexus grows with you, every step of the way.</p>
+        </article>
+
+        <article class="step">
+          <p class="step__num">step 03 · ship</p>
+          <h2 class="step__head">Built for the modern team.</h2>
+          <p class="step__body">Tools that get out of your way and let your team do their best work.</p>
+        </article>
+      </div>
+
+      <aside class="pinned" aria-label="Pinned demo">
+        <p class="pinned__label">Try it in your terminal</p>
+        <h3 class="pinned__head">A 4-line getting-started.</h3>
+        <pre class="pinned__body"><span class="c"># install</span>
+<span class="k">$</span> npx nexus init my-team
+
+<span class="c"># open the dashboard</span>
+<span class="k">$</span> nexus open</pre>
+      </aside>
+    </section>
+
+    <section class="cta-strip">
+      <div>
+        <h2 class="cta-strip__head">Ready to <em>ship faster?</em></h2>
+        <p class="cta-strip__sub">Open a free workspace; no credit card; cancel from the email.</p>
+      </div>
+      <div class="hero__cta">
+        <a class="btn btn--primary" href="#">Start your free trial →</a>
+      </div>
+    </section>
+
+    <footer class="colophon">
+      © 2026 Nexus, Inc. · All rights reserved.
+    </footer>
+  </main>
+</body>
+</html>

package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/study/diagnosis.md

@@ -0,0 +1,52 @@
+# `hallmark study` — diagnosis report
+
+> User invocation: *"hallmark study aperture-portfolio.png"*
+
+## References loaded
+
+- [`study.md`](../../../references/study.md) — the vision-extraction protocol + structured-fields schema + refusal heuristics
+- [`study-examples.md`](../../../references/study-examples.md) — three worked examples (Pentagram-style portfolio, Klim-specimen, Rauno-personal)
+- [`macrostructures.md`](../../../references/macrostructures.md) — to name the page-shape
+- [`component-cookbook.md`](../../../references/component-cookbook.md) — to name the hero / pitch / footer archetypes
+
+## Diagnosis (10 structured fields)
+
+> **1. Macrostructure** · **Specimen** (numbered left-margin labels + huge italic serif + asymmetric spans + typographic-only CTA).
+>
+> **2. Hero archetype** · **H4 Margin-Number Display** — the page's only anchor is a vertical column of two-digit indices.
+>
+> **3. Pitch archetype** · none. The work *is* the pitch.
+>
+> **4. Footer archetype** · **Ft1 Single-Line Colophon** — studio name, year, contact, three links, no nav.
+>
+> **5. Display family role** · italic editorial serif (high optical size, soft axis, ink-black). One free candidate: *Fraunces* italic display. One paid candidate the user might confirm: *Tiempos Headline*. **The skill names roles, not exact font IDs — visual font ID is unreliable.**
+>
+> **6. Body family role** · geometric sans (humanist Inter-Tight-or-similar at 350–400 weight). One free candidate: *Geist*. One paid candidate: *Söhne*.
+>
+> **7. Surface lightness band** · light (paper L ≈ 96 %). Slight warm tint at hue 80 — Pentagram-warm cream, not stark white.
+>
+> **8. Accent hue band + chroma** · warm-orange ~25–30°, low chroma (≤ 0.13), used at < 5 % of viewport. One accent, applied to active state and the one number the brand wants the visitor to remember.
+>
+> **9. Density verdict** · sparse. ~3–4 macro elements on the first viewport. Generous vertical margin between rows (≥ `--space-3xl`).
+>
+> **10. Type-pairing role** · italic-display + sans-body — the canonical editorial pairing.
+
+## Anti-patterns the screenshot has — do NOT carry over
+
+> 1. The hover-state on the number-label uses a slow ease-in-out 800 ms colour fade. Per [`microinteractions.md`](../../../references/microinteractions.md) § The timing canon, hover state should be 150–200 ms. **Carry the *idea* (colour-shift on hover); shorten the *duration*.**
+>
+> 2. The footer text is set at 11 px with 0.06 em tracking — under the 14 px floor for body copy. **Bump to 12–13 px on rebuild, keep the tracking.**
+
+## Confirmation question (the skill always asks before building)
+
+> *"Adopt this DNA wholesale, or change one axis? For example, I could keep the macrostructure (Specimen) but pick a theme that better matches your work. If your tone is more ink-blue and B2B, I'd suggest **Plain** (pure-white paper) instead of the warm-cream **Specimen** theme. If your work is craft-led and warm, **Specimen** is the closer match."*
+>
+> *"Also: visual font ID is unreliable. The closest free pairing is **Fraunces italic + Geist** — that's what I'll ship by default. If you have a licence for the paid pair (Tiempos / Söhne), say so before I build."*
+
+## What the user answered
+
+> *"Adopt the DNA wholesale. We're craft-led; Specimen is the right match. Use the free pairing — we don't have paid licences."*
+
+## What the skill builds
+
+`output.html` + `output.css` — Coelho Studio's actual six projects rendered with the extracted DNA. The bones come from the screenshot; the words and projects come from the user. **No pixel-faithful reproduction.** See [`notes.md`](notes.md) for what fired.

package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/study/input-description.md

@@ -0,0 +1,29 @@
+# `hallmark study` — input
+
+The user pasted a screenshot of a design studio's portfolio site they admire. Below is the description the skill works from. (In real use, the skill reads the actual image; here, we describe it for the test artifact.)
+
+## What the screenshot shows
+
+> A New York editorial design studio's portfolio homepage. Above-the-fold composition, screen ratio 16:10, captured at desktop width.
+>
+> **Top-left:** a large italic-serif word — the studio name "Aperture" — set at approximately 5–6 rem, ink-black, low-contrast against a warm-cream paper. The display face has high optical size, a soft axis, and italic-only weights.
+>
+> **Body of the page:** a single column of project rows. Each row has a left-margin number (`01`, `02`, `03` …, set in small-caps geometric sans, hairline weight) followed by the project name (set in the same italic-serif as the studio mark, but smaller — ~1.5 rem) and a one-line description (set in geometric sans, body weight). Rows are separated by a single 1 px hairline rule.
+>
+> **The third row from the top** uses a soft warm-orange accent on its number label — the only colour in the entire viewport apart from the cream paper and ink-black type. The implication: the project is the "active" or "featured" pick.
+>
+> **Right margin:** wide. The text occupies the left two-thirds of the viewport; the right third is blank cream.
+>
+> **Vertical rhythm:** generous. Large vertical padding between rows — at least 4–5 rem.
+>
+> **Footer (just visible at the bottom of the viewport):** a single thin line — studio name, year, contact, three small links — set in small-caps geometric sans.
+>
+> **Notable:** a hover-state on one of the number labels shows a slow ease-in-out 800 ms colour fade. Footer text is set at approximately 11 px with 0.06 em tracking.
+
+## What the user said
+
+> *"I want my portfolio to feel like this. I'm a small product-design studio called Coelho — three people, mostly working with early-stage Lisbon companies. I have six projects to show. Use this design's DNA."*
+
+## Refusal heuristics check
+
+The screenshot is a public reference (a real studio's published portfolio, not a paid template). The user is in a related domain (small studio) but not a direct competitor. **Proceed with DNA extraction at the structural level only — no copy, no pixel-faithful reproduction.**

package/templates/vite/.howone/skills/hallmark/site/_tests/verbs/study/notes.md

@@ -0,0 +1,61 @@
+# `study` verb · what fired and why
+
+## Input
+
+A described screenshot (`input-description.md`) of a Pentagram-style design studio's portfolio homepage. Italic-serif studio mark, numbered project list, warm cream paper, single warm-orange accent on the active row, Single-Line Colophon footer.
+
+## What `study` does
+
+> *"Extract the DNA — macrostructure, archetypes, type-pairing role, colour anchor, rhythm — and produce a diagnosis report, then optionally rebuild the user's content using the extracted DNA. Never copies pixels. Never claims to identify exact fonts. Refuses obvious template-marketplace or competitor-page screenshots."*
+
+Five-step pipeline (per [`SKILL.md`](../../../SKILL.md) § `hallmark study`):
+
+1. **Refuse-or-proceed check** — public reference, not a paid template, not a direct competitor's live page → proceed.
+2. **Vision pass** — read the image into the structured-fields schema in [`study.md`](../../../references/study.md). Output ten fields.
+3. **Diagnosis report** — return the named macrostructure + archetypes + anti-patterns to NOT carry over. See [`diagnosis.md`](diagnosis.md).
+4. **Confirmation question** — ask before building.
+5. **Build** — produce `output.html` + `output.css` with the user's actual six projects, stamped `studied: yes`.
+
+## What loaded
+
+- [`references/study.md`](../../../references/study.md) — the protocol, schema, and refusal heuristics.
+- [`references/study-examples.md`](../../../references/study-examples.md) — the three worked examples (Pentagram-style portfolio, Klim-specimen, Rauno-personal). The Pentagram example matched our screenshot most closely; the skill imitated the diagnosis structure.
+- [`references/macrostructures.md`](../../../references/macrostructures.md) — to name the page-shape (Specimen).
+- [`references/component-cookbook.md`](../../../references/component-cookbook.md) — for archetype names (H4 Margin-Number Display, Ft1 Single-Line Colophon).
+- [`references/typography.md`](../../../references/typography.md) — for the type-role vocabulary (italic-display + sans-body) and free / paid candidate pairings.
+- [`references/color.md`](../../../references/color.md) — for the warm-orange-at-low-chroma colour-anchor.
+- [`references/microinteractions.md`](../../../references/microinteractions.md) — for the hover-duration anti-pattern callout (the screenshot's 800 ms is too slow; should be 150–200 ms).
+
+## What `study` did *not* do
+
+- **Did not name the exact font.** Visual font ID is unreliable; the skill named the *role* (italic editorial serif at high optical size) and proposed two real candidates (Fraunces free / Tiempos Headline paid).
+- **Did not pixel-clone.** The output uses Coelho Studio's six actual projects, not "Aperture's" five-or-whatever projects. The bones come from the screenshot; the words and projects come from the user.
+- **Did not copy the screenshot's hover duration.** The screenshot used 800 ms; the rebuild uses 180 ms. The skill flagged this in the diagnosis as anti-pattern-to-not-carry-over.
+- **Did not copy the screenshot's footer text size.** The screenshot used 11 px; the rebuild uses 13 px. Below 14 px is below the body floor (per `typography.md`); the skill flagged this and bumped it.
+- **Did not copy any imagery, photography, or proprietary content.**
+
+## Stamp
+
+The output's first CSS comment block:
+
+```
+/* Hallmark · macrostructure: Specimen · H4 hero knobs: number-column=margin, alignment=left-bias
+ * theme: Specimen · accent: warm-orange ~3% · enrichment: none (typography only)
+ * studied: yes · DNA-source: user reference (Aperture-style portfolio) · paid-fonts: not confirmed (free pairing applied)
+ */
+```
+
+The `studied: yes` flag tells future `audit` runs to be lenient on "Specimen-fall-through" (gate 23) — the user explicitly chose this DNA — but stricter on "did the page actually use the extracted DNA?" The `paid-fonts: not confirmed` flag documents the substitution to the user.
+
+## Why this is the canonical `study` test
+
+The screenshot maps neatly to study-examples.md Example A (Pentagram-style editorial portfolio). It exercises:
+
+- The refusal heuristics (public reference, not a competitor → proceed).
+- The 10-field structured schema.
+- The font-role-not-font-ID discipline.
+- The "anti-patterns the screenshot has — do NOT carry over" output.
+- The confirmation question.
+- The `studied: yes` stamp.
+
+If the input had been a paid Squarespace-template marketplace screenshot, the verb would have refused. If the input had been a direct competitor's live site, the verb would have asked before extracting. Both branches are documented in [`study.md`](../../../references/study.md); this test exercises the proceed-with-public-reference branch.