Hero Enrichment Tier Levels in Hallmark: The Complete Six-Tier Visual System

Hallmark defines six distinct hero enrichment tier levels—0, A, B, C, D, and E—that rank visual complexity from pure typography to Lottie animations, enforcing progressive enhancement and asset minimalism.

The Nutlope/hallmark repository establishes a rigorous taxonomy for hero section visual media through its hero enrichment tier levels. Defined in skills/hallmark/references/hero-enrichment.md, this six-tier hierarchy mandates that designers exhaust simpler, lower-impact solutions before escalating to resource-intensive alternatives. The system ensures optimal performance by requiring zero external assets at lower tiers while reserving complex media for justified use cases.

The Six Hero Enrichment Tier Levels Explained

Hallmark’s enrichment hierarchy spans from Tier 0 (no visual assets) to Tier E (full animation), with each level representing a distinct production methodology and asset requirement.

Tier 0 – Typography Only

Tier 0 represents the baseline state: no visual enrichment beyond headline, lede text, and optional call-to-action buttons. This tier serves as the default for all briefs and functions as the strongest fallback when imagery cannot be justified by user value or brand requirements.

Tier A – Custom-Built CSS Art

Tier A mandates custom-built CSS art utilizing pure CSS shapes, gradients, clip-paths, and decorative elements that require zero external asset requests. This tier accommodates geometric or abstract visual accents that can be expressed entirely through stylesheets, eliminating network overhead and runtime dependencies.

Tier B – Hand-Built SVG

Tier B authorizes hand-built SVG files—typically designed in Figma and optimized for web deployment—with optional declarative animation. Designers should select this tier when illustrations exceed CSS expressiveness, such as mascot characters, workflow diagrams, or detailed bakery loaf imagery that demands vector precision.

Tier C – Generated Illustration

Tier C permits AI-generated illustrations produced by generators like Nanobanana, Recraft, or Midjourney, followed by post-processing optimization. This tier suits characters or scenes too detailed for hand-coded SVGs but still requiring bespoke, brand-specific visuals rather than stock assets.

Tier D – Library Illustration

Tier D allows library illustration assets sourced from stock libraries (Storyset, Humaaans, unDraw) with mandatory brand color customization. Hallmark permits this tier only when budget or schedule constraints force expedited production, provided assets receive meaningful modification rather than verbatim deployment.

Tier E – Lottie Animation

Tier E constitutes the Lottie animation tier—explicitly designated as the last resort. This tier accommodates complex multi-frame motion (such as mascot loops) that cannot be achieved through CSS transitions or SVG SMIL animations, accepting the performance cost of JavaScript-driven animation playback.

Implementation Patterns for Each Enrichment Tier

The repository provides concrete implementation patterns demonstrating minimal viable markup for each tier, typically housed within a <section class="hero"> container.

Tier 0 Implementation

Typography-only implementations require no special classes beyond standard hero structure:

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

CSS art implementations utilize modifier classes and decorative divs:

<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%);
}

Tier B Implementation

Hand-built SVG integrations reference external or inline vector assets:

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

Tier C Implementation

Generated illustrations use standard image tags with lazy loading:

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

Library assets receive brand color overrides through CSS variables:

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

Tier E Implementation

Lottie integrations require the player component with JSON source:

<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;
}

Quality Gates and Validation Constraints

Regardless of tier selection, every enrichment must satisfy eight quality-gate questions defined in skills/hallmark/references/hero-enrichment.md. These constraints enforce file size limitations (under 2MB), reduced-motion fallbacks for accessibility, and performance budgets. The quality gates prevent arbitrary tier escalation by requiring documented justification for asset weight.

Key Reference Files and Test Locations

The hero enrichment tier levels are governed by specific reference documentation and demonstrated in test implementations:

• skills/hallmark/references/hero-enrichment.md – Defines the tier hierarchy, enrichment archetypes (E1–E8), and decision protocol.
• skills/hallmark/references/custom-craft.md – Provides detailed recipes for building Tier A CSS art and Tier B hand-built SVGs.
• skills/hallmark/references/assets.md – Catalogs external assets for Tiers C, D, and E, including licensing and placeholder strategies.
• skills/hallmark/SKILL.md – Outlines the overall Hallmark design flow, including hero enrichment invocation criteria.
• site/_tests/09-slow-pour – Demonstrates Tier A CSS art implementations.
• site/_tests/03-maple-bakery – Demonstrates Tier B hand-built SVG implementations.

Summary

• Hallmark specifies six hero enrichment tier levels (0, A, B, C, D, E) ordered by ascending complexity and asset requirements.
• Tier 0 establishes typography-only defaults, while Tier E reserves Lottie animations for scenarios unattainable through CSS or SVG.
• Tiers A and B prioritize zero-asset or low-weight vector solutions through custom CSS and hand-built SVGs.
• Tiers C and D permit raster and stock imagery only when AI generation or library assets receive proper brand customization.
• All tiers must pass eight quality-gate validations regarding file size, accessibility, and performance constraints documented in skills/hallmark/references/hero-enrichment.md.

Frequently Asked Questions

What distinguishes Tier A from Tier B in Hallmark's enrichment system?

Tier A requires pure CSS implementations using gradients, clip-paths, and shapes that generate zero external network requests, making it ideal for geometric abstractions. Tier B authorizes hand-built SVG files for complex illustrations—such as mascots or detailed objects—that cannot be practically rendered through CSS alone, though these remain lightweight vector assets.

When should designers escalate to Tier E (Lottie animation) rather than Tier B (SVG)?

Designers should reserve Tier E exclusively for complex multi-frame animations that demand timeline-based sequencing or physics that cannot be expressed through CSS transitions or SVG declarative animation. According to the Hallmark source code, Tier E functions as the "last resort" when motion requirements exceed the capabilities of static or CSS-driven vectors.

How does Hallmark enforce the quality standards for hero enrichment tiers?

Every enrichment tier must satisfy eight quality-gate questions specified in skills/hallmark/references/hero-enrichment.md, covering constraints such as file size under 2MB, reduced-motion fallbacks, and performance impact assessments. These gates ensure that tier selection aligns with technical budgets rather than purely aesthetic preferences.

Where can developers find implementation examples for specific enrichment tiers?

Concrete test implementations reside in the site/_tests/ directory, including site/_tests/09-slow-pour for Tier A CSS art demonstrations and site/_tests/03-maple-bakery for Tier B SVG illustrations. Additional recipes for building custom CSS art and hand-optimized vectors are documented in skills/hallmark/references/custom-craft.md.

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