Hero Enrichment Tiers in Hallmark: From Typography-Only to Lottie (Complete Guide 2025)

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.

| 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)

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

<section class="hero hero--enriched">
  <div class="hero__copy">
    <h1>Our Bakery's Story</h1>
    <p>Freshly baked every morning.</p>
  </div>
  <!-- Tier B: hand-built SVG illustration -->
  <figure class="hero__media">
    <svg viewBox="0 0 200 200" aria-label="Loaf illustration">
      <!-- Optimized paths -->
    </svg>
  </figure>
</section>

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)

<section class="hero hero--enriched">
  <div class="hero__copy">
    <h1>Explore the Dashboard</h1>
  </div>
  <figure class="hero__media">
    <lottie-player src="/animations/demo.json"
                   background="transparent"
                   speed="1"
                   loop
                   autoplay
                   style="width:100%;height:auto">
    </lottie-player>
  </figure>
</section>

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):

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)	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)	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)	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). Implementation specifics for CSS art and hand-built SVG are in custom-craft.md; asset sourcing and technical requirements for generated, library, and Lottie media are in assets.md.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}