# What Is the Hallmark Slop Test? A 58‑Gate Quality Framework for AI‑Generated UI

> Discover the Hallmark slop test, a 58-gate quality framework for AI generated UI. Prevent sloppy design patterns and ensure high quality UIs with this deterministic audit.

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

---

**The Hallmark slop test is a deterministic 58‑gate quality audit that prevents AI‑generated UI from exhibiting common "sloppy" design patterns.**

This test serves as the final gatekeeper for every page produced by Hallmark, an open‑source design system that enforces disciplined, human‑like craft on AI‑generated web interfaces. Running in `skills/hallmark/` in the Nutlope/hallmark repository, the slop test guarantees outputs avoid the tell‑tale artefacts that expose machine‑generated design.

## How the Hallmark Slop Test Works

The slop test operates through three sequential stages, all triggered before final page emission according to [`references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/references/slop-test.md).

### Pre‑Emit Self‑Critique

Hallmark first scores every design on six orthogonal axes:

1. **Philosophy**
2. **Hierarchy**
3. **Execution**
4. **Specificity**
5. **Restraint**
6. **Variety**

This critique is recorded in a stamp comment injected into the output, as seen in the generation pipeline.

### 58‑Gate Sweep

The core of the slop test runs 58 yes/no gates across nine categories. Each gate asks: *Does this problem exist in the output?*

- **Visual gates** – no gradient text, no pure black/white backgrounds, no centered‑hero stacks exceeding two elements (lines 30‑36)
- **Structural gates** – no reused macrostructures, no identical section spacing (lines 40‑42)
- **Micro‑interaction gates** – no `transition-all`, no multiple hover‑scale on unrelated elements, no overshoot easings without justification (lines 45‑48)
- **Variety gates** – macrostructure stamp must be present, no default Specimen fall‑through (lines 58‑60)
- **Implementation gates** – neutral colors require non‑zero chroma, accent usage limited, spacing values must follow the named scale, `focus-visible` styling required (lines 62‑68)
- **Hero enrichment gates** – video autoplay rules, background‑gradient limits, icon library consistency (lines 70‑78)
- **Diversification gates** – variation knobs must differ from previous outputs, accessibility labels on visual‑only SVGs (lines 80‑85)
- **Layout‑safety gates** – no horizontal scroll across 320‑1920 px, interactive bars vertically centered (lines 88‑93)
- **Typography gates** – maximum three font families, no italic headings, outlier font used ≤2 slots (lines 94‑100)

### Pass/Fail Rule

**All 58 gates must answer "no"** — meaning zero problems detected. A single "yes" triggers automatic revision. The final result appears in the preview block:

```

/* Slop test: 58 / 58 ✓ */

```

Failed tests surface as: `45 / 58 — fails: 12, 23, 37`

## Genre‑Aware Gate Overrides

The slop test is **not one‑size‑fits‑all**. According to lines 5‑6 in [`slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/slop-test.md), some gates carry overrides for Hallmark's four genres:

| Genre | Override Example |
|-------|----------------|
| Editorial | Stricter hierarchy rules, expanded typographic range |
| Atmospheric | Relaxed color restrictions, stricter motion limits |
| Modern‑minimal | Tighter spacing enforcement, reduced variety requirements |
| Playful | Expanded animation allowances, constrained color logic |

This contextual adaptation prevents false positives while maintaining anti‑slop discipline.

## Hallmark Slop Test Implementation in Code

### Recording Results in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js)

```javascript
// site/js/main.js – snippet showing the preview block stamp
const previewStamp = `
/* Hallmark · macrostructure: hero-stat-grid · genre: editorial · slop-test: 58 / 58 ✓ */
`;

```

The runtime code injects this stamp only after confirming all 58 gates pass.

### Programmatic Usage Pattern

```javascript
import { runSlopTest } from './slop-test';

// 1️⃣  Generate page (HTML + CSS)
const page = generateHallmarkPage(brief);

// 2️⃣  Pre-emit self-critique (scores P-F)
const critique = scorePreEmit(page);
addCritiqueStamp(page, critique);

// 3️⃣  Run the 58-gate slop test
const result = runSlopTest(page);

// 4️⃣  If any gate fails, iterate
while (!result.passed) {
  page = fixIssues(page, result.failedGates);
  result = runSlopTest(page);
}

// 5️⃣  Emit final page with passing stamp
addSlopTestStamp(page, result);
output(page);

```

> Note: The actual implementation lives inside Hallmark's skill engine; this pseudocode illustrates the logical flow derived from [`references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/references/slop-test.md).

### Gate Example: Eliminating Gradient Text

```css
/* ❌ Bad – gradient-text (fails gate 2) */
.hero__title {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  -webkit-background-clip: text;
  color: transparent;
}

/* ✅ Fixed – solid colour (passes gate 2) */
.hero__title {
  color: var(--color-primary);
}

```

Removing gradient text satisfies gate 2 as documented in the visual section (lines 30‑32).

## Key Source Files for the Hallmark Slop Test

| File | Role |
|------|------|
| [`references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/references/slop-test.md) | Master list of 58 gates, critique axes, and genre overrides |
| [`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md) | Design skill definition and slop test integration |
| [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js) | Runtime injection of slop‑test stamps into preview blocks |
| [`README.md`](https://github.com/Nutlope/hallmark/blob/main/README.md) | High‑level overview mentioning slop test purpose |
| [`site/_tests/verbs/audit/audit-report.md`](https://github.com/Nutlope/hallmark/blob/main/site/_tests/verbs/audit/audit-report.md) | Example failed slop‑test reports with gate counts |

All files reside in `skills/hallmark/` within the Nutlope/hallmark repository.

## Summary

- The **Hallmark slop test** comprises **58 deterministic gates** checking visual, structural, and implementation quality
- It runs as a **pre‑emit audit** after six‑axis self‑critique
- **All gates must pass** ("no" to every problem) before shipping
- **Genre overrides** adapt rules for editorial, atmospheric, modern‑minimal, and playful outputs
- Results appear in **preview block stamps** and trigger automatic revision on failure
- Source code in [`references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/references/slop-test.md) (lines 28‑100) defines the complete gate list

## Frequently Asked Questions

### How many gates does the Hallmark slop test include?

The slop test includes **58 gates** organized into nine categories: visual, structural, micro‑interaction, variety, implementation, hero enrichment, diversification, layout safety, and typography. Every gate must return "no" for the page to pass.

### What happens if a page fails the Hallmark slop test?

When any gate returns "yes," Hallmark **automatically revises** the offending elements — whether adjusting typography, removing gradient text, adding ARIA labels, or fixing layout issues. It then **re‑runs the full 58‑gate suite** until achieving `58 / 58 ✓` before final emission.

### Is the Hallmark slop test the same for all design genres?

No. The test is **genre‑aware**: while universal gates apply to all outputs, specific gates carry **overrides** for the four Hallmark genres (editorial, atmospheric, modern‑minimal, playful). This prevents inappropriate restrictions on legitimate design variations.

### Where is the Hallmark slop test defined in the codebase?

The authoritative gate list lives in [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md), with integration logic in [`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md) and runtime stamp injection in [`site/js/main.js`](https://github.com/Nutlope/hallmark/blob/main/site/js/main.js). These files collectively implement the test pipeline in the Nutlope/hallmark repository.