The 20 Catalog Themes in Hallmark: How Visual Styles Are Diversified by Genre

Hallmark provides twenty distinct catalog themes organized into four genre buckets—editorial, modern-minimal, atmospheric, and playful—that fundamentally alter page structure and copy voice rather than merely swapping color palettes.

Hallmark is an open-source design system by Nutlope that demonstrates sophisticated theme architecture through its comprehensive catalog of visual identities. According to the source code in Nutlope/hallmark, these themes are declared in site/js/main.js and categorized into higher-level genres that control structural archetypes, slop-test gates, and quality fixtures.

The Complete List of 20 Hallmark Catalog Themes

The theme registry is defined in the THEMES constant located at site/js/main.js (lines 42‑63). This mapping assigns a short identifier to each human‑readable display name, forming the complete catalog of twenty visual styles:

Identifier	Display Name
hum	Hum
specimen	Specimen
midnight	Midnight
brutal	Brutal
garden	Garden
atelier	Atelier
newsprint	Newsprint
terminal	Terminal
manifesto	Manifesto
almanac	Almanac
sport	Sport
studio	Studio
riso	Riso
bloom	Bloom
coral	Coral
aurora	Aurora
editorial	Editorial
carnival	Carnival
lumen	Lumen
cobalt	Cobalt

Each identifier serves as a key into the ARCHETYPES and COPY objects, determining which structural templates and voice fixtures load when a theme is activated.

How Themes Are Diversified Through Genre Buckets

Diversification occurs through the THEME_GENRES object at site/js/main.js (lines 98‑123), which partitions the twenty themes into four higher‑level genres. These genres act as rule‑set overlays that determine applicable slop‑test gates and voice fixtures:

Genre	Themes	Characteristics
editorial	specimen, newsprint, atelier, garden, almanac, studio, riso, sport, brutal, manifesto, editorial, carnival	Canonical Hallmark voice with formal, publication‑style copy
modern‑minimal	coral, cobalt	Stripe or Linear aesthetic with clean, sparse layouts
atmospheric	bloom, midnight, terminal, aurora, lumen	Dark AI‑tool aesthetic with moody, immersive environments
playful	hum	Hand‑crafted, informal tone with experimental layouts

This architecture ensures structural variety (via ARCHETYPES[theme] mapping to hero/footer tuples), voice variety (via unique COPY blocks for eyebrows, ledes, and quotes), and quality rule variety (via genre‑specific gate configurations).

How Theme Switching Works in the Code

The runtime implementation uses the applyTheme() function to swap identities dynamically. When triggered, the system updates the document root’s dataset, persists the selection to localStorage, and rebuilds the page using the new archetype map.

// Programmatically switch themes
import { applyTheme } from './site/js/main.js';

applyTheme('cobalt');   // Activates modern-minimal aesthetic
applyTheme('hum');      // Activates playful, hand-crafted mode

The UI renders a theme picker that binds to this function:

<div class="banner__theme-picker">
  <button data-theme-btn="cobalt">Cobalt</button>
  <button data-theme-btn="hum">Hum</button>
  <!-- Additional buttons generated from THEMES constant -->
</div>

When a user selects a theme, applyTheme() executes the following sequence (see site/js/main.js, lines 749‑754):

1. Persists the choice using STORAGE_KEY in localStorage
2. Updates root.dataset.theme with the selected identifier
3. Invokes swapArchetypes(theme) to reload structural components
4. Refreshes UI labels (.banner__theme, [data-theme-genre], etc.)

Key Implementation Files

File	Role
site/js/main.js	Declares THEMES, THEME_GENRES, ARCHETYPES, COPY, and implements theme‑switching logic
site/examples/*/script.js	Individual example pages consuming the theme infrastructure (e.g., riso-01/script.js)
references/genres/	Documentation of genre‑level rule sets and slop‑test configurations

Summary

• Hallmark offers exactly twenty catalog themes, ranging from hum to cobalt, defined in site/js/main.js.
• Themes are diversified through four genre buckets (editorial, modern‑minimal, atmospheric, playful) that determine structural archetypes and copy voice.
• Genre mapping is handled by the THEME_GENRES object (lines 98‑123), creating a combinatorial design space of 20 visual styles × 4 rule sets.
• Runtime switching uses applyTheme() to swap archetypes and copy fixtures dynamically, not just CSS variables.

Frequently Asked Questions

What is Hallmark and how does it use themes?

Hallmark is an open-source design system that generates distinct web pages through thematic cataloging. It uses themes as complete visual identities that swap HTML structure and copy voice, allowing the same content to render as a newsprint article, a dark atmospheric tool, or a playful hand-crafted page depending on the selected theme.

How do Hallmark themes differ from traditional CSS theme systems?

Traditional systems modify color variables and typography via CSS custom properties. Hallmark themes, however, reconstruct the DOM using archetype tuples (hero and footer components) from the ARCHETYPES object and inject unique copy from the COPY block, providing structural and tonal changes unavailable to pure CSS solutions.

Can I create custom themes in Hallmark?

Yes, but you must define the theme in four locations within site/js/main.js: add the identifier to the THEMES constant, assign it to a genre in THEME_GENRES, create its structural mapping in ARCHETYPES, and provide voice fixtures in COPY. Without all four definitions, the theme will lack layout templates or content rules.

Which genre contains the most catalog themes?

The editorial genre contains twelve themes—specimen, newsprint, atelier, garden, almanac, studio, riso, sport, brutal, manifesto, editorial, and carnival—making it the largest bucket and representing the canonical Hallmark voice with formal, publication‑style characteristics.

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