# What Are the Four Genre Classifications in Hallmark? A Complete Technical Guide

> Discover Hallmark's four genre classifications editorial modern-minimal atmospheric and playful to organize visual themes and drive styling logic. Learn more in this technical guide.

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

---

**Hallmark uses four genre classifications—editorial, modern-minimal, atmospheric, and playful—to organize its visual themes and drive styling logic across all theme implementations.**

The Hallmark project is a theme system for creating consistent, beautiful web experiences. Understanding the four genre classifications in Hallmark is essential for developers who want to customize themes or build new ones that align with the system's design philosophy. These genres are defined in the core JavaScript configuration and directly influence typography, color palettes, and layout rules applied to each theme.

## How Genre Classifications Work in Hallmark

In Hallmark, every theme maps to exactly one of four genre classifications. This mapping occurs in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js), where the `THEME_GENRES` object serves as the central registry determining which visual rule-set applies to a given theme.

According to the Nutlope/hallmark source code, this architecture separates *what* a theme looks like from *how* it behaves aesthetically. The genre acts as a classifier that triggers specific CSS overlays and JavaScript-driven styling fixtures.

## The Four Genre Classifications Explained

### Editorial

**Editorial** is the default, canonical Hallmark voice. Most classic themes use this genre, which emphasizes readable typography, balanced whitespace, and professional presentation. It serves as the fallback when a theme lacks an explicit genre assignment.

### Modern-Minimal

**Modern-minimal** produces a clean, Stripe/Linear-style aesthetic focused on extreme minimalism. This genre strips away decorative elements in favor of precise spacing, subtle borders, and restrained color usage. Themes like **cobalt** implement this genre for SaaS-style landing pages.

### Atmospheric

**Atmospheric** draws inspiration from dark AI-tool interfaces like Suno and Runway. This genre favors moody palettes, dramatic contrast, and immersive backgrounds. It targets themes designed for creative tools and generative AI applications. The **bloom** theme uses this classification.

### Playful

**Playful** introduces whimsy and personality into the Hallmark system. This lighter, more expressive genre breaks from corporate conventions with fun accents, rounded elements, and vibrant color schemes. The **hum** theme exemplifies this classification.

## Finding Genre Mappings in the Source Code

The `THEME_GENRES` object in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) (lines 101-125) contains the complete mapping of theme names to genre values. This configuration drives which rule-set overlay and voice fixtures load for any selected theme.

```javascript
// Simplified representation from site/js/main.js
const THEME_GENRES = {
  // Most themes default to editorial
  "default": "editorial",
  
  // Modern-minimal themes
  "cobalt": "modern-minimal",
  "linear": "modern-minimal",
  
  // Atmospheric themes
  "bloom": "atmospheric",
  "suno": "atmospheric",
  
  // Playful themes
  "hum": "playful"
};

```

Developers can inspect this object directly to determine genre availability or extend it with custom theme-to-genre mappings.

## Practical Code Examples for Working with Genres

### Retrieving a Theme's Genre

```javascript
import { THEME_GENRES } from "./site/js/main.js";

function getGenre(theme) {
  return THEME_GENRES[theme] || "editorial";
}

// Usage examples
console.log(getGenre("cobalt"));   // → "modern-minimal"
console.log(getGenre("bloom"));    // → "atmospheric"
console.log(getGenre("hum"));      // → "playful"
console.log(getGenre("unknown"));  // → "editorial" (fallback)

```

The fallback to **"editorial"** ensures graceful degradation when themes lack explicit genre assignments.

### Applying Genre-Specific UI Behaviors

```javascript
const genre = getGenre(selectedTheme);

if (genre === "modern-minimal") {
  document.body.classList.add("minimal-layout");
} else if (genre === "atmospheric") {
  document.body.classList.add("dark-palette");
} else if (genre === "playful") {
  document.body.classList.add("fun-accent");
} else {
  document.body.classList.add("editorial-base");
}

```

This pattern enables conditional rendering of genre-appropriate layouts without hardcoding theme names throughout your application.

## Key Files for Genre Implementation

| File | Purpose |
|------|---------|
| [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) | Contains the `THEME_GENRES` mapping that defines all four genre classifications |
| `site/examples/*/script.js` | Demonstrates how each genre renders in practice |
| `references/genres/` | Houses documentation and design guidelines for each genre |

The `references/genres/` directory includes specific guidance for implementing **editorial**, **modern-minimal**, **atmospheric**, and **playful** aesthetics according to Hallmark's established conventions.

## Summary

- Hallmark organizes every theme into one of **four genre classifications**: editorial, modern-minimal, atmospheric, and playful.
- These genres are defined in **[`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js)** within the `THEME_GENRES` object.
- **Editorial** serves as the default fallback for most classic themes.
- **Modern-minimal** delivers clean, Stripe/Linear-inspired aesthetics.
- **Atmospheric** implements dark, AI-tool-inspired moody designs.
- **Playful** enables whimsical, expressive visual treatments.
- Genre detection uses simple object lookup with graceful fallback to editorial.

## Frequently Asked Questions

### How do I change a theme's genre classification?

Modify the `THEME_GENRES` object in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) to assign a different genre value to your theme name. The change takes effect immediately on next theme load, applying the corresponding CSS overlay and voice fixtures.

### Can I create custom genres beyond the four classifications?

The Hallmark system is built around these four genre classifications. While you could extend `THEME_GENRES` with new values, the underlying CSS rule-sets and fixtures in `references/genres/` only support the established genres. Extending beyond these would require building new genre infrastructure.

### Why does my theme use editorial when I specified a different genre?

This occurs when the theme name doesn't exist in `THEME_GENRES`. The `getGenre()` function implements `"editorial"` as its fallback value. Verify your theme name matches exactly—including case and hyphens—in the `THEME_GENRES` mapping at [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) lines 101-125.