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

> Discover Hallmark catalog themes Cobalt Hum Carnival Lumen Coral and Bloom. This guide explains how these visual styles instantly style AI generated websites with color typography and motion.

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

---

**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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/cobalt.md)
- **CSS scope**: `[data-theme="cobalt"]` in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css), each theme is defined via attribute selectors:

```css
[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`](https://github.com/Nutlope/hallmark/blob/main/cobalt.md) - Cool-blue technical theme specs
- [`hum.md`](https://github.com/Nutlope/hallmark/blob/main/hum.md) - Warm multi-accent playful theme specs
- [`carnival.md`](https://github.com/Nutlope/hallmark/blob/main/carnival.md) - High-energy festive theme specs
- [`lumen.md`](https://github.com/Nutlope/hallmark/blob/main/lumen.md) - Lowercase serif editorial theme specs
- [`coral.md`](https://github.com/Nutlope/hallmark/blob/main/coral.md) - Minimal coral-accent professional theme specs
- [`bloom.md`](https://github.com/Nutlope/hallmark/blob/main/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:

```html
<!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:

```css
[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:

```javascript
// 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`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/cobalt.md) | Specification for Cobalt theme palette and usage |
| [`skills/hallmark/references/themes/hum.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/hum.md) | Specification for Hum theme palette and usage |
| [`skills/hallmark/references/themes/carnival.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/carnival.md) | Specification for Carnival theme palette and usage |
| [`skills/hallmark/references/themes/lumen.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/lumen.md) | Specification for Lumen theme (lowercase headlines) |
| [`skills/hallmark/references/themes/coral.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/coral.md) | Specification for Coral theme palette and usage |
| [`skills/hallmark/references/themes/bloom.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/bloom.md) | Specification for Bloom theme palette and usage |
| [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) | CSS implementation with `[data-theme="..."]` variable blocks |
| [`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/index.html) | Example implementation showing theme application |
| [`README.md`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) with your color variables, then document the specifications in [`skills/hallmark/references/themes/customname.md`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css).