What UI Components Can Hallmark AI Generate? The Complete 50-Archetype Cookbook

Hallmark AI can generate 50 distinct UI component archetypes organized into seven logical families—including Heroes, Feature Blocks, Navigation, and Footers—each providing minimal HTML and CSS markup that ensures distinct visual identity, responsive behavior, and accessibility compliance.

Hallmark AI, an open-source project available at Nutlope/hallmark, leverages a comprehensive component cookbook to synthesize varied, genre-aware web layouts. The system relies on a curated library of UI archetypes that defines what UI components Hallmark AI can generate—ranging from hero sections to complex navigation bars—while avoiding the repetitive "AI fingerprint" common in generated interfaces.

The Component Cookbook Architecture

At the heart of Hallmark AI lies a component cookbook that defines 50 distinct UI component archetypes. Each archetype supplies a concise "use-when" description, a "don't-confuse-with" note, and minimal markup consisting of HTML and CSS that can be dropped directly into a page. By combining archetypes across different families, Hallmark AI assembles fully-featured layouts ranging from simple landing pages to complex SaaS dashboards.

The cookbook enforces strict design constraints to ensure quality:

• Diversification rule: Every generated page must avoid reusing the same archetype or knob values to prevent repetitive layouts
• Responsive collapse rules: Each archetype specifies how it adapts below 60rem and 40rem breakpoints for tablet and mobile compatibility
• Accessibility guarantees: All interactive elements maintain hit targets of at least 44×44px on mobile devices

The Seven Component Families

The 50 archetypes are organized into seven logical families, each targeting specific functional areas of web design:

Heroes (H1–H9)

• Archetypes: H1·Marquee, H2·Split diptych, H3·Quote-led, H4·Stat-led, H5·Letter hero, H6·Photographic fold, H7·Demo video clipped, H8·Mockup split, H9·Custom illustration
• Use when: Establishing the page's first impression with headlines, images, videos, or illustrations

Section Heads (S1–S5)

• Archetypes: S1·Left-margin numbered, S2·Hanging, S3·Sticky pinned, S4·Inline no-break, S5·Bottom anchored
• Use when: Providing clear headings for content blocks with labels or visual cues

Feature Blocks (F1–F6)

• Archetypes: F1·Bento grid, F2·Sticky scroll stack, F3·Tabular spec sheet, F4·Step sequence, F5·Annotated screenshot, F6·Product card grid
• Use when: Showcasing product features, specifications, or items in structured visual rhythms

CTAs / Sign-ups (C1–C4)

• Archetypes: C1·Outlined chip, C2·Inline form as CTA, C3·Typographic link, C4·Sticky bottom bar
• Use when: Driving user action through buttons, forms, or persistent bars

Testimonials / Proof (T1–T4)

• Archetypes: T1·Pull quote with marginalia, T2·Logo wall hairline, T3·Single huge quote, T4·Numbered stat strip
• Use when: Displaying social proof, client logos, or highlighted testimonials

Footers (Ft1–Ft8)

• Archetypes: Ft1·Mast-headed, Ft2·Inline rule single line, Ft3·Index-style category list, Ft4·Dense typographic, Ft5·Statement, Ft6·Letter close, Ft7·Newsletter first, Ft8·Marquee scroll
• Use when: Concluding pages with branding, navigation, or contact information

Navigation (N1–N13)

• Archetypes: N1·Wordmark 2 links, N2·Floating chip, N3·Side rail, N4·Hidden behind ⌘K, N5·Floating pill, N6·Newspaper masthead, N7·Brutal slab, N8·Terminal command, N9·Edge-aligned minimal, N10·Floating-on-scroll morph, N1b·Canonical SaaS three-section, N11·Mega-menu panel, N12·Banner+retract, N13·Inline ⌘K-pill
• Use when: Rendering primary navigation with variations for SaaS, editorial, playful, or terminal-oriented sites

Real Component Examples from the Repository

Each archetype in the cookbook links to concrete component definitions in skills/hallmark/references/components/. Below are three representative examples showing the minimal markup pattern:

Hero Marquee (H1)

The H1·Marquee archetype creates a bold, centered headline treatment:

<section class="hero h1-marquee">
  <h1>Transform Your Data with Hallmark AI</h1>
</section>

.hero.h1-marquee { 
  text-align: center; 
  padding: var(--space-xl) 0; 
}

.hero.h1-marquee h1 { 
  font-size: clamp(4rem, 8vw, 12rem); 
}

Component source: [components/h1-marquee.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/components/h1-marquee.md)

Bento Grid (F1)

The F1·Bento grid organizes content in a responsive grid layout:

<section class="bento">
  <article class="cell span-2x2">…</article>
  <article class="cell span-1x1">…</article>
  <article class="cell span-2x1">…</article>
</section>

.bento { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: var(--space-md); 
}

.span-2x2 { 
  grid-column: span 2; 
  grid-row: span 2; 
}

@media (max-width: 56rem) { 
  .bento { 
    grid-template-columns: repeat(2, 1fr); 
  } 
}

Component source: [components/f1-bento-grid.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/components/f1-bento-grid.md)

Floating Pill Navigation (N5)

The N5·Floating pill provides a fixed navigation bar with a modern glassmorphism effect:

<nav class="nav n5-floating-pill">
  <a href="/" class="wordmark">Hallmark</a>
  <a href="/features" class="link">Features</a>
  <a href="/contact" class="cta">Contact</a>
</nav>

.nav.n5-floating-pill {
  position: fixed;
  top: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(8px);
  padding: var(--space-sm) var(--space-md);
  border-radius: 9999px;
}

Component source: [components/n5-floating-pill.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/components/n5-floating-pill.md)

Key Source Files and Organization

The Hallmark AI component system is organized across several critical files in the repository:

• skills/hallmark/references/component-cookbook.md: The master catalog containing all 50 component archetypes, their categorical assignments, and available variation knobs
• skills/hallmark/references/components/*: Individual component definition files (HTML + CSS) referenced by the cookbook
• site/examples/*: Live example pages demonstrating assembled macrostructures using multiple archetypes
• README.md: Entry point documentation explaining how to run the generator and navigate the component library

Summary

Hallmark AI generates 50 distinct UI component archetypes across seven families:

• Heroes (9 archetypes): Marquee, split diptych, quote-led, and photographic variants for first impressions
• Section Heads (5 archetypes): Numbered, hanging, sticky, and anchored header styles
• Feature Blocks (6 archetypes): Bento grids, sticky scrolls, spec sheets, and annotated screenshots
• CTAs / Sign-ups (4 archetypes): Chips, inline forms, typographic links, and sticky bars
• Testimonials / Proof (4 archetypes): Pull quotes, logo walls, and stat strips
• Footers (8 archetypes): Mast-headed, inline rule, index-style, and newsletter-first layouts
• Navigation (13 archetypes): Wordmarks, floating pills, side rails, and terminal-command styles

Each component includes responsive collapse rules for 60rem and 40rem breakpoints, 44×44px minimum hit targets for accessibility, and the diversification rule prevents repetitive layouts.

Frequently Asked Questions

How many UI components can Hallmark AI generate?

Hallmark AI can generate 50 distinct UI component archetypes as defined in the component cookbook. These are not just variations but fundamentally different structural patterns—ranging from H1 Marquee heroes to N5 Floating Pill navigation bars—each with specific use cases and markup implementations.

What makes Hallmark AI components different from standard UI libraries?

Unlike standard UI libraries that focus on atomic elements like buttons and inputs, Hallmark AI provides macro-level layout archetypes (such as F1 Bento Grid or H2 Split Diptych) that define entire content sections. The system enforces a diversification rule that prevents the "AI fingerprint" of repetitive layouts by ensuring each page uses distinct archetypes and knob values.

Are Hallmark AI components responsive and mobile-friendly?

Yes. Every archetype in the Hallmark cookbook specifies responsive collapse rules for breakpoints below 60rem (tablet) and 40rem (mobile). Additionally, the system guarantees accessibility compliance with 44×44px minimum hit targets for all interactive elements on mobile devices, as implemented in the CSS definitions within skills/hallmark/references/components/.

Where can I find the source code for specific components?

Individual component definitions are located in skills/hallmark/references/components/ (e.g., h1-marquee.md, f1-bento-grid.md, n5-floating-pill.md). The master catalog listing all 50 archetypes and their relationships is in skills/hallmark/references/component-cookbook.md. Working examples of assembled layouts are available in site/examples/.

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