Hallmark Hero Enrichment Patterns: Complete Guide to the E1-E8 Archetypes and When to Use Them

Hallmark hero enrichment patterns provide a structured decision tree with eight specific archetypes (E1-E8) that determine whether a hero section should remain typography-only or incorporate visual media based on the brief's actual requirements.

The Nutlope/hallmark repository implements a disciplined system for hero section design that prevents defaulting to generic stock imagery. According to the source code in skills/hallmark/references/hero-enrichment.md, the framework evaluates image necessity through a tiered hierarchy before selecting the appropriate enrichment archetype. This ensures every visual element earns its place and aligns with the content strategy.

The Enrichment Hierarchy

Hallmark organizes visual decisions into a tiered hierarchy ranging from Tier 0 (typography only) to Tier E (photography). The system documented in hero-enrichment.md mandates that you first detect image-need, then climb to the highest tier the brief permits:

• Tier 0: Typography only, no enrichment
• Tier A: Pure CSS constructions
• Tier B: Hand-built SVG (custom craft)
• Tier C: Generated raster illustrations
• Tier D/E: Production photography or stock

Only after determining the appropriate tier should you select a specific archetype from the E1-E8 catalog.

The Eight Enrichment Archetypes (E1-E8)

Each archetype includes specific implementation patterns stored in the reference files. Select based on the brief cues and available assets.

E1 · Demo Video Clipped-by-Viewport-Edge

Use when: The brief mentions "demo" or "show how it works" and you have real product footage (not stock). This works best for SaaS and dev-tool landing pages.

The video intentionally spills 10-20% past the viewport edge to create visual interest without overwhelming the copy.

<section class="hero hero--clipped">
  <div class="hero__copy">
    <h1>Plan, build, ship.</h1>
    <p>Distributed tracing that explains itself.</p>
  </div>
  <figure class="hero__media">
    <video autoplay muted loop preload="metadata" poster="/hero-poster.webp"
           fetchpriority="high" aria-label="Tour of the dashboard">
      <source src="/hero.av1.mp4" type="video/mp4; codecs=av01.0.05M.08">
    </video>
  </figure>
</section>

.hero--clipped {
  display: grid;
  grid-template-columns: minmax(20rem, 1fr) 1.4fr;
  gap: var(--space-2xl);
  align-items: center;
  overflow: visible;
}

.hero__media {
  width: calc(100% + 12vw);
  aspect-ratio: 16/10;
  border: var(--rule-hair) solid var(--color-rule);
  overflow: hidden;
}

@media (max-width: 60rem) {
  .hero--clipped {
    grid-template-columns: 1fr;
  }
  .hero__media {
    width: 100%;
  }
}

E2 · Demo Video Full-Bleed with Ghost Overlay

Use when: The product mood matters more than specific features (fashion, ambience, or atmospheric brands). Avoid when the product UI must be clearly visible.

This archetype uses mix-blend-mode to tint the video subtly:

.hero--bg video {
  mix-blend-mode: multiply;
  opacity: 0.5;
}

E3 · Mock App Screenshot Browser-Framed Split

Use when: The brief mentions "platform," "dashboard," or "tool" and you have a clean, well-lit screenshot. The screenshot sits in a browser frame, slightly tilted, to the right of the headline.

<figure class="hero__media">
  <img src="screenshot.png" class="browser-frame" alt="Dashboard preview">
</figure>

E4 · Mock App Screenshot Floating No-Frame

Use when: The screenshot is visually strong enough to stand alone without chrome. The image floats with a soft shadow.

.hero__media {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

E5 · Custom Illustration Centerpiece

Use when: The brand has a unique story or mascot (bakeries, studios, creative agencies). Avoid for generic "modern-professional" pages. This uses Tier B (hand-built SVG) or Tier C (generated raster) assets.

Implementation details live in h9-custom-illustration-centerpiece.md:

<section class="hero hero--illustration">
  <div class="hero__copy">
    <h1>Saturday, 6:14 a.m.</h1>
    <p>The dough went in at midnight.</p>
  </div>
  <figure class="hero__media">
    <svg viewBox="0 0 200 200" class="loaf">…</svg>
  </figure>
</section>

.hero--illustration .loaf {
  animation: breath 6s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

@media (prefers-reduced-motion: reduce) {
  .hero--illustration .loaf {
    animation: none;
  }
}

E6 · Animated Loop

Use when: The page is otherwise static and needs a single subtle motion element. Avoid if the page already contains heavy animation. This uses CSS or SVG motion.

@keyframes spin {
  to { transform: rotate(360deg); }
}

.dot {
  animation: spin 2s linear infinite;
}

E7 · Abstract Background

Use when: The page would feel synthetically flat without texture, but you lack specific imagery. This uses a two-colour gradient with low-opacity grain via feTurbulence.

.hero--bg {
  background: linear-gradient(135deg, #faf0e6, #e5d5c5);
  filter: url(#grain);
}

E8 · Hero Photography

Use when: The brief requires real photography (e-commerce, product catalogues, food menus). Accepts Tier D (production) or Tier E (stock) assets.

<figure class="hero__media">
  <img src="hero.jpg" alt="Product photo">
</figure>

The Decision Protocol

The hero-enrichment.md file specifies a quick-check protocol to map brief cues to archetypes:

• "Demo" / "show how it works" → E1 or E2 (video)
• "Platform" / "dashboard" / "tool" → E3 or E4 (mock screenshot)
• "Shop" / "menu" / "product" → E8 (photography)
• "Bakery" / "café" / "atelier" → E5 (illustration)
• "Agency" / "portfolio" → E8 or Tier 0 (none)
• "Manifesto" / "essay" / "letter" → Typography only (no enrichment)

If cues are unclear, ask a single clarifying question and default to no enrichment.

Key Reference Files

File	Contents
hero-enrichment.md	Full enrichment hierarchy, image-need detection, and all eight archetypes
custom-craft.md	Tier A (CSS) and Tier B (SVG) implementation details
assets.md	External asset catalogues and placeholder strategies
macrostructures.md	Hero macrostructures that precede enrichment selection
h9-custom-illustration-centerpiece.md	Concrete Tier-B SVG example for E5

Summary

• Hallmark hero enrichment patterns follow a strict hierarchy: detect image-need first, select the highest permissible tier, then choose an archetype.
• Eight archetypes (E1-E8) cover everything from clipped demo videos to custom illustrations, each with specific "use when" rules.
• Reference files in skills/hallmark/references/ contain implementation details for CSS, SVG, and asset strategies.
• Default to Tier 0 (typography only) unless the brief explicitly requires visual enrichment and you have appropriate assets.

Frequently Asked Questions

What is the difference between Tier A and Tier B in Hallmark's enrichment system?

Tier A represents pure CSS constructions that require no external assets, while Tier B involves hand-built SVG elements that illustrate specific brand stories. According to custom-craft.md, Tier A works for geometric patterns and gradients, whereas Tier B suits custom illustrations like those used in the E5 archetype.

When should I choose typography-only (Tier 0) instead of using an enrichment archetype?

Select Tier 0 when the brief contains terms like "manifesto," "essay," or "letter," or when the content strategy prioritizes reading over visual demonstration. The decision protocol in hero-enrichment.md explicitly recommends defaulting to no enrichment when the brief lacks clear image requirements or when only generic stock assets are available.

How do I decide between E1 (clipped video) and E2 (full-bleed video)?

Choose E1 when you need to showcase actual product functionality with real footage on SaaS landing pages, allowing the video to spill past the viewport edge. Select E2 when the mood and atmosphere matter more than clear product visibility, using the ghost overlay technique to create ambience without distracting from the headline.

Where are the implementation details for custom illustrations stored?

The complete SVG patterns and CSS animations for the E5 archetype reside in skills/hallmark/references/components/h9-custom-illustration-centerpiece.md. This file contains the 60-line hand-built SVG example and breathing animation keyframes referenced in the enrichment system.

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