getting-started

Hallmark Catalog Themes: Complete Guide to the 6 Available Styles

August 9, 2026 Nutlope/hallmark ↗

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.

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

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
  • CSS Selector: [data-theme="hum"] in site/css/tokens.css

Carnival

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
  • CSS Selector: [data-theme="lumen"] in site/css/tokens.css

Coral

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
  • CSS Selector: [data-theme="bloom"] in 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 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:

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

[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 file demonstrates this pattern.

<!-- 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.

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

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

Where are the theme color variables defined?

Theme-specific design tokens are defined in 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.

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"
Works with
Claude Codex Cursor VS Code OpenClaw Any MCP Client

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