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

> Discover Hallmark's 20 catalog themes across editorial, modern-minimal, atmospheric, and playful genres. Learn how these visual styles diversify page structure and copy.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: deep-dive
- Published: 2026-07-20

---

**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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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.

```javascript
// 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:

```html
<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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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.