Slop Test Gates Related to Typography: 4 Examples in the Hallmark Repository

The Hallmark repository defines four typography slop test gates in skills/hallmark/references/slop-test.md that limit font families to three, restrict outlier usage to two slots, ban italic headings, and enforce minimum line-height for all-caps display text.

The Nutlope/hallmark project is an open-source design system that uses automated slop tests to catch typographic sloppiness before pages ship. Its master list of slop test gates related to typography lives in skills/hallmark/references/slop-test.md and cross-references skills/hallmark/references/typography.md for the underlying design rules. Understanding these gates helps developers maintain a disciplined, readable typographic vocabulary free of generic AI-generated styling.

The Four Typography Slop Test Gates in slop-test.md

Hallmark's slop test evaluates a series of gates that must all return "no" for a page to pass. The most relevant gates for typography are defined between lines 96 and 111 of the reference file.

Gate 37: The Three-Font Family Limit

In skills/hallmark/references/slop-test.md at line 96, gate 37 asks: "Does the page use more than three distinct font-family families?" Hallmark enforces a strict 2 + 1 rule—one display font, one body font, and one optional outlier font. Exceeding this threshold signals an uncontrolled design and immediately fails the slop test.

Gate 38: Outlier Face Slot Restriction

Gate 38, defined near line 98, checks whether the outlier face appears in more than two slots on the page. The outlier—often reserved for a wordmark or hero statistic—is meant to serve a single typographic role. Reusing it beyond two locations effectively turns it into a third font family, violating the 2 + 1 budget.

Gate 38a: Italic Heading Detection

At line 100, gate 38a flags any heading or display type set in italic. According to the Hallmark source code, italic headings are considered a strong AI-generation tell. Headings should remain roman and convey hierarchy through weight, color, or underline instead.

Gate 55: All-Caps Line-Height Collision

Gate 55 near line 111 targets all-caps display heads whose line-height falls below 1.0. Uppercase headings need at least a line-height of 1.0—and preferably 1.02 to 1.08—to prevent cap collisions when lines wrap. Falling below this threshold is classified as typographic slop.

Underlying Rules in typography.md

The slop-test gates are grounded in the canonical guidelines found in skills/hallmark/references/typography.md. Key policies include:

• The 2 + 1 rule: At most three font families may appear on a page—display, body, and optional outlier (lines 13–16).
• Outlier constraints: An outlier may appear in no more than two places and must serve a single typographic role (lines 27–33).
• Font-family bans: Common web fonts such as Inter, Roboto, and Open Sans are prohibited unless deliberately chosen (lines 38–43).
• All-caps line-height minimum: Uppercase display headings must use line-height ≥ 1.0 (lines 42–44).

CSS Examples That Pass the Typography Gates

The following snippets demonstrate styles that satisfy the slop test gates. In production, these font tokens are consumed in site/css/theme.css, while site/js/main.js handles dynamic theme switching to keep the correct families active at runtime.

Respecting the 2 + 1 Font Rule

/* ✅ Correct: exactly three families – display, body, outlier */
:root {
  --font-display:  "Fraunces", ui-serif, Georgia, serif;   /* headings, hero */
  --font-body:     "Geist", ui-sans-serif, system-ui, sans;/* prose, UI */
  --font-outlier: "Geist Mono", ui-monospace, monospace;  /* wordmark / stat */
}

/* Apply the families */
h1, .hero__title   { font-family: var(--font-display); }
p, .copy           { font-family: var(--font-body); }
.wordmark, .hero__stat { font-family: var(--font-outlier); }

Only three distinct families are declared, and the outlier is limited to exactly two slots, satisfying gates 37 and 38.

Keeping Headings Roman

/* ✅ Correct: headings stay roman; emphasis via weight or colour */
h1, h2, h3 {
  font-weight: 700;               /* strong contrast to body */
  font-style: normal;             /* never italic */
}

/* If you need emphasis, use colour or underline instead */
h1.emph { color: var(--color-accent); text-decoration: underline; }

This avoids font-style: italic on any heading, passing gate 38a.

All-Caps Display with Safe Line-Height

/* ✅ Correct: caps + sufficient line‑height */
.hero__display {
  text-transform: uppercase;
  line-height: 1.04;              /* ≥ 1.0 prevents cap collision */
  font-size: var(--text-display);
}

Setting line-height to 1.04 meets the ≥ 1.0 requirement demanded by gate 55.

Limiting Outlier Usage to Two Slots

/* ✅ Correct: outlier only on wordmark and hero stat */
.wordmark { font-family: var(--font-outlier); }
.hero__stat { font-family: var(--font-outlier); }

/* All other text uses body or display families */

The outlier appears exactly twice, complying with gate 38.

Summary

• Hallmark's slop test gates related to typography are defined in skills/hallmark/references/slop-test.md and enforced by skills/hallmark/references/typography.md.
• Gate 37 caps distinct font families at three (display + body + optional outlier) to prevent uncontrolled design.
• Gate 38 restricts the outlier face to no more than two slots, preserving its single-purpose role.
• Gate 38a rejects italic headings, requiring roman type with weight or color emphasis instead.
• Gate 55 mandates line-height ≥ 1.0 for all-caps display text to avoid glyph collisions.

Frequently Asked Questions

What is the 2+1 font rule in Hallmark?

The 2+1 font rule is Hallmark's core typography constraint that limits any page to a maximum of three font families: one display font, one body font, and one optional outlier font. This rule is codified in skills/hallmark/references/typography.md at lines 13–16 and enforced by gate 37 in the slop test.

Why does Hallmark flag italic headings as slop?

Italic headings are flagged by gate 38a because they are considered a strong indicator of AI-generated design slop. Hallmark requires headings to remain roman and express hierarchy through weight, color, or underline rather than italic style.

How many times can an outlier font appear on a Hallmark page?

An outlier font may appear in no more than two slots on a page according to gate 38 and the outlier constraints in skills/hallmark/references/typography.md lines 27–33. Using it in additional locations violates the 2+1 font budget and fails the slop test.

What line-height should all-caps display headings use?

All-caps display headings must use a line-height of at least 1.0, with the Hallmark typography reference recommending 1.02–1.08. Gate 55 in skills/hallmark/references/slop-test.md specifically checks for this to prevent cap collisions on wrapped lines.

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