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

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, 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.

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:

{
  "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:

<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 contains the authoritative index of all 50 component archetypes with their identifying codes and brief descriptions.

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 implements runtime switching between archetypes, including the proof point proofA: "21 macrostructures · 50 archetypes" that validates the count.

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.
• 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 at the repository root. This file catalogs all archetype codes and descriptions, while 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.

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