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

> Master Hallmark hero enrichment patterns E1-E8. Learn when to use typography-only vs visual media hero sections with this complete guide. Improve your design decisions now.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: deep-dive
- Published: 2026-07-13

---

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

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

```

```css
.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:

```css
.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.

```html
<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.

```css
.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`](https://github.com/Nutlope/hallmark/blob/main/h9-custom-illustration-centerpiece.md):

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

```

```css
.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.

```css
@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`.

```css
.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.

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

```

## The Decision Protocol

The [`hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/hero-enrichment.md) | Full enrichment hierarchy, image-need detection, and all eight archetypes |
| [`custom-craft.md`](https://github.com/Nutlope/hallmark/blob/main/custom-craft.md) | Tier A (CSS) and Tier B (SVG) implementation details |
| [`assets.md`](https://github.com/Nutlope/hallmark/blob/main/assets.md) | External asset catalogues and placeholder strategies |
| [`macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/macrostructures.md) | Hero macrostructures that precede enrichment selection |
| [`h9-custom-illustration-centerpiece.md`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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.