guide

Hallmark Catalog Themes: Complete Guide to the 20 Themes and Their Genre Clusters

August 1, 2026 Nutlope/hallmark ↗

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 lines 9-10. The genre-cluster mapping is defined in 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.

Detect the brief's genre: The system classifies incoming briefs as playful, modern-minimal, atmospheric, or editorial.
Select from the appropriate cluster: Each genre maps to a fixed subset of the 20-theme catalog.
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`

Each theme exists as a CSS custom property block under a [data-theme="…"] selector. The runtime injects these tokens based on the selected theme.

/* 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 data-theme="lumen">
  <!-- Hallmark injects tokens based on the Lumen theme -->
</html>

The data-theme attribute tells the CSS runtime which token block to apply.

Runtime theme switching

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, 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`	Defines the Design flow, genre detection logic, and theme-cluster rotation rules (lines 240-284)
`skills/hallmark/references/custom-theme.md`	Lists all 20 catalog themes and documents the diversification rule (lines 9-10)
`site/css/tokens.css`	Contains concrete token definitions for every theme via `[data-theme="…"]` selectors
`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 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 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.

Have a question about this repo?

These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:

Share the following with your agent to get started:

curl -s "https://instagit.com/install.md"

Add to your MCP client configuration:

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

Ask your agent:

"Use Instagit MCP to understand how Nutlope/hallmark works."

Works with

Claude Codex Cursor VS Code OpenClaw Any MCP Client

Maintain an open-source project? Get it listed too →