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

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.

Where the 50-Archetype Count Is Documented

Two primary sources establish and reference this number:

• skills/hallmark/references/component-cookbook.md — Contains the definitive enumerated list with brief descriptions of each archetype
• 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, 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:

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

<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	The complete catalog of 50 component archetypes with codes and descriptions
skills/hallmark/SKILL.md	System overview explaining how archetypes enable rapid page design
site/js/main.js	Runtime proof points including the "50 archetypes" summary
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 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.

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