What Are the 20 Named Themes in Hallmark? Complete Catalog and Usage Guide
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. 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:
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:
<body data-theme="cobalt">
<!-- Hallmark loads the token set for the Cobalt theme automatically -->
</body>
Accessing Theme Tokens in CSS
Theme-specific values are scoped via attribute selectors in site/css/tokens.css:
[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– Enumerates the canonical 20 theme names and defines validation rules.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 asskills/hallmark/references/themes/hum.md.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, rejecting undefined theme names to preserve design integrity. - Developers apply themes declaratively via the
themeparameter inbuildPage()or thedata-themeHTML attribute. - Visual tokens for each theme are stored in
site/css/tokens.css, with detailed specifications residing inskills/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 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 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).
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 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.
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:
curl -s "https://instagit.com/install.md" 
Maintain an open-source project? Get it listed too →