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

> Discover the four distinct Hallmark genre categories Editorial Modern-Minimal Atmospheric and Playful Understand their definitions and mapping in the Hallmark repository

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: deep-dive
- Published: 2026-07-23

---

**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`](https://github.com/Nutlope/hallmark/blob/main/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)](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)](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)](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)](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`](https://github.com/Nutlope/hallmark/blob/main/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:

```javascript
// 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`](https://github.com/Nutlope/hallmark/blob/main/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"`:

```javascript
// 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:

```javascript
// 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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/editorial.md), [`modern-minimal.md`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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.