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

> Discover how Hallmark enforces typography rules in its slop test Gate 37. Learn about font limits, heading restrictions, and contrast requirements to combat AI noise.

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

---

**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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/typography.md). The current implementation uses:

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

```css
/* 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`](https://github.com/Nutlope/hallmark/blob/main/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

```css
/* 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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md) | Full 58-gate specification, including typography discipline |
| [`skills/hallmark/references/typography.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/typography.md) | Font catalog, pairing rules, scale system |
| [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) | Workflow documentation, slop-test integration |
| [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) | Runtime CSS custom property implementation |
| [`site/_tests/verbs/redesign/notes.md`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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.