# Hallmark Catalog Themes: Complete Guide to the 6 Built-In Visual Styles
> Explore the 6 built-in Hallmark catalog themes: Cobalt, Hum, Carnival, Lumen, Coral, and Bloom. Learn how to use these visual styles in your projects to enhance your brand.
- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: guide
- Published: 2026-07-16
---
**The Hallmark framework provides six distinct catalog themes—Cobalt, Hum, Carnival, Lumen, Coral, and Bloom—each defined in `skills/hallmark/references/themes/` and implemented via CSS data attributes in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css).**
The Nutlope/hallmark repository ships with a complete **Hallmark catalog themes** system that enables developers to apply consistent visual identities across web projects. Each theme bundles a curated color palette, typography stack, and motion characteristics into a single data attribute that can be toggled at runtime. Understanding these built-in themes helps you select the right visual foundation for your application without writing custom CSS from scratch.
## What Are Hallmark Catalog Themes?
Hallmark themes are predefined **visual design systems** that combine color tokens, font families, and animation presets into cohesive packages. Unlike ad-hoc styling, these themes enforce consistency through CSS custom properties defined in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css). Each theme corresponds to a markdown specification file located in `skills/hallmark/references/themes/`, documenting the design rationale, color values, and intended use cases.
## Complete List of Available Hallmark Themes
The repository currently maintains six distinct themes, each optimized for specific application contexts:
- **Cobalt**: A cool-blue developer-focused theme featuring a light base with strategic dark bands for contrast. Reference documentation lives in [`skills/hallmark/references/themes/cobalt.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/cobalt.md) ([view on GitHub](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/cobalt.md)).
- **Hum**: A playful, warm-cream aesthetic utilizing rounded sans-serif typography and multi-accent palettes including pear-yellow and coral-red. Ideal for educational and habit-tracking applications. Specifications are found in [`skills/hallmark/references/themes/hum.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/hum.md) ([view on GitHub](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/hum.md)).
- **Carnival**: A high-energy theme offering six curated color "drops" or variations, providing festive visual hooks for marketing-heavy sites. Documentation resides in [`skills/hallmark/references/themes/carnival.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/carnival.md) ([view on GitHub](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/carnival.md)).
- **Lumen**: The only theme mandating lowercase headlines, utilizing Instrument Serif typography with dark-violet night and bright-day variants. Designed for technical dashboards requiring subtle sophistication. See [`skills/hallmark/references/themes/lumen.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/lumen.md) ([view on GitHub](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/lumen.md)).
- **Coral**: A modern-minimal theme featuring a single coral accent on warm-cream paper, delivering professional restraint for SaaS and B2B products. Reference file: [`skills/hallmark/references/themes/coral.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/coral.md) ([view on GitHub](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/coral.md)).
- **Bloom**: A warm-light atmospheric theme employing soft pastels and gentle gradients, optimized for lifestyle and wellness applications requiring calm, inviting ambience. Defined in [`skills/hallmark/references/themes/bloom.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/bloom.md) ([view on GitHub](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/bloom.md)).
## How Themes Are Implemented in the Codebase
### CSS Token Architecture
The visual implementation of each theme resides in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) ([view on GitHub](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css)), where **CSS data attributes** scope custom properties to specific theme contexts. Each theme block follows the pattern `[data-theme="theme-name"]`, defining `--color-paper`, `--color-ink`, `--color-accent`, and other design tokens.
For example, the CSS structure includes blocks for all six themes:
```css
[data-theme="cobalt"] {
--color-paper: oklch(95% 0.01 260);
--color-ink: oklch(0% 0 0);
--color-accent: oklch(70% 0.16 215);
}
[data-theme="hum"] {
--color-paper: oklch(97% 0.01 85);
--color-ink: oklch(0% 0 0);
}
/* Additional blocks for carnival, lumen, coral, bloom */
```
### Theme Reference Specifications
Human-readable theme documentation is stored as Markdown files in `skills/hallmark/references/themes/`. These files detail the **signature moves**, typography requirements, and color psychology for each theme, serving as the source of truth for design decisions.
## How to Apply and Switch Hallmark Themes
Applying a theme requires setting the `data-theme` attribute on the HTML element. This activates the corresponding CSS custom properties defined in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css).
To implement the Hum theme in your markup:
```html
Application Using Hum Theme
Welcome to the Hum Experience
```
To customize components while respecting the active theme, reference the CSS variables:
```css
/* Component styling that adapts to any active theme */
.card {
background-color: var(--color-paper);
color: var(--color-ink);
border-left: 4px solid var(--color-accent);
}
/* Lumen-specific override using data attribute */
[data-theme="lumen"] .hero__title {
font-family: var(--font-display);
text-transform: lowercase;
}
```
For runtime theme switching, manipulate the `data-theme` attribute via JavaScript:
```javascript
// Function to switch between Hallmark catalog themes
function setHallmarkTheme(themeName) {
document.documentElement.setAttribute('data-theme', themeName);
}
// Switch to Carnival theme
setHallmarkTheme('carnival');
// Available options: 'cobalt', 'hum', 'carnival', 'lumen', 'coral', 'bloom'
```
## Summary
- **Hallmark catalog themes** provide six pre-built visual systems: Cobalt, Hum, Carnival, Lumen, Coral, and Bloom.
- Theme specifications are documented in `skills/hallmark/references/themes/*.md` files.
- CSS implementation uses `[data-theme="..."]` blocks in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) to define color and typography tokens.
- Apply themes by setting the `data-theme` attribute on the HTML element.
- Switch themes programmatically using JavaScript to update the `data-theme` attribute.
## Frequently Asked Questions
### How many themes are included in the Hallmark catalog?
The Hallmark framework ships with **six built-in themes**: Cobalt, Hum, Carnival, Lumen, Coral, and Bloom. Each theme is fully documented in the `skills/hallmark/references/themes/` directory and implemented via corresponding CSS data attribute blocks in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css).
### Where are the Hallmark theme CSS variables defined?
All theme variables are defined in **[`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css)** using `[data-theme="theme-name"]` selectors. These blocks declare custom properties such as `--color-paper`, `--color-ink`, and `--color-accent`, which components reference to maintain visual consistency across theme switches.
### Can I create custom themes in Hallmark?
While the repository provides six reference themes, the architecture supports custom themes by adding new `[data-theme="custom-name"]` blocks to [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) and creating corresponding documentation files in `skills/hallmark/references/themes/`. Follow the existing token structure to ensure compatibility with Hallmark's component system.
### How do I programmatically switch between Hallmark themes?
Use JavaScript to modify the `data-theme` attribute on the document's root element. Call `document.documentElement.setAttribute('data-theme', 'theme-name')` where `theme-name` is one of the six available options: cobalt, hum, carnival, lumen, coral, or bloom. This instantly applies the new color palette and typography without page reload.