Hallmark Hero Enrichment Tiers: The Complete Guide From Typography to Lottie

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

<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">
      <!-- SVG paths optimized per custom-craft.md -->
    </svg>
  </figure>
</section>

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

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

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)	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)	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)	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; Tiers C–E follow 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.

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

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