What Are the Characteristics of the Atmospheric Genre in Hallmark?

The Atmospheric genre in Hallmark is a dark-mode design fingerprint for AI-creative product pages, characterized by warm radial blooms on a deep canvas, heavy sans-serif typography, and strict UI constraints enforced through the repository's global rule-set.

The Atmospheric genre is a specialized design language within the Nutlope/hallmark repository for generating product pages that require a night-time, tool-like aesthetic. According to the source specification in skills/hallmark/references/genres/atmospheric.md, this genre creates what the maintainers describe as "a place you could sit in after dark"—a warm, focused environment distinct from light-paper templates. Understanding these characteristics is essential for correctly implementing Hallmark's AI-creative layouts.

Core Design Philosophy and Trigger Conditions

The Atmospheric genre activates when a brief mentions AI-generated media (music, video, image, or voice), "dark mode", "late-night", "dreamlike", "nocturnal", or any mood requiring darkness. As defined in the genre reference file, the visual language intentionally evokes a focused workspace rather than a marketing page, using the canvas itself as the primary visual element with typography overlaid on top.

The Five Rotating Themes

The Atmospheric genre rotates through five predefined themes that determine the specific color temperature and bloom gradients:

• Bloom – Soft organic gradients
• Midnight – Deep blues and purples
• Terminal – High-contrast developer aesthetics
• Aurora – Shifting spectral hues
• Lumen – The premium AI-tool theme with refined accent placement

Typography and Color Constraints

Typography in the Atmospheric genre follows rigid specifications defined in skills/hallmark/references/typography.md. The system uses Geist Sans exclusively, with specific weight and spacing rules that distinguish it from other Hallmark genres.

Display typography requires Geist Sans at weight 600 with tight letter-spacing (-0.03em), scaling up to 6rem for hero sections. Body text uses the same family at weight 400, rendered in light grey (oklch(86% 0.008 40)) against the dark background. The color system restricts accents to a single warm hue—chosen from orange, amber, red, or pink—applied only to bloom gradients, focus rings, and small tags.

Layout Structure and Motion Principles

Atmospheric layouts mandate centered or near-centered hero sections where the dark canvas itself forms the visual core. Type elements overlay this foundation rather than containing it.

Motion design is strictly limited to simple fade-in effects. The genre explicitly forbids slide, bounce, or other kinetic animations that would disrupt the contemplative, tool-like atmosphere. This constraint is enforced by the global rule-set in skills/hallmark/SKILL.md.

Strict UI Element Guidelines

The Atmospheric genre maintains a tight boundary between permitted and prohibited interface elements, ensuring visual consistency across implementations.

Allowed Components

• Radial-gradient blooms: Maximum two per page, occupying 20-30% footprint, remaining static without animation
• Pill-rounded CTAs: Must use the single accent fill color defined by the active theme
• Glow shadows: Permitted on hover states only
• Expressive display type: Up to 6rem for primary headings

Prohibited Patterns

• Light-paper aesthetics (the default canvas must be dark)
• Italic headers (enforced as a global ban across all Hallmark genres)
• Hairline borders (must use elevated cards instead)
• Multiple accent hues or glass-morphism effects
• Gradient text (another global prohibition)

Navigation and Footer Specifications

The Atmospheric genre defaults to specific navigation and footer patterns defined in skills/hallmark/references/component-cookbook.md.

Navigation: The N5 Floating pill serves as the default, featuring a blur backdrop rendered against the dark canvas. While other nav variants exist, many—including the N6 Newspaper masthead—are explicitly banned for Atmospheric layouts.

Footer: The Ft5 Statement footer is required, consisting of a closing sentence that states the page's core argument rather than listing links. Alternative footers like the Ft8 Marquee scroll are prohibited in this genre.

Implementation Signature and Code Example

Every Atmospheric-generated page must contain a signature stamp in the form of a CSS comment recording the genre, macrostructure, theme, enrichment tier, and component choices. Hallmark reads this metadata during the build process.

<!-- Genre declaration metadata -->
<style>
/* Hallmark · genre: atmospheric · macrostructure: bento-grid · theme: midnight · nav: N5 · footer: Ft5 */
</style>

<!-- Dark canvas with two warm radial blooms -->
<body class="bg-dark canvas">
  <div class="bloom bloom-1"></div>
  <div class="bloom bloom-2"></div>

  <!-- Centered hero with heavy sans display -->
  <section class="hero centered">
    <h1 class="display">Generate, refine, ship</h1>
    <p class="body">A dark-mode playground for AI-generated music, video, and images.</p>
    <a class="cta pill accent">Try it now</a>
  </section>

  <!-- Floating navigation pill (N5) -->
  <nav class="nav floating pill">
    <a href="#">Docs</a>
    <a href="#">API</a>
    <a href="#">Live demo</a>
  </nav>

  <!-- Statement footer (Ft5) -->
  <footer class="footer statement">
    <p>Built for the dark. The output is yours.</p>
  </footer>
</body>

/* Atmospheric theme implementation helpers */
.bg-dark { background: #111; color: #eee; }
.canvas { position: relative; overflow: hidden; }

.bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}
.bloom-1 { 
  width: 30%; 
  height: 30%; 
  background: radial-gradient(circle, rgba(255,140,0,.6), transparent); 
  top: 10%; 
  left: 15%; 
}
.bloom-2 { 
  width: 25%; 
  height: 25%; 
  background: radial-gradient(circle, rgba(255,80,0,.5), transparent); 
  bottom: 12%; 
  right: 20%; 
}

.display { 
  font-family: 'Geist Sans', sans-serif; 
  font-weight: 600; 
  font-size: clamp(3rem, 6vw + 1rem, 6rem); 
  letter-spacing: -0.03em; 
}
.body { 
  font-weight: 400; 
  color: oklch(86% 0.008 40); 
}
.cta.accent { 
  background: #ff8c00; 
  color: #111; 
}
.nav.floating.pill { 
  backdrop-filter: blur(8px); 
  background: rgba(0,0,0,.3); 
  border-radius: 9999px; 
}
.footer.statement { 
  text-align: center; 
  padding: 2rem 0; 
  font-size: 0.9rem; 
}

Summary

• The Atmospheric genre in Hallmark targets AI-creative product pages requiring a dark, night-time aesthetic, defined in skills/hallmark/references/genres/atmospheric.md.
• It mandates Geist Sans typography (600 weight for display, 400 for body) and restricts accents to a single warm hue applied sparingly.
• Layouts require centered heroes on dark canvases with a maximum of two static radial-gradient blooms occupying 20-30% of the viewport.
• Motion is limited to fade-in effects only; slide, bounce, and kinetic animations are forbidden.
• The N5 Floating pill navigation and Ft5 Statement footer serve as defaults, while glass-morphism, gradient text, and italic headers are globally banned.

Frequently Asked Questions

When should I use the Atmospheric genre in Hallmark?

Use the Atmospheric genre when your brief mentions AI-generated media (music, video, image, or voice), "dark mode", "late-night", "dreamlike", or "nocturnal" moods. According to the specification in skills/hallmark/references/genres/atmospheric.md, this genre is specifically engineered for pages that need to feel like a focused tool rather than a traditional marketing template.

What fonts does the Atmospheric genre require?

The Atmospheric genre requires Geist Sans exclusively. Display text must use weight 600 with tight letter-spacing (-0.03em), while body text uses weight 400 in light grey against the dark background. These specifications are documented in skills/hallmark/references/typography.md and enforced by the global rules in skills/hallmark/SKILL.md.

Can I use glass-morphism effects in Atmospheric layouts?

No. Glass-morphism is explicitly listed as a disallowed UI element in the Atmospheric genre specification. The genre permits only specific effects including static radial blooms, glow shadows on hover, and pill-rounded CTAs with solid accent fills. Light-paper aesthetics, hairline borders, and gradient text are also prohibited.

How do I declare the Atmospheric genre in my Hallmark project?

Declare the genre by including a specific CSS comment signature at the top of your style block that records the genre, macrostructure, theme, enrichment tier, nav, and footer choices. The format is: /* Hallmark · genre: atmospheric · macrostructure: <name> · theme: <name> · nav: <N variant> · footer: <Ft variant> */. Hallmark reads this metadata to enforce the appropriate constraints during generation.

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