Hallmark Hero Enrichment Tiers E1–E5: A Technical Breakdown

The Hallmark hero enrichment tiers E1 through E5 are five specific visual archetypes—ranging from clipped viewport-edge demo videos to custom SVG centerpieces—that define how to add purposeful visual enrichment to a hero section when typography alone is insufficient.

In the Nutlope/hallmark repository, the enrichment system is codified in skills/hallmark/references/hero-enrichment.md. This system provides a strict decision hierarchy for adding visual complexity to hero sections, ensuring every enrichment passes an eight-point quality bar before shipping. The E-series (E1–E8) represents concrete implementation patterns for what sits beside the headline, with E1–E5 covering video, screenshot, and illustration strategies.

The 5 Hero Enrichment Tiers (E1–E5) Explained

Within Hallmark’s enrichment hierarchy, E1–E5 represent the first five concrete archetypes for hero visual enrichment. Each tier specifies a distinct media type and layout pattern, designed for specific product contexts.

E1 – Demo Video (Clipped-by-Viewport-Edge)

E1 places a product demo video on the right or left side of the hero, intentionally allowing it to spill off the viewport edge. This creates a sense of depth and movement without overwhelming the typography.

Use this tier for SaaS and developer tools where a screen recording or product walkthrough is available. The clipped edge signals "more content beyond the fold" while keeping the headline readable.

<!-- E1 – Clipped-edge demo video (hero-enrichment.md lines 104-121) -->
<section class="hero hero--clipped">
  <div class="hero__copy">
    <h1>Plan, build, ship.</h1>
    <p>The project tracker your engineering team won’t ignore.</p>
    <a class="btn" href="/signup">Try it free</a>
  </div>
  <figure class="hero__media">
    <video autoplay muted loop playsinline preload="metadata"
           poster="/hero-poster.webp" fetchpriority="high">
      <source src="/hero.av1.mp4" type='video/mp4; codecs="av01.0.05M.08"'>
      <source src="/hero.vp9.webm" type="video/webm">
    </video>
  </figure>
</section>

E2 – Demo Video (Full-Bleed Muted Loop with Ghost Overlay)

E2 fills the entire hero area with a looping video, applying a color-tinted ghost overlay to ensure text remains legible. Unlike E1’s constrained clipping, E2 uses atmospheric motion as the dominant visual element.

Deploy this tier for mood-driven product pages where ambient background video enhances brand perception—such as lifestyle or creative tools—provided the video is optimized with AV1 or VP9 codecs for performance.

E3 – Mock App Screenshot (Browser-Framed Split)

E3 positions the headline on the left and a browser-framed screenshot on the right, optionally tilted to create perspective. The browser chrome (address bar, window controls) provides immediate context that the product is a web application.

This tier works best for web app landing pages with clean, high-fidelity screenshots. The frame establishes trust by showing the actual interface within a recognizable browser environment.

E4 – Mock App Screenshot (Floating No-Frame)

E4 removes the browser chrome, allowing the screenshot to float with a subtle shadow as a standalone element. This approach requires higher-quality assets that can stand alone without the contextual framing of a browser window.

Use E4 when the interface design is the hero itself—typically for design tools, dashboards, or mobile-responsive views where the browser chrome would distract from the UI details.

E5 – Custom Illustration Centerpiece

E5 replaces photographic or video media with a hand-built SVG or generated raster illustration as the single focal point. This tier demands bespoke artwork—whether a brand mascot, geometric scene, or narrative illustration—that CSS alone cannot produce.

According to hero-enrichment.md, this tier is implemented when a brand has a specific story or visual metaphor (e.g., a bakery loaf, an astronaut mascot) that benefits from artistic interpretation beyond geometric CSS shapes.

<!-- E5 – Hand-built SVG illustration (hero-enrichment.md lines 95-102) -->
<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>
  <svg class="hero__art" aria-hidden="true" viewBox="0 0 120 120">
    <!-- 60-line loaf drawing, animated with @property for breathing -->
  </svg>
</section>

How the Enrichment Tiers Fit Into Hallmark’s Decision Flow

The E1–E5 tiers do not exist in isolation. As defined in the source code, Hallmark enforces a three-step decision protocol:

1. Select a macro-structure (e.g., Marquee Hero, Stat-Led).
2. Select zero or one enrichment archetype from E0 (typography only) through E8 (hero photography).
3. Apply polish patterns (HP1–HP4) and space-discipline rules (hero height, fold constraints, asymmetry).

Before any E-tier ships, it must pass eight pre-flight questions documented in skills/hallmark/references/hero-enrichment.md. If the enrichment fails any question—such as "Does the enrichment communicate something typography can’t?"—the component falls back to Tier 0 (typography only).

Summary

• E1 uses clipped viewport-edge videos for SaaS demos.
• E2 employs full-bleed muted loops with ghost overlays for atmospheric effect.
• E3 presents browser-framed screenshots in a split layout.
• E4 floats unframed screenshots for standalone UI focus.
• E5 centers custom SVG or raster illustrations as brand storytelling devices.

These five tiers provide a graduated scale of visual complexity, ensuring that hero sections remain purposeful and performance-conscious.

Frequently Asked Questions

What is the difference between Tier E and Tiers E1–E5 in Hallmark?

Tier E (from the A–E hierarchy) refers to Lottie animations—complex JSON-based vector animations—while E1–E5 are specific archetypes within the E-series enrichment system. The E-series (E1–E8) defines what visual element accompanies the headline, whereas the A–E tiers define the production method (CSS, SVG, Generated, Library, or Lottie).

Can I combine multiple enrichment tiers like E1 and E5?

No. According to the Hallmark source code in hero-enrichment.md, you must select zero or one enrichment archetype per hero. Combining multiple visual centerpieces (e.g., a video and a custom illustration) violates the space-discipline rules and creates visual hierarchy conflicts. If multiple assets are needed, the protocol requires choosing the single highest-impact tier or falling back to typography-only (E0).

When should I choose E3 over E4 for app screenshots?

Choose E3 (browser-framed) when the user needs immediate context that they are looking at a web application, or when the screenshot quality benefits from the structural boundary of a browser window. Choose E4 (floating no-frame) only when the screenshot is high-fidelity enough to stand alone without chrome, typically for design-focused tools where the interface itself is the brand statement.

Where are the concrete component sketches for these tiers documented?

The implementation details and component variations for E1–E5 are catalogued in skills/hallmark/references/component-cookbook.md, with specific files such as h7-demo-video-clipped-by-viewport-edge.md providing production-ready code for the E1 archetype.

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