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

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 (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 (lines 11-12), this depth is defined as "palette + font pairing on Hallmark's structures."

Tuned Theme CSS Stamp Example

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

/* 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 — Defines the two depths, decision flow, and bespoke-depth process
• skills/hallmark/SKILL.md — Documents overall theme routing and references the custom-theme protocol
• 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 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.

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