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

> Discover the four Hallmark design genres Editorial Modern-Minimal Atmospheric and Playful. Learn how these style overlays define your theme's visual identity.

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

---

**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)](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)](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)](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)](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)](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/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/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/atmospheric.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/atmospheric.md)
- [[`playful.md`](https://github.com/Nutlope/hallmark/blob/main/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:

```javascript
// 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.`);

```

```javascript
// 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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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/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/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/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/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)](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`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js), the `THEME_GENRES` mapping assigns exactly one genre string to each theme key, defaulting to `"editorial"` if undefined.