# Hallmark Catalog Themes: Complete Guide to the 6 Available Styles

> Explore the 6 Hallmark catalog themes including Cobalt, Hum, Carnival, Lumen, Coral, and Bloom. Discover how these styles are implemented and customize your site's look.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: getting-started
- Published: 2026-08-09

---

**Hallmark ships with six built-in catalog themes—Cobalt, Hum, Carnival, Lumen, Coral, and Bloom—each defined in Markdown reference files under `skills/hallmark/references/themes/` and implemented via CSS custom properties in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css).**

Hallmark is an open-source design system that provides a curated catalog of visual themes for web projects. Each theme bundles a cohesive color palette, typography stack, and motion language. According to the Hallmark source code, the catalog currently contains six distinct themes that teams can apply by setting a data attribute on the root element.

## Available Hallmark Catalog Themes

The following six themes are enumerated in the source code. Each has a dedicated specification file and a corresponding CSS block that defines its design tokens.

### Cobalt

- **Visual Identity:** Cool-blue developer-tool aesthetic; a light theme with a single dark "band" for contrast.
- **Reference File:** [`skills/hallmark/references/themes/cobalt.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/cobalt.md)
- **CSS Selector:** `[data-theme="cobalt"]` in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css)

### Hum

- **Visual Identity:** Playful, warm-cream "alive" vibe featuring rounded sans-serif typography and a multi-accent palette (pear-yellow, sky-cyan, coral-red). Ideal for learning apps, habit trackers, and kids' tools.
- **Reference File:** [`skills/hallmark/references/themes/hum.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/hum.md)
- **CSS Selector:** `[data-theme="hum"]` in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css)

### Carnival

- **Visual Identity:** Six curated "drops" (color-pair variations) that deliver a festive, high-energy feel. Best suited for marketing-rich sites that need a strong visual hook.
- **Reference File:** [`skills/hallmark/references/themes/carnival.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/carnival.md)
- **CSS Selector:** `[data-theme="carnival"]` in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css)

### Lumen

- **Visual Identity:** The only lower-case-headline theme; uses instrument-serif typography with a dark-violet night-mode and a bright-day variant. Suited to technical dashboards requiring a subtle, instrumental aesthetic.
- **Reference File:** [`skills/hallmark/references/themes/lumen.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/lumen.md)
- **CSS Selector:** `[data-theme="lumen"]` in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css)

### Coral

- **Visual Identity:** Modern-minimal single-accent (coral) on warm-cream paper. Provides a clean, restrained look for SaaS or B2B products seeking a professional but not austere feel.
- **Reference File:** [`skills/hallmark/references/themes/coral.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/coral.md)
- **CSS Selector:** `[data-theme="coral"]` in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css)

### Bloom

- **Visual Identity:** Warm-light atmospheric theme with a soft pastel palette; emphasizes gentle gradients and subtle motion. Ideal for lifestyle or wellness sites requiring a calm, inviting ambience.
- **Reference File:** [`skills/hallmark/references/themes/bloom.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/bloom.md)
- **CSS Selector:** `[data-theme="bloom"]` in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css)

## How Themes Are Implemented in the Source Code

Theme implementation relies on CSS custom properties scoped to the `[data-theme]` attribute. The [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) file contains blocks for each theme that override the base token values.

For example, the Cobalt theme defines its paper and ink colors as follows:

```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);
}

```

Similarly, the Hum theme establishes its warm base:

```css
[data-theme="hum"] {
  --color-paper: oklch(97% 0.01 85);
  --color-ink: oklch(0% 0 0);
  /* Additional accent variables */
}

```

All six themes follow this pattern, ensuring consistent variable names across the system while allowing distinct values per theme.

## How to Apply a Theme

To activate a theme, set the `data-theme` attribute on the `<html>` element. The [`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/index.html) file demonstrates this pattern.

```html
<!-- Apply the Hum theme to the entire document -->
<html data-theme="hum">
  <head>
    <link rel="stylesheet" href="css/tokens.css">
  </head>
  <body>
    <!-- Content inherits Hum's color and typography tokens -->
  </body>
</html>

```

### Switching Themes with JavaScript

You can change themes at runtime by updating the data attribute. This approach is useful for user-controlled toggles or theme preferences.

```javascript
// Switch themes at runtime
function setTheme(name) {
  document.documentElement.dataset.theme = name;
}

// Activate the Lumen theme
setTheme('lumen');

```

## Customizing Components Within a Theme

When building components, reference the CSS variables rather than hardcoding values. This ensures components respect the active theme. For example, styling a hero title to use Lumen's specific font and case requirements:

```css
[data-theme="lumen"] .hero__title {
  font-family: var(--font-display);   /* Lumen’s Instrument Serif */
  text-transform: lowercase;          /* Lumen mandates lowercase headlines */
}

```

This pattern applies to any theme. Using the `[data-theme="..."]` selector ensures styles only apply when that specific theme is active.

## Summary

- Hallmark provides **six catalog themes**: Cobalt, Hum, Carnival, Lumen, Coral, and Bloom.
- Theme specifications reside in `skills/hallmark/references/themes/*.md`.
- CSS variables for each theme are defined in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) using `[data-theme="..."]` blocks.
- Apply a theme by setting `data-theme` on the `<html>` element.
- Switch themes dynamically via JavaScript by updating `document.documentElement.dataset.theme`.

## Frequently Asked Questions

### How many themes are included in the Hallmark catalog?

The Hallmark source code defines **six themes**: Cobalt, Hum, Carnival, Lumen, Coral, and Bloom. Each theme is documented in the `skills/hallmark/references/themes/` directory and implemented in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css).

### Where are the theme color variables defined?

Theme-specific design tokens are defined in **[`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css)**. This file contains `[data-theme="..."]` blocks that declare CSS custom properties for colors, typography, and spacing for each of the six themes.

### Can I switch Hallmark themes dynamically on a page?

Yes. Themes can be switched at runtime by updating the `data-theme` attribute on the document element using JavaScript: `document.documentElement.dataset.theme = 'cobalt'`. This immediately applies the new theme's CSS variables without requiring a page reload.

### What is the difference between the Hum and Carnival themes?

**Hum** offers a warm, playful aesthetic with rounded sans-serif fonts and multi-accent pastel colors, making it suitable for educational or casual applications. **Carnival** provides high-energy, festive color "drops" designed for marketing sites that require bold visual impact and vibrant contrast.