howone 0.1.20 → 0.1.22

package/templates/vite/.howone/skills/hallmark/references/components/h2-split-diptych.md

@@ -0,0 +1,15 @@
+### H2 · Split Diptych
+Headline + lede on one side, image or product capture on the other. 6/6 or 7/5 columns.
+*Use when:* you can pair every claim with a visual proof.
+*Don't confuse with:* H6 Photographic (which puts the image full-bleed, not paired).
+
+```html
+<section class="hero-split">
+  <div><h1>…</h1><p>…</p><a class="cta-outline">…</a></div>
+  <figure><img src="" /></figure>
+</section>
+```
+```css
+.hero-split { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-2xl); align-items: center; }
+@media (max-width: 56rem) { .hero-split { grid-template-columns: 1fr; } }
+```

package/templates/vite/.howone/skills/hallmark/references/components/h3-quote-led.md

@@ -0,0 +1,11 @@
+### H3 · Quote-Led
+A pull-quote with attribution is the hero. Your headline is borrowed credibility.
+*Use when:* you have a real testimonial that earns the front page.
+*Don't confuse with:* T3 Single huge quote (which lives mid-page, not in the hero slot).
+
+```html
+<section class="hero-quote">
+  <blockquote class="display-italic">"…"</blockquote>
+  <p class="attribution">— Name, Role, Company</p>
+</section>
+```

package/templates/vite/.howone/skills/hallmark/references/components/h4-stat-led.md

@@ -0,0 +1,14 @@
+### H4 · Stat-Led
+A giant number or metric is the hero. A small qualifier line below.
+*Use when:* you have one defensible, externally-verifiable number.
+*Don't confuse with:* T4 Numbered stat strip (which is several stats in a row, not one focal).
+
+```html
+<section class="hero-stat">
+  <p class="figure tnum">99.97<span class="unit">%</span></p>
+  <p class="qualifier">…</p>
+</section>
+```
+```css
+.figure { font-size: clamp(6rem, 18vw, 16rem); font-variant-numeric: tabular-nums; line-height: 0.85; }
+```

package/templates/vite/.howone/skills/hallmark/references/components/h5-letter-hero.md

@@ -0,0 +1,11 @@
+### H5 · Letter Hero
+First-person opening — "Dear reader,". No buttons in fold. Reads as personal correspondence.
+*Use when:* the founder's voice is the brand.
+*Don't confuse with:* H1 Marquee (which is impersonal declaration).
+
+```html
+<section class="hero-letter">
+  <p class="salutation"><em>Dear reader,</em></p>
+  <p class="lede">…</p>
+</section>
+```

package/templates/vite/.howone/skills/hallmark/references/components/h6-photographic-fold.md

@@ -0,0 +1,16 @@
+### H6 · Photographic Fold
+Single full-bleed image fills the viewport. Caption sits in a corner.
+*Use when:* you have real photography that earns full-bleed.
+*Don't confuse with:* H2 Split (which pairs image with text in a grid).
+
+```html
+<section class="hero-photo">
+  <img class="bleed" src="" alt="" />
+  <p class="caption">Spring, 2026.</p>
+</section>
+```
+```css
+.hero-photo { position: relative; height: 80dvh; }
+.hero-photo .bleed { width: 100%; height: 100%; object-fit: cover; }
+.hero-photo .caption { position: absolute; bottom: var(--space-md); right: var(--space-md); }
+```

package/templates/vite/.howone/skills/hallmark/references/components/h7-demo-video-clipped-by-viewport-edge.md

@@ -0,0 +1,27 @@
+### H7 · Demo Video — Clipped-by-viewport-edge
+Display headline left, demo video right, the rightmost ~10–20 % extending past the viewport so it's intentionally cut off. The clip *is* the design — implies "there's more product than fits the screen". Pioneered by Linear, refined by Vercel / Resend / Cursor.
+*Use when:* the brief is SaaS / dev-tool / dashboard / platform AND you have real footage of the product (or a hand-built CSS-art mockup of it).
+*Don't confuse with:* H4 Stat-Led (number-led, no video) or H8 Mockup Split (still screenshot, not video).
+
+See [`hero-enrichment.md`](hero-enrichment.md) for the full E1 recipe (codec chain, autoplay rules, `prefers-reduced-motion` fallback, mobile collapse). The cookbook entry below is the structural sketch.
+
+```html
+<section class="hero hero--clipped">
+  <div class="hero__copy">
+    <h1>Plan, build, ship.</h1>
+    <p>The project tracker your engineering team won't ignore.</p>
+  </div>
+  <figure class="hero__media">
+    <video autoplay muted loop playsinline preload="metadata"
+           poster="/hero-poster.webp" fetchpriority="high">
+      <source src="/hero.av1.mp4" type='video/mp4; codecs="av01.0.05M.08"'>
+      <source src="/hero.h264.mp4" type="video/mp4">
+    </video>
+  </figure>
+</section>
+```
+```css
+.hero--clipped { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-2xl); overflow: visible; }
+.hero__media   { width: calc(100% + 12vw); aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; }
+@media (max-width: 60rem) { .hero--clipped { grid-template-columns: 1fr; } .hero__media { width: 100%; } }
+```

package/templates/vite/.howone/skills/hallmark/references/components/h8-mockup-split-browser-framed.md

@@ -0,0 +1,23 @@
+### H8 · Mockup Split (browser-framed)
+Headline left, browser-frame mockup right, the mockup tilted 1–3° for life. Frame can be browser chrome, macOS toolbar, minimal hairline, or floating no-frame.
+*Use when:* you're selling a web app and you have a clean, well-lit screenshot.
+*Don't confuse with:* H7 Clipped-Edge (which extends past the viewport) or H2 Split Diptych (which uses photography or proof column, not a product mockup).
+
+```html
+<section class="hero-mock">
+  <div>
+    <h1>The studio's new mute button.</h1>
+    <p>Press <kbd>⌘ M</kbd> from anywhere.</p>
+  </div>
+  <figure class="mock">
+    <header class="mock__chrome"><span></span><span></span><span></span></header>
+    <div class="mock__body"><!-- screenshot or CSS-art mockup --></div>
+  </figure>
+</section>
+```
+```css
+.hero-mock  { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-2xl); align-items: center; }
+.mock       { transform: rotate(1.5deg); border-radius: 12px; overflow: hidden; box-shadow: 0 24px 60px -20px oklch(20% 0.02 60 / 0.18); }
+.mock__chrome { display: flex; gap: 6px; padding: 10px 12px; background: var(--color-paper-2); border-block-end: var(--rule-hair) solid var(--color-rule); }
+.mock__chrome span { width: 10px; height: 10px; border-radius: 50%; background: var(--color-rule-2); }
+```

package/templates/vite/.howone/skills/hallmark/references/components/h9-custom-illustration-centerpiece.md

@@ -0,0 +1,27 @@
+### H9 · Custom Illustration Centerpiece
+A single hand-built SVG (Tier B in the enrichment hierarchy — or pure CSS at Tier A for simpler shapes) sitting on the hero as one illustrative element. The bakery loaf, the studio's mascot, the workflow diagram.
+*Use when:* the brand has a *thing* that benefits from being drawn — a craft, a character, a process.
+*Don't confuse with:* H6 Photographic (real photography) or H8 Mockup (a product screenshot, not artwork).
+
+The illustration itself is *built*, not picked from Storyset / Humaaans / unDraw / Lottie. See [`custom-craft.md`](custom-craft.md) for full recipes (CSS art, hand-built SVG, declarative animation). The cookbook entry below is the page-level structural sketch.
+
+```html
+<section class="hero-art">
+  <div>
+    <p class="eyebrow">Maple Street Bread · est. 2026</p>
+    <h1>Sourdough, every morning.</h1>
+    <p>Slow-fermented overnight, baked on stone, before you wake.</p>
+  </div>
+  <svg viewBox="0 0 200 100" class="loaf" aria-label="A loaf of bread">
+    <path class="loaf__body" d="M 20 70 Q 100 10 180 70 L 180 90 L 20 90 Z" />
+    <path class="loaf__score" d="M 60 50 L 90 30 M 100 45 L 130 25 M 140 50 L 165 35" />
+  </svg>
+</section>
+```
+```css
+.hero-art   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; }
+.loaf__body { fill: oklch(72% 0.14 50); }
+.loaf__score{ stroke: oklch(38% 0.10 35); stroke-width: 2; fill: none; stroke-linecap: round; }
+```
+
+---

package/templates/vite/.howone/skills/hallmark/references/components/n1-wordmark-2-links.md

@@ -0,0 +1,12 @@
+
+### N1 · Wordmark + 2 links
+Top-of-page bar: wordmark on the left, two text links on the right ("Pricing" / "Sign in"). No logo image, no menu icon.
+*Use when:* the page has very few destinations.
+*Don't confuse with:* N3 Side-rail (which is vertical).
+
+```html
+<nav class="nav-min">
+  <a class="wordmark">Studio</a>
+  <ul><li><a>Pricing</a></li><li><a>Sign in</a></li></ul>
+</nav>
+```

package/templates/vite/.howone/skills/hallmark/references/components/n10-floating-on-scroll-morph.md

@@ -0,0 +1,19 @@
+### N10 · Floating-on-scroll morph
+A sticky bar at the top that **morphs into a floating pill** as the user scrolls past a threshold. Two visual modes share one DOM — `.nav` (outer) owns the bar look, `.nav__inner` (inner) owns the pill look. Cross-faded on a single class toggle (`.is-floating`) with one timing curve. Active layer feels seamless; AI defaults always botch this.
+*Use when:* atmospheric / modern-minimal pages where the kinetic micro-moment earns its place. Adds a single tasteful surprise; resists novelty.
+*Don't confuse with:* N5 Floating pill (always-on, no scroll behaviour). N10 is N5 plus a default-bar state that morphs *into* it.
+
+```html
+<header class="nav">
+  <div class="nav__inner">
+    <a class="wordmark">Hallmark</a>
+    <ul class="nav__links">…</ul>
+  </div>
+</header>
+```
+
+The full recipe — the four laws (height-constant, transform-for-offset, cross-fade-everything, single-curve), the property-morph table, the scroll-handler script, and the eight anti-patterns Hallmark refuses — lives in [`floating-nav.md`](floating-nav.md). Reach for that file *before* building this archetype. Skipping the four laws is what makes 90% of attempts read as broken.
+
+*Anti-pattern (one of eight in floating-nav.md):* swapping two `<header>` elements via opacity instead of cross-fading one DOM. Doubles markup, fights focus order, desyncs content.
+
+---

package/templates/vite/.howone/skills/hallmark/references/components/n2-floating-chip.md

@@ -0,0 +1,14 @@
+### N2 · Floating chip
+A small fixed chip in a corner — wordmark + a single action ("Try it"). Doesn't sit in document flow.
+*Use when:* the page is fold-heavy and traditional nav would fight the content.
+*Don't confuse with:* C4 Sticky bottom bar (which is full-width).
+
+```html
+<aside class="nav-chip">
+  <a class="wordmark">Studio</a>
+  <a class="cta-outline">Try →</a>
+</aside>
+```
+```css
+.nav-chip { position: fixed; top: var(--space-md); right: var(--space-md); display: inline-flex; gap: var(--space-md); padding: 0.5rem 0.75rem; background: var(--color-paper); border: 1px solid var(--color-rule); }
+```

package/templates/vite/.howone/skills/hallmark/references/components/n3-side-rail.md

@@ -0,0 +1,14 @@
+### N3 · Side-rail
+A thin vertical strip on the left edge — wordmark rotated, plus 2–3 dot-indicators for sections. Editorial / portfolio energy.
+*Use when:* the page is long and section-numbered.
+*Don't confuse with:* N1 Top wordmark (which is horizontal).
+
+```html
+<nav class="nav-rail">
+  <p class="wordmark vertical">Studio</p>
+  <ul class="dots"><li></li><li></li><li></li></ul>
+</nav>
+```
+```css
+.nav-rail { position: fixed; left: 0; top: 0; bottom: 0; width: 3rem; padding: var(--space-md); writing-mode: vertical-rl; }
+```

package/templates/vite/.howone/skills/hallmark/references/components/n4-hidden-behind-k.md

@@ -0,0 +1,9 @@
+### N4 · Hidden behind ⌘K
+No visible nav. The user opens a command palette via `⌘K` to get anywhere. Designed for keyboard-first audiences.
+*Use when:* the page is for technical users who expect this affordance.
+*Don't confuse with:* N2 Floating chip (which is visible always).
+
+```html
+<button class="kbd-hint">⌘ K</button>
+<dialog class="palette">…</dialog>
+```

package/templates/vite/.howone/skills/hallmark/references/components/n5-floating-pill.md

@@ -0,0 +1,28 @@
+### 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
+<nav class="nav-pill" aria-label="Primary">
+  <a class="wordmark">Studio</a>
+  <ul class="nav-pill__links"><li><a>Catalog</a></li><li><a>Voice</a></li></ul>
+  <a class="cta-fill">Get →</a>
+</nav>
+```
+```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.

package/templates/vite/.howone/skills/hallmark/references/components/n6-newspaper-masthead.md

@@ -0,0 +1,24 @@
+### 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
+<header class="nav-mast">
+  <p class="mast-line muted">No 22 · Spring 2026 · Studio</p>
+  <h1 class="mast-name">STUDIO</h1>
+  <nav class="mast-nav" aria-label="Primary">
+    <ul><li><a>Catalog</a></li><li><a>Voice</a></li><li><a>Letters</a></li></ul>
+  </nav>
+  <hr class="mast-rule double" aria-hidden="true">
+</header>
+```
+```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.

package/templates/vite/.howone/skills/hallmark/references/components/n7-brutal-slab.md

@@ -0,0 +1,22 @@
+### 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
+<header class="nav-slab">
+  <a class="slab-mark">STUDIO</a>
+  <nav class="slab-nav" aria-label="Primary">
+    <ul><li><a>CATALOG</a></li><li><a>VOICE</a></li><li><a>WORK</a></li></ul>
+  </nav>
+  <a class="cta-fill cta-fill--slab">GET</a>
+</header>
+```
+```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.

package/templates/vite/.howone/skills/hallmark/references/components/n8-terminal-command.md

@@ -0,0 +1,21 @@
+### 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
+<header class="nav-term">
+  <pre class="nav-term__line"><span class="prompt">&gt;</span> studio <a href="#catalog">--catalog</a> <a href="#voice">--voice</a> <a href="#get">--get</a><span class="caret" aria-hidden="true">▮</span></pre>
+</header>
+```
+```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.

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

@@ -0,0 +1,17 @@
+### 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
+<header class="nav-edge">
+  <a class="wordmark">Studio</a>
+  <a class="cta-outline">Get →</a>
+</header>
+```
+```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.

package/templates/vite/.howone/skills/hallmark/references/components/s1-left-margin-numbered.md

@@ -0,0 +1,15 @@
+
+### S1 · Left-margin numbered
+A narrow left column holds `01 — LABEL.`; the wide right column holds the heading and content.
+*Use when:* the page is editorial / specimen.
+*Don't confuse with:* S5 Bottom-anchored (which puts the label *under* the section).
+
+```html
+<header class="head-margin">
+  <p class="num-label">01 — Foundations</p>
+  <h2>…</h2>
+</header>
+```
+```css
+.head-margin { display: grid; grid-template-columns: 10rem 1fr; gap: var(--space-xl); align-items: baseline; }
+```

package/templates/vite/.howone/skills/hallmark/references/components/s2-hanging.md

@@ -0,0 +1,13 @@
+### S2 · Hanging
+Heading floats above the section in negative space; no border, no rule.
+*Use when:* the content has a quiet, room-to-breathe energy.
+*Don't confuse with:* S3 Sticky-pinned (which moves with scroll).
+
+```html
+<header class="head-hang">
+  <h2>…</h2>
+</header>
+```
+```css
+.head-hang { padding-block: var(--space-3xl) var(--space-xl); }
+```

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

@@ -0,0 +1,19 @@
+### S3 · Sticky pinned
+Heading remains in viewport while content scrolls beneath. Orientation aid.
+*Use when:* the section is dense and the user benefits from always seeing where they are.
+*Don't confuse with:* S1 Left-margin (which doesn't move).
+
+```html
+<header class="head-sticky">
+  <p class="num-label">02</p>
+  <h2>…</h2>
+</header>
+```
+```css
+/* If the page has a sticky top nav, offset by its height so the sticky
+   head docks BENEATH it instead of bleeding over (slop-test gate 68).
+   Use --z-sticky (in-page) so the nav's --z-sticky-nav out-paints it. */
+.head-sticky { position: sticky; top: var(--banner-height, 0px); background: var(--color-paper); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-ink); z-index: var(--z-sticky); }
+```
+
+**Sticky pairing rule:** if the page emits a sticky `<header>` / `<nav>` / `.banner` (anything with `position: sticky; top: 0`), you MUST also declare `--banner-height` (a px value matching the nav's height) and `--z-sticky-nav` (≥ 1 above `--z-sticky`) in `tokens.css`. The S3 recipe above pulls both. Without those tokens the section head paints over the nav during scroll — see slop-test gate 68.

package/templates/vite/.howone/skills/hallmark/references/components/s4-inline-no-break.md

@@ -0,0 +1,11 @@
+### S4 · Inline (no break)
+The heading is a small caps phrase that emerges *inside* the body flow; no spatial break.
+*Use when:* the page is prose-led; reading should be continuous.
+*Don't confuse with:* S2 Hanging (which separates with negative space).
+
+```html
+<p>… <span class="head-inline">A small heading.</span> …</p>
+```
+```css
+.head-inline { font-variant-caps: all-small-caps; letter-spacing: 0.06em; font-weight: 500; }
+```

package/templates/vite/.howone/skills/hallmark/references/components/s5-bottom-anchored.md

@@ -0,0 +1,13 @@
+### S5 · Bottom-anchored
+The label or heading sits *below* the section's content. Inverts hierarchy.
+*Use when:* the content is the primary act and the label is a footer to it.
+*Don't confuse with:* S1 Left-margin (which leads with the label).
+
+```html
+<section>
+  <div class="content">…</div>
+  <p class="num-label">— end of 02</p>
+</section>
+```
+
+---

package/templates/vite/.howone/skills/hallmark/references/components/t1-pull-quote-with-marginalia.md

@@ -0,0 +1,12 @@
+
+### T1 · Pull-quote with marginalia
+A quote sits in the wide column; the attribution and source link float in the narrow margin column.
+*Use when:* the page already has a marginalia rhythm (Tufte-leaning, editorial).
+*Don't confuse with:* T3 Single huge quote (which is centered and dominates).
+
+```html
+<aside class="proof-margin">
+  <blockquote class="serif-italic">"…"</blockquote>
+  <p class="attribution muted">— Name<br />Role, Company</p>
+</aside>
+```

package/templates/vite/.howone/skills/hallmark/references/components/t2-logo-wall-hairline.md

@@ -0,0 +1,19 @@
+### T2 · Logo wall (hairline)
+A row of customer logos, monochromatic, separated by hairline rules. No card boxes, no shadows.
+*Use when:* you have recognisable customers and want to surface them quietly.
+*Don't confuse with:* the AI-default 6-logo box grid; this version refuses card boxes.
+
+```html
+<section class="logo-wall">
+  <ul>
+    <li><img src="" /></li>
+    <li><img src="" /></li>
+    <li><img src="" /></li>
+  </ul>
+</section>
+```
+```css
+.logo-wall ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0; }
+.logo-wall li { padding: var(--space-md); border-right: 1px solid var(--color-rule); display: grid; place-items: center; }
+.logo-wall img { filter: grayscale(1); opacity: 0.7; }
+```

package/templates/vite/.howone/skills/hallmark/references/components/t3-single-huge-quote.md

@@ -0,0 +1,11 @@
+### T3 · Single huge quote
+One quote, set big, centered, taking a whole section. No supporting text, no attribution boxes — attribution is a small caps line beneath.
+*Use when:* one quote is so good it earns the room.
+*Don't confuse with:* T1 Margin pull-quote (which is the *side* mate, not the *room*).
+
+```html
+<section class="proof-room">
+  <blockquote class="display-italic">"…"</blockquote>
+  <p class="attribution"><span class="caps">— Name, Company</span></p>
+</section>
+```

package/templates/vite/.howone/skills/hallmark/references/components/t4-numbered-stat-strip.md

@@ -0,0 +1,14 @@
+### T4 · Numbered stat strip
+A horizontal strip of 3–5 stats (count + qualifier) running across one row. Tabular nums.
+*Use when:* you have multiple complementary metrics that work together.
+*Don't confuse with:* H4 Stat-led hero (which is one focal number, not several).
+
+```html
+<section class="stat-strip tnum">
+  <div><b>2.4M</b><span>users</span></div>
+  <div><b>99.97%</b><span>uptime</span></div>
+  <div><b>14</b><span>regions</span></div>
+</section>
+```
+
+---

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

@@ -0,0 +1,24 @@
+# Output contract & scope
+
+Loaded once per build, at handoff time.
+
+## Output contract
+
+When producing new work:
+
+- Put design tokens in one place at the top of the stylesheet (`:root` custom properties) or in a `tokens.css` / `tokens.ts` file if the project uses one.
+- Name tokens by semantic role, not value. `--color-ink`, not `--color-black`.
+- If the project uses Tailwind, extend the theme; do not inline arbitrary values across components.
+- If the project uses a framework, match the framework's file conventions — don't reinvent them.
+- Include a short comment block at the top of the stylesheet naming the genre, the tone the user picked, the palette's anchor hue, and the structural fingerprint. This is the only comment you need.
+
+## Scope and limits
+
+Hallmark is a *taste* skill. It will not:
+
+- Invent product copy. If the user hasn't given you the words, ask.
+- Pick a brand identity. It will follow one you give it.
+- Enforce a specific style (dark mode, glassmorphism, brutalism). It will execute whichever genre + tone the user committed to.
+- Build logic — state management, data fetching, business rules. It is a visual / interaction layer only.
+
+If a request falls outside taste — "build the auth flow", "wire up Stripe" — do the work, but apply Hallmark to the rendered surface.