# How Many Component Archetypes Does Hallmark Define? The Complete 50-Archetype Catalog Explained

> Discover Hallmark's 50 component archetypes cataloged into seven structural categories. Understand the complete range of design patterns for your projects.

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

---

**Hallmark defines exactly 50 component archetypes**, organized across seven structural categories ranging from heroes to navigation patterns.

This compact design system——developed in the Nutlope/hallmark repository——gives developers and designers a **shared vocabulary for page components** without drowning in infinite variations. The "slim index of 50" balances consistency with enough flexibility for distinctive designs.

## The Seven Category Breakdown

The 50 component archetypes in Hallmark's **component-cookbook** index distribute as follows:

| Category | Count | Purpose |
|----------|-------|---------|
| **Hero archetypes** | 9 | Above-the-fold introductions |
| **Navigation archetypes** | 14 | Header and menu systems |
| **Section-head archetypes** | 5 | Transition markers between sections |
| **Feature archetypes** | 6 | Product or service showcases |
| **CTA archetypes** | 4 | Conversion-driven callouts |
| **Testimonial archetypes** | 4 | Social proof displays |
| **Footer archetypes** | 8 | Page closers and secondary navigation |

These totals——9 + 14 + 5 + 6 + 4 + 4 + 8——sum to **50 component archetypes** as documented in [`skills/hallmark/references/component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/component-cookbook.md).

## Where the 50-Archetype Count Is Documented

Two primary sources establish and reference this number:

- **[`skills/hallmark/references/component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/component-cookbook.md)** — Contains the definitive enumerated list with brief descriptions of each archetype
- **[`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md)** — Describes the system as the "slim index of 50 component archetypes" that powers Hallmark's pattern-matching workflow

A third confirmation appears in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js), where runtime code includes the string `proofA: "21 macrostructures · 50 archetypes"`——directly surfacing the count to users.

## Working with Component Archetypes in Practice

Hallmark-powered tools emit archetype selections as structured data. Here's a typical diagnostic output identifying archetypes for three key page regions:

```json
{
  "macrostructure": "Marquee Hero",
  "hero":   { "archetype": "H1-Marquee",   "knobs": { "layout": "centered", "ctaStyle": "primary" } },
  "nav":    { "archetype": "N5",            "knobs": { "position": "floating", "style": "pill" } },
  "footer": { "archetype": "Ft5",           "knobs": { "layout": "statement", "color": "muted" } }
}

```

The **archetype codes** (`H1-Marquee`, `N5`, `Ft5`) map directly to entries in the component-cookbook index. The `knobs` object exposes tunable parameters for each archetype——layout variants, color treatments, and behavioral settings——without breaking out of the 50-archetype framework.

## Rendering an Archetype in HTML

To apply a hero archetype in markup, use the conventional `archetype-` prefix class:

```html
<section class="hero archetype-H1-Marquee">
  <h1 class="hero-title">Your headline here</h1>
  <p class="hero-subtitle">A short supporting line.</p>
  <a href="#" class="btn primary">Call to action</a>
</section>

```

This class naming convention lets Hallmark's CSS and JavaApply the correct styling and behavior for the **H1-Marquee** hero archetype without additional configuration.

## Key Files for Understanding Hallmark's Archetypes

| File Path | What It Contains |
|-----------|------------------|
| [`skills/hallmark/references/component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/component-cookbook.md) | The complete catalog of **50 component archetypes** with codes and descriptions |
| [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) | System overview explaining how archetypes enable rapid page design |
| [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) | Runtime proof points including the "50 archetypes" summary |
| [`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/index.html) | Live demonstration showing archetype slots for hero, navigation, and footer regions |

These files work together to define, document, and demonstrate the complete **component archetype system**.

## Summary

- **Hallmark defines 50 component archetypes** total, distributed across 7 structural categories
- The **navigation category contains the most archetypes (14)**, reflecting the complexity of header systems
- The **component-cookbook index** in [`skills/hallmark/references/component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/component-cookbook.md) serves as the authoritative source
- Archetypes expose **configurable knobs** for variation without requiring new archetype definitions
- The `archetype-` CSS class convention enables straightforward implementation in HTML

## Frequently Asked Questions

### How are the 50 component archetypes organized?

Hallmark groups its 50 archetypes into **seven functional categories**: heroes (9), navigation (14), section-heads (5), features (6), CTAs (4), testimonials (4), and footers (8). This organization reflects the typical information architecture of landing pages and marketing sites.

### What is the most common category of component archetypes in Hallmark?

**Navigation archetypes dominate** with 14 distinct patterns——nearly triple the count of any category except heroes (9) and footers (8). This reflects the complexity of header behaviors: fixed vs. sticky positioning, hamburger vs. exposed menus, transparent vs. solid backgrounds, and multi-column dropdown structures.

### Can I create custom archetypes beyond the 50 in Hallmark?

The component-cookbook is designed as a **closed set of 50** to maintain interoperability. However, each archetype exposes **knobs**——structured configuration options like `layout`, `style`, `position`, and `color`——that generate substantial variation without fragmenting the system. For truly novel patterns, you would extend the framework rather than the core catalogue.

### Where did the number 50 come from in Hallmark's design system?

According to the SKILL.md documentation, 50 represents a **deliberate constraint**——sufficient for rich page variety while remaining mentally navigable for designers and machine-learnable for AI-assisted tools. The "slim index" philosophy prioritizes **memorable, reusable patterns** over exhaustive coverage of every possible layout.