The Four Genres in Hallmark: How Editorial, Modern-Minimal, Atmospheric, and Playful Are Detected

Hallmark classifies every theme into one of four design genres—Editorial, Modern-Minimal, Atmospheric, and Playful—detected via the THEME_GENRES mapping in site/js/main.js and applied through dedicated rule-set files.

Hallmark is an open-source AI design system that uses genre-based architecture to switch between aesthetic overlays. The system detects design intent through keyword analysis and maps themes to specific genre rule sets defined in markdown reference files, ensuring consistent styling across different visual contexts.

The Four Hallmark Genres Defined

Each genre represents a distinct visual philosophy implemented as a rule-set overlay:

• Editorial: The default minimal-ist overlay for clean, content-focused layouts. Rule definitions reside in skills/hallmark/references/genres/editorial.md.
• Modern-Minimal: A SaaS-oriented style emphasizing whitespace and utility. Rule definitions reside in skills/hallmark/references/genres/modern-minimal.md.
• Atmospheric: A dark, cinematic aesthetic for immersive experiences. Rule definitions reside in skills/hallmark/references/genres/atmospheric.md.
• Playful: A bright, friendly style for consumer applications. Rule definitions reside in skills/hallmark/references/genres/playful.md.

How Genre Detection Works

Hallmark employs a two-stage detection process combining static theme mapping and dynamic signal analysis.

Theme-to-Genre Mapping (THEME_GENRES)

The core detection logic resides in site/js/main.js, where the THEME_GENRES constant maps theme identifiers to their respective genres. According to the source code at lines 726-742, this mapping defaults to "editorial" when no explicit entry exists for a given theme.

// From site/js/main.js - Genre retrieval with fallback
const genre = THEME_GENRES[theme] || "editorial";

The architectural foundation for this mapping appears in the comment block at lines 94-96, which states that each theme belongs to one of four genres acting as a "rule-set overlay."

AI-Powered Genre Signals

Beyond static mapping, Hallmark analyzes genre signals—keywords captured by the AI skill matrix during content processing. These signals trigger specific genre overrides when thematic keywords match patterns defined in the genre reference files, enabling dynamic genre detection based on content context.

Loading and Applying Genre Rules

Once detected, Hallmark dynamically loads the corresponding genre rule set from the references/genres/ directory:

// Dynamic genre rule loading based on detection
const genre = THEME_GENRES[theme] || "editorial";
import(`../skills/hallmark/references/genres/${genre}.md`)
  .then(rules => {
    applyGenreOverlay(rules);
  });

The system inserts the selected genre overlay into the DOM, overriding base theme variables with genre-specific values defined in the markdown files.

Practical Implementation Examples

Retrieve the current genre for any theme identifier using the mapping constant:

const theme = "hum"; // Any valid theme identifier
const genre = THEME_GENRES[theme] || "editorial";
console.log(`Theme "${theme}" uses the "${genre}" genre overlay.`);

For Node.js environments, dynamically import genre-specific rule sets:

import(`../skills/hallmark/references/genres/${genre}.md`)
  .then(module => {
    console.log(`Loaded ${genre} rules`);
    // Apply genre-specific styling logic here
  });

Summary

• Hallmark supports four genres: Editorial, Modern-Minimal, Atmospheric, and Playful
• Detection occurs via the THEME_GENRES mapping in site/js/main.js (lines 726-742) with fallback to Editorial
• Genre files are stored in skills/hallmark/references/genres/ as markdown rule sets
• The system analyzes genre signals (keywords) via AI to determine appropriate overlays
• Implementation supports dynamic loading and fallback logic for robust genre application

Frequently Asked Questions

What is the default genre in Hallmark?

Editorial serves as the default genre when a theme lacks a specific mapping in THEME_GENRES or when genre signals are ambiguous. This fallback is hardcoded in site/js/main.js at lines 726-742 to ensure consistent styling across unidentified themes.

How does Hallmark detect which genre to apply?

Detection relies on the THEME_GENRES constant that maps theme identifiers to genre names, supplemented by AI analysis of genre signals—keywords extracted from content that match patterns in the genre definition files. If no match exists, the system defaults to Editorial.

Where are genre rules stored in the repository?

Each genre maintains its rule set in skills/hallmark/references/genres/ as a markdown file: editorial.md, modern-minimal.md, atmospheric.md, and playful.md. These files contain the specific design tokens and constraints that override base theme styles when loaded by the detection logic in site/js/main.js.

Can I extend Hallmark with custom genres?

While the core system defines four base genres in site/js/main.js, you can add new genre definition files to skills/hallmark/references/genres/ and update the THEME_GENRES mapping to recognize new theme-to-genre relationships. Ensure your custom genre files follow the same markdown structure as the existing references to maintain compatibility with the dynamic loading system.

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