# What Are Component Archetypes in Hallmark? The Complete 50-Pattern Catalog

> Explore Hallmark's 50 component archetypes, the standardized UI building blocks across seven categories like hero, navigation, and footer patterns for consistent page design. Discover the complete catalog.

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

---

**Hallmark defines 50 distinct component archetypes** across seven categories—including hero, navigation, and footer patterns—that serve as standardized UI building blocks for consistent page design.

Hallmark is an open-source design system tool maintained in the `Nutlope/hallmark` repository. The system organizes its component library into **component archetypes**, providing a "slim index of 50 component archetypes" that developers use to construct varied but consistent page layouts while maintaining design system integrity.

## The Complete Component Archetypes Catalog

The definitive list resides in [`skills/hallmark/references/component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/component-cookbook.md), which breaks down the 50 component archetypes into seven specific categories:

- **9 hero archetypes** for primary page headers
- **5 section-head archetypes** for content divisions  
- **6 feature archetypes** for product highlights
- **4 CTA archetypes** for call-to-action blocks
- **4 testimonial archetypes** for social proof sections
- **8 footer archetypes** for page closures
- **14 navigation archetypes** for menu systems

These totals sum to exactly 50 patterns, as referenced in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md).

## Implementing Component Archetypes in Code

Hallmark-powered tools emit JSON structures that identify which archetype to render for each page section. The archetype codes (such as `H1-Marquee`, `N5`, or `Ft5`) come directly from the component-cookbook index.

Example JSON diagnostic:

```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" } }
}

```

To apply these patterns in markup, use the conventional `archetype-{name}` class hook:

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

```

The `archetype-H1-Marquee` class triggers the appropriate CSS and HTML structure defined in the design system.

## Core Files Defining Component Archetypes

Understanding the component archetypes requires examining four key files in the Nutlope/hallmark repository:

**[`skills/hallmark/references/component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/component-cookbook.md)** contains the authoritative index of all 50 component archetypes with their identifying codes and brief descriptions.

**[`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md)** explains how the archetype catalogue integrates into Hallmark's workflow and references the "slim index of 50 component archetypes."

**[`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js)** implements runtime switching between archetypes, including the proof point `proofA: "21 macrostructures · 50 archetypes"` that validates the count.

**[`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/index.html)** demonstrates archetype slots in a live interface, showing how hero, nav, and footer archetypes render in the application UI.

## Summary

- Hallmark catalogs exactly **50 component archetypes** for building consistent interfaces.
- The archetypes divide into seven categories: hero (9), section-head (5), feature (6), CTA (4), testimonial (4), footer (8), and navigation (14).
- Reference the complete index in [`skills/hallmark/references/component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/component-cookbook.md).
- Implement archetypes using JSON configuration with **knobs** for customization.
- Apply archetypes in HTML using `archetype-{name}` class conventions.

## Frequently Asked Questions

### How many component archetypes does Hallmark include?

Hallmark includes exactly 50 component archetypes according to the component-cookbook index. The SKILL.md file explicitly references this as a "slim index of 50 component archetypes" to manage design system complexity while maintaining variety.

### What are the main categories of component archetypes in Hallmark?

The 50 archetypes organize into seven main categories: 9 hero patterns, 5 section-head patterns, 6 feature patterns, 4 CTA patterns, 4 testimonial patterns, 8 footer patterns, and 14 navigation patterns. This distribution emphasizes navigation and hero sections as the most variable UI components.

### Where are the component archetype definitions stored in the Hallmark repository?

The definitive list resides in [`skills/hallmark/references/component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/component-cookbook.md) at the repository root. This file catalogs all archetype codes and descriptions, while [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) documents their usage within the system's workflow.

### How do you reference a specific component archetype in Hallmark code?

Reference archetypes using their catalog codes (like `H1-Marquee`, `N5`, or `Ft5`) in JSON configuration objects. In HTML markup, apply the class pattern `archetype-{code}` (for example, `archetype-H1-Marquee`) to trigger the associated styles and structure for that pattern.