Hallmark Component Cookbook: The 50 UI Archetypes Explained

The Hallmark Component Cookbook is a curated design system in skills/hallmark/references/component-cookbook.md that defines 50+ reusable UI archetypes—standardized building blocks for heroes, feature blocks, CTAs, and navigation—each with explicit usage rules, variation knobs, and diversification constraints to prevent repetitive AI-generated layouts.

What Is the Hallmark Component Cookbook

The Hallmark project ships a Component Cookbook that serves as the canonical reference for reusable interface patterns. Located at skills/hallmark/references/component-cookbook.md according to the Nutlope/hallmark source code, this document catalogs 50+ archetypes grouped by functional role. Each archetype represents a battle-tested UI solution to a specific design problem—whether that's a full-width hero statement, an asymmetric feature grid, or a floating navigation pill.

The cookbook enforces disciplined flexibility: every archetype provides enough structure to ensure consistency across pages, yet includes variation knobs that allow designers to tweak sizing, alignment, and styling without breaking the component's core identity.

The 50 Archetypes by Category

Archetypes follow a strict naming convention: Category prefix + number + descriptive name. Here are the major categories with representative examples from the cookbook.

Heroes (H1–H4)

Hero archetypes handle above-the-fold presentation where visual impact is paramount.

Archetype	Purpose	Common Confusion to Avoid
H1 · Marquee	Full-width headline that fills the fold	H4 · Stat-Led (a number, not a statement)
H2 · Split Diptych	Two-column asymmetric hero layout	—

H1 · Marquee is defined in components/h1-marquee.md with this minimal markup:

<section class="hero-marquee">
  <h1 class="display-xxl">A statement.</h1>
</section>

.hero-marquee {
  min-height: 80dvh;
  display: grid;
  align-content: end;
  padding: 0 var(--page-gutter) var(--space-2xl);
}

.display-xxl {
  font-size: clamp(4rem, 12vw, 12rem);
  line-height: 0.92;
}

Section Heads (S1+)

S1 · Left Margin Numbered provides numbered labels in a narrow left column—ideal for sequentially-ordered editorial sections. The cookbook specifies exact spacing tokens and counter-reset rules to maintain rhythm across page sections.

Feature Blocks (F1+)

F1 · Bento Grid represents the asymmetric grid of 8-15 tiles that has become a hallmark of modern SaaS marketing pages. The archetype enforces tile sizing ratios and responsive collapse behavior:

<section class="bento-grid">
  <div class="tile tile-large">Feature A</div>
  <div class="tile">Feature B</div>
  <!-- …more tiles… -->
</section>

Detailed spec: components/f1-bento-grid.md.

CTAs and Sign-ups (C2)

C2 · Inline Form as CTA collapses the traditional call-to-action into a single-field form—appropriate when the conversion action is literally the only UI element needed:

<form class="cta-inline-form">
  <input type="email" placeholder="Enter email"/>
  <button type="submit">Subscribe →</button>
</form>

Reference implementation: components/c2-inline-form-as-cta.md.

Testimonials and Proof (T1)

T1 · Pull Quote with Marginalia combines a credibility statement with attribution in a side margin—essential for editorial-style trust building without breaking content flow.

Navigation (N5)

N5 · Floating Pill delivers a detached, blurred-backdrop navigation element suited for modern-minimal or atmospheric themes:

<nav class="nav-floating-pill">
  <div class="brand">Hallmark</div>
  <button class="cta">Get Started</button>
</nav>

See components/n5-floating-pill.md for blur intensity and positioning tokens.

Footers (Ft1)

Ft1 · Mast-Headed pairs wordmark + tagline with minimal link columns—designed for editorial-style pages where the brand signature should linger.

Standard Archetype Schema

Every entry in the Hallmark Component Cookbook follows the same four-field structure:

1. Name — The canonical identifier (e.g., "H1 · Marquee")
2. "Use when" — One-line design problem statement
3. "Don't confuse with" — Visual cousin to avoid
4. HTML + minimal CSS snippet — Copy-pasteable implementation

This schema ensures that developers and designers can scan, select, and implement without ambiguity.

Variation Knobs: Controlled Customization

Beyond the base implementation, each archetype exposes within-archetype variation knobs—parameters that modify appearance while preserving archetype identity. The cookbook catalogs these in dedicated tables specifying:

• Size variants (sm | md | lg | xl)
• Alignment options (start | center | end | justify)
• Decorative treatments (underline style, border radius, shadow depth)

Two pages built from H1 · Marquee with different knob configurations remain recognizably the same archetype, yet visually distinct.

Diversification Rules: Anti-Pattern Prevention

The Hallmark Component Cookbook encodes two hard constraints that prevent the "AI sameness" plaguing generated interfaces:

Within-page diversification — No two sections may reuse the same archetype. A page with a Bento Grid feature block cannot repeat F1 elsewhere.

Cross-build diversification — The same archetype (or identical knob values) must not appear across consecutive page generations. This forces exploration of the full 50-archetype library rather than over-relying on safe defaults.

These rules are machine-readable and can be enforced at generation time.

Genre Routing: Theme-Aware Defaults

The cookbook includes mapping tables that connect genres (modern-minimal, playful, terminal) to default archetype selections:

Genre	Default Footer	Default Navigation
modern-minimal	Ft1 · Mast-Headed	N5 · Floating Pill
playful	alternative acceptable	alternative acceptable
terminal	alternative acceptable	alternative acceptable

Generes still permit alternative choices—the routing tables define starting points, not prisons.

Summary

• The Hallmark Component Cookbook in skills/hallmark/references/component-cookbook.md defines 50+ UI archetypes across seven functional categories.
• Each archetype follows a four-field schema: name, use-when guidance, confusion avoidance, and markup reference.
• Variation knobs enable customization without breaking archetype identity.
• Diversification rules (within-page and cross-build) enforce visual variety and reduce repetitive patterns.
• Genre routing tables provide theme-aware defaults while preserving flexibility.

Frequently Asked Questions

What file contains the master list of all 50 Hallmark archetypes?

The complete catalog lives in skills/hallmark/references/component-cookbook.md, which indexes all archetypes, diversification rules, variation knobs, and genre routing tables according to the Nutlope/hallmark source repository.

Can I modify an archetype's appearance without creating a new one?

Yes. Each archetype exposes within-archetype variation knobs—documented parameters for size, alignment, and decorative treatments that let you customize appearance while the core archetype remains recognizable.

Why does the cookbook prevent reusing archetypes on the same page?

The within-page diversification rule exists to combat visual monotony and "AI sameness." By prohibiting duplicate archetypes, the system forces compositional variety and prevents lazy templating.

How do I know which navigation or footer archetype fits my project?

Consult the genre routing tables in the cookbook. These map design intentions (modern-minimal, playful, terminal) to recommended default archetypes, while explicitly marking alternatives as acceptable if your context demands deviation.

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