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

> Discover Hallmark's four design genres Editorial Modern-Minimal Atmospheric and Playful. Learn how the site detects and applies these themes using its JavaScript mapping and rule-set files.

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

---

**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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/atmospheric.md).
- **Playful**: A bright, friendly style for consumer applications. Rule definitions reside in [`skills/hallmark/references/genres/playful.md`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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.

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

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

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

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

### Can I extend Hallmark with custom genres?

While the core system defines four base genres in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/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.