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

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, 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 (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.

// 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

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

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	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 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 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 lines 101-125.

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