# What Are the 20 Named Themes in Hallmark? Complete Catalog and Usage Guide > Discover the 20 named visual themes in Hallmark, including Specimen, Midnight, Brutal, and more. Explore palettes, typography, and styles for your generated pages. - Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark) - Tags: documentation - Published: 2026-07-13 --- **Hallmark defines a fixed catalog of 20 named visual themes—Specimen, Midnight, Brutal, Garden, Atelier, Newsprint, Terminal, Manifesto, Almanac, Sport, Studio, Riso, Bloom, Coral, Cobalt, Aurora, Editorial, Carnival, Lumen, and Hum—that encapsulate unique colour palettes, typography stacks, and surface-style rules for generated pages.** The Nutlope/hallmark repository provides a structured generation framework where visual identity is controlled through a strict theme system. Understanding the **20 named themes in Hallmark** is essential for configuring page generation, as the system validates every theme request against this exact catalog defined in the Slop-Test reference documentation. ## Complete List of the 20 Named Themes in Hallmark Hallmark’s theme catalog is immutable and enumerated in [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md). Each theme combines a specific colour foundation, typographic stack, and surface treatment: | # | Theme | Core Identity | |---|-------|---------------| | 1 | **Specimen** | Editorial-serif-high-contrast | | 2 | **Midnight** | Dark-mode-focused, deep-paper | | 3 | **Brutal** | Heavy-weight, aggressive display | | 4 | **Garden** | Fresh-green, organic feel | | 5 | **Atelier** | Refined-ceramic, subtle accent | | 6 | **Newsprint** | Newspaper-style, classic serif | | 7 | **Terminal** | Monospace-tech, terminal-look | | 8 | **Manifesto** | Bold-statement, high-contrast | | 9 | **Almanac** | Vintage-paper, warm tones | | 10 | **Sport** | Dynamic, energetic layout | | 11 | **Studio** | Creative-studio, instrument serif | | 12 | **Riso** | Riso-style grain, tactile texture | | 13 | **Bloom** | Warm-light atmospheric | | 14 | **Coral** | Modern-minimal, single-accent | | 15 | **Cobalt** | Cool-white with electric blue accent | | 16 | **Aurora** | Soft-gradient, pastel palette | | 17 | **Editorial** | Traditional editorial layout | | 18 | **Carnival** | Multi-accent, vibrant “cold-snap” palette | | 19 | **Lumen** | Lower-case headline, single-drop theme | | 20 | **Hum** | Rounded-sans, multi-accent playful theme | ## Theme Validation and the Slop-Test Reference The **Slop-Test** specification serves as the single source of truth for theme validity. Hallmark’s internal diversification checks reference this file to enforce the canon, rejecting any theme string not present in the list above unless a custom theme workflow is explicitly invoked. This validation ensures that generated pages maintain consistent design-system boundaries and that token references resolve correctly against the CSS definitions. ## Implementing Hallmark Themes in Code Themes are applied declaratively through the **Hallmark core API** or HTML data attributes. The generator wires the theme name to CSS custom properties automatically. ### Selecting a Theme in TypeScript Use the `theme` parameter in the `buildPage()` function from `@hallmark/core`: ```ts import { buildPage } from '@hallmark/core'; const page = buildPage({ theme: 'hum', // Must match one of the 20 catalog names macrostructure: 'hero', content: { /* … */ }, }); document.body.dataset.theme = page.theme; // Wires theme to CSS ``` ### Applying Themes in HTML Set the `data-theme` attribute on the root element to activate the corresponding token set: ```html ``` ### Accessing Theme Tokens in CSS Theme-specific values are scoped via attribute selectors in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css): ```scss [data-theme="cobalt"] { --color-primary: oklch(55% 0.12 260); --font-display: var(--font-cobalt-display); } ``` ## Theme Architecture and File Structure Hallmark’s theme system relies on a strict file hierarchy that separates validation logic from implementation details: - **[`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md)** – Enumerates the canonical 20 theme names and defines validation rules. - **[`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css)** – Stores CSS custom properties for each theme using `[data-theme="..."]` blocks. - **`skills/hallmark/references/themes/*/*.md`** – Contains individual theme specifications (palette definitions, typography rules, and anti-patterns), such as [`skills/hallmark/references/themes/hum.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/hum.md). - **[`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md)** – Describes the generation workflow, including theme selection logic and diversification constraints. ## Summary - Hallmark maintains exactly **20 named themes**: Specimen, Midnight, Brutal, Garden, Atelier, Newsprint, Terminal, Manifesto, Almanac, Sport, Studio, Riso, Bloom, Coral, Cobalt, Aurora, Editorial, Carnival, Lumen, and Hum. - Theme validation occurs against the catalog defined in [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md), rejecting undefined theme names to preserve design integrity. - Developers apply themes declaratively via the `theme` parameter in `buildPage()` or the `data-theme` HTML attribute. - Visual tokens for each theme are stored in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css), with detailed specifications residing in `skills/hallmark/references/themes/*/*.md`. ## Frequently Asked Questions ### How do I apply a custom theme outside the 20 named themes? Hallmark rejects theme names outside the canonical catalog unless explicitly configured for custom themes. The validation logic in [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md) enforces this restriction to ensure design system consistency and prevent unresolved token references. ### Where are the CSS variables for Hallmark themes defined? Global theme tokens reside in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) using CSS custom properties scoped to `[data-theme="..."]` selectors. Individual theme specifications, including palette and typography details, are documented in `skills/hallmark/references/themes/*/*.md` files (for example, [`skills/hallmark/references/themes/hum.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/hum.md)). ### Can I switch themes dynamically in a Hallmark application? Yes, themes update dynamically by changing the `data-theme` attribute on the document body or root element. This triggers the corresponding CSS custom property definitions from [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) without requiring a page reload or rebuild. ### What happens if I specify an invalid theme name in `buildPage()`? The Hallmark generator references the Slop-Test catalog during diversification checks and validation. Builds that reference theme names not present in the 20-theme canon will fail validation, ensuring only supported visual identities are deployed.