Hallmark Catalog Themes: Complete Guide to the 6 Built-in Visual Styles

Hallmark provides six distinct catalog themes—Cobalt, Hum, Carnival, Lumen, Coral, and Bloom—that bundle cohesive color palettes, typography stacks, and motion patterns to instantly style AI-generated websites.

The Hallmark framework by Nutlope/hallmark ships with a curated catalog themes system defined in both human-readable specification documents and CSS custom properties. Each theme encapsulates a complete visual identity through CSS variables scoped to [data-theme] attributes, allowing developers to switch entire design systems by changing a single HTML attribute.

What Are Hallmark Catalog Themes?

Catalog themes in Hallmark are predefined visual systems that combine color tokens, font families, spacing scales, and interaction patterns. Unlike ad-hoc styling, these themes are architectural primitives specified in skills/hallmark/references/themes/ and implemented in site/css/tokens.css.

Each theme serves a specific design intent:

• Developer tools vs. consumer apps
• High-energy marketing vs. calm wellness
• Technical dashboards vs. playful learning platforms

The themes leverage CSS custom properties (variables) that cascade through the document when applied via the data-theme attribute on the root HTML element.

Complete List of Available Hallmark Themes

The Hallmark repository contains six production-ready themes. Each theme has a dedicated specification file in skills/hallmark/references/themes/ and corresponding CSS variable definitions in site/css/tokens.css.

Cobalt Theme

Cobalt delivers a cool-blue aesthetic optimized for developer tools and technical products. It features a light base with strategic dark bands for contrast, utilizing a restrained monochromatic palette with blue undertones.

• Primary palette: Cool blues with high-contrast ink
• Best for: SaaS landing pages, API documentation, developer dashboards
• Reference: skills/hallmark/references/themes/cobalt.md
• CSS scope: [data-theme="cobalt"] in site/css/tokens.css

Hum Theme

Hum creates a warm, playful atmosphere with rounded sans-serif typography and multi-accent color schemes including pear-yellow, sky-cyan, and coral-red. This theme breaks from corporate austerity with organic, friendly visuals.

• Primary palette: Warm cream backgrounds with vibrant accent colors
• Typography: Rounded sans-serif for approachable readability
• Best for: Learning applications, habit trackers, children's tools, consumer apps
• Reference: skills/hallmark/references/themes/hum.md

Carnival Theme

Carnival provides six curated "drops" or color-pair variations designed for high-energy, festive marketing sites. It emphasizes bold visual hooks and celebratory color combinations that demand attention.

• Primary palette: Six distinct high-contrast color combinations
• Best for: Marketing campaigns, event pages, product launches, promotional sites
• Reference: skills/hallmark/references/themes/carnival.md

Lumen Theme

Lumen is the only theme that mandates lowercase headlines, utilizing Instrument Serif typography for an editorial, technical aesthetic. It includes both dark-violet night-mode and bright-day variants for versatile dashboard applications.

• Typography: Instrument Serif with mandatory lowercase headings
• Variants: Dark night-mode and light day-mode
• Best for: Technical dashboards, data visualization tools, editorial content
• Reference: skills/hallmark/references/themes/lumen.md

Coral Theme

Coral offers modern minimalism with a single coral accent color on warm cream paper. It balances professionalism with personality, avoiding the sterility of pure corporate themes while maintaining restraint.

• Primary palette: Coral accent on warm cream with dark ink
• Best for: B2B SaaS products, professional services, modern corporate sites
• Reference: skills/hallmark/references/themes/coral.md

Bloom Theme

Bloom emphasizes atmospheric warmth with soft pastel gradients and gentle motion cues. It creates a calm, inviting ambience through subtle color transitions and reduced visual noise.

• Primary palette: Soft pastels with gentle gradients
• Motion: Subtle, calming animations
• Best for: Wellness applications, lifestyle brands, meditation apps, portfolio sites
• Reference: skills/hallmark/references/themes/bloom.md

How Themes Are Implemented in the Codebase

The Hallmark catalog themes architecture separates specification from implementation. Theme definitions exist as Markdown documentation for AI context, while CSS custom properties handle the actual rendering.

CSS Token Architecture

In site/css/tokens.css, each theme is defined via attribute selectors:

[data-theme="cobalt"] {
  --color-paper: oklch(95% 0.01 260);
  --color-ink: oklch(0% 0 0);
  --color-accent: oklch(70% 0.16 215);
  --color-accent-2: oklch(67% 0.14 245);
  --color-paper-emit: oklch(0% 0 0 / 0.1);
}

[data-theme="hum"] {
  --color-paper: oklch(97% 0.01 85);
  --color-ink: oklch(0% 0 0);
  /* Additional Hum-specific tokens */
}

[data-theme="lumen"] {
  --font-display: "Instrument Serif", serif;
  /* Lumen-specific lowercase headline styling */
}

[data-theme="carnival"] { /* Carnival tokens */ }
[data-theme="coral"] { /* Coral tokens */ }
[data-theme="bloom"] { /* Bloom tokens */ }

Reference Documentation Structure

The skills/hallmark/references/themes/ directory contains detailed specifications:

• cobalt.md - Cool-blue technical theme specs
• hum.md - Warm multi-accent playful theme specs
• carnival.md - High-energy festive theme specs
• lumen.md - Lowercase serif editorial theme specs
• coral.md - Minimal coral-accent professional theme specs
• bloom.md - Soft pastel atmospheric theme specs

How to Apply a Hallmark Theme

Applying a Hallmark catalog theme requires setting the data-theme attribute and optionally accessing CSS variables for component-level customization.

HTML Implementation

Set the theme on the root HTML element:

<!DOCTYPE html>
<html data-theme="hum">
  <head>
    <link rel="stylesheet" href="site/css/tokens.css">
  </head>
  <body>
    <h1>Welcome to Your App</h1>
    <!-- Content inherits Hum theme variables -->
  </body>
</html>

CSS Variable Usage

Reference theme tokens for component styling:

[data-theme="lumen"] .hero__title {
  font-family: var(--font-display);
  text-transform: lowercase;  /* Lumen mandates lowercase headlines */
  color: var(--color-ink);
}

[data-theme="cobalt"] .button--primary {
  background-color: var(--color-accent);
  color: var(--color-paper);
}

JavaScript Runtime Switching

Enable dynamic theme switching without page reloads:

// Switch themes at runtime based on user preference
function setHallmarkTheme(themeName) {
  const validThemes = ['cobalt', 'hum', 'carnival', 'lumen', 'coral', 'bloom'];
  
  if (validThemes.includes(themeName)) {
    document.documentElement.dataset.theme = themeName;
    localStorage.setItem('hallmark-theme', themeName);
  }
}

// Initialize from saved preference
const savedTheme = localStorage.getItem('hallmark-theme') || 'hum';
setHallmarkTheme(savedTheme);

// Example: Theme toggle button
document.getElementById('theme-toggle').addEventListener('click', () => {
  const current = document.documentElement.dataset.theme;
  const next = current === 'hum' ? 'cobalt' : 'hum';
  setHallmarkTheme(next);
});

Theme Architecture and Key Files

File Path	Purpose
skills/hallmark/references/themes/cobalt.md	Specification for Cobalt theme palette and usage
skills/hallmark/references/themes/hum.md	Specification for Hum theme palette and usage
skills/hallmark/references/themes/carnival.md	Specification for Carnival theme palette and usage
skills/hallmark/references/themes/lumen.md	Specification for Lumen theme (lowercase headlines)
skills/hallmark/references/themes/coral.md	Specification for Coral theme palette and usage
skills/hallmark/references/themes/bloom.md	Specification for Bloom theme palette and usage
site/css/tokens.css	CSS implementation with [data-theme="..."] variable blocks
site/index.html	Example implementation showing theme application
README.md	High-level documentation for the Hallmark framework

Summary

• Hallmark ships with six catalog themes: Cobalt, Hum, Carnival, Lumen, Coral, and Bloom.
• Themes are defined in skills/hallmark/references/themes/*.md and implemented via CSS variables in site/css/tokens.css.
• Each theme uses the [data-theme="name"] attribute selector to scope custom properties.
• Lumen uniquely requires lowercase headlines and uses Instrument Serif typography.
• Apply themes by setting <html data-theme="name"> and access tokens via var(--property).
• Switch themes at runtime using JavaScript to update the dataset.theme property.

Frequently Asked Questions

How do I add a custom theme to Hallmark?

To create a custom theme, add a new [data-theme="customname"] block to site/css/tokens.css with your color variables, then document the specifications in skills/hallmark/references/themes/customname.md. Follow the existing theme structure by defining --color-paper, --color-ink, --color-accent, and typography variables to ensure compatibility with Hallmark components.

Can I use multiple themes on the same page?

Hallmark themes are designed to be applied at the document root level via the <html> element's data-theme attribute. While nested themes are technically possible by scoping [data-theme] to container elements, the architecture assumes a single theme per page to maintain consistent visual hierarchy and prevent CSS variable conflicts.

What is the difference between Carnival and Hum themes?

Carnival provides six distinct high-energy color "drops" for festive, attention-grabbing marketing sites, while Hum uses a consistent warm cream background with multiple accent colors (pear, cyan, coral) for playful but stable application interfaces. Carnival emphasizes variation and celebration; Hum emphasizes approachability and warmth.

Does Hallmark support dark mode?

Yes, the Lumen theme specifically includes both dark-violet night-mode and bright-day variants. Additionally, any theme can implement dark mode by defining appropriate oklch() values for --color-paper (dark backgrounds) and --color-ink (light text) within its [data-theme] CSS block in site/css/tokens.css.

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