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

The four genres in Hallmark—Editorial, Modern-Minimal, Atmospheric, and Playful—act as rule-set overlays that control visual styling and theming by mapping content to specific design system configurations defined in markdown reference files.

The Hallmark design system, maintained in the Nutlope/hallmark repository, uses these four genres to categorize and apply consistent visual rules across different themes. Each genre functions as an architectural layer that determines how components render based on content classification signals.

What Are the Four Genres in Hallmark?

Hallmark supports four distinct genres that serve as high-level categorization buckets for themes:

• Editorial – The default, minimal-ist overlay used when no specific genre is assigned. It provides a clean, content-focused aesthetic suitable for general-purpose documentation.
• Modern-Minimal – A clean, SaaS-oriented style optimized for business applications and software interfaces.
• Atmospheric – A dark, cinematic, "late-night" feel designed for immersive, mood-driven experiences.
• Playful – A bright, friendly, consumer-focused aesthetic targeting casual or marketing-oriented content.

These genres are physically defined as markdown files in the repository's references directory, allowing the system to load genre-specific rules dynamically.

How Genres Control Theming in Hallmark

Genres function as the primary control mechanism for selecting which design rules apply to a given piece of content. The system evaluates genre signals and loads the appropriate rule-set overlay.

The THEME_GENRES Mapping

In site/js/main.js, the THEME_GENRES constant maps specific themes to their corresponding genres. This mapping is implemented around lines 726-742, where the system checks theme identifiers and returns the appropriate genre string. If a theme lacks an explicit mapping, the system defaults to "editorial" according to the source code in site/js/main.js#L726-L742.

The inline documentation at site/js/main.js#L94-L96 clarifies this architecture: "Each theme belongs to one of four genres — a rule-set overlay that..."

Genre Rule-Set Reference Files

Each genre has a dedicated markdown file in skills/hallmark/references/genres/ that contains the specific styling rules and constraints:

• [editorial.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/editorial.md) – Defines the default Editorial genre rules
• [modern-minimal.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/modern-minimal.md) – Contains the Modern-Minimal specification
• [atmospheric.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/atmospheric.md) – Houses the Atmospheric styling constraints
• [playful.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/playful.md) – Specifies the Playful design parameters

Signal-Based Selection

When processing a design request, Hallmark evaluates "genre signals"—keywords captured by the AI skill matrix—to determine which genre overlay to apply. If the content signals match a specific genre, the system loads that genre's markdown rule-set. If no signals match or the theme is unrecognized, Hallmark falls back to the Editorial genre automatically.

Code Implementation Examples

The following examples demonstrate how to interact with Hallmark's genre system programmatically:

// Retrieve the current genre for a theme using THEME_GENRES
const theme = "hum";               // any theme identifier
const genre = THEME_GENRES[theme] || "editorial";
console.log(`Theme "${theme}" uses the "${genre}" genre overlay.`);

// Dynamically import the genre rule-set based on selection
import(`../skills/hallmark/references/genres/${genre}.md`)
  .then(module => {
    // Apply genre-specific rules here
    console.log(`Loaded ${genre} rules`);
  });

Summary

• Hallmark categorizes all themes into four genres: Editorial, Modern-Minimal, Atmospheric, and Playful.
• The THEME_GENRES mapping in site/js/main.js controls which genre applies to each theme, defaulting to Editorial when unspecified.
• Genre rules are defined in separate markdown files located in skills/hallmark/references/genres/.
• The system uses AI-captured genre signals to automatically select the appropriate visual overlay for content.

Frequently Asked Questions

What is the default genre in Hallmark?

Editorial is the default genre. When a theme lacks an explicit entry in the THEME_GENRES mapping or when no genre signals are detected, the system automatically falls back to the Editorial overlay defined in skills/hallmark/references/genres/editorial.md.

Where are genre rules defined in the Hallmark repository?

Genre rules are defined in four markdown files within the skills/hallmark/references/genres/ directory: editorial.md, modern-minimal.md, atmospheric.md, and playful.md. Each file contains the specific styling constraints and parameters for its respective genre.

How does Hallmark determine which genre to apply?

Hallmark determines genre selection through the THEME_GENRES mapping in site/js/main.js, which associates theme identifiers with specific genres. Additionally, the system analyzes genre signals—keywords captured by the AI skill matrix—to dynamically select the appropriate rule-set overlay for incoming content.

What happens if a theme is not mapped to any genre?

If a theme identifier is not present in the THEME_GENRES constant, Hallmark defaults to the Editorial genre. This fallback mechanism ensures that every piece of content receives a valid styling overlay even when explicit mappings are absent.

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