How Hallmark Handles Typography in Its Slop Test: A Deep Dive Into Gate 37

Hallmark enforces strict typography discipline through gate 37 of its 58-gate slop test, limiting pages to three font families maximum, banning italic headings, and requiring 300+ unit weight contrast to eliminate AI-generated visual noise.

The Hallmark project by Nutlope approaches typography not as decoration but as a quality gate that prevents "AI-slop"—the telltale signs of machine-generated design. This article examines how the typography discipline in skills/hallmark/references/slop-test.md validates every generated page against hard rules before emission.

---

The 58-Gate Slop Test Architecture

Hallmark runs its slop test during pre-emit self-critique, catching typography violations before visual or interaction gates are evaluated. The test is structured as a set of disciplines, with Typography discipline occupying gate 37 and its sub-gates.

According to the source code in skills/hallmark/SKILL.md, any gate failure reports a specific code (e.g., "gate 37 FAIL") and aborts the emit, forcing redesign or fallback to compliant configuration.

---

Gate 37: The Three-Font-Family Rule

The cornerstone of Hallmark's typography enforcement is strict family limitation:

• Display face (--font-display): Headings, hero elements
• Body face (--font-body): Prose, UI elements
• Optional outlier (--font-outlier): Wordmarks, hero stats

This "2 + 1" rule is defined in skills/hallmark/references/typography.md. More than three families triggers automatic rejection—multiple type families are a classic LLM-generated tell that dilutes visual hierarchy.

Outlier Usage Limits (Gate 37a)

The outlier face may appear in at most two slots across the entire page. This prevents the outlier from becoming a de-facto third family through overuse.

---

Banned Defaults and Curated Palettes

Hallmark explicitly forbids default web-font stacks unless requested:

Banned defaults	Why excluded
Inter, Roboto, Open Sans	Over-used by LLMs; signal "unconsidered" design

Allowed families are enumerated in typography.md. The current implementation uses:

/* source: site/css/tokens.css */
:root {
  --font-display:  "Fraunces", ui-serif, Georgia, serif;
  --font-body:     "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-outlier: "Geist Mono", ui-monospace, monospace;
}

Forcing a curated palette pushes output toward designer-like aesthetic discipline.

---

Weight Contrast and Hierarchy

Display fonts must contrast body weight by at least 300 units:

/* Compliant: 700 vs 400 = 300 unit contrast */
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;  /* display */
}

.body-text {
  font-family: var(--font-body);
  font-weight: 400;  /* body */
}

A smaller gap reads as "default" styling; strong contrast signals intentional hierarchy.

---

Anti-Slop Rules: Italics and Sizing

No Italic Headings (Gate 37b)

Any heading or display type must not use font-style: italic. Italic display headings are an AI shortcut; emphasis should come from weight, color, or underline instead.

Hero Headline Constraints

• Size matched to copy length per typography.md headline-sizing table
• Hard cap at 5.5 rem (~88px)
• Prevents forced line-breaks and visual clutter

---

Spacing and Measure Controls

Property	Rule	Rationale
Line-height (display)	1.05–1.2	Tight vertical rhythm
Tracking (display)	-0.02em to -0.04em	Optical tightening for large type
All-caps line-height	≥ 1.0	Prevents "cap-collision" (gate 55)
Measure (body)	45–75 characters (max-width: 65ch)	Comfortable reading, prevents choppy columns

---

Complete Compliant Example

/* Hero heading — passes all typography gates */
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;               /* 300+ contrast vs body 400 */
  font-size: clamp(2.75rem, 5vw + 1rem, 5.25rem); /* under 5.5rem cap */
  line-height: 1.1;               /* tight but readable */
  letter-spacing: -0.03em;        /* within tracking range */
  /* NO font-style: italic — would trigger gate 37b */
}

/* Body text — comfortable measure */
.prose {
  font-family: var(--font-body);
  font-weight: 400;
  max-width: 65ch;                /* 45-75 character measure */
}

/* Permitted outlier usage — wordmark only */
.wordmark {
  font-family: var(--font-outlier);
  font-weight: 600;
}

Any additional font-family declaration or italic heading would trigger gate 37 failure and block emit.

---

Validation Pipeline in Practice

1. Token definition: CSS custom properties in site/css/tokens.css
2. Linting: Scanner counts font-family declarations and checks outlier slots
3. Gate evaluation: Failures report specific gate codes
4. Pass-through: Typography clearance enables subsequent visual and interaction checks

This architecture appears in action in site/_tests/verbs/redesign/notes.md, where test output shows "enrichment: none (typography only)"—demonstrating slop-test enforcement on real builds.

---

Key Files Reference

File	Purpose
skills/hallmark/references/slop-test.md	Full 58-gate specification, including typography discipline
skills/hallmark/references/typography.md	Font catalog, pairing rules, scale system
skills/hallmark/SKILL.md	Workflow documentation, slop-test integration
site/css/tokens.css	Runtime CSS custom property implementation
site/_tests/verbs/redesign/notes.md	Concrete test case showing enforcement

---

Summary

• Hallmark's slop test runs pre-emit to catch typography violations early
• Gate 37 enforces maximum three font families with strict outlier limits
• Italic headings are banned; weight, color, and underline provide emphasis instead
• 300+ unit weight contrast and 5.5rem size cap enforce intentional hierarchy
• Tight line-height, negative tracking, and 65ch measure complete the discipline
• Violations trigger automatic revision before visual gates are evaluated

---

Frequently Asked Questions

What happens if a Hallmark page uses four font families?

The page fails gate 37 and emits a "gate 37 FAIL" report. The emit aborts, forcing redesign or fallback to compliant configuration. The slop test runs early to prevent propagation of typography errors into visual and interaction evaluation.

Why does Hallmark ban common fonts like Inter and Roboto?

These defaults are over-used by LLMs and signal unconsidered design. Hallmark's typography.md specifies a curated palette (currently Fraunces, Geist, Geist Mono) to push output toward deliberate, designer-level choices.

How does the outlier font rule actually work?

The outlier (--font-outlier) may appear in at most two CSS slots across the page. This prevents it from becoming a de-facto third family. Typical usage: a wordmark and one hero statistic. A third appearance triggers gate 37a failure.

Where is the headline size cap defined?

The 5.5 rem (~88px) maximum and copy-length-based sizing table live in skills/hallmark/references/typography.md. The cap prevents oversized headlines that force awkward line-breaks—a common AI failure mode detected in gate 37 evaluation.

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