# What Are the Four Hallmark Genre Types and When Do They Apply?

> Discover the four Hallmark genre types: Editorial, Modern-Minimal, Atmospheric, and Playful. Learn how Hallmark applies these classifications based on your project brief.

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

---

**Hallmark uses four genre types—Editorial, Modern-Minimal, Atmospheric, and Playful—to classify every design, selecting one based on keyword signals detected in the brief before any theme is applied.**

Hallmark is an open-source design system that categorizes every project into one of four distinct **Hallmark genre types**. According to the `Nutlope/hallmark` repository, this classification occurs before any theme is selected and determines which theme pool, visual-gate overrides, and LLM voice the system will apply.

## The Four Hallmark Genre Types

Each genre serves a specific design purpose and activates based on signal detection logic defined in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) (lines 30-36).

### Editorial (The Default Genre)

**Editorial** serves as the fallback when no other genre signals are detected. It represents a balanced, content-focused aesthetic suitable for general-purpose applications. When a brief lacks enterprise, atmospheric, or playful keywords, Hallmark silently selects this genre as the default.

### Modern-Minimal

**Modern-Minimal** activates when the brief contains enterprise terminology such as `SaaS`, `enterprise`, `API`, `platform`, `developer tool`, `infra`, `B2B`, or `dev experience`. This genre applies clean, technical aesthetics optimized for infrastructure and business-to-business products.

### Atmospheric

**Atmospheric** triggers on creative or mood-based signals including `AI tool`, `generative`, `music`, `video`, `voice`, `late-night`, `dark mode`, or `atmospheric`. This genre supports immersive, dark-themed visual experiences common in creative tools and media applications.

### Playful

**Playful** applies to consumer-friendly projects signaled by terms like `fun`, `consumer`, `casual`, `friendly`, `onboarding`, `family`, or `community`. This genre employs approachable, light visual patterns suitable for social applications and casual user experiences.

## How Hallmark Detects and Applies Genres

Genre selection relies on signal-based detection logic implemented in the Hallmark skill configuration. The system scans the input brief for specific keyword clusters associated with Modern-Minimal, Atmospheric, and Playful genres.

### Signal Conflict Resolution

If the brief contains conflicting signals from two non-default genres (for example, both enterprise and atmospheric keywords), Hallmark prompts the user to disambiguate. The system presents a choice such as "This brief fits both modern-minimal and atmospheric — which feels closer?" rather than making an arbitrary selection.

### Runtime Genre Resolution

The theme-to-genre mapping is implemented in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) around line 97. The `THEME_GENRES` constant maps specific themes to their associated genres:

```javascript
// site/js/main.js – around line 97
const THEME_GENRES = {
  // theme: genre
  bloom: "atmospheric",
  coral: "modern-minimal",
  hum:   "playful",
  // …other themes default to "editorial"
};

// Later, after a theme is selected:
const genre = THEME_GENRES[theme] || "editorial";
if (themeGenreEl) themeGenreEl.textContent = genre;

```

## Where Genre Data Lives in the Codebase

The genre logic resides in several key files within the `Nutlope/hallmark` repository.

### Configuration Files

The detection rules and definitions live in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) (lines 30-36). Individual genre specifications are stored in dedicated reference files:

- [`skills/hallmark/references/genres/editorial.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/editorial.md) – Default patterns and constraints
- [`skills/hallmark/references/genres/modern-minimal.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/modern-minimal.md) – Enterprise-specific overrides
- [`skills/hallmark/references/genres/atmospheric.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/atmospheric.md) – Dark mode and creative overrides
- [`skills/hallmark/references/genres/playful.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/playful.md) – Consumer-friendly overrides

### Generated Output Stamping

Every generated stylesheet includes a genre stamp as a CSS comment. This allows downstream processes to identify which genre rules were applied. For example, from [`site/examples/hyperlane/styles.css`](https://github.com/Nutlope/hallmark/blob/main/site/examples/hyperlane/styles.css):

```css
/* Hallmark · genre: atmospheric · macrostructure: Marquee Hero · theme: Bloom */

```

Developers can parse this comment to enforce diversification across builds or audit which Hallmark genre types were applied to specific outputs.

## Summary

- Hallmark uses four genre types: **Editorial** (default), **Modern-Minimal**, **Atmospheric**, and **Playful**.
- Genre selection occurs **before** theme selection and determines available themes, visual overrides, and LLM voice.
- Detection relies on keyword signals in the brief, with specific triggers for enterprise (Modern-Minimal), creative (Atmospheric), and consumer (Playful) contexts.
- Conflicting signals trigger user disambiguation, while absence of signals defaults to Editorial.
- The genre is recorded in generated CSS comments and mapped at runtime in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js).

## Frequently Asked Questions

### What happens if a Hallmark brief contains multiple genre signals?

When a brief contains keywords matching two non-default genres, Hallmark asks the user to clarify which genre fits better. The system presents a specific choice rather than defaulting arbitrarily, ensuring the selected genre aligns with the project's intent.

### Can I manually override the genre selection in Hallmark?

The source code indicates that genre selection is signal-based and occurs early in the pipeline. While the `THEME_GENRES` mapping in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) allows runtime resolution of themes to genres, the initial classification relies on the brief content analysis defined in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md).

### Where does Hallmark store the selected genre information?

Hallmark stamps the chosen genre into every generated CSS file as a structured comment at the top of the stylesheet. This appears in files like [`site/examples/hyperlane/styles.css`](https://github.com/Nutlope/hallmark/blob/main/site/examples/hyperlane/styles.css) and follows the format `/* Hallmark · genre: [type] · macrostructure: [structure] · theme: [name] */`.

### Why does Hallmark select the genre before the theme?

The genre determines which theme pool is available and which visual-gate overrides and LLM voice settings apply. Selecting the genre first ensures that subsequent theme choices align with the appropriate aesthetic constraints and voice characteristics for the specific project type.