How Hallmark Themes Are Categorized by Genre: The 4-Genre Design System Explained

TL;DR: Hallmark organizes all visual themes into four genres—editorial, modern-minimal, atmospheric, and playful—where each theme belongs to exactly one genre that determines eligibility, design overrides, and quality gates.

The Nutlope/hallmark repository implements a genre-aware classification system that ensures visual coherence across generated pages. Unlike simple tag systems, Hallmark's genre categorization is enforced through code-level constraints that limit theme rotation, apply design-system overrides, and configure slop-test validations.

The Four Hallmark Genres

Hallmark's genre taxonomy is defined in [site/js/main.js](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) through the THEME_GENRES object and documented across four genre reference files.

Editorial Genre

Editorial serves as the default fallback when no specific signals are detected. It is also the standard assignment for many content-type briefs.

• Trigger conditions: No signal fires, or brief lacks distinctive markers
• Theme cluster: Specimen, Newsprint, Atelier, Garden, Riso, Sport, Editorial, Carnival, Grid, and others
• Reference: [references/genres/editorial.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/editorial.md)

This genre emphasizes typographic hierarchy, structured grids, and content-forward layouts suitable for publishing and information-dense pages.

Modern-Minimal Genre

Modern-minimal activates for technology and business contexts where clarity and restraint take priority.

• Trigger signals: SaaS, enterprise, API, dev-experience
• Theme cluster: Coral, Cobalt
• Reference: [references/genres/modern-minimal.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/modern-minimal.md)

The modern-minimal genre enforces near-monochrome palettes, generous whitespace, and systematic spacing tokens.

Atmospheric Genre

Atmospheric captures immersive, sensory-driven experiences common in creative tools and media applications.

• Trigger signals: AI-tool, dark-mode, video, music
• Theme cluster: Bloom, Midnight, Terminal, Aurora, Lumen
• Reference: [references/genres/atmospheric.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/atmospheric.md)

This genre permits radial-gradient backgrounds, layered depth effects, and ambient color transitions that would be rejected under stricter genres.

Playful Genre

Playful addresses consumer-facing, engagement-focused contexts where personality and motion enhance the experience.

• Trigger signals: fun, consumer, community, onboarding
• Theme cluster: Hum
• Reference: [references/genres/playful.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/playful.md)

Playful themes mandate motion, bright accent colors, and unconventional compositions that break from conventional grid systems.

How Genre Detection Works in Hallmark

The genre detection pipeline runs before any theme selection occurs. According to [SKILL.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md), the process follows this sequence:

1. Parse the brief for genre-signaling keywords
2. Match against signal patterns (ordered by precedence)
3. Default to editorial if no match
4. Constrain theme pool to genre members only

// From site/js/main.js (L99-L125) - THEME_GENRES definition
const THEME_GENRES = {
  coral:    "modern-minimal",
  cobalt:   "modern-minimal",
  bloom:    "atmospheric",
  midnight: "atmospheric",
  terminal: "atmospheric",
  aurora:   "atmospheric",
  lumen:    "atmospheric",
  hum:      "playful",
  editorial:"editorial",  // default fallback
};

The detection logic follows this priority-ordered pattern matching:

function detectGenre(brief) {
  // Atmospheric signals take precedence for immersive contexts
  if (/AI.*tool|dark mode|video|music/i.test(brief)) return "atmospheric";
  // Enterprise contexts route to restrained aesthetics
  if (/SaaS|enterprise|API|dev experience/i.test(brief)) return "modern-minimal";
  // Engagement-focused products get expressive treatment
  if (/fun|consumer|community|onboarding/i.test(brief)) return "playful";
  // Silent default ensures predictable fallback
  return "editorial";
}

Genre-Scoped Theme Rotation

Once a genre is resolved, theme selection becomes genre-scoped as documented in [SKILL.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md#L240-L242). This means an atmospheric brief cannot accidentally rotate into a playful theme—the pool is strictly bounded.

const THEMES_BY_GENRE = {
  editorial:      ["specimen","newsprint","atelier","garden","riso","sport","editorial","carnival","grid"],
  "modern-minimal": ["coral","cobalt"],
  atmospheric:    ["bloom","midnight","terminal","aurora","lumen"],
  playful:        ["hum"]
};

function pickTheme(genre) {
  const pool = THEMES_BY_GENRE[genre];
  // Diversification logic prevents recent repeats
  return pool[diversifiedIndex(pool)];
}

This scoping prevents visual incoherence: a dark-mode AI tool page will only see atmospheric themes with appropriate depth and ambiance, never a playful or editorial mismatch.

Genre-Specific Slop-Test Overrides

Each genre carries slop-test overrides defined in [references/slop-test.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md#L5-L31). These gates validate that generated output adheres to genre intentions:

Genre	Allowed	Rejected
atmospheric	Radial gradients, layered shadows, ambient motion	Flat color fields, rigid grids
modern-minimal	Near-monochrome palettes, systematic spacing	Decorative flourishes, high contrast
playful	Bright accents, motion, unconventional composition	Restrained palettes, static layouts
editorial	Typographic hierarchy, structured grids	Excessive decoration, arbitrary color

The genre is stamped into generated CSS for enforcement:

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

This stamp enables downstream tools to apply correct validation gates and diversification logs.

Summary

• Hallmark themes are categorized into four mutually exclusive genres: editorial, modern-minimal, atmospheric, and playful
• Genre assignment occurs through signal detection in briefs, with editorial as the silent default
• The THEME_GENRES object in site/js/main.js maps every theme to its single genre
• Theme rotation is genre-scoped, preventing visual mismatches during page generation
• Each genre applies distinct slop-test overrides that validate design-system compliance
• Genre metadata is stamped into generated output for traceability and enforcement

Frequently Asked Questions

What happens if a brief matches multiple genre signals?

Hallmark evaluates signals in precedence order: atmospheric, modern-minimal, playful, then editorial default. The first match wins. For conflicting signals (e.g., "AI tool for enterprise"), the ordering ensures atmospheric takes precedence over modern-minimal per the implementation in the detection pipeline.

Can a theme belong to multiple genres?

No. The THEME_GENRES object assigns each theme to exactly one genre. This strict mapping prevents hybrid themes that could dilute genre coherence. If a theme needs genre flexibility, it is duplicated and tuned rather than shared across genres.

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

Add the theme name to THEME_GENRES in site/js/main.js with the appropriate genre value, then document the theme in the corresponding genre reference file (e.g., references/genres/atmospheric.md). Update THEMES_BY_GENRE in your rotation logic to include the new theme in the pool.

Where is the genre default actually enforced?

The editorial fallback is hardcoded as the final return in detectGenre() functions and as the editorial:"editorial" entry in THEME_GENRES. According to SKILL.md, the genre resolution step explicitly defaults to editorial when no signals fire, making it a system-level guarantee rather than a configuration option.

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