Hero Enrichment Hierarchy in Hallmark: 6 Tiers Explained

The Hallmark hero enrichment hierarchy is a six-tier system (0 → A → B → C → D → E) that prioritizes performance and craftsmanship by favoring CSS and SVG solutions before resorting to generated images, stock assets, or Lottie animations.

Hallmark treats hero enrichment as an optional, tiered decision framework that lets designers add visual media only when it genuinely enhances the message. After selecting the macro-structure for a page, the enrichment hierarchy guides which tier to use—start at the highest feasible tier given your brief, timeline, and budget, or work upward from Tier A if iterating progressively.

Tier 0: Typography Only

No visual enrichment whatsoever—just headline, lede, and optional CTA.

This tier is always acceptable and serves as the safest fallback in the Hallmark hero enrichment hierarchy. Use Tier 0 when the brief doesn't call for imagery, when any media would feel decorative rather than purposeful, or when removing enrichment would break the hero's clarity (a signal that media is being used as a crutch).

Reference: skills/hallmark/references/hero-enrichment.md, line 45.

Tier A: Custom-Built CSS Art

Pure-CSS shapes, gradients, and clip-path with zero external assets or dependencies.

Tier A is the preferred starting point for Hallmark hero enrichment. It excels at geometric compositions, gradient backgrounds, and glyph-style decoration that can be expressed entirely in CSS.

<section class="hero hero--css-art">
  <div class="hero__copy">
    <h1>Design that speaks.</h1>
    <p>Pure-CSS shapes, no external files.</p>
  </div>
  <div class="hero__bg" aria-hidden="true"></div>
</section>

.hero--css-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 70vh;
  background: linear-gradient(135deg, #f5e0c9, #d8c3a5);
}
.hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, #ff8c00 15%, transparent 20%),
    radial-gradient(circle at 70% 70%, #6a2c70 12%, transparent 18%);
  mix-blend-mode: multiply;
  z-index: -1;
}

Reference: skills/hallmark/references/hero-enrichment.md, line 46.

Tier B: Hand-Built SVG

SVG created in design tools like Figma, optimized and animated declaratively.

Move to Tier B when the illustration exceeds CSS capabilities but remains feasible to craft manually—mascots, workflow diagrams, or detailed vector scenes. This tier preserves performance while enabling complex visual storytelling.

<section class="hero hero--svg">
  <div class="hero__copy">
    <h1>Meet Your New Helper</h1>
    <p>Hand-crafted SVG mascot, animated with CSS.</p>
  </div>
  <figure class="hero__media">
    <svg viewBox="0 0 100 100" class="mascot">
      <path d="M10 80 Q50 10 90 80" stroke="currentColor" fill="none" stroke-width="4"/>
    </svg>
  </figure>
</section>

.mascot {
  width: 8rem;
  animation: breathe 4s infinite ease-in-out;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

The site/_tests/03-maple-bakery/ directory contains a complete Tier B implementation.

Reference: skills/hallmark/references/hero-enrichment.md, line 47.

Tier C: Generated Illustration

AI-produced raster or vector imagery with provenance tracking and mandatory post-processing.

Select Tier C for characters or scenes that would be prohibitively expensive to hand-draw, provided the brief explicitly needs such imagery and you have bandwidth for editing. Hallmark requires provenance documentation and post-processing to ensure brand alignment.

Common generators include Nanobanana, Recraft V4, and Midjourney.

Reference: skills/hallmark/references/hero-enrichment.md, line 48.

Tier D: Library Illustration

Stock-library assets requiring customization to meet brand standards.

Treat Tier D as a shortcut—only viable when schedule or budget constraints force compromise. Assets from Storyset, Humaaans, or unDraw must never be used unmodified; brand color adaptation is mandatory.

Reference: skills/hallmark/references/hero-enrichment.md, line 49.

Tier E: Lottie Animation

Complex animated illustration delivered as Lottie JSON—use as a last resort.

Reserve Tier E for motion that CSS or SVG cannot achieve, such as articulated character loops. Do not use Lottie for simple effects like spinning logos or checkmarks—those belong in Tier A.

<section class="hero hero--lottie">
  <div class="hero__copy">
    <h1>Explore the Journey</h1>
    <p>Animated mascot loop — Lottie fallback.</p>
  </div>
  <figure class="hero__media">
    <lottie-player src="/animations/hero.json"
                    background="transparent"
                    speed="1"
                    style="width: 100%; height: auto;"
                    loop
                    autoplay
                    poster="/hero-poster.webp"
                    fetchpriority="high"
                    aria-label="Mascot animation">
    </lottie-player>
  </figure>
</section>

Always provide a prefers-reduced-motion fallback and a static poster image.

Reference: skills/hallmark/references/hero-enrichment.md, line 50.

Discipline Rules for Applying the Hero Enrichment Hierarchy

Hallmark enforces three governing principles when selecting tiers:

• Progressive selection: Start at Tier A; advance tiers only when the visual goal cannot be achieved at the current level. Never default to lower tiers without justification.
• Earned enrichment: The hero must function completely if enrichment is removed. Media that carries the message is a crutch, not an enhancement.
• Performance budget: Total payload must not exceed 2 MB, critical assets require fetchpriority="high", and motion must respect prefers-reduced-motion.

Key Source Files

File	Purpose
skills/hallmark/references/hero-enrichment.md	Canonical definition of the hierarchy and discipline rules
skills/hallmark/custom-craft.md	Implementation guides for Tier A (CSS) and Tier B (SVG)
skills/hallmark/assets.md	Sourcing guidelines for Tier C, D, and E assets
site/_tests/03-maple-bakery/	Working Tier B SVG hero example
site/_tests/05-tracejam-saas/	Tier A CSS-art hero with clipped-edge video reference

Summary

• The hero enrichment hierarchy in Hallmark spans six tiers from pure typography (0) to Lottie animation (E)
• Prefer lower tiers: CSS art (A) and hand-built SVG (B) deliver superior performance and craftsmanship
• Justify higher tiers: Generated (C), library (D), and Lottie (E) enrichments require explicit brief alignment and discipline adherence
• All heroes must pass the "crutch test"—remove enrichment and the message must still land
• Performance boundaries at 2 MB payload with accessibility fallbacks are non-negotiable

Frequently Asked Questions

How do I decide which tier to use for a new Hallmark project?

Begin with Tier A (CSS art) and attempt to achieve your visual goal. If CSS limitations block the design, escalate to Tier B (hand-built SVG). Only proceed to Tier C or higher when the brief explicitly requires imagery that cannot be expressed through code, or when timeline and budget constraints are documented and approved.

Why is Lottie (Tier E) considered a last resort in the Hallmark hierarchy?

Lottie files introduce JavaScript dependencies, larger payloads, and accessibility complexity that CSS and SVG avoid. Per hero-enrichment.md, Tier E is reserved for articulated motion that declarative techniques cannot reproduce—such as complex character loops. Simple animations belong in Tier A regardless of tooling familiarity.

Can I skip directly to Tier D for faster delivery?

Skipping tiers violates Hallmark's progressive selection principle. Tier D (library illustrations) is explicitly designated as a shortcut-only option requiring justification. Unmodified stock assets are prohibited; all library assets must undergo brand color customization before deployment.

What happens if my enriched hero exceeds the 2 MB performance budget?

The enrichment must be reduced—either by optimizing assets, selecting a lower tier, or splitting the experience. Hallmark's hierarchy is designed to prevent this scenario by favoring lightweight CSS and SVG solutions over raster and animated alternatives.

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