# 10 Visual Anti-Patterns Hallmark's 58-Gate Slop Test Detects

> Discover 10 visual anti-patterns Hallmark's 58-gate slop test detects to ensure handcrafted page design. Learn about font families, decorative elements, metrics, and UI chrome.

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

---

**Hallmark's slop test runs 58 gates to block visual anti-patterns including excessive font families, decorative-without-purpose elements, invented metrics, and re-drawn UI chrome, ensuring generated pages look handcrafted rather than AI-generated.**

Hallmark is an open-source design generation system maintained by Nutlope that enforces a strict "anti-slop" discipline through automated quality gates. Its 58-gate slop test scans every generated page for specific **visual anti-patterns** that indicate low-quality or AI-generated design. According to the repository's [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md) file, each gate represents a hard rule that must pass before final output approval.

## Typography and Visual Noise Violations

The slop test first eliminates typographic inconsistency and gratuitous decoration that creates visual clutter without functional purpose.

### Excessive Font Families

Hallmark flags any page utilizing more than three distinct `font-family` values as a violation. The test considers display, body, and at most one outlier font acceptable; any additional families trigger a failure.

```css
/* Fails slop test – four families */
:root {
  --font-display: "Inter";
  --font-body: "Helvetica";
  --font-mono: "Courier New";
  --font-outlier: "Playfair Display";
}

/* Passes – maximum three families */
:root {
  --font-display: "Inter";
  --font-body: "Helvetica";
  --font-outlier: "Playfair Display";
}

```

### High-Contrast Decorative Strokes (Gate 35)

Gate 35 specifically targets highlight bands, underlines, or accent strokes that sit at the text baseline or exceed 5% of the viewport width. These high-contrast decorative elements often appear as artificial "marker pen" effects created with linear gradients.

```css
/* Violation – excessive decorative stroke */
mark {
  background: linear-gradient(to bottom, transparent 38%, var(--accent) 38%, var(--accent) 92%, transparent 92%);
}

```

## Content Authenticity Violations

The test enforces factual integrity and rejects synthetic UI elements that mimic real data or device interfaces.

### Invented Metrics

Hallmark flags any numbers or percentage claims that the user never supplied, such as "Trusted by +47% of teams." These fabricated statistics attempt to manufacture social proof without valid data.

```html
<!-- Fails – invented metric -->
<p>Trusted by +47% of teams</p>

<!-- Passes – placeholder for real data -->
<p>Trusted by <span class="placeholder">—</span> teams <span class="note">[metric to confirm]</span></p>

```

### Re-Drawn UI Chrome

The slop test detects fake browser bars, phone frames, code-block windows, or IDE chrome built purely with HTML/CSS/SVG. Hallmark requires real screenshots instead of CSS-drawn mock interfaces.

```html
<!-- Fails – fake browser bar -->
<div class="chrome-mock"><span class="dot"></span></div>

<!-- Passes – real screenshot -->
<figure class="screenshot">
  <img src="app.png" alt="App screenshot">
</figure>

```

### Decorative-Without-Purpose Elements

Random decorative blobs, ornamental cursors, or gratuitous gradients that lack semantic anchoring trigger immediate failure. If an element serves purely aesthetic function without context (such as a random "42" floating in a corner), the slop test rejects it.

```html
<!-- Violation – decorative blob without purpose -->
<div class="decorative-blob"></div>

```

## Layout and Structural Anti-Patterns

Beyond visual style, the test validates spatial relationships and responsive behavior across viewport widths from 320px to 1920px.

### Section Eyebrow / Tag Placement (Gate 54)

Gate 54 flags eyebrow labels or tags positioned beside headings on the same horizontal line (e.g., "01 · THE TOUR" placed next to "Features"). This specific layout pattern indicates templated AI generation.

```html
<!-- Fails gate 54 -->
<header>
  <span class="eyebrow">01 · THE TOUR</span>
  <h2>Features</h2>
</header>

```

### Sticky-Element Bleed (Gate 56)

Any element other than the top-level navigation that uses `position: sticky; top: 0` fails this gate. These elements overlap the navigation bar, creating layout conflicts.

```css
/* Fails – overlaps nav */
.sticky-section {
  position: sticky;
  top: 0;
}

/* Passes – offsets by nav height */
:root {
  --banner-height: 56px;
}
.sticky-section {
  position: sticky;
  top: var(--banner-height);
}

```

### Hero Fit and Shape Violations (Gate 44)

Gate 44 validates hero section padding and overflow. Heroes with excessive padding that floats content off-screen or content that overflows the fold trigger a failure.

```css
/* Violation – content bleeds or floats */
.hero {
  padding-block-start: 2rem;
  padding-block-end: 0.5rem;
}

```

### Input-Height Mismatch (Gate 109)

Form inputs must match the height of adjacent buttons. Gate 109 detects mismatched dimensions such as a 38px input paired with a 44px button.

```css
/* Fails gate 109 */
.input {
  height: 38px;
}
.button {
  height: 44px;
}

```

### Horizontal Scroll (Gate 34)

The test fails any horizontal scrolling detected at any viewport width between 320px and 1920px. This includes containers with `overflow-x: auto` or unintended horizontal overflow.

```css
/* Violation */
.container {
  overflow-x: auto;
}

```

## How the Slop Test Enforces These Rules

According to [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md), the enforcement pipeline operates in three distinct phases:

1. **Pre-emit self-critique** – Before gate evaluation, Hallmark scores the output across six axes: Philosophy, Hierarchy, Execution, Specificity, Restraint, and Variety.

2. **Gate sweep** – After rendering, the system inspects HTML and CSS against all 58 gates. Any affirmative detection (violation present) marks that gate as failed.

3. **Automatic fixes** – Upon failure, Hallmark revises the output (removing extra fonts, deleting decorative elements, or replacing mock chrome with real screenshots) and re-runs the test until achieving **58/58 ✓**.

## Key Source Files

The following files in the Nutlope/hallmark repository define the complete anti-pattern specification:

- **[`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md)** – Complete list of all 58 gates including visual anti-patterns and genre-specific overrides.
- **[`skills/hallmark/references/anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/anti-patterns.md)** – Canonical descriptions of visual anti-patterns referenced during gate evaluation.
- **[`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md)** – High-level documentation of the anti-slop discipline and integration of the slop test into the generation pipeline.

## Summary

- **Hallmark's slop test** evaluates generated pages against 58 specific gates to detect AI-generated visual artifacts.
- **Typography violations** include excessive font families (>3) and high-contrast decorative strokes exceeding 5% viewport width.
- **Content violations** cover invented metrics, re-drawn UI chrome, and decorative elements without semantic purpose.
- **Layout violations** encompass sticky-element bleed, improper eyebrow placement (gate 54), hero fit issues (gate 44), input-height mismatch (gate 109), and horizontal scroll (gate 34).
- The system automatically regenerates content until all gates pass, enforcing a handcrafted aesthetic standard.

## Frequently Asked Questions

### What happens when a gate fails the slop test?

When Hallmark detects a visual anti-pattern during the gate sweep, it automatically revises the generated code to eliminate the violation. The system removes offending elements (such as extra font declarations or decorative blobs), replaces synthetic content with placeholders or real assets, and re-runs the full 58-gate test until achieving a perfect pass.

### Why does Hallmark limit font families to three?

The three-font limit enforces **Restraint** and **Variety** balance across the six scoring axes. According to the [`anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/anti-patterns.md) reference, exceeding three distinct families (display, body, mono, plus outliers) creates visual noise characteristic of AI-generated templates that randomly combine font categories without hierarchical purpose.

### How does the slop test distinguish between real and re-drawn UI chrome?

The test scans for HTML structures containing specific CSS classes and SVG patterns that mimic browser interfaces (dots for window controls, fake address bars). Hallmark flags these as "Re-drawn UI Chrome" violations because they represent artificial interface elements rather than authentic screenshots or semantic HTML components.

### Can the slop test detect responsive layout issues?

Yes. Gate 34 specifically checks for horizontal scrolling across all viewport widths from 320px to 1920px, while Gate 56 validates sticky positioning against navigation overlap. The test evaluates responsive behavior to ensure layouts remain intact across device sizes without overflow or z-index conflicts.