# Hero Enrichment Tiers in Hallmark: From Typography-Only to Lottie (Complete Guide 2025)
> Explore Hallmark's hero enrichment tiers from typography-only to Lottie animation. Understand the six mandatory tiers (0-E) and their progression. Your complete 2025 guide.
- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: deep-dive
- Published: 2026-08-04
---
**Hallmark defines six strict hero enrichment tiers (0 through E), starting with typography-only and escalating to Lottie animation, with a mandatory protocol that prevents skipping lower tiers.**
The Hallmark design system enforces a disciplined hierarchy for hero section decoration. This **hero enrichment tier system** ensures visual elements are added only when they genuinely improve communication—not just when they look attractive. The framework is documented in the open-source `Nutlope/hallmark` repository, where every tier, decision rule, and implementation pattern is specified with architectural rigor.
## The Six Hero Enrichment Tiers Explained
Hallmark's enrichment hierarchy creates a progressive enhancement model. Each tier adds complexity, file weight, and maintenance burden—so advancement requires justification.
### Tier 0: Typography Only
The foundation of every Hallmark hero is text alone: headline, lede paragraph, and optional call-to-action. No media assets. Zero dependencies. This is the **strongest fail-state** and remains valid for any brief.
```markdown
| Tier | What | When to Use |
|------|------|-------------|
| **0** | Typography only | Always acceptable |
```
### Tier A: Custom-Built CSS Art
Pure CSS shapes, gradients, and clip-paths. Zero external assets. Zero JavaScript dependencies.
- **Use for:** Geometric decorations, glyph-style accents, gradient orbs, abstract patterns
- **Implementation guide:** [[`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)
### Tier B: Hand-Built SVG
Figma-designed SVG, optimized by hand, with optional declarative animation.
- **Use for:** Complex illustrations, mascots, workflow diagrams that exceed CSS capabilities
- **Key constraint:** Must be authored intentionally—no exported-auto-SVG without cleanup
```html
Our Bakery's Story
Freshly baked every morning.
```
### Tier C: Generated Illustration
AI-generated raster imagery with mandatory provenance tracking and post-processing.
- **Approved sources:** Nanobanana, Recraft V4, Midjourney
- **Requirements:** Document generation prompt, apply brand-aligned post-processing
- **Use for:** Specific characters or scenes too costly to hand-draw
### Tier D: Library Illustration
Stock SVG libraries recolored to match brand palette.
- **Approved sources:** Storyset, Humaaans, unDraw
- **Stigma:** Explicitly designated for "quick and cheap" briefs only
- **Constraint:** Never present as custom work; attribution per license
### Tier E: Lottie Animation (Last Resort)
JSON-based animation with required fallback strategy. The most complex and heaviest tier.
- **Use for:** Articulated figures, multi-frame mascot loops, motion that cannot be expressed declaratively
- **Explicitly prohibited for:** Simple spinners, check-marks, or loading states (use Tier A instead)
```html
Explore the Dashboard
```
## The Enrichment Protocol: Three Unbreakable Rules
The hero enrichment hierarchy is enforced by a strict decision protocol defined in [[`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):
1. **Start at Tier 0** — a typographic hero is always valid
2. **Climb the hierarchy** only when the brief demands more visual communication and time budget permits
3. **Never skip a lower tier** — if Tier A satisfies the requirement, you cannot jump to Tier E
This **"earned-its-place" quality bar** guarantees that every hero remains legible and functional even if all enrichment is stripped away.
## Reference Files and Implementation Resources
| File | 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) | Hierarchy definition, decision table, 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) | Tier A (CSS) and Tier B (SVG) implementation patterns |
| [[`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) | Tier C-E asset sources, size limits, fallback requirements |
## Summary
- Hallmark's **hero enrichment tiers** run from 0 (typography only) through E (Lottie animation), with strict escalation rules
- **Tier 0 is always valid**—no hero fails for lacking decoration
- **Tier E is explicitly a last resort**, prohibited for simple motion patterns
- The **enrichment protocol** prevents skipping tiers, ensuring proportional investment
- Implementation guidance spans three reference files in `skills/hallmark/references/`
## Frequently Asked Questions
### What is the lowest acceptable hero tier in Hallmark?
**Tier 0 (typography only) is always acceptable.** No Hallmark hero is rejected for insufficient visual decoration. The design system treats text-first heroes as the strongest, most resilient pattern—fully accessible, instantly loaded, and immune to asset failures.
### When should I use Lottie instead of CSS or SVG?
Use **Tier E (Lottie)** only when motion cannot be expressed with CSS animations or SVG SMIL. Examples include articulated character loops with independent limb movement or multi-frame narrative sequences. Explicitly prohibited use cases: loading spinners, success check-marks, or simple state transitions—those belong in Tier A.
### How does Hallmark prevent over-decoration of heroes?
The **enrichment protocol** enforces three rules: start at Tier 0, climb only with brief justification, and never skip lower tiers. This creates friction against unnecessary complexity. Additionally, Tier D (library illustrations) carries explicit "quick and cheap" stigma, and Tier E requires fallback documentation—both deterrents to casual escalation.
### Where are the hero enrichment rules documented in the Hallmark repository?
All tiers, decision tables, and discipline rules live in [[`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). Implementation specifics for CSS art and hand-built SVG are in [`custom-craft.md`](https://github.com/Nutlope/hallmark/blob/main/custom-craft.md); asset sourcing and technical requirements for generated, library, and Lottie media are in [`assets.md`](https://github.com/Nutlope/hallmark/blob/main/assets.md).