# What Are the Available Hallmark Catalog Themes? A Complete Guide
> Discover the 6 Hallmark catalog themes: Cobalt, Hum, Carnival, Lumen, Coral, and Bloom. Explore this guide to understand each unique theme's design and features for your projects.
- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: how-to-guide
- Published: 2026-07-27
---
**Hallmark provides six distinct catalog themes—Cobalt, Hum, Carnival, Lumen, Coral, and Bloom—each defined in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) and documented in the `skills/hallmark/references/themes/` directory.**
The Hallmark project by Nutlope is a semantic web framework that ships with a curated set of visual themes. These themes bundle cohesive color palettes, typography stacks, motion cues, and signature design patterns. Rather than offering twenty themes as sometimes rumored, the source code explicitly implements six distinct visual identities, all accessible through a single `data-theme` attribute.
## The Six Hallmark Catalog Themes
Each theme is engineered for specific use cases and visual identities. The following table maps each theme to its primary purpose and reference documentation:
| Theme | Primary Use Case / Visual Identity | Reference Documentation |
|-------|-----------------------------------|------------------------|
| **Cobalt** | Cool-blue developer-tool aesthetic featuring a light theme with a single dark band for contrast. | [`skills/hallmark/references/themes/cobalt.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/cobalt.md) |
| **Hum** | Playful, warm-cream "alive" vibe with rounded sans-serif typography and a multi-accent palette (pear-yellow, sky-cyan, coral-red). Optimized for learning apps, habit trackers, and kid-friendly tools. | [`skills/hallmark/references/themes/hum.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/hum.md) |
| **Carnival** | Six curated color-pair variations delivering a festive, high-energy feel. Designed for marketing-rich sites requiring strong visual hooks. | [`skills/hallmark/references/themes/carnival.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/carnival.md) |
| **Lumen** | The only lowercase-headline theme, utilizing Instrument Serif typography with dark-violet night-mode and bright-day variants. Ideal for technical dashboards requiring subtle, instrumental aesthetics. | [`skills/hallmark/references/themes/lumen.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/lumen.md) |
| **Coral** | Modern-minimal single-accent (coral) on warm-cream paper. Provides a clean, restrained look for SaaS and B2B products needing professional warmth. | [`skills/hallmark/references/themes/coral.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/coral.md) |
| **Bloom** | Warm-light atmospheric theme with soft pastel gradients and subtle motion. Perfect for lifestyle and wellness sites requiring calm, inviting ambience. | [`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 Source Code
Themes are implemented through CSS custom properties scoped to `data-theme` attributes. In [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css), each theme is defined using the `[data-theme="..."]` selector, which sets CSS variables for paper (background), ink (text), accent colors, and typography.
For example, the **Cobalt** theme definition includes:
```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);
}
```
While **Hum** uses warmer values:
```css
[data-theme="hum"] {
--color-paper: oklch(97% 0.01 85);
--color-ink: oklch(0% 0 0);
/* Additional hum-specific tokens */
}
```
To activate a theme, apply the `data-theme` attribute to the root HTML element. The framework automatically consumes these CSS custom properties throughout the component library.
## Practical Code Examples
**Applying a Theme in HTML:**
```html
Lumen Dashboard
Welcome to the Dashboard
```
**Theme-Aware Component Styling:**
```css
/* Respects the active theme's font and color variables */
[data-theme="lumen"] .hero__title {
font-family: var(--font-display); /* Maps to Instrument Serif for Lumen */
text-transform: lowercase; /* Enforces Lumen's lowercase mandate */
color: var(--color-ink);
}
```
**Runtime Theme Switching in JavaScript:**
```javascript
// Dynamically switch themes based on user preference
function setTheme(themeName) {
document.documentElement.dataset.theme = themeName;
}
// Example usage
setTheme('cobalt'); // Immediately applies cobalt palette and tokens
setTheme('hum'); // Switches to warm Hum aesthetic
```
## Key Source Files
Understanding the theme architecture requires familiarity with these specific files in the Nutlope/hallmark repository:
| File Path | Purpose |
|-----------|---------|
| [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) | Contains all `[data-theme="..."]` CSS blocks defining the six theme palettes, colors, and design tokens. |
| [`skills/hallmark/references/themes/cobalt.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/cobalt.md) | Human-readable specification for the Cobalt theme including palette rationale and use cases. |
| [`skills/hallmark/references/themes/hum.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/hum.md) | Documentation for the Hum theme's multi-accent playful design system. |
| [`skills/hallmark/references/themes/carnival.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/carnival.md) | Specification for Carnival's six festive color pair variations. |
| [`skills/hallmark/references/themes/lumen.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/lumen.md) | Technical guide for Lumen's lowercase-headline Instrument Serif typography. |
| [`skills/hallmark/references/themes/coral.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/coral.md) | Reference for Coral's minimal single-accent professional aesthetic. |
| [`skills/hallmark/references/themes/bloom.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/bloom.md) | Documentation for Bloom's warm pastel atmospheric design. |
| [`site/index.html`](https://github.com/Nutlope/hallmark/blob/main/site/index.html) | Example implementation showing `data-theme` attribute usage. |
## Summary
- Hallmark ships **six catalog themes**: Cobalt, Hum, Carnival, Lumen, Coral, and Bloom—not twenty.
- All themes are defined in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) using `[data-theme="..."]` CSS selectors.
- Each theme configures **CSS custom properties** for colors (`--color-paper`, `--color-ink`, `--color-accent`) and typography.
- Theme documentation resides in `skills/hallmark/references/themes/*.md` files, providing human-readable specifications.
- Activate themes by setting `data-theme="theme-name"` on the `` element.
- Switch themes dynamically at runtime by modifying `document.documentElement.dataset.theme`.
## Frequently Asked Questions
### How do I set a default theme for my Hallmark site?
Add the `data-theme` attribute to your root `` tag in your base template. For example, `` will load the Coral theme immediately on page load. The [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) file must be included for the theme variables to resolve.
### Can I create custom themes beyond the six built-in options?
Yes, though it requires extending [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css). Define a new `[data-theme="your-theme"]` block with custom OKLCH color values and typography variables. Follow the existing pattern of `--color-paper`, `--color-ink`, and `--color-accent` to ensure component compatibility.
### Why does the Lumen theme use lowercase headlines?
According to the source specification in [`skills/hallmark/references/themes/lumen.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/lumen.md), Lumen is explicitly designed as the "lowercase-headline theme" using Instrument Serif typography. This is a deliberate design constraint that creates the subtle, instrumental aesthetic suited for technical dashboards and data-heavy interfaces.
### Are there light and dark variants for each theme?
Theme modes (light/dark) are handled within individual theme definitions rather than as separate themes. For example, the **Lumen** theme includes both a dark-violet night-mode and a bright-day variant within its `[data-theme="lumen"]` CSS block. Check the specific `.md` reference files for each theme's available mode variations.