Hallmark Catalog Themes: Complete Guide to the 6 Built-In Visual Styles

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.

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. 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 (view on GitHub).

• 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 (view on GitHub).

• 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 (view on GitHub).

• 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 (view on GitHub).

• 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 (view on GitHub).

• 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 (view on GitHub).

How Themes Are Implemented in the Codebase

CSS Token Architecture

The visual implementation of each theme resides in site/css/tokens.css (view on GitHub), 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:

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

To implement the Hum theme in your markup:

<!DOCTYPE html>
<html data-theme="hum" lang="en">
  <head>
    <title>Application Using Hum Theme</title>
    <link rel="stylesheet" href="site/css/tokens.css">
  </head>
  <body>
    <h1>Welcome to the Hum Experience</h1>
  </body>
</html>

To customize components while respecting the active theme, reference the CSS variables:

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

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

Where are the Hallmark theme CSS variables defined?

All theme variables are defined in 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 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.

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