# Hallmark Genre Detection Types Explained: Editorial, Modern-Minimal, Atmospheric, and Playful

> Discover Hallmark genre detection types editorial modern-minimal atmospheric and playful. Learn how these clusters shape visual styling theme selection and component behavior in Nutlopehallmark.

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

---

**Hallmark uses four distinct genre clusters—editorial, modern-minimal, atmospheric, and playful—to categorize pages and determine their visual styling, theme selection, and component behavior.**

The open-source Hallmark project by Nutlope implements a **genre detection system** that runs as the first step in its skill flow. This classification determines which themes, navigation patterns, footer archetypes, and motion rules apply to each generated page. Understanding these four genre detection types helps you predict how Hallmark will style your content and when to override the defaults.

## The Four Genre Detection Types in Hallmark

Hallmark's classifier assigns every page to exactly one genre based on keywords detected in the brief. Each genre carries a specific aesthetic philosophy, restricted theme clusters, and slop-test overrides that prevent visual inconsistencies.

### Editorial Genre

The **editorial** genre serves as Hallmark's default when no specialized signals appear in the brief. It prioritizes content legibility over decoration.

- **Triggering signals:** None (default fallback)
- **Visual characteristics:** Asymmetric layouts, serif-heavy typography, paper-like textures, quiet motion
- **Available themes:** `Specimen`, `Newsprint`, `Atelier`, `Garden`, `Almanac`, `Studio`, `Riso`, `Sport`, `Brutal`, `Manifesto`, `Editorial`, `Carnival`

The editorial genre specification lives in [`skills/hallmark/references/genres/editorial.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/editorial.md), which defines allowed elements, voice fixtures, and disallowed patterns for this classification.

### Modern-Minimal Genre

The **modern-minimal** genre targets professional software and infrastructure products where clarity signals credibility.

- **Triggering signals:** `SaaS`, `enterprise`, `API`, `platform`, `developer-tool`, `infra`, `B2B`, `dev-experience`
- **Visual characteristics:** Near-monochrome palettes, restrained accent colors, tight-radius controls, canonical two-column hero layouts
- **Available themes:** `Coral` (warm-grey + coral accent), `Cobalt` (cool-white + electric blue)

This genre strips away decorative elements in favor of functional density. The specification file at [`skills/hallmark/references/genres/modern-minimal.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/modern-minimal.md) enforces these constraints.

### Atmospheric Genre

The **atmospheric** genre creates immersive, mood-driven experiences for media-heavy or AI-native products.

- **Triggering signals:** `AI tool`, `generative`, `music`, `video`, `voice`, `late-night`, `dark mode`
- **Visual characteristics:** Dark backgrounds, radial-gradient blooms, immersive environments
- **Critical rule:** Gradient effects apply to backgrounds only—never to text
- **Available themes:** `Bloom`, `Midnight`, `Terminal`, `Aurora`, `Lumen`

The [`skills/hallmark/references/genres/atmospheric.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/atmospheric.md) file contains the full rule set including gradient restrictions and motion guidelines.

### Playful Genre

The **playful** genre maximizes engagement for consumer-facing experiences where personality drives conversion.

- **Triggering signals:** `fun`, `consumer`, `casual`, `friendly`, `onboarding`, `family`, `community`
- **Visual characteristics:** Vibrant palettes, mandatory motion, single-character moments
- **Canonical theme:** `Hum` (vibrant colors + persistent motion)

See [`skills/hallmark/references/genres/playful.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/playful.md) for component routing rules and animation requirements specific to this genre.

## How Genre Detection Works in Practice

### Step 1: Signal Detection

According to [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md), Hallmark scans the input brief for genre-triggering keywords during **Step 1 · Genre detection**. When multiple signals conflict—such as `AI tool` and `enterprise` appearing together—Hallmark prompts the user to select the closest match rather than guessing.

### Step 2: Genre Storage and Runtime Access

Once detected, the genre is stamped into the CSS comment header of every generated stylesheet:

```css
/* Hallmark · genre: modern-minimal · macrostructure: Marquee Hero · theme: Cobalt */

```

The runtime reads this value in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) to update the UI:

```javascript
// site/js/main.js – map theme → genre
const THEME_GENRES = {
  coral: "modern-minimal",
  cobalt: "modern-minimal",
  bloom: "atmospheric",
  midnight: "atmospheric",
  terminal: "atmospheric",
  aurora: "atmospheric",
  lumen: "atmospheric",
  hum: "playful"
};

const genre = THEME_GENRES[theme] || "editorial";
if (themeGenreEl) themeGenreEl.textContent = genre;

```

### Reading the Genre from a Generated Page

```html
<!-- In any Hallmark page -->
<link rel="stylesheet" href="style.css">
<script>
  const genreEl = document.querySelector("[data-theme-genre]");
  const theme = document.documentElement.dataset.theme;
  const THEME_GENRES = { 
    coral: "modern-minimal", 
    cobalt: "modern-minimal", 
    bloom: "atmospheric", 
    hum: "playful" 
  };
  const genre = THEME_GENRES[theme] || "editorial";
  if (genreEl) genreEl.textContent = genre;
</script>

```

### Manually Stamping a Genre

Override automatic detection by embedding the genre directly in your CSS:

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

```

## Genre Detection Files in the Hallmark Repository

| File | Purpose |
|------|---------|
| [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) | Full workflow documentation including genre detection step |
| [`skills/hallmark/references/genres/editorial.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/editorial.md) | Editorial genre rules and constraints |
| [`skills/hallmark/references/genres/modern-minimal.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/modern-minimal.md) | Modern-minimal specifications |
| [`skills/hallmark/references/genres/atmospheric.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/atmospheric.md) | Atmospheric genre requirements |
| [`skills/hallmark/references/genres/playful.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/playful.md) | Playful genre guidelines |
| [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) | Runtime theme-to-genre mapping |
| [`site/examples/hyperlane/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/examples/hyperlane/tokens.css) | Example of genre-stamped output |

## Summary

- **Four genre detection types** classify every Hallmark page: **editorial** (default), **modern-minimal**, **atmospheric**, and **playful**
- Genre selection triggers in **Step 1** of the Hallmark skill flow and determines downstream theming, navigation, and slop-test rules
- The genre is stored in CSS comment headers and accessible via the `THEME_GENRES` mapping in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js)
- Each genre maintains its own specification file under `skills/hallmark/references/genres/`
- When briefs contain conflicting signals, Hallmark prompts for user clarification rather than defaulting

## Frequently Asked Questions

### How does Hallmark decide which genre to apply?

Hallmark scans the input brief for predefined keyword signals. When it finds matches for `SaaS`, `API`, `B2B`, or similar terms, it routes to **modern-minimal**. Keywords like `AI tool`, `music`, or `dark mode` trigger **atmospheric**. Consumer-focused terms select **playful**. No matches defaults to **editorial**. Conflicting signals prompt explicit user choice.

### Can I override the automatically detected genre?

Yes. Manually stamp the desired genre in your CSS comment header: `/* Hallmark · genre: atmospheric · ... */`. The runtime in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) reads this value, and downstream generators respect the override for theme selection and component routing.

### What happens if my brief matches multiple genre signals?

Hallmark surfaces a disambiguation prompt asking you to pick the closest match—for example, choosing between "modern-minimal · atmospheric" when both enterprise and AI keywords appear. This prevents conflicting visual rules from being applied simultaneously.

### Where is the genre detection logic documented?

The primary documentation lives in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) under the "Step 1 · Genre detection" section. Each genre's specific constraints, allowed themes, and slop-test overrides are detailed in their respective files under `skills/hallmark/references/genres/`.