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

Hallmark organizes its design system around four distinct genres—Editorial, Modern-Minimal, Atmospheric, and Playful—that act as rule-set overlays determining the visual style for every theme.

Hallmark is an open-source design system that categorizes content into four genres to control visual styling. These genres serve as architectural overlays that determine which rule-set applies to a given theme. Understanding how these four genres work is essential for customizing the framework according to the Nutlope/hallmark source code.

The Four Genres Defined

The Hallmark design system recognizes four distinct genres that act as rule-set overlays. Each genre is defined in a dedicated markdown file within the repository:

Editorial

Editorial is the default minimal-ist overlay. This genre is defined in [skills/hallmark/references/genres/editorial.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/editorial.md) and serves as the fallback when no specific genre is matched.

Modern-Minimal

Modern-Minimal provides a clean, SaaS-oriented style. Its rules are stored in [skills/hallmark/references/genres/modern-minimal.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/modern-minimal.md).

Atmospheric

Atmospheric creates a dark, cinematic "late-night" feel. The rule-set lives in [skills/hallmark/references/genres/atmospheric.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/atmospheric.md).

Playful

Playful delivers a bright, friendly, consumer-focused aesthetic. Its configuration is found in [skills/hallmark/references/genres/playful.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/playful.md).

Genre Mapping Logic in site/js/main.js

The mapping between themes and genres is implemented in [site/js/main.js](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js). According to the source code, a comment at lines 94-96 explains that "Each theme belongs to one of four genres—a rule-set overlay that...".

The actual mapping logic is handled by the THEME_GENRES constant defined at lines 726-742. This object maps theme identifiers to their corresponding genres, defaulting to "editorial" when no explicit entry exists.

Working with Genre Files

When Hallmark processes a design request, it evaluates the content's genre signals and loads the matching genre file from the skills/hallmark/references/genres/ directory. If no signal matches, the system falls back to Editorial.

The four genre files are:

• [editorial.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/editorial.md)
• [modern-minimal.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/modern-minimal.md)
• [atmospheric.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/atmospheric.md)
• [playful.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/playful.md)

Practical Code Examples

Here are runnable examples for working with the four genres in Hallmark:

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

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

Summary

• Hallmark supports four genres: Editorial, Modern-Minimal, Atmospheric, and Playful.
• Editorial is the default genre used when no mapping exists in THEME_GENRES.
• Genre rules are stored in skills/hallmark/references/genres/ as markdown files.
• The mapping logic resides in site/js/main.js (lines 726-742).
• You can dynamically load genre configurations using JavaScript imports.

Frequently Asked Questions

What is the default genre in Hallmark?

Editorial is the default genre. When a theme identifier is not found in the THEME_GENRES mapping defined in site/js/main.js (lines 726-742), the system automatically falls back to the Editorial rule-set located at skills/hallmark/references/genres/editorial.md.

Where are the four genres defined in the Hallmark repository?

Each genre has a dedicated markdown file in the skills/hallmark/references/genres/ directory. The four files are [editorial.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/editorial.md), [modern-minimal.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/modern-minimal.md), [atmospheric.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/atmospheric.md), and [playful.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/playful.md).

How does Hallmark determine which genre to apply?

Hallmark uses the THEME_GENRES constant in [site/js/main.js](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) to map theme identifiers to specific genres. The comment at lines 94-96 explains that each theme belongs to one of four genres—a rule-set overlay that determines the visual styling.

Can a theme belong to multiple genres?

No, the architecture enforces a one-to-one relationship between themes and genres. As implemented in site/js/main.js, the THEME_GENRES mapping assigns exactly one genre string to each theme key, defaulting to "editorial" if undefined.

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