What Are the Four Design Genres in Hallmark and How to Choose Them?

Hallmark offers four design genres—Playful, Modern Minimal, Editorial, and Atmospheric—that you declare via a simple genre: front‑matter key to instantly shift a site's entire visual language.

The Hallmark static‑site framework organizes its aesthetic system around four distinct design genres. Each genre bundles color palettes, typography scales, spacing systems, and motion patterns into a cohesive visual language that you activate with a single configuration change. Understanding what each genre provides—and how to evaluate them against your project—lets you ship consistent, polished sites without custom CSS wrangling.

The Four Hallmark Design Genres Explained

Hallmark hardcodes four genre options in its theming layer, each defined in dedicated reference files under skills/hallmark/references/genres/. Here is how they differ.

Playful

Core characteristics: Bright, saturated colors; rounded corners; bouncy micro‑interactions; whimsical illustration styles.

Best for: Youth brands, creative agencies, community platforms, or any project where approachability and energy take priority. The Playful genre lowers perceived friction and invites exploration.

Reference file: [playful.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/playful.md)

Modern Minimal

Core characteristics: Sparse layouts, generous whitespace, muted or monochrome palettes, high‑contrast typography, restrained motion.

Best for: SaaS dashboards, technical documentation, data‑heavy applications, or professional services where clarity and load performance matter more than ornament.

Reference file: [modern-minimal.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/modern-minimal.md)

Editorial

Core characteristics: Strong typographic hierarchy, grid‑based composition, rich imagery integration, magazine‑style pacing and storytelling.

Best for: Long‑form publications, brand editorial hubs, blogs, or any content‑rich experience that demands authoritative voice and reading comfort.

Reference file: [editorial.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/editorial.md)

Atmospheric

Core characteristics: Dark‑mode‑friendly palettes, dramatic lighting, full‑bleed hero visuals, immersive background layers.

Best for: Creative portfolios, product showcases, cinematic brand experiences, or any site where mood and emotional impact drive engagement.

Reference file: [atmospheric.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/atmospheric.md)

How to Choose a Design Genre in Hallmark

Selecting the right design genre requires aligning four project variables. Run through this checklist before committing to a genre in your config.

1. Define the primary goal.
   Informative sites lean Editorial; inspirational campaigns suit Playful; tech credibility calls for Modern Minimal; emotional immersion demands Atmospheric.

2. Map to your audience.
   Younger, casual users respond better to Playful; enterprise or technical buyers expect Modern Minimal.

3. Audit your content type.
   Text‑heavy narratives pair with Editorial; image‑driven stories fit Atmospheric or Playful.

4. Match brand personality.
   A bright, friendly brand voice maps directly to Playful's visual language; a premium, restrained brand aligns with Modern Minimal.

5. Prototype and validate.
   Because Hallmark lets you switch genres with a single front‑matter flag, render two or three options and review the live site before finalizing.

Setting the Design Genre in Hallmark

Hallmark consumes the genre key from YAML front‑matter or global defaults. Below are the canonical patterns used in the codebase.

Page‑level front‑matter override

---
title: "Product Launch 2024"
genre: atmospheric   # Options: playful, modern-minimal, editorial, atmospheric

---

Global default in site configuration

In site/_config.yml (or equivalent):

defaults:
  - scope:
      path: ""          # applies to all pages

    values:
      genre: editorial   # sets a site‑wide default genre

Runtime genre switching via JavaScript

For user‑controlled or A/B scenarios:

// Toggle genre based on a preference selector
document.getElementById('genre-select').addEventListener('change', (e) => {
  const genre = e.target.value; // 'playful' | 'modern-minimal' | 'editorial' | 'atmospheric'
  document.documentElement.dataset.genre = genre;
});

Consuming the genre in a component template

<div class="hero" data-genre="{{ page.genre }}">
  <h1>{{ page.title }}</h1>
  <!-- Stylesheets or CSS custom properties gate on data-genre -->
</div>

Genre Reference Files and Source Locations

File	Purpose
skills/hallmark/references/genres/playful.md	Playful genre guidelines, color tokens, component pairings
skills/hallmark/references/genres/modern-minimal.md	Modern Minimal spacing, typography, and motion specs
skills/hallmark/references/genres/editorial.md	Editorial grid systems and reading‑flow conventions
skills/hallmark/references/genres/atmospheric.md	Atmospheric dark‑mode palettes and hero treatments

These markdown files are the authoritative source for each genre's design constraints. Consult them when you need precise values for custom components that must remain genre‑consistent.

Summary

• Hallmark design genres bundle visual decisions into four presets: Playful, Modern Minimal, Editorial, and Atmospheric.
• Choose by matching project goals, audience expectations, content format, and brand voice.
• Activate a genre via the genre: key in front‑matter or global config; switch at will for rapid prototyping.
• Reference the genre‑specific markdown files under skills/hallmark/references/genres/ for implementation details.

Frequently Asked Questions

What happens if I don't specify a genre in Hallmark?

Hallmark falls back to a default genre defined in your site configuration, or to a baseline minimal style if no default is set. Always declare a genre explicitly to ensure consistent rendering and access to genre‑specific tokens.

Can I use different genres on different pages of the same site?

Yes. Hallmark supports per‑page genre overrides through front‑matter. This lets you run an Editorial blog alongside an Atmospheric landing page without CSS conflicts, as each page's genre value scopes its own style tokens.

How do I customize a genre without losing future updates?

Override CSS custom properties or Sass variables that the genre exposes, rather than forking the genre file itself. Hallmark's genre system is designed with token layers; keep modifications in your site's asset pipeline so you can pull upstream genre changes without merge conflicts.

Is there a performance cost to switching genres dynamically?

Negligible. The genre switch updates data attributes and CSS custom properties; no additional JavaScript bundles load. The initial page render includes all genre CSS, so runtime switching is repaint‑only and typically completes in single‑digit milliseconds.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}