# What Are the Four Design Genres in Hallmark and How to Choose Them? > Discover Hallmark's four design genres: Playful, Modern Minimal, Editorial, and Atmospheric. Learn how to select the perfect genre to transform your site's visual style effortlessly. - Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark) - Tags: how-to-guide - Published: 2026-08-06 --- **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/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/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/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/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 ```yaml --- title: "Product Launch 2024" genre: atmospheric # Options: playful, modern-minimal, editorial, atmospheric --- ``` ### Global default in site configuration In [`site/_config.yml`](https://github.com/Nutlope/hallmark/blob/main/site/_config.yml) (or equivalent): ```yaml 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: ```javascript // 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 ```html

{{ page.title }}

``` ## Genre Reference Files and Source Locations | File | Purpose | |------|---------| | [`skills/hallmark/references/genres/playful.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/playful.md) | Playful genre guidelines, color tokens, component pairings | | [`skills/hallmark/references/genres/modern-minimal.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/modern-minimal.md) | Modern Minimal spacing, typography, and motion specs | | [`skills/hallmark/references/genres/editorial.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/genres/editorial.md) | Editorial grid systems and reading‑flow conventions | | [`skills/hallmark/references/genres/atmospheric.md`](https://github.com/Nutlope/hallmark/blob/main/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.