# Hallmark Hero Archetypes: The Complete H1–H9 Layout System

> Discover Hallmark's nine hero archetypes H1-H9. Learn to use these intentional layout patterns for specific content like product launches and testimonials.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: how-to-guide
- Published: 2026-07-19

---

**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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/study.md) and the stamping mechanism visible in [`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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:

```html
<!-- 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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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

```bash
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)

```bash
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

```bash
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)

```bash
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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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.