# What UI Components Can Hallmark AI Generate? The Complete 50-Archetype Cookbook
> Discover 50 UI component archetypes Hallmark AI generates including Heroes, Navs & Footers. Get accessible, responsive HTML & CSS for distinct designs.
- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: cookbook
- Published: 2026-07-25
---
**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:
```html
Transform Your Data with Hallmark AI
```
```css
.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/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:
```html
………
```
```css
.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/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:
```html
```
```css
.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/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/h1-marquee.md), [`f1-bento-grid.md`](https://github.com/Nutlope/hallmark/blob/main/f1-bento-grid.md), [`n5-floating-pill.md`](https://github.com/Nutlope/hallmark/blob/main/n5-floating-pill.md)). The master catalog listing all 50 archetypes and their relationships is in [`skills/hallmark/references/component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/component-cookbook.md). Working examples of assembled layouts are available in `site/examples/`.