What Are the Four Hallmark Genre Types and When Do They Apply?

Hallmark uses four genre types—Editorial, Modern-Minimal, Atmospheric, and Playful—to classify every design, selecting one based on keyword signals detected in the brief before any theme is applied.

Hallmark is an open-source design system that categorizes every project into one of four distinct Hallmark genre types. According to the Nutlope/hallmark repository, this classification occurs before any theme is selected and determines which theme pool, visual-gate overrides, and LLM voice the system will apply.

The Four Hallmark Genre Types

Each genre serves a specific design purpose and activates based on signal detection logic defined in skills/hallmark/SKILL.md (lines 30-36).

Editorial (The Default Genre)

Editorial serves as the fallback when no other genre signals are detected. It represents a balanced, content-focused aesthetic suitable for general-purpose applications. When a brief lacks enterprise, atmospheric, or playful keywords, Hallmark silently selects this genre as the default.

Modern-Minimal

Modern-Minimal activates when the brief contains enterprise terminology such as SaaS, enterprise, API, platform, developer tool, infra, B2B, or dev experience. This genre applies clean, technical aesthetics optimized for infrastructure and business-to-business products.

Atmospheric

Atmospheric triggers on creative or mood-based signals including AI tool, generative, music, video, voice, late-night, dark mode, or atmospheric. This genre supports immersive, dark-themed visual experiences common in creative tools and media applications.

Playful

Playful applies to consumer-friendly projects signaled by terms like fun, consumer, casual, friendly, onboarding, family, or community. This genre employs approachable, light visual patterns suitable for social applications and casual user experiences.

How Hallmark Detects and Applies Genres

Genre selection relies on signal-based detection logic implemented in the Hallmark skill configuration. The system scans the input brief for specific keyword clusters associated with Modern-Minimal, Atmospheric, and Playful genres.

Signal Conflict Resolution

If the brief contains conflicting signals from two non-default genres (for example, both enterprise and atmospheric keywords), Hallmark prompts the user to disambiguate. The system presents a choice such as "This brief fits both modern-minimal and atmospheric — which feels closer?" rather than making an arbitrary selection.

Runtime Genre Resolution

The theme-to-genre mapping is implemented in site/js/main.js around line 97. The THEME_GENRES constant maps specific themes to their associated genres:

// site/js/main.js – around line 97
const THEME_GENRES = {
  // theme: genre
  bloom: "atmospheric",
  coral: "modern-minimal",
  hum:   "playful",
  // …other themes default to "editorial"
};

// Later, after a theme is selected:
const genre = THEME_GENRES[theme] || "editorial";
if (themeGenreEl) themeGenreEl.textContent = genre;

Where Genre Data Lives in the Codebase

The genre logic resides in several key files within the Nutlope/hallmark repository.

Configuration Files

The detection rules and definitions live in skills/hallmark/SKILL.md (lines 30-36). Individual genre specifications are stored in dedicated reference files:

• skills/hallmark/references/genres/editorial.md – Default patterns and constraints
• skills/hallmark/references/genres/modern-minimal.md – Enterprise-specific overrides
• skills/hallmark/references/genres/atmospheric.md – Dark mode and creative overrides
• skills/hallmark/references/genres/playful.md – Consumer-friendly overrides

Generated Output Stamping

Every generated stylesheet includes a genre stamp as a CSS comment. This allows downstream processes to identify which genre rules were applied. For example, from site/examples/hyperlane/styles.css:

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

Developers can parse this comment to enforce diversification across builds or audit which Hallmark genre types were applied to specific outputs.

Summary

• Hallmark uses four genre types: Editorial (default), Modern-Minimal, Atmospheric, and Playful.
• Genre selection occurs before theme selection and determines available themes, visual overrides, and LLM voice.
• Detection relies on keyword signals in the brief, with specific triggers for enterprise (Modern-Minimal), creative (Atmospheric), and consumer (Playful) contexts.
• Conflicting signals trigger user disambiguation, while absence of signals defaults to Editorial.
• The genre is recorded in generated CSS comments and mapped at runtime in site/js/main.js.

Frequently Asked Questions

What happens if a Hallmark brief contains multiple genre signals?

When a brief contains keywords matching two non-default genres, Hallmark asks the user to clarify which genre fits better. The system presents a specific choice rather than defaulting arbitrarily, ensuring the selected genre aligns with the project's intent.

Can I manually override the genre selection in Hallmark?

The source code indicates that genre selection is signal-based and occurs early in the pipeline. While the THEME_GENRES mapping in site/js/main.js allows runtime resolution of themes to genres, the initial classification relies on the brief content analysis defined in skills/hallmark/SKILL.md.

Where does Hallmark store the selected genre information?

Hallmark stamps the chosen genre into every generated CSS file as a structured comment at the top of the stylesheet. This appears in files like site/examples/hyperlane/styles.css and follows the format /* Hallmark · genre: [type] · macrostructure: [structure] · theme: [name] */.

Why does Hallmark select the genre before the theme?

The genre determines which theme pool is available and which visual-gate overrides and LLM voice settings apply. Selecting the genre first ensures that subsequent theme choices align with the appropriate aesthetic constraints and voice characteristics for the specific project type.

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