# The Six Hero Enrichment Tiers in Hallmark: A Complete Visual Hierarchy Guide > Master Hallmark's six hero enrichment tiers from typography to Lottie animations. Understand the visual hierarchy and unlock richer content with this complete guide. - Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark) - Tags: guide - Published: 2026-08-01 --- **Hallmark defines six enrichment tiers (0, A, B, C, D, E) that dictate how much visual media a hero may contain, ordered from simplest typography-only to complex Lottie animations.** The Hallmark design system by Nutlope establishes a strict **hero enrichment tier** protocol that guides designers toward the most economical visual solution that still satisfies creative requirements. 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), these tiers form a deliberate hierarchy—starting from zero-impact typography and escalating to full motion graphics—ensuring performance and craftsmanship without unnecessary bloat. ## The Complete Hero Enrichment Tier List Each tier represents a distinct **production method and asset type**. The protocol mandates starting at Tier 0 and escalating only when a brief's creative demands cannot be met at the current level. ### Tier 0: Typography Only The foundation of every Hallmark hero. **No visual enrichment**—just the headline, lede, and optional call-to-action. Use this as the default for all briefs and the strongest fallback when imagery isn't justified. ```html

Design that speaks.

Bold typography, no extra visuals.

Learn more
``` ### Tier A: Custom-Built CSS Art Pure CSS shapes, gradients, `clip-path`, and decorative elements requiring **zero external assets**. Choose Tier A for geometric or abstract visual accents that CSS can express cleanly—no HTTP requests, no raster files, full scalability. ```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%); } ``` Implementation details appear in [`skills/hallmark/references/custom-craft.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/custom-craft.md), which provides "how-to" recipes for CSS-only compositions. ### Tier B: Hand-Built SVG Optimized SVG files—often designed in Figma—with optional declarative animation. Select this tier when an illustration exceeds CSS capabilities: mascots, workflow diagrams, organic shapes like a bakery loaf. ```html

Bakery loaf

``` ```css .hero--svg .hero__svg { width: 10rem; height: auto; fill: var(--color-accent); } ``` The `site/_tests/03-maple-bakery` directory demonstrates Tier B in production, while [`custom-craft.md`](https://github.com/Nutlope/hallmark/blob/main/custom-craft.md) documents SVG optimization workflows. ### Tier C: Generated Illustration Raster images produced by **AI generators** (Nanobanana, Recraft, Midjourney) with post-processing. Appropriate for characters or scenes too detailed for hand-built SVG, yet still requiring a bespoke visual treatment rather than stock assets. ```html

AI‑crafted character

Illustration of a friendly robot
``` ### Tier D: Library Illustration Stock-library assets from Storyset, Humaaans, or unDraw, **customized with brand colors**. Acceptable only when budget or schedule constraints force expedience. The Hallmark protocol explicitly prohibits using assets verbatim—modification is mandatory. ```html

Team illustration

Team illustration
``` ```css .hero--library .hero__svg { fill: var(--color-accent); } ``` Asset sourcing and licensing guidance lives in [`skills/hallmark/references/assets.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/assets.md). ### Tier E: Lottie Animation Full-featured **Lottie JSON animation**—designated as the **last resort** in the hierarchy. Reserved exclusively for complex motion unattainable through CSS or SVG: multi-frame mascot loops, intricate character animation, or physics-based movement. ```html

Dynamic mascot

``` ```css .hero--lottie lottie-player { width: 12rem; height: 12rem; } ``` ## How to Apply Hero Enrichment Tiers in Practice The Hallmark workflow enforces **tier escalation through quality gates**. Before advancing from Tier 0 to E, designers must satisfy eight **quality-gate questions** documented in [`hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/hero-enrichment.md): - Asset size under 2MB - Reduced-motion fallback for accessibility - Brand color integration - Performance budget compliance - Licensing verification (for tiers C, D, E) - Responsive behavior validation - Alternative text provision - Loading state handling Concrete implementations appear in `site/_tests/` directories. Notable examples include: - `site/_tests/09-slow-pour/` — Tier A CSS art demonstration - `site/_tests/03-maple-bakery/` — Tier B hand-built SVG ## Choosing the Right Hero Enrichment Tier | Decision Factor | Recommended Tier | |-----------------|----------------| | Maximum performance, zero dependencies | **0** — Typography only | | Geometric abstraction, no HTTP requests | **A** — CSS art | | Organic illustration, vector scalability | **B** — Hand-built SVG | | Detailed bespoke imagery, AI workflow available | **C** — Generated illustration | | Tight deadline, customizable stock acceptable | **D** — Library illustration | | Complex motion, all simpler methods exhausted | **E** — Lottie animation | The [`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md) file in `skills/hallmark/` outlines when to invoke hero enrichment during the broader design flow, ensuring tiers serve project goals rather than creative impulses. ## Summary - **Hallmark defines six hero enrichment tiers (0, A, B, C, D, E)**, not five—each representing a distinct production method with escalating complexity and asset requirements. - **Tier 0 (typography only)** is the mandatory default and strongest fallback. - **Tiers A and B** (CSS art and SVG) prioritize performance through code-generated visuals with zero or minimal external dependencies. - **Tiers C and D** introduce raster assets through AI generation or stock libraries, with explicit customization requirements. - **Tier E (Lottie)** is reserved for motion complexity unattainable through code-based methods. - All tiers 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) before implementation. - Implementation guidance spans [`custom-craft.md`](https://github.com/Nutlope/hallmark/blob/main/custom-craft.md) for Tiers A-B, [`assets.md`](https://github.com/Nutlope/hallmark/blob/main/assets.md) for Tiers C-E, and `site/_tests/` for working examples. ## Frequently Asked Questions ### Does Hallmark have five or six hero enrichment tiers? Hallmark defines **six hero enrichment tiers**: 0, A, B, C, D, and E. The numbering starts at zero (typography only) rather than one, which sometimes causes confusion. The complete hierarchy is documented in [`skills/hallmark/references/hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/hero-enrichment.md) in the Nutlope/hallmark repository. ### What is the difference between Tier A and Tier B in Hallmark? **Tier A** produces visuals through pure CSS—gradients, `clip-path`, and geometric shapes with no external files. **Tier B** uses hand-built SVG for organic shapes and illustrations that CSS cannot express cleanly. Both avoid raster assets, but Tier B permits design-tool workflows (Figma export, path optimization) where Tier A demands code-first construction. ### When should I use Tier E (Lottie animation) in Hallmark? Use **Tier E only as a last resort** when complex motion cannot be achieved through CSS or SVG. Examples include multi-frame character loops, physics-based movement, or intricate timeline animations. The Hallmark protocol requires exhausting Tiers 0 through D and satisfying all eight quality gates before escalating to Lottie, due to its performance cost and dependency on external libraries. ### Where are the hero enrichment tier rules documented in the Hallmark source code? The tier hierarchy, quality gates, and decision protocol appear in [`skills/hallmark/references/hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/hero-enrichment.md). Supporting implementation details live in [`skills/hallmark/references/custom-craft.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/custom-craft.md) (Tiers A-B) and [`skills/hallmark/references/assets.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/assets.md) (Tiers C-E). Working test implementations are scattered throughout `site/_tests/` directories.