how-to-guide

What Are the Available Hallmark Catalog Themes? A Complete Guide

July 27, 2026 Nutlope/hallmark ↗

Hallmark provides six distinct catalog themes—Cobalt, Hum, Carnival, Lumen, Coral, and Bloom—each defined in 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`
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`
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`
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`
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`
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`

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, 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:

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

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

<!DOCTYPE html>
<html data-theme="lumen">
  <head>
    <title>Lumen Dashboard</title>
    <link rel="stylesheet" href="site/css/tokens.css">
  </head>
  <body>
    <h1 class="hero__title">Welcome to the Dashboard</h1>
  </body>
</html>

Theme-Aware Component Styling:

/* 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:

// 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`	Contains all `[data-theme="..."]` CSS blocks defining the six theme palettes, colors, and design tokens.
`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`	Documentation for the Hum theme's multi-accent playful design system.
`skills/hallmark/references/themes/carnival.md`	Specification for Carnival's six festive color pair variations.
`skills/hallmark/references/themes/lumen.md`	Technical guide for Lumen's lowercase-headline Instrument Serif typography.
`skills/hallmark/references/themes/coral.md`	Reference for Coral's minimal single-accent professional aesthetic.
`skills/hallmark/references/themes/bloom.md`	Documentation for Bloom's warm pastel atmospheric design.
`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 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 <html> 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 <html> tag in your base template. For example, <html data-theme="coral"> will load the Coral theme immediately on page load. The 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. 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, 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.

Have a question about this repo?

These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:

Share the following with your agent to get started:

curl -s "https://instagit.com/install.md"

Add to your MCP client configuration:

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

Ask your agent:

"Use Instagit MCP to understand how Nutlope/hallmark works."

Works with

Claude Codex Cursor VS Code OpenClaw Any MCP Client

Maintain an open-source project? Get it listed too →