# The Four Design Genres Hallmark Can Detect: Editorial, Modern-Minimal, Atmospheric & Playful

> Discover the four design genres Hallmark detects: editorial, modern-minimal, atmospheric, and playful. Learn how keyword signals inform genre selection.

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

---

**Hallmark detects four design genres—editorial, modern-minimal, atmospheric, and playful—using keyword-based signal detection on the project brief, with editorial as the silent default when no signals match.**

Hallmark's design engine is architected around a genre-first decision tree. Before selecting themes, color palettes, or component structures, the system determines which of its four design genres best fits the page. This primary classification, documented in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) at line 230, cascades through every downstream design choice including allowable themes, visual-slop gates, and copy tone.

## The Four Design Genres Defined

### editorial

The **default, canonical anti-slop voice**. When no genre signals fire in a project brief, Hallmark silently falls back to editorial. This genre prioritizes clarity, restraint, and typographic hierarchy over decorative elements. It serves as the baseline against which all other genres are measured.

### modern-minimal

The **Stripe / Linear / ElevenLabs school** of design. Characterized by precise spacing, subtle gradients, and developer-tool aesthetics. This genre signals technical credibility and infrastructure-grade polish.

### atmospheric

The **Suno / Runway / dark-AI-tool school**. Embraces moody backgrounds, dramatic lighting, and immersive visual experiences. Popular among generative AI products and creative tools that want to feel cinematic.

### playful

The **post-Linear soft school**. Friendly, approachable, and consumer-oriented. Uses rounded forms, warmer color temperatures, and conversational copy to reduce friction in onboarding and community-focused products.

## How Hallmark Detects Design Genres

Hallmark uses **signal-based detection** scanning the project brief for keyword cues. The detection logic follows a cascading priority:

| Keyword Signals | Detected Genre |
|-----------------|----------------|
| `AI tool`, `generative`, `music`, `video`, `voice`, `late-night`, `dark mode`, `atmospheric` | **atmospheric** |
| `SaaS`, `enterprise`, `API`, `platform`, `developer tool`, `infra`, `B2B`, `dev experience` | **modern-minimal** |
| `fun`, `consumer`, `casual`, `friendly`, `onboarding`, `family`, `community` | **playful** |
| (none match) | **editorial** (silent default) |

This detection occurs in the core workflow at [`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md) lines 232-234, where each genre's trigger keywords are explicitly enumerated.

## Genre Stamping for Consistency

Every stylesheet Hallmark generates carries a **comment stamp** recording the selected genre:

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

```

This stamp serves two critical functions. First, it creates auditability—developers can inspect any generated file to understand the design decisions made. Second, subsequent Hallmark runs parse this stamp to maintain **genre consistency across multi-page projects**.

Reading the stamp at runtime is straightforward:

```javascript
const stamp = document.querySelector('style')
  .textContent.match(/genre:\s*(\w+)/)[1];
console.log('Current page genre →', stamp);

```

## Architectural Impact of Genre Selection

The chosen genre doesn't merely affect aesthetics—it **reshapes the entire design rule engine**:

- **Theme clusters** are genre-locked. Atmospheric maps to `Bloom`, `Midnight`, and similar themes; Modern-Minimal maps to `Coral`, `Cobalt`, and analogous palettes.

- **Slop-test gates** vary by genre. Radial-gradient backgrounds pass in Atmospheric but fail in Editorial, where such ornamentation violates the anti-slop mandate.

- **Component routing tables** for navigation and footer archetypes are genre-aware, preventing a "one-size-fits-all" UI that would feel mismatched.

The genre-specific rules live in dedicated markdown files under `skills/hallmark/references/genres/`. Once detected, Hallmark eagerly loads the corresponding file—for example, [`references/genres/atmospheric.md`](https://github.com/Nutlope/hallmark/blob/main/references/genres/atmospheric.md)—and overlays these rules atop the generic design system:

```javascript
const genre = detectGenre(brief);
const genreFile = `skills/hallmark/references/genres/${genre}.md`;
const overrides = loadMarkdown(genreFile);   // Hallmark's internal loader
applyOverrides(overrides);

```

## Implementation Example: Genre Detection Logic

The following pseudo-code mirrors Hallmark's internal detection helpers:

```javascript
function detectGenre(brief) {
  const lower = brief.toLowerCase();
  
  if (/\b(ai|generative|music|video|voice|dark|atmospheric)\b/.test(lower)) {
    return 'atmospheric';
  }
  if (/\b(sa(s|as)|enterprise|api|platform|b2b|dev)\b/.test(lower)) {
    return 'modern-minimal';
  }
  if (/\b(fun|consumer|casual|friendly|onboarding|family|community)\b/.test(lower)) {
    return 'playful';
  }
  
  return 'editorial'; // silent default per SKILL.md#L230
}

```

## Key Source Files

| File | Purpose |
|------|---------|
| [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) | Core workflow and genre detection specification |
| [`skills/hallmark/references/genres/editorial.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/editorial.md) | Default genre rules |
| [`skills/hallmark/references/genres/modern-minimal.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/modern-minimal.md) | Strip/Linear-style design system |
| [`skills/hallmark/references/genres/atmospheric.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/atmospheric.md) | Dark, immersive AI-tool aesthetics |
| [`skills/hallmark/references/genres/playful.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/playful.md) | Consumer-friendly, approachable design |
| [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) | Client-side theme-to-genre mapping |

## Summary

- Hallmark operates four distinct design genres: **editorial**, **modern-minimal**, **atmospheric**, and **playful**
- Detection relies on **keyword signal matching** in project briefs, with editorial as the silent fallback
- Selected genres **stamp generated stylesheets** for traceability and cross-page consistency
- Genre choice **gates themes, slop tests, and component routing** through dedicated override files
- All four genres are fully specified in `skills/hallmark/references/genres/{genre}.md`

## Frequently Asked Questions

### What happens if a brief matches multiple genre keywords?

Hallmark's detection cascades in a fixed priority: atmospheric signals are checked first, then modern-minimal, then playful, with editorial as the final fallback. The first match wins. For ambiguous briefs mentioning both "AI video platform" and "developer API," the atmospheric signal triggers first, yielding that genre.

### Can I override the detected genre manually?

The source code indicates genre detection is automatic based on brief content. However, the CSS comment stamp can be manually edited, and subsequent Hallmark runs will respect the stamped genre when generating additional pages for the same project.

### How do the four design genres affect the actual CSS output?

Each genre loads its own override file from `skills/hallmark/references/genres/`, which modifies theme availability, color calculus, spacing scales, and slop-test thresholds. The atmospheric genre, for instance, permits dramatic gradients and extended viewport units that editorial would reject as visual slop.

### Where is the genre detection logic implemented?

The canonical specification resides in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) lines 230-234, with the four genres enumerated and their trigger keywords defined. The actual detection implementation is internal to Hallmark's core engine, though the logic can be reconstructed from the documented signal patterns.