# Hallmark Hero Enrichment Patterns (E1–E8) and the Four HP Gates Explained > Explore Hallmark's hero enrichment patterns E1-E8 and the four HP gates. Learn how they prevent visual clutter by allowing one enrichment and one polish pattern per hero for cleaner layouts. - Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark) - Tags: deep-dive - Published: 2026-07-22 --- **Hallmark’s hero system separates layout decisions into eight optional media archetypes (E1–E8) and four headline polish patterns (HP1–HP4), allowing only one enrichment and one polish pattern per hero to prevent visual clutter.** The Nutlope/hallmark repository defines a strict design system for hero sections that prevents visual slop through orthogonal decision-making. Hallmark hero enrichment patterns determine what visual media accompanies your copy, while the four HP gates control how the headline itself is treated. These constraints live in [`hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/hero-enrichment.md) and integrate with macro-structures defined in [`macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/macrostructures.md). ## The Three Orthogonal Decisions Hallmark separates every hero into three distinct choice layers that do not overlap: - **Macro-structure** – The overall layout framework (Marquee, Stat-Led, Quote-Led) defined in [`macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/macrostructures.md) - **Enrichment archetype** – The visual media type (E1–E8) that accompanies the copy - **Polish pattern** – The headline treatment (HP1–HP4) affecting layout and overflow After selecting a macro-structure, you may add **zero-or-one** enrichment archetype and **zero-or-one** polish pattern. Adding more triggers failure in the slop-test gates defined in [`slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/slop-test.md). ## The Eight Enrichment Archetypes (E1–E8) The enrichment hierarchy in [[`hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/hero-enrichment.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/hero-enrichment.md) defines eight distinct media patterns. Each includes specific usage constraints and customizable knobs. ### E1: Demo Video – Clipped-by-viewport-edge Use this for SaaS and dev-tool demos where a short product video is available. The video extends beyond the viewport edge to create a "more than fits on screen" cue. **When to avoid:** Stock footage or filler video that lacks substance. **Key knobs:** Clip side (right, left, or both), aspect ratio, and frame treatment. **Implementation example** (lines 90–120 of [`hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/hero-enrichment.md)): ```html

Plan, build, ship.

The project tracker your engineering team won’t ignore.

Try it free
``` ```css .hero--clipped { display: grid; grid-template-columns: minmax(20rem, 1fr) 1.4fr; gap: var(--space-2xl); align-items: center; overflow: visible; /* let media spill */ } .hero__media { width: calc(100% + 12vw); /* 12 % sticks out right */ aspect-ratio: 16 / 10; border-radius: 12px; border: var(--rule-hair) solid var(--color-rule); } @media (max-width: 60rem) { .hero--clipped { grid-template-columns: 1fr; } .hero__media { width: 100%; } } ``` ### E2: Demo Video – Full-bleed muted loop Ideal for mood-driven products where the video itself carries the visual message. The video covers the full background with reduced opacity. **When to avoid:** When you need to show interface details clearly—choose E1 or a mockup instead. ### E3: Mock App Screenshot – Browser-framed split Clean web-app screenshots gain context from a browser frame. The frame provides spatial orientation for the interface. **When to avoid:** Busy or blurry screenshots that lack clarity. **Key knobs:** Frame style, tilt angle, and screenshot count. ### E4: Mock App Screenshot – Floating no-frame High-quality screenshots that stand alone without chrome. Uses shadow depth and corner radius to create elevation. **When to avoid:** Low-quality shots that require framing for context. **Key knobs:** Shadow depth, corner radius, and background reveal. ### E5: Custom Illustration Centerpiece Hand-drawn SVG or generated artwork that tells a brand story. Requires unique execution to avoid template aesthetics. **When to avoid:** Generic "modern-professional" pages where illustration becomes decorative noise. **Key knobs:** Build method, animation, and scale. ### E6: Animated Loop – Pure CSS/SVG/Motion Small, subtle motion adding life without overwhelming the user. Loop duration must not exceed 4 seconds. **When to avoid:** Pages already heavy with animation where extra motion creates anxiety. **Key knobs:** Medium, placement, and loop duration (≤ 4 s). ### E7: Abstract Background – Subtle gradient + grain Adds barely-visible texture to flat surfaces through gradient overlays and grain filters. **When to avoid:** Themes already providing paper-like or textured backgrounds. **Key knobs:** Gradient direction, grain amount, and animation. ### E8: Hero Photography – Single tightly-cropped image Product, food, team, or travel photography where the image is the primary content. **When to avoid:** When typography-only would create stronger hierarchy. ## The Four HP Gates (Polish Patterns) The **hero shape polish** patterns (HP1–HP4) defined in the "Hero shape polish" section of [`hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/hero-enrichment.md) affect headline layout, overflow handling, and decorative semantics. Only one polish pattern may be applied per hero. ### HP1: Vertical-rail title Places a vertical word-mark beside the hero copy using `writing-mode: vertical-rl` while keeping body text horizontal. **When to use:** When the hero is centered or marquee-shaped and needs a structural anchor. **When to avoid:** When the body title is already large and the rail competes for attention. ### HP2: Marquee-overflow Allows the main `

` to bleed past the right edge using `overflow-x: clip`, creating a manifesto-style statement. **When to use:** Playful genres (Brutal, Manifesto, Sport) with short titles (≤ 6 words). **When to avoid:** Long legal or explanatory headlines requiring full readability. **Code implementation** (lines 105–124 of [`hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/hero-enrichment.md)): ```html

STOP MAKING UI THAT LOOKS LIKE EVERYONE ELSE'S UI.

Hallmark. A design skill that refuses defaults.

``` ```css .hero--overflow { overflow-x: clip; padding: var(--space-2xl) var(--page-gutter); } .hero__display--xxl { font-size: clamp(4rem, 14vw, 14rem); line-height: 0.92; white-space: nowrap; } @media (max-width: 60rem) { .hero__display--xxl { white-space: normal; font-size: clamp(2.5rem,10vw,5rem); } } ``` ### HP3: Cursor-spotlight A radial gradient that follows the cursor within the hero bounds, creating an "alive" surface effect. **When to use:** Atmospheric or dark-paper SaaS landing pages with empty hero surface area. **When to avoid:** When the cursor would cover text or buttons; the effect must stay behind content. ### HP4: Decorative-numeral A huge edition, year, or chapter number in display-italic positioned in a corner. **When to use:** Editorial, magazine, or versioned content where the number carries semantic meaning. **When to avoid:** Random numbers without meaning that become decorative slop. ## Implementation Workflow According to [`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md), the hero construction follows a strict sequence: 1. Select a **macro-structure** from [`macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/macrostructures.md) (Marquee, Stat-Led, etc.) 2. Optionally choose **one enrichment archetype** (E1–E8) 3. Optionally choose **one polish pattern** (HP1–HP4) 4. Apply **hero-space discipline** (height, padding, centering rules) from [`slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/slop-test.md) gates 44–46 5. **Stamp the choices** into a page comment (`/* Hallmark · macrostructure: … */`) for future audit compatibility The **quality bar** in [`hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/hero-enrichment.md) requires passing eight pre-flight questions before any enrichment is emitted. Violating the one-enrichment/one-polish rule triggers slop-test failures and audit rejection. ## Summary - Hallmark hero enrichment patterns consist of eight media archetypes (E1–E8) ranging from clipped demo videos to floating mockups - The four HP gates (HP1–HP4) provide headline polish through vertical rails, overflow effects, cursor spotlights, and decorative numerals - Only **one** enrichment archetype and **one** polish pattern may be used per hero section - All patterns are defined in [`hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/hero-enrichment.md) with implementation code sketches at specific line ranges - The system enforces quality through slop-test gates in [`slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/slop-test.md) and requires stamping choices for audit trails ## Frequently Asked Questions ### What happens if I apply more than one enrichment archetype to a Hallmark hero? Applying more than one enrichment archetype or polish pattern violates the orthogonal decision framework and triggers failure in the slop-test gates. The audit verb will reject the hero until you reduce to zero-or-one enrichment and zero-or-one polish pattern. ### How do I choose between E1 and E2 for product videos? Choose **E1** when demonstrating specific interface features with a clipped viewport-edge treatment. Choose **E2** for atmospheric mood-setting where the video serves as background texture rather than demonstration, accepting that interface details will be obscured. ### Can I use HP2 Marquee-overflow with long headlines? No. The HP2 gate specifically requires short titles of six words or fewer. Long legal or explanatory headlines must remain fully readable within viewport bounds using standard overflow behavior. ### Where are the canonical code examples for these patterns? All code sketches reside in [[`hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/hero-enrichment.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/hero-enrichment.md) within the Nutlope/hallmark repository. E1 appears at lines 90–120, HP2 at lines 105–124, HP1 at lines 81–99, HP3 at lines 126–146, and HP4 at lines 158–176.