# Hallmark Catalog Themes: Complete Guide to the 20 Themes and Their Genre Clusters > Explore the 20 Hallmark catalog themes and their genre clusters. Understand Atmospheric, Modern-Minimal, Playful, and Editorial categories for visual diversity. - Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark) - Tags: guide - Published: 2026-08-01 --- **Hallmark ships a fixed catalog of 20 named themes that automatically rotate within four genre clusters—Atmospheric, Modern-Minimal, Playful, and Editorial—to ensure visual diversity across consecutive builds.** The Hallmark design system uses these **catalog themes** as its default route for generating branded outputs. Each theme combines three fixed design axes—paper-band, display-style, and accent-hue—and the system enforces diversification so no two consecutive runs look identical. This article maps every theme to its genre cluster and explains how Hallmark implements automatic rotation according to the Nutlope/hallmark source code. --- ## The 20 Hallmark Catalog Themes and Their Genre Clusters | Theme | Genre Cluster | |-------|---------------| | Bloom | Atmospheric | | Midnight | Atmospheric | | Terminal | Atmospheric | | Aurora | Atmospheric | | Lumen | Atmospheric | | Coral | Modern-Minimal | | Cobalt | Modern-Minimal | | Hum | Playful | | Specimen | Editorial | | Atelier | Editorial | | Brutal | Editorial | | Garden | Editorial | | Newsprint | Editorial | | Studio | Editorial | | Manifesto | Editorial | | Almanac | Editorial | | Riso | Editorial | | Sport | Editorial | | Editorial | Editorial | | Carnival | Editorial | The complete list of catalog themes originates from [`skills/hallmark/references/custom-theme.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/custom-theme.md) lines 9-10. The genre-cluster mapping is defined in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) lines 240-284. --- ## How Genre Clusters Drive Theme Selection Hallmark's **Design flow** (the default verb) follows a three-step selection process. 1. **Detect the brief's genre**: The system classifies incoming briefs as **playful**, **modern-minimal**, **atmospheric**, or **editorial**. 2. **Select from the appropriate cluster**: Each genre maps to a fixed subset of the 20-theme catalog. 3. **Apply the diversification rule**: The chosen theme must differ on at least one of three axes—paper-band, display-style, or accent-hue—from the previous run. ### Cluster-by-cluster breakdown - **Atmospheric** (5 themes): Bloom, Midnight, Terminal, Aurora, Lumen - **Modern-Minimal** (2 themes): Coral, Cobalt - **Playful** (1 theme): Hum - **Editorial** (12 themes): All remaining themes including Specimen, Atelier, Brutal, Garden, Newsprint, Studio, Manifesto, Almanac, Riso, Sport, Editorial, and Carnival The **Atmospheric cluster** dominates with five themes, while the **Editorial cluster** contains more than half the catalog. This imbalance reflects Hallmark's editorial-first design philosophy. --- ## Where Themes Live in the Codebase ### Token definitions: [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) Each theme exists as a CSS custom property block under a `[data-theme="…"]` selector. The runtime injects these tokens based on the selected theme. ```css /* Example from site/css/tokens.css */ [data-theme="hum"] { --color-paper: oklch(95% 0.04 95); /* cream paper */ --color-accent-1: oklch(70% 0.12 30); /* pear-yellow */ --font-display: "Plus Jakarta Sans", sans-serif; } ``` All components reference token variables (`var(--color-paper)`, `var(--font-display)`) rather than hard-coding values. This abstraction enables instantaneous theme switching. ### Theme activation: HTML `data-theme` attribute ```html ``` The `data-theme` attribute tells the CSS runtime which token block to apply. ### Runtime theme switching ```javascript function setTheme(name) { document.documentElement.dataset.theme = name; } setTheme('cobalt'); // switches to the Modern-Minimal Cobalt theme ``` Dynamic switching works because each theme's token block is scoped to its `[data-theme]` selector. --- ## The Diversification Rule: How Hallmark Avoids Repetition According to [`skills/hallmark/references/custom-theme.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/custom-theme.md), the system enforces **visual variety across builds** through a strict diversification mechanism. When selecting a theme from a genre cluster, Hallmark compares the candidate against the previous run's theme across three axes: - **Paper-band**: The background tone and texture - **Display-style**: The typographic personality and scale system - **Accent-hue**: The chromatic emphasis color The selected theme must differ on **at least one axis**. This guarantees that consecutive outputs from the same genre cluster remain visually distinct even when the genre itself doesn't change. --- ## Key Implementation Files | File | Purpose | |------|---------| | [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) | Defines the Design flow, genre detection logic, and theme-cluster rotation rules (lines 240-284) | | [`skills/hallmark/references/custom-theme.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/custom-theme.md) | Lists all 20 catalog themes and documents the diversification rule (lines 9-10) | | [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) | Contains concrete token definitions for every theme via `[data-theme="…"]` selectors | | [`skills/hallmark/references/themes/lumen.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/lumen.md) (example) | Describes individual theme specifications including palette, display-style, and paper-band | These files collectively implement the catalog-theme system, genre clustering, and automatic rotation that produces Hallmark's structural variety. --- ## Summary - Hallmark maintains exactly **20 catalog themes** divided across **four genre clusters**. - **Atmospheric themes** (5): Bloom, Midnight, Terminal, Aurora, Lumen - **Modern-Minimal themes** (2): Coral, Cobalt - **Playful theme** (1): Hum - **Editorial themes** (12): Specimen, Atelier, Brutal, Garden, Newsprint, Studio, Manifesto, Almanac, Riso, Sport, Editorial, Carnival - Theme selection is **cluster-constrained** but **diversification-guaranteed** through the three-axis rule. - All themes compile to CSS custom properties in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) under `[data-theme]` selectors. --- ## Frequently Asked Questions ### What determines which Hallmark theme gets selected? The brief's detected **genre** determines the cluster, then the **diversification rule** picks a specific theme that differs from the previous run on at least one design axis. This happens automatically unless the brief explicitly requests a custom route. ### Can I force a specific Hallmark catalog theme? Yes. While the default Design flow auto-selects from clusters, Hallmark supports **custom-theme routing** for explicit theme requests. The catalog themes remain available as named options even when bypassing automatic rotation. ### Why does the Editorial cluster have 12 themes while Playful has only 1? The **Editorial genre** represents Hallmark's default design language for professional, content-heavy outputs. The **Playful genre** with its single Hum theme serves niche use cases requiring lighthearted, casual aesthetics. This distribution reflects real-world usage patterns in the system's target domains. ### How do Hallmark themes handle accessibility? Each theme's token definitions in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) use **OKLCH color values** with explicit lightness channels, enabling perceptually uniform contrast calculations. The system evaluates paper-band against accent-hue combinations to maintain readable contrast ratios regardless of which catalog theme rotates into use.