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

> Discover Hallmark's four polish patterns HP1–HP4: Vertical-rail title, Marquee-overflow, Cursor-spotlight, and Decorative-numeral. Learn how to structurally refine hero sections with this complete guide.

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

---

**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](https://github.com/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md) at line 86:

```css
/* 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

```html
<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>

```

```css
.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

```html
<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>

```

```css
.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

```html
<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>

```

```css
.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%;
  }
}

```

```javascript
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

```html
<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>

```

```css
.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`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/hero-enrichment.md) | Complete HP1–HP4 catalogue with intent, constraints, and code examples |
| [`skills/hallmark/references/macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures.md) | Introduces polish patterns in the decision flow context (lines 13–17)【macrostructures.md#L13-L17】 |
| [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) | Top-level specification listing available patterns and stamping format |
| [`site/_tests/README.md`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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】.