The Six Hero Enrichment Tiers in Hallmark: A Complete Visual Hierarchy Guide

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

<section class="hero">
  <h1 class="hero__title">Design that speaks.</h1>
  <p class="hero__lede">Bold typography, no extra visuals.</p>
  <a class="btn" href="/about">Learn more</a>
</section>

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.

<section class="hero hero--css-art">
  <h1 class="hero__title">Geometric vibes</h1>
  <div class="hero__art"></div>
</section>

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

<section class="hero hero--svg">
  <h1 class="hero__title">Bakery loaf</h1>
  <svg class="hero__svg" viewBox="0 0 100 100" aria-hidden="true">
    <path d="M10 30 Q50 5 90 30 L90 80 Q50 95 10 80 Z"/>
  </svg>
</section>

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

<section class="hero hero--generated">
  <h1 class="hero__title">AI‑crafted character</h1>
  <img
    src="/assets/illustration.png"
    alt="Illustration of a friendly robot"
    loading="lazy"
  >
</section>

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.

<section class="hero hero--library">
  <h1 class="hero__title">Team illustration</h1>
  <img src="/assets/team.svg" alt="Team illustration" class="hero__svg">
</section>

.hero--library .hero__svg {
  fill: var(--color-accent);
}

Asset sourcing and licensing guidance lives in 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.

<section class="hero hero--lottie">
  <h1 class="hero__title">Dynamic mascot</h1>
  <lottie-player
    src="/assets/mascot.json"
    background="transparent"
    speed="1"
    loop
    autoplay
  ></lottie-player>
</section>

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

• 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 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 before implementation.
• Implementation guidance spans custom-craft.md for Tiers A-B, 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 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. Supporting implementation details live in skills/hallmark/references/custom-craft.md (Tiers A-B) and skills/hallmark/references/assets.md (Tiers C-E). Working test implementations are scattered throughout site/_tests/ directories.

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