# Hallmark Component Cookbook: The 50 UI Archetypes Explained

> Explore the Hallmark Component Cookbook and its 50 UI archetypes. Learn about reusable design system building blocks with clear usage rules to create diverse and effective layouts.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: cookbook
- Published: 2026-08-14

---

**The Hallmark Component Cookbook is a curated design system in [`skills/hallmark/references/component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/components/h1-marquee.md) with this minimal markup:

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

```

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

```html
<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`](https://github.com/Nutlope/hallmark/blob/main/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:

```html
<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`](https://github.com/Nutlope/hallmark/blob/main/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:

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

```

See [`components/n5-floating-pill.md`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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.