# Hallmark Hero Enrichment Tiers: The Complete Guide From Typography to Lottie
> Explore Hallmark's six hero enrichment tiers, from typography to Lottie animations. Understand the strict protocol ensuring visual elements earn their place and never skip a lower tier.
- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: deep-dive
- Published: 2026-08-13
---
**Hallmark defines six strict hero enrichment tiers, from Tier 0 (typography-only) to Tier E (Lottie animation), enforcing a "never skip a lower tier" protocol that ensures visual elements must earn their place.**
The Hallmark design system prioritizes **functional clarity over decorative excess** in hero sections. This hierarchy—documented in the [`skills/hallmark/references/hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/hero-enrichment.md) file—prevents performance bloat and maintains accessibility by requiring teams to justify every enrichment step. The system applies to all Hallmark-compliant pages built on the Nutlope/hallmark repository.
## The Six Hero Enrichment Tiers in Hallmark
Hallmark's enrichment hierarchy is **absolute and non-negotiable**. Each tier adds visual complexity only when simpler options prove insufficient.
| Tier | Enrichment Type | Use Case | Implementation |
|------|-----------------|----------|----------------|
| **0** | **Typography only** | Universal fallback; always valid | Pure HTML/Typography |
| **A** | **Custom-built CSS art** | Geometric shapes, gradients, clip-paths | Zero-asset, zero-dependency |
| **B** | **Hand-built SVG** | Complex illustrations, mascots, diagrams | Figma-designed, optimized |
| **C** | **Generated illustration** | AI-generated raster imagery | Nanobanana, Recraft V4, Midjourney with provenance |
| **D** | **Library illustration** | Fast, budget-constrained projects | Storyset, Humaaans, unDraw (recolored) |
| **E** | **Lottie animation** | Complex multi-frame motion only | JSON + fallback; **last resort** |
### Tier 0: Typography-Only Baseline
Every Hallmark hero begins here. This tier contains **headline, lede, and optional CTA** with zero media dependencies. According to the source protocol, this is "the strongest fail-state" and remains valid for any context.
Tier 0 ensures **progressive enhancement**: if all enrichment fails, the hero remains legible and functional.
### Tier A: Custom-Built CSS Art
Tier A introduces **pure CSS shapes, gradients, and clip-paths**. This zero-asset approach adds geometric or glyph-style decoration without external dependencies.
The [`custom-craft.md`](https://github.com/Nutlope/hallmark/blob/main/custom-craft.md) reference provides specific guidance for building Tier A artifacts that render performantly across browsers.
### Tier B: Hand-Built SVG
When CSS cannot express the required illustration—**mascots, workflow diagrams, or complex scenes**—teams escalate to Tier B. These are Figma-designed, hand-optimized SVGs with optional declarative animation.
Example implementation:
```html
Our Bakery's Story
Freshly baked every morning.
```
### Tier C: Generated Illustration
AI-generated raster images from **Nanobanana, Recraft V4, or Midjourney** with mandatory provenance tracking and post-processing. Use for specific characters or scenes that prove too costly to hand-draw.
The [`assets.md`](https://github.com/Nutlope/hallmark/blob/main/assets.md) file documents approved generation workflows and output specifications.
### Tier D: Library Illustration
Stock libraries—**Storyset, Humaaans, unDraw**—recolored to match the brand palette. This tier explicitly serves "quick and cheap" briefs where speed outweighs custom craft.
### Tier E: Lottie Animation (Last Resort)
**Lottie is strictly reserved for motion that cannot be expressed through CSS or SVG.** The Hallmark protocol forbids Lottie for simple spinners, check-marks, or micro-interactions—those belong in Tier A.
Example Tier E implementation:
```html
Explore the Dashboard
```
The [`assets.md`](https://github.com/Nutlope/hallmark/blob/main/assets.md) reference mandates **JSON size limits and fallback requirements** for all Lottie deployments.
## The Hallmark Enrichment Protocol: Three Enforced Rules
The hierarchy operates through a strict decision-making process defined in [`skills/hallmark/references/hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/hero-enrichment.md):
1. **Start at Tier 0** — A typographic hero is always valid.
2. **Climb only with justification** — Escalate only when the brief demands more visual communication and the time budget permits.
3. **Never skip a lower tier** — If Tier A satisfies the requirement, jumping to Tier E violates protocol.
This "earned-its-place" quality bar guarantees that **removing enrichment never breaks functionality**.
## Key Reference Files for Implementation
| File Path | Purpose |
|-----------|---------|
| [[`skills/hallmark/references/hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/hero-enrichment.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/hero-enrichment.md) | Defines the complete tier hierarchy, decision table, and discipline rules |
| [[`skills/hallmark/references/custom-craft.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/custom-craft.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/custom-craft.md) | Implementation details for Tier A (CSS art) and Tier B (SVG) |
| [[`skills/hallmark/references/assets.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/assets.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/assets.md) | Approved sources, size limits, and fallback requirements for Tiers C–E |
## Summary
- **Hallmark hero enrichment tiers** range from Tier 0 (typography-only) to Tier E (Lottie), with strict escalation rules.
- The **"never skip a lower tier" protocol** ensures visual elements justify their performance cost.
- **Tier A (CSS art)** and **Tier B (SVG)** are implemented per [`custom-craft.md`](https://github.com/Nutlope/hallmark/blob/main/custom-craft.md); **Tiers C–E** follow [`assets.md`](https://github.com/Nutlope/hallmark/blob/main/assets.md) sourcing guidelines.
- **Lottie is explicitly last resort**, forbidden for simple animations achievable in CSS.
- All rules are enforced through the **enrichment protocol** 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 is the purpose of Hallmark's hero enrichment hierarchy?
The hierarchy ensures that **visual decoration only appears when it truly adds value**, preventing unnecessary asset loading and maintaining accessibility. By forcing teams to justify each escalation step, Hallmark guarantees heroes remain functional even with all enrichment stripped away.
### When is it acceptable to use Lottie in a Hallmark hero?
Lottie (Tier E) is **strictly reserved for complex multi-frame motion** that cannot be expressed through CSS or SVG—such as articulated figure animations or mascot loops. Simple indicators like spinners or check-marks must use Tier A CSS techniques instead, per the [`hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/hero-enrichment.md) protocol.
### How does the "never skip a lower tier" rule work in practice?
If your brief requires visual decoration, you must **attempt Tier A before Tier B**, Tier B before Tier C, and so on. You cannot jump from a typography-only hero straight to an AI-generated illustration without documenting why CSS art and hand-built SVG proved insufficient.