Slop Test Gates in Hallmark: 58 Quality Checks for AI-Generated UI Design

The Hallmark design system ships with 58 slop test gates across seven categories—visual, structural, micro-interactions, variety, implementation, hero enrichment, and layout safety—to catch common AI-generated design flaws before they reach production.

Hallmark, an open-source design system by Nutlope, treats "slop" as any visual, structural, or interaction pattern that signals AI-generated, unrefined work. The slop test runs as a mandatory checklist against every page, ensuring outputs feel handcrafted rather than templated. This article breaks down representative examples from the full 58-gate list defined in [slop-test.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md), organized by category with implementation guidance.

Visual Design Gates (1–7)

These gates enforce Hallmark's baseline visual language and prevent genre-breaking choices.

Gate 1: Font Choice Validation Blocks unauthorized typeface selections outside the locked token system.

Gate 4: Nested Cards Prohibition Prevents card-within-card patterns that create visual noise and depth confusion.

Gate 6: Hero Shape Centring Flags hero elements that default to dead-center alignment—a common AI "tell" that ignores asymmetric composition conventions.

Gate 7: Pure Black/White Usage Requires neutrals to carry minimal chroma; oklch(0% 0 0) and oklch(100% 0 0) are forbidden except in specific high-contrast accessibility contexts.

/* ✅ Gate 7 pass: neutral with intentional chroma */
:root {
  --color-surface: oklch(95% 0.01 260);
  --color-ink: oklch(15% 0.02 260);
}

Structural Variety Gates (8–9, 20–21)

These gates combat template fatigue by forcing macro-structural differentiation.

Gate 8: Forbidden Macro-Structure Reuse Blocks reusing identical section rhythms across pages. Each output must demonstrate fresh information architecture.

Gate 20: Missing Macro-Structure Stamp Requires explicit structural fingerprinting; pages cannot ship without declared archetype and variation settings.

Gate 21: Specimen Default Prevention Prevents silent fallback to the Specimen macro-structure when no specific structure is requested—a common AI shortcut.

Micro-Interaction Gates (10–19)

Motion and hover behavior gates prevent the "busy-AI" feel of blanket animations.

Gate 10: transition-all Overuse Flags any transition: all declaration, forcing explicit property targeting for performance and predictability.

Gate 12: Multiple Simultaneous Hover Effects Restricts hover states to one transform or color change; compound effects (scale + shadow + color shift) are blocked.

Gate 14: Animating Layout Properties Prevents width, height, top, left animations that trigger main-thread layout recalculation.

Gate 19: Placeholder Copy Detection Scans for "lorem ipsum," "example text," or generic label patterns that signal unfinished content.

/* ❌ Gate 10 fail: over-eager transition */
.card {
  transition: all 0.3s ease;
}

/* ✅ Gate 10 pass: explicit, performant transition */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

Implementation Precision Gates (22–27)

These gates enforce token discipline and measurable standards.

Gate 22: Zero-Chroma Neutrals Requires named neutrals in non-minimal themes to carry C > 0 in OKLCH notation. The [typography.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/typography.md) specification governs acceptable chroma ranges.

Gate 24: Spacing Scale Adherence All margin, padding, and gap values must resolve to named tokens (--space-xs through --space-3xl); arbitrary pixel values fail.

Gate 25: Prose Width Constraints Body text blocks must fall between 45–75 characters. CSS implementation uses max-width: 65ch with min-width guards:

.prose {
  min-width: 45ch;
  max-width: 65ch;
  margin-inline: auto;
}

Gate 27: Reduced-Motion Fallbacks All animations require @media (prefers-reduced-motion) overrides as defined in [layout-and-space.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/layout-and-space.md).

Hero Enrichment Gates (28–31)

Hero regions receive special scrutiny for asset quality and purposeful decoration.

Gate 28: Autoplay Video with Sound Blocks any <video autoplay> lacking muted attribute; sound-on-autoplay violates user expectation.

Gate 30: Mixed Icon Libraries Enforces single-library consistency. The [hero-enrichment.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/hero-enrichment.md) reference mandates Lucide as default:

<!-- ✅ Gate 30 pass: unified Lucide usage -->
<svg class="lucide lucide-star" aria-hidden="true">
  <use href="#star"/>
</svg>

<!-- ❌ Gate 30 fail: emoji-as-icon -->
<span>⭐</span>

Gate 31: Lottie Default Prevention Requires SVG justification before Lottie deployment; unnecessary JSON animation payloads fail this gate.

Layout Safety Gates (34–36)

These gates guarantee responsive integrity from 320 px to 1920 px viewports.

Gate 34: Horizontal Scroll Prevention The global reset in Hallmark's base CSS enforces this at the root:

html,
body {
  overflow-x: clip; /* ✅ Gate 34 pass */
}

Gate 36: Flex Row Vertical Centering Mixed-height flex rows require explicit align-items: center or differentiated alignment strategy; accidental top-alignment of varied cards fails.

Typography Discipline Gates (37–38a)

Drawing from the "2 + 1" rule in [typography.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/typography.md):

Gate 37: Font Family Limit Maximum two families for interface, one for display/brand—total three. Any fourth family fails.

Gate 38a: Italic Headings Prohibition Display and heading styles must use roman weight variation, not italic, for emphasis.

Input State Gates (39–41)

Form interaction gates ensure robust keyboard accessibility.

Gate 39: Border-Width Focus Changes Prevents focus states that alter element size through border-width modification, which causes layout shift.

Gate 40: Contrast Compliance Requires WCAG 2.1 AA minimum (4.5:1 for body, 3:1 for large text) plus APCA readability scores. The [SKILL.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) token system enforces this through required --color-accent-ink pairing:

.button-primary {
  background: var(--color-accent);
  color: var(--color-accent-ink); /* Mandatory contrast pair */
}

Gate 41: Disabled Opacity-Only Styling Blocks opacity: 0.5 as sole disabled indicator; explicit background-color and cursor changes required.

Chrome Customization Gates (42–47)

These gates prevent generic AI navigation, footer, and content patterns.

Gate 42: Default AI Navigation Patterns Blocks recognizable "AI aesthetic" nav layouts: mega-menu-with-avatars, floating pill navigation, or three-column footer grids without customization.

Gate 46: Honest Copy Validation Scans for invented metrics ("improved efficiency by 340%"), fake testimonials, or unverifiable statistics per [anti-patterns.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/anti-patterns.md).

Gate 47: Re-drawn UI Chrome Prohibits fabricated browser window mockups, terminal screenshots, or IDE interfaces that misrepresent actual functionality.

Token & Responsive Gates (48–57)

Final gates enforce system integrity and mobile robustness.

Gate 48: Inline Value Prohibition All color and font declarations must reference design tokens; hex codes or font-family strings outside -- prefixed variables fail.

Gate 49: Responsive Clickable Safety Button and nav link text must never wrap. Implementation uses:

.button-primary {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Gate 50: 1fr Image Tracks CSS Grid grid-template-columns: 1fr 1fr with direct image children fails; explicit minmax() or aspect-ratio containers required to prevent overflow.

Gate 57: Catalog Theme Override Lock After any DNA study completion, catalog-theme-specific overrides are frozen; further modifications require explicit audit trail.

Running the Slop Test

The slop test gates are documented as a manual checklist in [slop-test.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md). Integration into build pipelines is possible through the gate numbering system—each numbered item can be extracted for automated linting or CI/CD enforcement.

Summary

• Hallmark's 58 slop test gates catch AI-generated design flaws across visual, structural, interaction, and implementation dimensions.
• Token-driven enforcement appears in gates 22, 24, 48, and throughout—arbitrary values are systematically rejected.
• Accessibility is mandatory, not optional: reduced-motion (gate 27), contrast (gate 40), and semantic markup (gate 33) are blocking checks.
• Mobile integrity receives dedicated coverage (gates 50–57) for edge cases from text wrapping to sticky element conflicts.
• Documentation cohesion: [slop-test.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md) serves as the canonical reference, with specialized rules distributed across typography, layout, anti-patterns, and hero enrichment files.

Frequently Asked Questions

What defines "slop" in the Hallmark design system?

Slop refers to any visual pattern, interaction behavior, or structural choice that signals unrefined, AI-generated output—such as dead-center heroes, gradient text, generic navigation templates, or placeholder copy. The 58 gates systematically identify and block these patterns.

Can the slop test gates be automated?

The gates are currently documented as a manual checklist in slop-test.md, but their numbered, discrete structure supports automation. Teams can implement CSS linting for token compliance, contrast checking for gate 40, and static analysis for placeholder copy detection.

Why does Hallmark forbid pure black and white?

Pure oklch(0% 0 0) black and oklch(100% 0 0) white create harsh contrast jumps and appear artificial in digital contexts. Gate 7 requires minimal chroma injection—typically C: 0.01–0.03—to achieve more natural, harmonious neutrals that align with print and environmental design conventions.

How does the slop test prevent template fatigue?

Gates 8, 20, and 21 enforce macro-structural variety by blocking forbidden structure reuse, requiring explicit archetype stamping, and prohibiting silent fallback to the catch-all Specimen layout. This ensures each page carries distinct information architecture rather than repeating generic AI templates.

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