# Hero Enrichment Tier Levels in Hallmark: The Complete Six-Tier Visual System > Understand Hallmark's six hero enrichment tier levels 0 A B C D E. Learn how they rank visual complexity from typography to Lottie animations enforcing progressive enhancement. - Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark) - Tags: getting-started - Published: 2026-07-19 --- **Hallmark defines six distinct hero enrichment tier levels—0, A, B, C, D, and E—that rank visual complexity from pure typography to Lottie animations, enforcing progressive enhancement and asset minimalism.** The Nutlope/hallmark repository establishes a rigorous taxonomy for hero section visual media through its hero enrichment tier levels. Defined in [`skills/hallmark/references/hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/hero-enrichment.md), this six-tier hierarchy mandates that designers exhaust simpler, lower-impact solutions before escalating to resource-intensive alternatives. The system ensures optimal performance by requiring zero external assets at lower tiers while reserving complex media for justified use cases. ## The Six Hero Enrichment Tier Levels Explained Hallmark’s enrichment hierarchy spans from **Tier 0** (no visual assets) to **Tier E** (full animation), with each level representing a distinct production methodology and asset requirement. ### Tier 0 – Typography Only **Tier 0** represents the baseline state: no visual enrichment beyond headline, lede text, and optional call-to-action buttons. This tier serves as the default for all briefs and functions as the strongest fallback when imagery cannot be justified by user value or brand requirements. ### Tier A – Custom-Built CSS Art **Tier A** mandates **custom-built CSS art** utilizing pure CSS shapes, gradients, clip-paths, and decorative elements that require zero external asset requests. This tier accommodates geometric or abstract visual accents that can be expressed entirely through stylesheets, eliminating network overhead and runtime dependencies. ### Tier B – Hand-Built SVG **Tier B** authorizes **hand-built SVG** files—typically designed in Figma and optimized for web deployment—with optional declarative animation. Designers should select this tier when illustrations exceed CSS expressiveness, such as mascot characters, workflow diagrams, or detailed bakery loaf imagery that demands vector precision. ### Tier C – Generated Illustration **Tier C** permits **AI-generated illustrations** produced by generators like Nanobanana, Recraft, or Midjourney, followed by post-processing optimization. This tier suits characters or scenes too detailed for hand-coded SVGs but still requiring bespoke, brand-specific visuals rather than stock assets. ### Tier D – Library Illustration **Tier D** allows **library illustration** assets sourced from stock libraries (Storyset, Humaaans, unDraw) with mandatory brand color customization. Hallmark permits this tier only when budget or schedule constraints force expedited production, provided assets receive meaningful modification rather than verbatim deployment. ### Tier E – Lottie Animation **Tier E** constitutes the **Lottie animation** tier—explicitly designated as the last resort. This tier accommodates complex multi-frame motion (such as mascot loops) that cannot be achieved through CSS transitions or SVG SMIL animations, accepting the performance cost of JavaScript-driven animation playback. ## Implementation Patterns for Each Enrichment Tier The repository provides concrete implementation patterns demonstrating minimal viable markup for each tier, typically housed within a `
` container. ### Tier 0 Implementation Typography-only implementations require no special classes beyond standard hero structure: ```html

Design that speaks.

Bold typography, no extra visuals.

Learn more
``` ### Tier A Implementation CSS art implementations utilize modifier classes and decorative divs: ```html

Geometric vibes

``` ```css .hero--css-art .hero__art { width: 12rem; height: 12rem; background: conic-gradient(var(--color-accent) 0% 25%, transparent 25% 100%); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); } ``` ### Tier B Implementation Hand-built SVG integrations reference external or inline vector assets: ```html

Bakery loaf

``` ```css .hero--svg .hero__svg { width: 10rem; height: auto; fill: var(--color-accent); } ``` ### Tier C Implementation Generated illustrations use standard image tags with lazy loading: ```html

AI-crafted character

Illustration of a friendly robot
``` ### Tier D Implementation Library assets receive brand color overrides through CSS variables: ```html

Team illustration

Team illustration
``` ```css .hero--library .hero__svg { fill: var(--color-accent); } ``` ### Tier E Implementation Lottie integrations require the player component with JSON source: ```html

Dynamic mascot

``` ```css .hero--lottie lottie-player { width: 12rem; height: 12rem; } ``` ## Quality Gates and Validation Constraints Regardless of tier selection, every enrichment must satisfy **eight quality-gate questions** defined in [`skills/hallmark/references/hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/hero-enrichment.md). These constraints enforce file size limitations (under 2MB), reduced-motion fallbacks for accessibility, and performance budgets. The quality gates prevent arbitrary tier escalation by requiring documented justification for asset weight. ## Key Reference Files and Test Locations The hero enrichment tier levels are governed by specific reference documentation and demonstrated in test implementations: - [`skills/hallmark/references/hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/hero-enrichment.md) – Defines the tier hierarchy, enrichment archetypes (E1–E8), and decision protocol. - [`skills/hallmark/references/custom-craft.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/custom-craft.md) – Provides detailed recipes for building Tier A CSS art and Tier B hand-built SVGs. - [`skills/hallmark/references/assets.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/assets.md) – Catalogs external assets for Tiers C, D, and E, including licensing and placeholder strategies. - [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) – Outlines the overall Hallmark design flow, including hero enrichment invocation criteria. - `site/_tests/09-slow-pour` – Demonstrates Tier A CSS art implementations. - `site/_tests/03-maple-bakery` – Demonstrates Tier B hand-built SVG implementations. ## Summary - Hallmark specifies **six hero enrichment tier levels** (0, A, B, C, D, E) ordered by ascending complexity and asset requirements. - **Tier 0** establishes typography-only defaults, while **Tier E** reserves Lottie animations for scenarios unattainable through CSS or SVG. - **Tiers A and B** prioritize zero-asset or low-weight vector solutions through custom CSS and hand-built SVGs. - **Tiers C and D** permit raster and stock imagery only when AI generation or library assets receive proper brand customization. - All tiers must pass **eight quality-gate validations** regarding file size, accessibility, and performance constraints documented in [`skills/hallmark/references/hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/hero-enrichment.md). ## Frequently Asked Questions ### What distinguishes Tier A from Tier B in Hallmark's enrichment system? **Tier A** requires pure CSS implementations using gradients, clip-paths, and shapes that generate zero external network requests, making it ideal for geometric abstractions. **Tier B** authorizes hand-built SVG files for complex illustrations—such as mascots or detailed objects—that cannot be practically rendered through CSS alone, though these remain lightweight vector assets. ### When should designers escalate to Tier E (Lottie animation) rather than Tier B (SVG)? Designers should reserve **Tier E** exclusively for complex multi-frame animations that demand timeline-based sequencing or physics that cannot be expressed through CSS transitions or SVG declarative animation. According to the Hallmark source code, Tier E functions as the "last resort" when motion requirements exceed the capabilities of static or CSS-driven vectors. ### How does Hallmark enforce the quality standards for hero enrichment tiers? Every enrichment tier must satisfy **eight quality-gate questions** specified in [`skills/hallmark/references/hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/hero-enrichment.md), covering constraints such as file size under 2MB, reduced-motion fallbacks, and performance impact assessments. These gates ensure that tier selection aligns with technical budgets rather than purely aesthetic preferences. ### Where can developers find implementation examples for specific enrichment tiers? Concrete test implementations reside in the `site/_tests/` directory, including `site/_tests/09-slow-pour` for Tier A CSS art demonstrations and `site/_tests/03-maple-bakery` for Tier B SVG illustrations. Additional recipes for building custom CSS art and hand-optimized vectors are documented in [`skills/hallmark/references/custom-craft.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/custom-craft.md).