Hallmark Hero Macrostructures: The 6 Layout Patterns for Above-the-Fold Design

Hallmark defines six distinct hero macrostructures—Marquee Hero, Stat-Led, Quote-Led, Letter, Photographic, and Clipped—that prescribe the placement of headings, copy, and visuals in the viewport's top section.

The Nutlope/hallmark repository implements these hero macrostructures as primary layout patterns that determine how content appears above the fold. Each macrostructure establishes specific rules for typography scale, button placement, imagery handling, and narrative flow, enabling consistent page-shape decisions across the design system.

The Six Hallmark Hero Macrostructures

Marquee Hero

The Marquee Hero treats the entire viewport as a single bold statement. This macrostructure fills the fold with a dominant visual or typographic element, deliberately omitting sub-headings and call-to-action buttons from the initial view.

Key characteristics include:

• Headings rendered at 8–14 vw type scale
• No hero-level buttons present in-fold
• Optional full-bleed background imagery
• A thick horizontal rule (<hr class="rule-thick" />) separating the hero from below-fold content

<!-- Marquee Hero -->
<section class="marquee">
  <h1 class="display-xxl">A bold statement.</h1>
</section>
<hr class="rule-thick" />
<section class="below-fold">…</section>

Stat-Led

The Stat-Led macrostructure anchors the narrative with a large numeric metric. According to skills/hallmark/references/macrostructures/04-stat-led.md, this pattern uses data visualization as the primary visual hook rather than decorative imagery.

Key characteristics include:

• Heading structure combines a large number with a worded qualifier
• Outlined chip button for secondary actions
• Charts and images restricted to supporting sections only
• Number-tick reveal animation for the statistic

<!-- Stat-Led -->
<section class="stat-hero">
  <div class="figure tnum">99.97<span class="unit">%</span></div>
  <p class="qualifier">Uptime across 2026, measured externally.</p>
  <a class="cta-outline">Read the report →</a>
</section>
<section class="supporting-stats">…</section>

Quote-Led

The Quote-Led macrostructure leverages social proof by presenting a pull-quote with attribution as the headline element. As specified in skills/hallmark/references/macrostructures/09-quote-led.md, this pattern minimizes decorative elements to emphasize the testimonial.

Key characteristics include:

• Pull-quote serving as the primary headline
• Attribution line beneath the quote
• No CTA buttons within the fold (appears below)
• Minimal decorative imagery permitted

<!-- Quote-Led -->
<section class="quote-hero">
  <blockquote class="pull-quote">"Design matters more than code."</blockquote>
  <cite class="author">— Jane Doe, Creative Director</cite>
</section>

Letter

The Letter macrostructure formats the hero as a personal note from a founder or author. This pattern creates intimacy through first-person address and simplified typography.

Key characteristics include:

• First-person greeting ("Dear friend,")
• No buttons present within the fold
• Simple typographic treatment, typically limited to a short paragraph
• Optional subtle background texture

<!-- Letter -->
<section class="letter-hero">
  <p class="greeting">Dear friend,</p>
  <p class="body">We've built something you'll love…</p>
</section>

Photographic

The Photographic macrostructure subordinates typography to a massive image or video that dominates the viewport. Detailed in skills/hallmark/references/macrostructures/08-photographic.md, this pattern prioritizes visual storytelling over textual hierarchy.

Key characteristics include:

• Full-bleed photograph or background video
• Small annotation text overlay
• No headline-level buttons
• Emphasis on immersive visual content

<!-- Photographic -->
<section class="photo-hero" style="background-image:url('hero.jpg');">
  <p class="annotation">A glimpse of our studio.</p>
</section>

Clipped

The Clipped macrostructure creates dramatic visual tension by cutting the headline at the viewport edge. While listed among the six hero macrostructures in the master index, its detailed specification resides in the enrichment documentation.

Key characteristics include:

• Headline extending beyond the viewport edge (right or left)
• Optional polish patterns (HP1-HP4) adjusting the layout
• Typically paired with enrichment elements such as demo videos

<!-- Clipped (example using enrichment) -->
<section class="clipped-hero">
  <h1 class="headline clip-right">Design •</h1>
  <div class="enrichment e1-clipped-video">
    <!-- demo video clipped at viewport edge -->
    <video src="demo.mp4" muted autoplay loop></video>
  </div>
</section>

Optional Polish Patterns for Hero Macrostructures

Any hero macrostructure may receive one optional polish pattern that modifies layout or motion without altering the core macrostructure shape. As defined in skills/hallmark/references/hero-enrichment.md, the available polish patterns include:

• HP1 Vertical-rail: Adds a vertical navigation or decorative rail
• HP2 Marquee-overflow: Creates horizontal scrolling text elements
• HP3 Cursor-spotlight: Implements mouse-following highlight effects
• HP4 Decorative-numeral: Inserts large background numbers as texture

These patterns combine with the base macrostructure to create distinctive variations while maintaining the underlying layout logic.

Implementation Files and References

The Hallmark system organizes hero macrostructure definitions across several reference files:

File	Purpose
skills/hallmark/references/macrostructures.md	Master index of all 21 macrostructures, including the six hero types
skills/hallmark/references/macrostructures/03-marquee-hero.md	Detailed specification for Marquee Hero
skills/hallmark/references/macrostructures/04-stat-led.md	Detailed specification for Stat-Led
skills/hallmark/references/macrostructures/09-quote-led.md	Detailed specification for Quote-Led
skills/hallmark/references/macrostructures/12-letter.md	Detailed specification for Letter
skills/hallmark/references/macrostructures/08-photographic.md	Detailed specification for Photographic
skills/hallmark/references/hero-enrichment.md	Definitions for polish patterns (HP1-HP4) and enrichment archetypes (E1-E8)

Summary

• Hallmark provides six hero macrostructures: Marquee Hero, Stat-Led, Quote-Led, Letter, Photographic, and Clipped.
• Each macrostructure dictates specific rules for typography scale, button placement, and imagery handling in the above-the-fold area.
• Polish patterns (HP1-HP4) offer optional enhancements that modify motion and layout without changing the base macrostructure.
• Implementation specifications reside in the skills/hallmark/references/macrostructures/ directory within the Nutlope/hallmark repository.
• Code implementations use semantic HTML classes such as marquee, stat-hero, quote-hero, letter-hero, photo-hero, and clipped-hero.

Frequently Asked Questions

What is the difference between a hero macrostructure and a polish pattern?

A hero macrostructure defines the fundamental layout and content hierarchy of the above-the-fold area—whether it uses a large statistic, a quote, or a full-bleed image. A polish pattern is an optional overlay that adds motion or decorative elements (such as cursor spotlights or vertical rails) without altering the underlying structural logic. Any of the six macrostructures can accept any of the four polish patterns defined in hero-enrichment.md.

Which hero macrostructure should I use for a data-heavy landing page?

The Stat-Led macrostructure is specifically designed for data-driven narratives. According to skills/hallmark/references/macrostructures/04-stat-led.md, this pattern features large numeric displays with tabular number formatting (tnum), outlined chip buttons, and number-tick reveal animations that emphasize metrics over decorative imagery.

Can I combine multiple hero macrostructures on one page?

No—Hallmark's system assigns exactly one hero macrostructure per page to maintain clear visual hierarchy above the fold. However, you can combine a base macrostructure with enrichment elements (such as E1-Clipped-Video) and polish patterns (HP1-HP4) to create unique variations while adhering to the structural constraints of your chosen macrostructure.

Where are the hero macrostructure specifications stored in the Hallmark repository?

All hero macrostructure definitions live in the skills/hallmark/references/ directory. The master index at macrostructures.md catalogs all 21 system macrostructures, while individual specifications for each hero type reside in numbered files within skills/hallmark/references/macrostructures/ (e.g., 03-marquee-hero.md, 04-stat-led.md). Polish patterns and enrichment options are documented in skills/hallmark/references/hero-enrichment.md.

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