What Polish Patterns Does Hallmark Use? A Complete Guide to HP1–HP4

Hallmark uses four optional "polish patterns" (HP1–HP4) to structurally refine hero sections: Vertical-rail title, Marquee-overflow, Cursor-spotlight, and Decorative-numeral.

Polish patterns in Nutlope/hallmark are structural modifications that alter headline layout, typography, or motion—not superficial decorations. Each hero section adopts one macrostructure (Marquee Hero, Stat-Led, Quote-Led, Letter, Photographic, or Clipped) and optionally applies a single polish pattern on top. This system ensures every design choice is intentional, documented, and audit-ready.

---

How Polish Patterns Fit Into Hallmark's Architecture

Understanding where polish patterns belong in the decision flow clarifies why Hallmark restricts them to one per hero.

The Decision Hierarchy

According to the source code in skills/hallmark/references/hero-enrichment.md, Hallmark processes hero construction in this order:

1. Select macrostructure (the foundational hero type)
2. Optionally apply enrichment (E1–E8 for color, motion, or surface treatments)
3. Optionally apply one polish pattern (HP1–HP4)
4. Apply space discipline rules

This flow is documented at lines 98–101 of hero-enrichment.md【hero-enrichment.md#L98-L101】. The critical constraint—"One polish pattern, max"—is enforced as a hard gate at lines 94–98【hero-enrichment.md#L94-L98】.

Stamping and Auditability

Every chosen pattern is permanently recorded in the CSS comment stamp. As shown in SKILL.md at line 86:

/* Hallmark · macrostructure: Marquee Hero …
 * polish: HP3 Cursor-spotlight (scoped to hero, reduced-motion fallback pinned at 50%/30%)
 */

This stamping mechanism ensures that polish pattern choices remain transparent and revisitable during design audits【SKILL.md#L86-L90】.

---

The Four Hallmark Polish Patterns (HP1–HP4)

Each pattern targets a specific structural problem and carries explicit usage guidelines.

---

HP1: Vertical-rail Title

A vertical word-mark anchors the hero alongside centered body content.

Attribute	Detail
Identifier	HP1
Core technique	writing-mode: vertical-rl with text-orientation: mixed
Best for	Centered or marquee-shaped heroes needing structural anchoring without rules or numerals
Avoid when	The headline is already large and centered—competing vertical axes create visual noise

Implementation

<header class="hero hero--rail">
  <p class="hero__rail" aria-hidden="true">
    STUDIO · 2026 · WORK · LETTERS
  </p>
  <div class="hero__body">
    <h1 class="hero__display">A working archive.</h1>
    <p class="hero__lede">Twelve years. Selected projects, in their own time.</p>
  </div>
</header>

.hero--rail {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2xl);
  padding: var(--space-2xl) var(--page-gutter);
  align-items: end;
}

.hero__rail {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  color: var(--color-ink-2);
}

@media (max-width: 60rem) {
  .hero--rail { grid-template-columns: 1fr; }
  .hero__rail { writing-mode: horizontal-tb; font-size: var(--text-xs); }
}

The rail collapses to horizontal on narrow viewports, preserving readability without breaking the grid【hero-enrichment.md#L81-L86】.

---

HP2: Marquee-overflow

The headline deliberately exceeds viewport boundaries, creating edge-bleeding visual tension.

Attribute	Detail
Identifier	HP2
Core technique	overflow-x: clip with white-space: nowrap and viewport-relative sizing
Best for	Playful genres (Brutal, Manifesto, Sport) with short titles (≤6 words)
Avoid when	Legal, informational, or accessibility-critical titles requiring full in-viewport readability

Implementation

<header class="hero hero--overflow">
  <h1 class="hero__display hero__display--xxl">
    STOP MAKING UI THAT LOOKS LIKE EVERYONE ELSE'S UI.
  </h1>
  <p class="hero__lede">Hallmark. A design skill that refuses defaults.</p>
</header>

.hero--overflow {
  overflow-x: clip;
  padding: var(--space-2xl) var(--page-gutter);
}

.hero__display--xxl {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4rem, 14vw, 14rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

@media (max-width: 60rem) {
  .hero__display--xxl {
    white-space: normal;
    font-size: clamp(2.5rem, 10vw, 5rem);
  }
}

The overflow-x: clip property (not hidden) permits the visual bleed while preventing scroll interference【hero-enrichment.md#L105-L112】.

---

HP3: Cursor-spotlight

A radial gradient tracks cursor position within the hero, creating subtle atmospheric depth.

Attribute	Detail
Identifier	HP3
Core technique	CSS custom properties (--mx, --my) updated via JavaScript pointermove
Best for	Atmospheric, modern-minimal SaaS pages with empty hero surface for animation
Avoid when	Cursor movement would obstruct readable content, buttons, or interactive elements

Implementation

<header class="hero hero--spotlight">
  <div class="hero__spotlight" aria-hidden="true"></div>
  <div class="hero__body">
    <h1 class="hero__display">Distributed tracing that explains itself.</h1>
    <p class="hero__lede">Open one trace. See the whole story.</p>
  </div>
</header>

.hero--spotlight {
  position: relative;
  isolation: isolate;
  padding: var(--space-2xl) var(--page-gutter);
  overflow: hidden;
}

.hero__spotlight {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 30%),
    color-mix(in oklch, var(--color-accent) 22%, transparent),
    transparent 60%);
  transition: background 200ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .hero__spotlight {
    transition: none;
    --mx: 50%;
    --my: 30%;
  }
}

const hero = document.querySelector('.hero--spotlight');

hero?.addEventListener('pointermove', e => {
  const r = hero.getBoundingClientRect();
  hero.style.setProperty('--mx', `${e.clientX - r.left}px`);
  hero.style.setProperty('--my', `${e.clientY - r.top}px`);
});

The prefers-reduced-motion media query pins the gradient at a static position for accessibility compliance【hero-enrichment.md#L126-L133】.

---

HP4: Decorative-numeral

A large semantic numeral (edition, year, chapter) occupies a corner, signaling versioning or chronology.

Attribute	Detail
Identifier	HP4
Core technique	Absolutely positioned oversized typography with aria-hidden semantics
Best for	Content with genuine edition numbers, issue dates, or versioned releases (magazines, journals, archives)
Avoid when	Numerals lack semantic meaning—arbitrary values like "42" without context constitute "slop" and are flagged

Implementation

<header class="hero hero--num">
  <p class="hero__eyebrow">Studio · Spring 2026</p>
  <h1 class="hero__display">A working archive.</h1>
  <p class="hero__lede">Twelve years. Selected projects, in their own time.</p>
  <span class="hero__num" aria-hidden="true">22</span>
</header>

.hero--num {
  position: relative;
  padding: var(--space-2xl) var(--page-gutter) var(--space-3xl);
  overflow: hidden;
}

.hero__num {
  position: absolute;
  right: var(--page-gutter);
  bottom: -0.15em;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(8rem, 22vw, 18rem);
  color: color-mix(in oklch, var(--color-ink) 8%, transparent);
}

@media (max-width: 60rem) {
  .hero__num {
    font-size: clamp(5rem, 26vw, 9rem);
    right: -0.1em;
  }
}

The negative bottom value and translucent color ensure the numeral reads as atmospheric rather than competing with the headline【hero-enrichment.md#L146-L154】.

---

Key Source Files for Polish Patterns

File Path	Purpose
skills/hallmark/references/hero-enrichment.md	Complete HP1–HP4 catalogue with intent, constraints, and code examples
skills/hallmark/references/macrostructures.md	Introduces polish patterns in the decision flow context (lines 13–17)【macrostructures.md#L13-L17】
skills/hallmark/SKILL.md	Top-level specification listing available patterns and stamping format
site/_tests/README.md	Real-world hero implementations for visual reference

---

Summary

• Hallmark defines four polish patterns—HP1 through HP4—each solving a specific structural layout challenge.

• Only one pattern may apply per hero, enforced by the "One polish pattern, max" gate in hero-enrichment.md.

• Patterns are structural, not decorative: they modify grid, motion, or typography rather than adding superficial ornament.

• Every selection is stamped in CSS comments for auditability, following the format established in SKILL.md.

• Each pattern includes accessibility fallbacks: responsive breakpoints, prefers-reduced-motion support, and semantic aria-hidden attributes where appropriate.

---

Frequently Asked Questions

What happens if I try to apply two polish patterns to one hero?

Hallmark's specification explicitly forbids this. The decision flow in hero-enrichment.md includes a hard gate at lines 94–98 that rejects any hero configuration attempting multiple polish patterns. This constraint preserves structural clarity and prevents visual cacophony.

Can polish patterns be used with any macrostructure?

Yes. Polish patterns are macrostructure-agnostic according to macrostructures.md【macrostructures.md#L13-L17】. However, certain combinations work better than others—the Vertical-rail title (HP1) particularly complements centered or marquee-shaped macrostructures that need anchoring without additional rules.

How does HP3 Cursor-spotlight respect accessibility preferences?

The CSS includes a prefers-reduced-motion: reduce media query that disables the gradient transition and pins the spotlight position at 50%/30%, eliminating motion entirely for users who request reduced animation【hero-enrichment.md#L126-L133】.

Why does HP4 Decorative-numeral ban arbitrary numbers like "42"?

Hallmark's design philosophy rejects "slop"—decoration without semantic purpose. The hero-enrichment.md specification flags numerals lacking genuine contextual meaning (edition, year, chapter, version) as problematic. Arbitrary numerals become pure ornament, violating Hallmark's principle that every element must carry structural or semantic weight【hero-enrichment.md#L146-L154】.

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