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

> Explore 58 slop test gates in Hallmark AI design system. Ensure UI quality with checks for visual, structural, and layout flaws before production. Learn about AI design quality control.

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

---

**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/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.

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

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

```css
.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/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/hero-enrichment.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/hero-enrichment.md) reference mandates Lucide as default:

```html
<!-- ✅ 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:

```css
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/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/SKILL.md)](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) token system enforces this through required `--color-accent-ink` pairing:

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

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