What Are the Four Genres Used in Hallmark? Understanding Editorial, Modern-Minimal, Atmospheric, and Playful

Hallmark uses four design genres—editorial, modern-minimal, atmospheric, and playful—to categorize pages and drive visual language, component choices, and motion rules.

The Hallmark design system, developed by Nutlope, organizes every interface into one of these four genres. Each genre functions as a rule-set overlay that determines theme rotation, component eligibility, and even AI-generated voice tone. Understanding these genres is essential for anyone building with or contributing to the Hallmark system.

---

The Four Genres Defined

Hallmark's genre system is documented in skills/hallmark/SKILL.md and implemented in site/js/main.js. Here's how each genre is defined in the source code:

Editorial

The default, canonical voice. When a design brief provides no specialized aesthetic signals, Hallmark falls back to editorial. This genre serves as the baseline for professional, content-forward interfaces.

Source: skills/hallmark/references/genres/editorial.md

Modern-Minimal

Inspired by Stripe, Linear, and ElevenLabs—clean, grid-based layouts with restrained color palettes and precise typography. This genre emphasizes whitespace, sharp edges, and functional clarity.

Source: skills/hallmark/references/genres/modern-minimal.md

Atmospheric

The Suno / Runway / dark-AI-tool aesthetic. Favors depth, tone-on-tone palettes, and softer motion. Atmospheric interfaces feel immersive and mood-driven, often using dark modes and subtle gradients.

Source: skills/hallmark/references/genres/atmospheric.md

Playful

Post-Linear "soft school" aesthetic—bright colors, rounded sans-serifs, multi-accent palettes, and bouncy motion. Designed for consumer-oriented products, onboarding flows, and community features.

Source: skills/hallmark/references/genres/playful.md

---

How Genre Detection Works in Hallmark

The runtime genre system is hard-wired via a mapping table in site/js/main.js. Each theme maps to one of the four genres, with editorial as the fallback:

/* — Theme → genre map ——————————————————————————————————
// Each theme belongs to one of four genres — a rule-set overlay that
// skill picks from. See references/genres/. */
const THEME_GENRES = {
  coral: "modern-minimal",
  cobalt: "modern-minimal",
  bloom: "atmospheric",
  midnight: "atmospheric",
  lumen: "atmospheric",
  hum: "playful",
  // …other themes default to "editorial"
};

const theme = getCurrentTheme();                // e.g. "hum"
const genre = THEME_GENRES[theme] || "editorial";
document.querySelector("[data-theme-genre]").textContent = genre;

This mapping enables automatic genre detection based on theme selection, with the detected genre surfaced in the UI via data-theme-genre attributes.

---

Genre Detection from Design Briefs

Hallmark includes programmatic genre detection based on keyword signals in design briefs. The logic, mirrored from SKILL.md lines 230–240, works as follows:

// utilities/genreDetector.js
import editorial from "./references/genres/editorial.md";
import modernMinimal from "./references/genres/modern-minimal.md";
import atmospheric from "./references/genres/atmospheric.md";
import playful from "./references/genres/playful.md";

export function detectGenre(brief) {
  const lower = brief.toLowerCase();
  if (/\b(fun|consumer|casual|friendly|onboarding|family|community)\b/.test(lower))
    return "playful";
  if (/\b(stripe|linear|elevenlabs)\b/.test(lower))
    return "modern-minimal";
  if (/\b(suno|runway|dark|ai)\b/.test(lower))
    return "atmospheric";
  return "editorial"; // default
}

// Usage
const genre = detectGenre(userBrief);
console.log(`Chosen genre → ${genre}`);

The detection prioritizes specificity: playful and atmospheric keywords are checked first, with modern-minimal and editorial as subsequent fallbacks.

---

How Genres Influence Component Selection

Genres act as gating mechanisms for components. Certain components are restricted to specific genres:

Component	Allowed Genres	Notes
Floating pill	modern-minimal, atmospheric	Precision UI element
Brutal slab	playful	Bold, expressive container
Editorial masthead	editorial	Default header pattern

Example implementation from component-loader.js:

const hero = document.querySelector(".hero");
const genre = hero.dataset.genre;

if (genre === "playful") {
  loadBrutalSlab();   // defined in references/components/n7-brutal-slab.md
}

HTML structure with genre annotation:

<div class="hero" data-genre="playful">
  <section class="brutal-slab">…</section>
</div>

---

Runtime Theme Switching with Genre Preservation

When switching themes client-side, Hallmark preserves the genre mapping through the THEME_GENRES table:

function setTheme(themeName) {
  document.documentElement.dataset.theme = themeName;
  const genre = THEME_GENRES[themeName] || "editorial";
  document.documentElement.dataset.genre = genre; // global CSS hook
}
setTheme("hum"); // → genre "playful"

The data-genre attribute on <html> enables genre-specific CSS selectors:

[data-genre="modern-minimal"] .card { border-radius: 0; }
[data-genre="playful"] .card { border-radius: 1rem; }

---

Key Source Files for Hallmark Genres

File	Purpose
skills/hallmark/SKILL.md	Core genre definitions and detection flow
skills/hallmark/references/genres/editorial.md	Editorial genre specifications
skills/hallmark/references/genres/modern-minimal.md	Modern-minimal genre specifications
skills/hallmark/references/genres/atmospheric.md	Atmospheric genre specifications
skills/hallmark/references/genres/playful.md	Playful genre specifications
site/js/main.js	Runtime theme-to-genre mapping

---

Summary

• Four genres structure Hallmark's design system: editorial, modern-minimal, atmospheric, and playful.
• Editorial is the default fallback; specialized genres trigger on keyword signals or explicit theme selection.
• Genre detection runs in utilities/genreDetector.js using regex patterns matching brand references and emotional descriptors.
• The THEME_GENRES mapping in site/js/main.js connects themes to genres at runtime.
• Components are gated by genre, ensuring visual consistency within each aesthetic territory.

---

Frequently Asked Questions

What happens if no genre is detected?

Hallmark defaults to editorial. This fallback is hard-coded in both the theme mapping (THEME_GENRES[theme] || "editorial") and the brief detection logic (final return statement).

Can a single page use multiple genres?

No. Hallmark enforces one genre per page as an architectural constraint. The system routes to a single genre to maintain coherent visual language, though individual components may adapt within that genre's boundaries.

How do I add a new theme to an existing genre?

Add the theme key to THEME_GENRES in site/js/main.js with the appropriate genre value. Ensure the theme's color tokens align with the genre's defined palette in its reference file under references/genres/.

What's the difference between a theme and a genre?

A theme is a concrete color/token set (e.g., coral, midnight, hum). A genre is an abstract rule-set that groups themes by aesthetic approach. Multiple themes can share one genre; each theme maps to exactly one genre.

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