# Hallmark Hero Enrichment Tiers E1–E5: A Technical Breakdown > Explore the 5 Hallmark hero enrichment tiers E1-E5. Discover how to add purposeful visual enrichment to your hero sections with this technical breakdown from Nutlope. - Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark) - Tags: deep-dive - Published: 2026-08-02 --- **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](https://github.com/Nutlope/hallmark) repository, the enrichment system is codified in [`skills/hallmark/references/hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/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. ```html

Plan, build, ship.

The project tracker your engineering team won’t ignore.

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

Saturday, 6:14 a.m.

The dough went in at midnight.

``` ## 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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/component-cookbook.md), with specific files such as [`h7-demo-video-clipped-by-viewport-edge.md`](https://github.com/Nutlope/hallmark/blob/main/h7-demo-video-clipped-by-viewport-edge.md) providing production-ready code for the E1 archetype.