Hallmark Hero Archetypes: The Complete H1–H9 Layout System

Hallmark defines nine distinct hero archetypes (H1–H9) that replace generic centered headlines with intentional layout patterns—ranging from full-viewport marquees to split-screen diptychs—each designed for specific content types like product launches, testimonials, or statistical proof.

The Nutlope/hallmark repository provides a taxonomy of hero archetypes that helps designers break free from the "centered-everything" AI-generated skeleton. By assigning every page one of nine structural patterns defined in skills/hallmark/references/component-cookbook.md, the system ensures visual hierarchy aligns with content goals, from manifesto-style branding to data-driven landing pages.

The Nine Hallmark Hero Archetypes

Each archetype encodes a specific layout, visual hierarchy, and content focus. The following definitions reference the canonical component files located in skills/hallmark/references/components/.

H1 – Marquee

The Marquee archetype presents a single bold statement—often a word or short phrase—that fills the entire viewport. No sub-headline or CTA appears above the fold.

• Core pattern: Full-viewport typography dominance
• When to use: Branding statements, manifesto-style pages, or product launches where the hero itself constitutes the entire message
• Reference file: skills/hallmark/references/components/h1-marquee.md

H2 – Split Diptych

The Split Diptych divides the hero into a two-column grid: headline and lede on one side, with an image, proof point, or illustration on the opposite side.

• Core pattern: grid-cols-2 wrapper with textual and visual balance
• When to use: Product pages, portfolio showcases, or storytelling where visual evidence must sit adjacent to explanatory copy
• Reference file: skills/hallmark/references/components/h2-split-diptych.md

H3 – Quote-Led

The Quote-Led archetype elevates a pull-quote with attribution to the hero slot, allowing the testimonial itself to serve as the headline.

• Core pattern: Prominent blockquote with citation
• When to use: Social-proof or credibility-driven pages where a testimonial or thought-leadership quote anchors the message
• Reference file: skills/hallmark/references/components/h3-quote-led.md

H4 – Stat-Led

The Stat-Led hero foregrounds a large numeric figure—such as a metric, percentage, or count—paired with a concise explanatory line.

• Core pattern: Tabular or display numerals with minimal qualifying text
• When to use: Landing pages where the core value proposition is a measurable benefit (e.g., "4× faster" or "99.9% uptime")
• Reference file: skills/hallmark/references/components/h4-stat-led.md

H5 – Letter Hero

The Letter Hero adopts a first-person narrative opening ("Dear Reader,") followed by one to three paragraphs and an optional sign-off.

• Core pattern: Epistolary layout with personal voice
• When to use: Personal, narrative, or invitation-style pages where a human voice should lead the experience
• Reference file: skills/hallmark/references/components/h5-letter-hero.md

H6 – Photographic Fold

The Photographic Fold fills the viewport with a full-bleed image, placing a caption or small copy block in a corner.

• Core pattern: Edge-to-edge photography with overlay or corner text
• When to use: Visual-driven projects, art portfolios, or cinematic storytelling where the photograph itself serves as the hero
• Reference file: skills/hallmark/references/components/h6-photographic-fold.md

H7 – Demo Video Clipped-by-Viewport-Edge

This archetype positions the headline on the left and a demo video on the right, with the video extending past the viewport edge to suggest continuation.

• Core pattern: Asymmetric layout with overflowing media element
• When to use: Interactive product demos or motion-heavy showcases where moving visuals reinforce the headline
• Reference file: skills/hallmark/references/components/h7-demo-video-clipped-by-viewport-edge.md

H8 – Mockup Split (Browser-Framed)

The Mockup Split places the headline on the left and a browser-framed mockup on the right, potentially tilted 0–3 degrees for dynamic perspective.

• Core pattern: Text alongside a realistic UI screenshot within a browser chrome frame
• When to use: SaaS, API, or developer-tool landing pages where the code or UI screenshot must be front-and-center
• Reference file: skills/hallmark/references/components/h8-mockup-split-browser-framed.md

H9 – Custom Illustration Centerpiece

The Custom Illustration archetype centers a hand-crafted SVG or pure-CSS illustration as the dominant visual element.

• Core pattern: Bespoke vector or CSS artwork as the focal point
• When to use: Pages where unique brand illustration or iconography serves as the visual anchor (e.g., hand-drawn logos or animated mascots)
• Reference file: skills/hallmark/references/components/h9-custom-illustration-centerpiece.md

How the Hallmark Archetype System Works

Beyond static definitions, Hallmark implements a three-stage pipeline for applying these archetypes, governed by the logic in skills/hallmark/references/study.md and the stamping mechanism visible in site/index.html.

Diagnosis

Hallmark scans the DOM or creative brief to detect which archetype fits existing content structures. For example, a single <h1> with no visible CTA triggers an H1 classification, while a grid-cols-2 wrapper suggests H2. This detection logic is fully documented in skills/hallmark/references/study.md.

Stamping

Once identified, the chosen archetype is recorded in a comment stamp at the top of the generated file. This stamp explicitly declares the macrostructure and knob settings, ensuring stability across revisions:

<!-- Hallmark · macrostructure: Marquee Hero · H1 hero knobs: size=xxl, alignment=center -->

You can see a production example of this stamping pattern in site/index.html within the repository root.

Knob-Based Variation

Each archetype exposes configurable knobs—parameters such as size, alignment, divider, and image-type—defined in skills/hallmark/references/component-cookbook.md. These allow fine-tuning without breaking the core layout pattern. For instance, H2 provides knobs for ratio, right-side, and divider to control the split composition.

Implementing Hero Archetypes via CLI

You can declare hero archetypes directly through Hallmark’s command-line interface using the --hero flag and adjust behavior with --knob parameters.

Declaring a Marquee (H1) Hero

hallmark redesign ./index.html --hero H1 --knob size=xl --knob alignment=left-bias

This command generates a single large word filling the fold, with no sub-head or CTA visible in-view.

Configuring a Split Diptych (H2)

hallmark redesign ./product.html \
  --hero H2 \
  --knob ratio=7/5 \
  --knob right=photo \
  --knob divider=hairline

The result places headline and lede on the left, with a 7/5-ratio photograph on the right separated by a thin hairline rule.

Building a Stat-Led (H4) Hero

hallmark redesign ./speed.html \
  --hero H4 \
  --knob number-style=tabular \
  --knob qualifier=below

This produces a giant numeric display (e.g., "4×") with a concise qualifier line positioned underneath.

Deploying a Custom Illustration (H9)

hallmark redesign ./illustration.html \
  --hero H9 \
  --knob build=tier-A \
  --knob animation=loop \
  --knob scale=dominant

The output features a pure-CSS illustration occupying the hero area, configured to loop on hover.

Summary

• Hallmark provides nine hero archetypes (H1–H9) that replace generic AI layouts with intentional structural patterns.
• Each archetype is documented in skills/hallmark/references/components/ and configurable via knobs defined in skills/hallmark/references/component-cookbook.md.
• H1 (Marquee) suits branding statements, while H2 (Split Diptych) works for product pages requiring visual proof.
• H3 (Quote-Led) leverages testimonials, H4 (Stat-Led) highlights metrics, and H5 (Letter Hero) enables personal narrative.
• H6 (Photographic Fold), H7 (Demo Video), H8 (Mockup Split), and H9 (Custom Illustration) serve visual, cinematic, SaaS, and brand-illustration needs respectively.
• The system uses diagnosis (DOM scanning), stamping (comment metadata), and knobs (parameter tuning) to maintain consistency, with detection logic residing in skills/hallmark/references/study.md.

Frequently Asked Questions

How does Hallmark determine which hero archetype to apply?

Hallmark analyzes the existing DOM structure or creative brief using detection rules defined in skills/hallmark/references/study.md. For example, it maps a single <h1> element without visible CTAs to H1 (Marquee), or a two-column grid wrapper to H2 (Split Diptych).

Can I manually specify a hero archetype instead of using automatic detection?

Yes. You can explicitly declare an archetype using the --hero flag in the CLI (e.g., --hero H4), or manually insert a stamp comment at the top of your HTML file. Hallmark respects these stamps on subsequent runs, preserving your chosen archetype and knob settings.

What are "knobs" in the Hallmark archetype system?

Knobs are configurable parameters associated with each archetype—such as size, alignment, ratio, or divider—that allow you to tweak visual details without altering the core layout pattern. They are defined in skills/hallmark/references/component-cookbook.md and passed via the --knob CLI argument.

When should I use H4 (Stat-Led) versus H1 (Marquee)?

Use H4 (Stat-Led) when your page’s primary value proposition is a measurable metric or data point (e.g., "99.9% uptime" or "4× faster"). Reserve H1 (Marquee) for pure branding moments, manifestos, or launches where a single bold statement—rather than numerical proof—constitutes the entire message.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}