# Hallmark Bespoke vs Tuned Custom Theme: Understanding Custom Theme Depths in the Hallmark Framework

> Understand Hallmark's bespoke vs tuned custom theme depths. Learn how tuned builds on existing structures with new palettes and fonts, while bespoke designs entire pages from scratch.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: deep-dive
- Published: 2026-08-05

---

**Hallmark's `bespoke` and `tuned` custom theme depths differ in design scope: `tuned` generates a unique OKLCH palette and font pairing on top of Hallmark's existing catalog macrostructures, while `bespoke` designs the entire page from first principles—including palette, typography, and macrostructure.**

The Hallmark framework offers two distinct depths for custom theme generation, each providing different levels of creative freedom while maintaining strict adherence to universal design constraints. Understanding this Hallmark bespoke vs tuned custom theme distinction is essential for developers working with the framework's custom theme protocol.

## What Are Hallmark Custom Theme Depths?

Hallmark's theme system routes all designs through either **catalog themes** (pre-designed templates) or **custom themes** (generated per brief). When a brief signals custom theme requirements, the framework evaluates which depth applies based on structural demands.

According to [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) (lines 48-49), these two depths—`tuned` and `bespoke`—are the only custom options available in the theme routing protocol. Both options pass every universal **slop-test gate** (contrast, accessibility, font-pair discipline), but they differ dramatically in what they can change.

## The Tuned Depth: Palette and Typography Customization

The **tuned** depth represents the default custom theme path. It generates a one-off **OKLCH colour palette** and **free-font pairing** while preserving Hallmark's existing catalog macrostructures.

### What Tuned Custom Themes Preserve and Change

| Element | Behavior |
|---------|----------|
| **Macrostructure** | Unchanged—uses existing hero, nav, sections, footer from catalog |
| **Colour system** | Fresh OKLCH palette generated per brief |
| **Typography** | New display/body font pairing selected |
| **Constraints** | All slop-test gates enforced |

### When Tuned Depth Is Selected

The framework chooses `tuned` when the brief signals:

- A **brand anchor colour** supplied by the user
- A **multi-attribute vibe** that doesn't map to any catalog theme
- Explicit request for a "custom palette"
- **No structural redesign** requested

As documented in [`skills/hallmark/references/custom-theme.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/custom-theme.md) (lines 11-12), this depth is defined as "palette + font pairing on Hallmark's structures."

### Tuned Theme CSS Stamp Example

```css
/* Hallmark · route: custom (tuned) · vibe: "archival warmth, hand‑set, no varnish"
 * paper: oklch(94% 0.020 65) · accent: oklch(58% 0.16 35)
 * display: Fraunces italic · body: Source Serif 4
 * axes: light / italic‑serif / chromatic‑terracotta
 * studied: no · context: explicit · v0.8.0 */

```

The `route: custom (tuned)` annotation confirms this theme uses a catalog macrostructure (such as `Long Document`) with customized surface treatment only.

## The Bespoke Depth: First-Principles Page Design

The **bespoke** depth provides **deep custom theme** capabilities, designing the entire page from first principles. This includes palette, typography, **and** the page's macrostructure itself.

### What Bespoke Custom Themes Change

| Element | Behavior |
|---------|----------|
| **Macrostructure** | **Created anew**—no catalog components used |
| **Composition** | Designed to match brief's structural vision |
| **Colour system** | Fresh OKLCH palette |
| **Typography** | Custom font pairing |
| **Constraints** | Slop-test floor only; everything else rebuilt |

### When Bespoke Depth Is Selected

The framework triggers `bespoke` for **signal 5** in the custom-theme protocol: explicit structural vision requests. This includes briefs asking for:

- "No theme / from scratch / fully bespoke"
- Unique page shapes (scroll-assembling poem, ticket-shaped page, interactive periodic table)

The detailed specification in [`skills/hallmark/references/custom-theme.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/custom-theme.md) (lines 12-13 and the dedicated "## § Bespoke depth" section at lines 50-56) defines this as designing "the page's shape... to match the brief's structural vision."

### Bespoke Theme CSS Stamp Example

```css
/* Hallmark · route: custom (bespoke) · structure: "scroll‑assembling poem"
 * vibe: "quiet, lyrical, interactive" · paper: oklch(97% 0.015 140)
 * accent: oklch(70% 0.12 300) · display: Cormorant Garamond
 * body: EB Garamond · axes: light / roman‑serif / chromatic‑other (dusty‑pink)
 * studied: no · context: explicit · v0.8.0 */

```

The critical differences: `route: custom (bespoke)` and the `structure:` field describing the novel macrostructure ("scroll-assembling poem"). The page's macrostructure is logged as a bespoke entry rather than a catalog reference.

## Side-by-Side Comparison: Bespoke vs Tuned

| Aspect | Tuned Custom Theme | Bespoke Custom Theme |
|--------|-------------------|----------------------|
| **Design scope** | Surface layer (colour + type) | Complete page architecture |
| **Macrostructure source** | Catalog templates | Generated from brief |
| **Typical brief signal** | "Custom palette," brand colour, mood request | "From scratch," unique page shape, structural vision |
| **CSS stamp route** | `custom (tuned)` | `custom (bespoke)` |
| **Structure annotation** | None (implicitly catalog) | `structure: <description>` |
| **Use case** | Brand-aligned landing page with proven skeletons | Highly creative pages where shape tells the story |

## Implementation in Hallmark's Source Code

The distinction between these depths is codified in several key files:

- **[`skills/hallmark/references/custom-theme.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/custom-theme.md)** — Defines the two depths, decision flow, and bespoke-depth process
- **[`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md)** — Documents overall theme routing and references the custom-theme protocol
- **[`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css)** — Holds catalog theme tokens; tuned themes write temporary palette overrides to `:root`, while bespoke themes replace the entire token set
- **`site/examples/custom-*/script.js`** — Real-world bespoke page implementations in the showcase

## Summary

- **Tuned custom themes** provide unique colour and font combinations while preserving Hallmark's proven catalog skeletons—ideal for brands needing surface-level differentiation.

- **Bespoke custom themes** grant complete structural freedom, generating novel page compositions from first principles while maintaining universal constraint compliance.

- Both depths enforce **identical slop-test gates**; the only difference is whether catalog macrostructures serve as the foundation or merely the constraint floor.

- The **`structure:` field in CSS stamps** instantly distinguishes bespoke outputs, documenting the novel macrostructure for maintenance and auditing.

## Frequently Asked Questions

### How do I know which custom theme depth Hallmark will choose for my brief?

Hallmark's custom-theme protocol evaluates **signal 5** specifically: if your brief explicitly requests structural innovation ("from scratch," "no theme," or describes a unique page shape), the framework selects `bespoke`. If you request custom colours or mood without structural language, `tuned` applies automatically. Check [`skills/hallmark/references/custom-theme.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/custom-theme.md) for the complete decision matrix.

### Can I force bespoke depth if Hallmark selects tuned?

The routing is deterministic based on brief signals. To trigger `bespoke`, include explicit structural vision language in your brief—describe the desired page shape, movement, or composition rather than just colour and mood. The framework does not expose manual depth overrides; it interprets intent from brief content.

### Do bespoke themes perform differently than tuned themes?

Performance characteristics remain equivalent. Both depths generate optimized CSS with identical constraint enforcement. The `bespoke` depth may produce more complex DOM structures for novel compositions, but Hallmark's slop-test gates prevent architectural patterns that would degrade performance. The CSS stamp in either case carries equivalent metadata overhead.