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

The four genre categories in Hallmark are Editorial, Modern-Minimal, Atmospheric, and Playful, each defined as a rule-set overlay in the skills/hallmark/references/genres/ directory and mapped via the THEME_GENRES constant in site/js/main.js.

The Nutlope/hallmark repository implements a genre-based architecture that categorizes every theme into one of four distinct visual styles. Understanding these four genre categories in Hallmark is essential for customizing the design system's behavior and ensuring the correct rule-set overlay applies to your content.

What Are the Four Genre Categories in Hallmark?

Hallmark organizes its design taxonomy around four top-level genres that act as architectural overlays for themes. Each genre encapsulates specific visual rules, color palettes, and interaction patterns:

• Editorial – The minimal, content-first default style. This genre serves as the baseline when no specific visual signal is detected. Defined in [skills/hallmark/references/genres/editorial.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/editorial.md).

• Modern-Minimal – A clean, SaaS-oriented aesthetic emphasizing whitespace and streamlined components. Defined in [skills/hallmark/references/genres/modern-minimal.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/modern-minimal.md).

• Atmospheric – A dark, cinematic style intended for immersive, "late-night" experiences. Defined in [skills/hallmark/references/genres/atmospheric.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/atmospheric.md).

• Playful – A bright, friendly aesthetic targeting consumer applications with vibrant colors and approachable typography. Defined in [skills/hallmark/references/genres/playful.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/playful.md).

According to the Nutlope/hallmark source code, each theme belongs to one of these four genres, which functions as a rule-set overlay that scopes downstream design decisions.

How Genre Selection Works in Hallmark

The THEME_GENRES Mapping

The core mapping logic resides in site/js/main.js, where the THEME_GENRES object associates theme identifiers with their corresponding genre categories. As implemented in lines 726-742, this constant provides the lookup table that the system uses to resolve which genre overlay to apply:

// Conceptual representation based on site/js/main.js#L726-L742
const THEME_GENRES = {
  'hum': 'modern-minimal',
  'dark-cinema': 'atmospheric',
  'consumer-app': 'playful',
  // ... additional theme mappings
};

The system evaluates the theme identifier against this mapping to determine which of the four genre categories in Hallmark should be activated for the current session.

Default Fallback Behavior

When a theme lacks an explicit entry in the THEME_GENRES mapping, Hallmark defaults to the Editorial genre. This fallback mechanism ensures that the system never operates without a defined rule-set, maintaining design consistency even for undefined or new themes. The default assignment occurs in the genre resolution logic within site/js/main.js.

Working with Hallmark Genres in Code

To retrieve the appropriate genre for a specific theme, access the THEME_GENRES mapping with a fallback to "editorial":

// Retrieve genre with fallback
const theme = "hum";
const genre = THEME_GENRES[theme] || "editorial";
console.log(`Theme "${theme}" uses the "${genre}" genre overlay.`);
// Output: Theme "hum" uses the "modern-minimal" genre overlay.

For dynamic loading of genre-specific rule-sets, use a dynamic import pattern that references the genre markdown files:

// Dynamically import genre rule-set
async function loadGenreRules(genre) {
  try {
    const rules = await import(`../skills/hallmark/references/genres/${genre}.md`);
    console.log(`Loaded ${genre} rules`);
    return rules;
  } catch (error) {
    console.error(`Failed to load genre: ${genre}`, error);
    return null;
  }
}

// Usage
loadGenreRules('atmospheric');

Summary

• Hallmark defines four genre categories: Editorial, Modern-Minimal, Atmospheric, and Playful.
• Each genre exists as a markdown rule-set file in skills/hallmark/references/genres/.
• The THEME_GENRES constant in site/js/main.js maps themes to their respective genres.
• The system defaults to Editorial when no mapping exists for a given theme.
• Genres function as architectural overlays that scope downstream design decisions.

Frequently Asked Questions

What is the default genre in Hallmark?

The default genre is Editorial. When a theme identifier is not present in the THEME_GENRES mapping defined in site/js/main.js, the system automatically falls back to the Editorial genre, ensuring consistent styling across all themes.

Where are Hallmark genre rules stored?

Genre rules are stored as individual markdown files in the skills/hallmark/references/genres/ directory. Each of the four genres—Editorial, Modern-Minimal, Atmospheric, and Playful—has its own dedicated file (e.g., editorial.md, modern-minimal.md) containing the specific rule-set for that category.

How does Hallmark determine which genre to use?

Hallmark determines the genre by looking up the current theme identifier in the THEME_GENRES object located in site/js/main.js. This mapping associates specific themes with one of the four genre categories. If the theme is not found in the mapping, the system defaults to the Editorial genre.

Can I create custom genres in Hallmark?

While the repository defines four core genres, the architecture supports extension by adding new markdown files to skills/hallmark/references/genres/ and updating the THEME_GENRES mapping in site/js/main.js to associate themes with your custom genre identifiers. The dynamic import pattern used throughout the codebase allows for runtime loading of additional genre definitions.

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