The Four Design Genres Hallmark Can Detect: Editorial, Modern-Minimal, Atmospheric & Playful

Hallmark detects four design genres—editorial, modern-minimal, atmospheric, and playful—using keyword-based signal detection on the project brief, with editorial as the silent default when no signals match.

Hallmark's design engine is architected around a genre-first decision tree. Before selecting themes, color palettes, or component structures, the system determines which of its four design genres best fits the page. This primary classification, documented in skills/hallmark/SKILL.md at line 230, cascades through every downstream design choice including allowable themes, visual-slop gates, and copy tone.

The Four Design Genres Defined

editorial

The default, canonical anti-slop voice. When no genre signals fire in a project brief, Hallmark silently falls back to editorial. This genre prioritizes clarity, restraint, and typographic hierarchy over decorative elements. It serves as the baseline against which all other genres are measured.

modern-minimal

The Stripe / Linear / ElevenLabs school of design. Characterized by precise spacing, subtle gradients, and developer-tool aesthetics. This genre signals technical credibility and infrastructure-grade polish.

atmospheric

The Suno / Runway / dark-AI-tool school. Embraces moody backgrounds, dramatic lighting, and immersive visual experiences. Popular among generative AI products and creative tools that want to feel cinematic.

playful

The post-Linear soft school. Friendly, approachable, and consumer-oriented. Uses rounded forms, warmer color temperatures, and conversational copy to reduce friction in onboarding and community-focused products.

How Hallmark Detects Design Genres

Hallmark uses signal-based detection scanning the project brief for keyword cues. The detection logic follows a cascading priority:

Keyword Signals	Detected Genre
AI tool, generative, music, video, voice, late-night, dark mode, atmospheric	atmospheric
SaaS, enterprise, API, platform, developer tool, infra, B2B, dev experience	modern-minimal
fun, consumer, casual, friendly, onboarding, family, community	playful
(none match)	editorial (silent default)

This detection occurs in the core workflow at SKILL.md lines 232-234, where each genre's trigger keywords are explicitly enumerated.

Genre Stamping for Consistency

Every stylesheet Hallmark generates carries a comment stamp recording the selected genre:

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

This stamp serves two critical functions. First, it creates auditability—developers can inspect any generated file to understand the design decisions made. Second, subsequent Hallmark runs parse this stamp to maintain genre consistency across multi-page projects.

Reading the stamp at runtime is straightforward:

const stamp = document.querySelector('style')
  .textContent.match(/genre:\s*(\w+)/)[1];
console.log('Current page genre →', stamp);

Architectural Impact of Genre Selection

The chosen genre doesn't merely affect aesthetics—it reshapes the entire design rule engine:

• Theme clusters are genre-locked. Atmospheric maps to Bloom, Midnight, and similar themes; Modern-Minimal maps to Coral, Cobalt, and analogous palettes.

• Slop-test gates vary by genre. Radial-gradient backgrounds pass in Atmospheric but fail in Editorial, where such ornamentation violates the anti-slop mandate.

• Component routing tables for navigation and footer archetypes are genre-aware, preventing a "one-size-fits-all" UI that would feel mismatched.

The genre-specific rules live in dedicated markdown files under skills/hallmark/references/genres/. Once detected, Hallmark eagerly loads the corresponding file—for example, references/genres/atmospheric.md—and overlays these rules atop the generic design system:

const genre = detectGenre(brief);
const genreFile = `skills/hallmark/references/genres/${genre}.md`;
const overrides = loadMarkdown(genreFile);   // Hallmark's internal loader
applyOverrides(overrides);

Implementation Example: Genre Detection Logic

The following pseudo-code mirrors Hallmark's internal detection helpers:

function detectGenre(brief) {
  const lower = brief.toLowerCase();
  
  if (/\b(ai|generative|music|video|voice|dark|atmospheric)\b/.test(lower)) {
    return 'atmospheric';
  }
  if (/\b(sa(s|as)|enterprise|api|platform|b2b|dev)\b/.test(lower)) {
    return 'modern-minimal';
  }
  if (/\b(fun|consumer|casual|friendly|onboarding|family|community)\b/.test(lower)) {
    return 'playful';
  }
  
  return 'editorial'; // silent default per SKILL.md#L230
}

Key Source Files

File	Purpose
skills/hallmark/SKILL.md	Core workflow and genre detection specification
skills/hallmark/references/genres/editorial.md	Default genre rules
skills/hallmark/references/genres/modern-minimal.md	Strip/Linear-style design system
skills/hallmark/references/genres/atmospheric.md	Dark, immersive AI-tool aesthetics
skills/hallmark/references/genres/playful.md	Consumer-friendly, approachable design
site/js/main.js	Client-side theme-to-genre mapping

Summary

• Hallmark operates four distinct design genres: editorial, modern-minimal, atmospheric, and playful
• Detection relies on keyword signal matching in project briefs, with editorial as the silent fallback
• Selected genres stamp generated stylesheets for traceability and cross-page consistency
• Genre choice gates themes, slop tests, and component routing through dedicated override files
• All four genres are fully specified in skills/hallmark/references/genres/{genre}.md

Frequently Asked Questions

What happens if a brief matches multiple genre keywords?

Hallmark's detection cascades in a fixed priority: atmospheric signals are checked first, then modern-minimal, then playful, with editorial as the final fallback. The first match wins. For ambiguous briefs mentioning both "AI video platform" and "developer API," the atmospheric signal triggers first, yielding that genre.

Can I override the detected genre manually?

The source code indicates genre detection is automatic based on brief content. However, the CSS comment stamp can be manually edited, and subsequent Hallmark runs will respect the stamped genre when generating additional pages for the same project.

How do the four design genres affect the actual CSS output?

Each genre loads its own override file from skills/hallmark/references/genres/, which modifies theme availability, color calculus, spacing scales, and slop-test thresholds. The atmospheric genre, for instance, permits dramatic gradients and extended viewport units that editorial would reject as visual slop.

Where is the genre detection logic implemented?

The canonical specification resides in skills/hallmark/SKILL.md lines 230-234, with the four genres enumerated and their trigger keywords defined. The actual detection implementation is internal to Hallmark's core engine, though the logic can be reconstructed from the documented signal patterns.

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