Hallmark Genre Detection Types Explained: Editorial, Modern-Minimal, Atmospheric, and Playful

Hallmark uses four distinct genre clusters—editorial, modern-minimal, atmospheric, and playful—to categorize pages and determine their visual styling, theme selection, and component behavior.

The open-source Hallmark project by Nutlope implements a genre detection system that runs as the first step in its skill flow. This classification determines which themes, navigation patterns, footer archetypes, and motion rules apply to each generated page. Understanding these four genre detection types helps you predict how Hallmark will style your content and when to override the defaults.

The Four Genre Detection Types in Hallmark

Hallmark's classifier assigns every page to exactly one genre based on keywords detected in the brief. Each genre carries a specific aesthetic philosophy, restricted theme clusters, and slop-test overrides that prevent visual inconsistencies.

Editorial Genre

The editorial genre serves as Hallmark's default when no specialized signals appear in the brief. It prioritizes content legibility over decoration.

• Triggering signals: None (default fallback)
• Visual characteristics: Asymmetric layouts, serif-heavy typography, paper-like textures, quiet motion
• Available themes: Specimen, Newsprint, Atelier, Garden, Almanac, Studio, Riso, Sport, Brutal, Manifesto, Editorial, Carnival

The editorial genre specification lives in skills/hallmark/references/genres/editorial.md, which defines allowed elements, voice fixtures, and disallowed patterns for this classification.

Modern-Minimal Genre

The modern-minimal genre targets professional software and infrastructure products where clarity signals credibility.

• Triggering signals: SaaS, enterprise, API, platform, developer-tool, infra, B2B, dev-experience
• Visual characteristics: Near-monochrome palettes, restrained accent colors, tight-radius controls, canonical two-column hero layouts
• Available themes: Coral (warm-grey + coral accent), Cobalt (cool-white + electric blue)

This genre strips away decorative elements in favor of functional density. The specification file at skills/hallmark/references/genres/modern-minimal.md enforces these constraints.

Atmospheric Genre

The atmospheric genre creates immersive, mood-driven experiences for media-heavy or AI-native products.

• Triggering signals: AI tool, generative, music, video, voice, late-night, dark mode
• Visual characteristics: Dark backgrounds, radial-gradient blooms, immersive environments
• Critical rule: Gradient effects apply to backgrounds only—never to text
• Available themes: Bloom, Midnight, Terminal, Aurora, Lumen

The skills/hallmark/references/genres/atmospheric.md file contains the full rule set including gradient restrictions and motion guidelines.

Playful Genre

The playful genre maximizes engagement for consumer-facing experiences where personality drives conversion.

• Triggering signals: fun, consumer, casual, friendly, onboarding, family, community
• Visual characteristics: Vibrant palettes, mandatory motion, single-character moments
• Canonical theme: Hum (vibrant colors + persistent motion)

See skills/hallmark/references/genres/playful.md for component routing rules and animation requirements specific to this genre.

How Genre Detection Works in Practice

Step 1: Signal Detection

According to skills/hallmark/SKILL.md, Hallmark scans the input brief for genre-triggering keywords during Step 1 · Genre detection. When multiple signals conflict—such as AI tool and enterprise appearing together—Hallmark prompts the user to select the closest match rather than guessing.

Step 2: Genre Storage and Runtime Access

Once detected, the genre is stamped into the CSS comment header of every generated stylesheet:

/* Hallmark · genre: modern-minimal · macrostructure: Marquee Hero · theme: Cobalt */

The runtime reads this value in site/js/main.js to update the UI:

// site/js/main.js – map theme → genre
const THEME_GENRES = {
  coral: "modern-minimal",
  cobalt: "modern-minimal",
  bloom: "atmospheric",
  midnight: "atmospheric",
  terminal: "atmospheric",
  aurora: "atmospheric",
  lumen: "atmospheric",
  hum: "playful"
};

const genre = THEME_GENRES[theme] || "editorial";
if (themeGenreEl) themeGenreEl.textContent = genre;

Reading the Genre from a Generated Page

<!-- In any Hallmark page -->
<link rel="stylesheet" href="style.css">
<script>
  const genreEl = document.querySelector("[data-theme-genre]");
  const theme = document.documentElement.dataset.theme;
  const THEME_GENRES = { 
    coral: "modern-minimal", 
    cobalt: "modern-minimal", 
    bloom: "atmospheric", 
    hum: "playful" 
  };
  const genre = THEME_GENRES[theme] || "editorial";
  if (genreEl) genreEl.textContent = genre;
</script>

Manually Stamping a Genre

Override automatic detection by embedding the genre directly in your CSS:

/* style.css */
 /* Hallmark · genre: atmospheric · macrostructure: Marquee Hero · theme: Bloom */

Genre Detection Files in the Hallmark Repository

File	Purpose
skills/hallmark/SKILL.md	Full workflow documentation including genre detection step
skills/hallmark/references/genres/editorial.md	Editorial genre rules and constraints
skills/hallmark/references/genres/modern-minimal.md	Modern-minimal specifications
skills/hallmark/references/genres/atmospheric.md	Atmospheric genre requirements
skills/hallmark/references/genres/playful.md	Playful genre guidelines
site/js/main.js	Runtime theme-to-genre mapping
site/examples/hyperlane/tokens.css	Example of genre-stamped output

Summary

• Four genre detection types classify every Hallmark page: editorial (default), modern-minimal, atmospheric, and playful
• Genre selection triggers in Step 1 of the Hallmark skill flow and determines downstream theming, navigation, and slop-test rules
• The genre is stored in CSS comment headers and accessible via the THEME_GENRES mapping in site/js/main.js
• Each genre maintains its own specification file under skills/hallmark/references/genres/
• When briefs contain conflicting signals, Hallmark prompts for user clarification rather than defaulting

Frequently Asked Questions

How does Hallmark decide which genre to apply?

Hallmark scans the input brief for predefined keyword signals. When it finds matches for SaaS, API, B2B, or similar terms, it routes to modern-minimal. Keywords like AI tool, music, or dark mode trigger atmospheric. Consumer-focused terms select playful. No matches defaults to editorial. Conflicting signals prompt explicit user choice.

Can I override the automatically detected genre?

Yes. Manually stamp the desired genre in your CSS comment header: /* Hallmark · genre: atmospheric · ... */. The runtime in site/js/main.js reads this value, and downstream generators respect the override for theme selection and component routing.

What happens if my brief matches multiple genre signals?

Hallmark surfaces a disambiguation prompt asking you to pick the closest match—for example, choosing between "modern-minimal · atmospheric" when both enterprise and AI keywords appear. This prevents conflicting visual rules from being applied simultaneously.

Where is the genre detection logic documented?

The primary documentation lives in skills/hallmark/SKILL.md under the "Step 1 · Genre detection" section. Each genre's specific constraints, allowed themes, and slop-test overrides are detailed in their respective files under skills/hallmark/references/genres/.

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