How Hallmark Themes Are Organized by Genre Cluster

Hallmark groups its visual themes into four distinct genre clusters—editorial, modern-minimal, atmospheric, and playful—where each cluster restricts theme selection to a specific catalog and defines unique design constraints for typography, color, and layout.

Hallmark is a visual design system by Nutlope that uses genre-based classification to ensure coherent styling across generated pages. Instead of selecting themes from a global pool, the system first detects the appropriate genre cluster and then rotates through that cluster's restricted theme catalog. This architecture guarantees that typography, color palettes, and layout conventions remain consistent within each genre's design language.

The Four Genre Clusters

Hallmark organizes themes into four primary genre clusters defined in the skills/hallmark/references/genres/ directory. Each genre acts as a design-language boundary that controls which themes can be applied and what visual rules govern the output.

Editorial Genre

The editorial genre serves as the default "canonical anti-slop" style, suitable for news, blogs, magazines, and briefs that do not trigger specific genre signals. According to skills/hallmark/references/genres/editorial.md, this cluster includes themes such as Specimen, Atelier, Brutal, Newsprint, Studio, Manifesto, Almanac, Garden, Riso, Sport, Editorial, Carnival, and Grid.

This genre emphasizes readable typography, structured grids, and content-first layouts that prioritize information density over visual flourish.

Modern-Minimal Genre

The modern-minimal genre targets polished enterprise, developer-tool, and API documentation sites following the Stripe, Linear, or ElevenLabs visual school. As defined in skills/hallmark/references/genres/modern-minimal.md, this cluster restricts themes to Coral and Cobalt.

Coral uses a warm-grey canvas with coral accents, while Cobalt employs a cool-white background with electric-blue accents. Both themes enforce monochrome canvases, large confident display typography, generous whitespace, and pill-style CTAs.

Atmospheric Genre

The atmospheric genre captures the "AI-tool" visual style popularized by Suno and Runway, characterized by deep-tone backgrounds, radial-bloom lighting, and relaxed typographic hierarchies. The skills/hallmark/references/genres/atmospheric.md file defines five themes in this cluster: Bloom, Midnight, Terminal, Aurora, and Lumen.

These themes support dark-mode aesthetics and allow effects like radial-bloom lighting that would fail genre-scoped validation gates in other clusters.

Playful Genre

The playful genre adopts a post-Linear "alive" style for consumer-facing, community-oriented briefs. According to skills/hallmark/references/genres/playful.md, this cluster currently includes the Hum theme.

This genre encourages bright, multi-accent palettes and kinetic motion that would violate the slop-test constraints of the editorial or modern-minimal clusters.

Genre Detection and Theme Rotation

The genre selection process begins with automatic detection logic implemented in SKILL.md (lines 230-236). Hallmark scans the input brief for cue words—such as "SaaS" for modern-minimal, "dark mode" for atmospheric, or "fun" for playful—to determine the appropriate cluster.

Once the system locks a genre, theme rotation becomes genre-scoped. A modern-minimal build cycles only between Coral and Cobalt, while an atmospheric build rotates through Bloom, Midnight, Terminal, Aurora, and Lumen. This restriction ensures that a playful theme like Hum never appears in an enterprise API documentation context.

CSS Stamp Signature and Validation

Every generated stylesheet begins with a CSS comment that records the chosen genre and theme, enabling downstream runs to inherit the same decisions. As shown in skills/hallmark/references/genres/modern-minimal.md (lines 63-66), the stamp follows this format:

/* Hallmark · genre: modern-minimal · macrostructure: <name> · theme: Coral · enrichment: <tier> · nav: <N#> · footer: <Ft#> */

Genre selection also influences validation logic in skills/hallmark/references/slop-test.md. Certain gates are genre-scoped: radial-bloom lighting passes only for atmospheric themes, while pure-white paper backgrounds validate only for modern-minimal themes. These constraints prevent visual inconsistency across generated outputs.

Implementation Examples

The following examples demonstrate how genre clusters affect theme selection and usage in practice.

Selecting a Genre Programmatically

When running Hallmark via JavaScript, the system automatically detects the genre based on brief content:

// Example: Hallmark auto-detects modern-minimal for developer-tool briefs
import { runHallmark } from 'hallmark';

runHallmark({
  brief: 'Create a developer-tool landing page for our new API.',
  // Hallmark detects "modern-minimal" and rotates between Coral and Cobalt
});

Applying Theme CSS

Each theme exports a CSS file that implements its genre's design language. The following example uses the Coral theme from the modern-minimal cluster:

/* Hallmark · genre: modern-minimal · macrostructure: two-column-hero · theme: Coral · enrichment: base · nav: N5 · footer: Ft2 */
:root {
  --paper: oklch(100% 0 0);          /* pure white */
  --accent: oklch(60% 0.12 30deg);   /* coral */
  --font-display: "Geist", sans-serif;
  --font-body: "Geist", sans-serif;
}

Using Playful Themes in HTML

For consumer-facing applications, reference the Hum theme from the playful cluster:

<!-- Hum theme from the playful genre cluster -->
<link rel="stylesheet" href="hum.css">
<header class="hero playful">
  <h1>Welcome to the Fun Zone</h1>
  <p>Get started in seconds.</p>
  <a class="cta-pill">Try it now</a>
</header>

Summary

• Hallmark organizes themes into four genre clusters: editorial, modern-minimal, atmospheric, and playful.
• Each genre restricts theme rotation to a specific catalog defined in dedicated markdown files under skills/hallmark/references/genres/.
• Editorial serves as the default with 13 themes including Specimen and Brutal; modern-minimal offers Coral and Cobalt for enterprise sites; atmospheric provides Bloom, Midnight, Terminal, Aurora, and Lumen for AI-tool aesthetics; playful uses Hum for vibrant consumer interfaces.
• Genre detection in SKILL.md analyzes brief cues to lock the cluster before theme selection occurs.
• Generated CSS includes a stamp signature recording the genre and theme, ensuring consistent inheritance across builds.
• Genre-scoped validation gates in slop-test.md enforce design constraints, such as restricting radial-bloom effects to atmospheric themes only.

Frequently Asked Questions

How does Hallmark decide which genre cluster to use?

Hallmark analyzes the input brief for specific cue words during the genre detection phase defined in SKILL.md (lines 230-236). Keywords like "SaaS" or "API" trigger the modern-minimal cluster, while "dark mode" or "AI tool" select atmospheric, and "fun" or "community" activate playful. If no specific signals are detected, the system defaults to the editorial cluster.

Can I manually override the genre selection for a specific build?

While the analysis focuses on automatic detection, the CSS stamp signature format documented in genres/modern-minimal.md (lines 63-66) suggests that downstream runs inherit genre and theme decisions through the stamp comment. To force a specific genre, you would specify the appropriate theme from that cluster's catalog (such as Coral for modern-minimal or Bloom for atmospheric) in your configuration, causing Hallmark to validate against that genre's slop-test gates.

Why are certain visual effects restricted to specific genre clusters?

The skills/hallmark/references/slop-test.md file implements genre-scoped validation gates that maintain visual coherence. For example, radial-bloom lighting effects are permitted only for atmospheric themes, while pure-white paper backgrounds validate exclusively for modern-minimal themes. These restrictions prevent the mixing of incompatible design languages, such as dark-mode AI aesthetics appearing in enterprise documentation contexts.

Where are the theme definitions stored for each genre cluster?

Theme implementations reside in skills/hallmark/references/themes/ (such as coral.md, bloom.md, and hum.md), while genre boundaries and allowed theme lists are defined in skills/hallmark/references/genres/ (including editorial.md, modern-minimal.md, atmospheric.md, and playful.md). The SKILL.md file orchestrates the detection logic that maps briefs to these clusters.

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