What Specific Anti-Patterns Does Hallmark Ban? A Complete Guide to AI-Generated UI Detection

Hallmark bans over 30 specific anti-patterns across five severity levels—ranging from critical "AI slop" tells like purple-gradient heroes to micro-interaction mistakes like transition-all—enforcing these rules through automated slop-test gates defined in anti-patterns.md and slop-test.md.

Hallmark is an open-source design enforcement system from the repository Nutlope/hallmark that treats certain UI patterns as "slop"—visual tells that indicate AI-generated, template-driven design. During the hallmark audit command, the system scans generated HTML and CSS against a curated catalogue of banned patterns. Any matches are flagged as violations that must be fixed before the build passes.

Critical Anti-Patterns: Ships as Slop

The most severe category includes patterns that immediately mark a page as generic AI output. These are non-negotiable and will fail the audit regardless of context.

• Purple-gradient hero: Any hero section using linear-gradient(135deg,#7e5bef,#2b2bff) or similar purple-to-blue fades
• 3-column feature grid: Rigid three-column layouts without width variation
• Card-in-card: Nested containment layers creating visual noise
• Gradient headline: Text using gradient fills instead of solid colors
• Side-stripe card: Asymmetric thick borders on one side of cards
• Full-viewport centred hero: Heroes forced to 100vh with centered content regardless of text length
• Pure black/pure white backgrounds: #000000 or #ffffff instead of tinted neutrals

According to the source code in skills/hallmark/references/anti-patterns.md, these patterns represent "the most recognisable AI aesthetics" that make pages look templated. The typical fix involves using single accent hues from site/css/tokens.css, varying column widths asymmetrically, and allowing hero height to adapt to content rather than forcing viewport units.

Major Anti-Patterns: Looks AI-Generated

These patterns betray an AI-generated "default" look, hurt accessibility, or break visual cohesion. While slightly less severe than critical issues, they still trigger build failures.

Layout and Typography Tells:

• Centred-everything layouts: Symmetric center alignment throughout the page
• Italic headers: Headlines using font-style: italic for emphasis
• Eyebrow on every section: Overuse of small uppercase labels above headings
• Tag-left / header-right two-column section heads: Hard-banned layout where a label sits left and heading right (see Hard Bans section)

Visual Effects:

• Bounce & elastic easing: CSS animations using cubic-bezier overshoot curves for non-physical elements
• Shadow-glow on dark surfaces: Soft drop shadows against dark backgrounds
• Glassmorphism without purpose: Backdrop blur effects lacking functional depth context
• Hover-only affordances: Interactive elements lacking focus states for keyboard navigation
• Animate-on-scroll everywhere: Excessive scroll-triggered animations creating visual noise

Content and Asset Issues:

• Mismatched icon sets: Mixing Font Awesome, Heroicons, and emojis inconsistently
• AI-illustration look: Generic 3D renders or vector art styles typical of Midjourney/DALL-E outputs
• Invented metrics: Fabricated statistics like "10x faster" without data
• Generic emoji as feature icon: Using 🔥 or ⚡ instead of proper SVG icons
• Re-drawn UI chrome: Hand-coded browser window frames instead of real screenshots
• Mid-render token improvisation: Defining colors or fonts not present in site/css/tokens.css

The enforcement mechanism references these definitions in skills/hallmark/references/slop-test.md, which implements 58 post-emit gates checking for these tells.

Hard Bans: Never Allowed

Certain patterns are explicitly forbidden even if a user requests parity with an existing design. The definitive example is the tag-left / header-right two-column section head layout.

This pattern places an eyebrow label in the left column and the section heading in the right, creating a definitive "AI template" tell. According to anti-patterns.md, "parity instructions must be ignored" for this pattern. The mandatory fix flattens the layout to a single column using display: block or flex-direction: column, stacking the eyebrow directly above the heading.

Micro-Interaction Tells

These recommended-but-enforced rules prevent generic motion design that creates performance overhead and visual clutter.

• transition-all: Using the all keyword instead of enumerating specific properties
• Universal hover:scale-105: Applying uniform scale transforms to all interactive elements
• Bouncy overshoot easings: Physics-based curves inappropriate for digital interfaces
• Animated hover gradients: Gradient position shifts on mouseover
• Cursor-follower dots: JavaScript-driven decorative elements tracking mouse position

The fix requires specifying only needed properties in transitions, using exponential ease-out curves rather than elastic physics, and eliminating cursor-tracking effects entirely.

Minor Issues: Polish Deficits

Low-severity style problems that still indicate lack of human curation:

• Straight quotes instead of curly quotes
• Double hyphens (--) instead of em-dashes
• Three periods (...) instead of ellipsis (…)
• Placeholder names like "John Doe" or "Acme Corp"
• z-index: 9999 instead of systematic stacking contexts
• Uniform section padding without variation
• 100vw widths causing horizontal scroll

Architectural Enforcement

Hallmark separates design intent from implementation through a specific file architecture that enforces these bans:

1. SKILL.md orchestrates the workflow: generation → audit → slop-test → fix cycle
2. anti-patterns.md contains the master catalogue of banned tells and their remedies
3. slop-test.md implements the 58 gates that check emitted HTML/CSS against the ban list
4. site/css/tokens.css locks design tokens, preventing the mid-render token improvisation anti-pattern
5. macrostructures.md provides 21 layout vocabularies; repeating the same macrostructure triggers Default-attractor sameness
6. component-cookbook.md catalogs allowed UI primitives; deviations (like side-stripe cards) trigger critical violations

When hallmark audit runs, any anti-pattern presence causes the build to fail, generating a punch-list of specific file locations and required fixes.

Before and After: Code Examples

Purple-Gradient Hero Fix

Replace AI-gradient aesthetics with solid design tokens:

<!-- BANNED: Critical anti-pattern -->
<section class="hero" style="background: linear-gradient(135deg,#7e5bef,#2b2bff);">
  <h1>AI‑Generated Landing</h1>
</section>

<!-- FIXED: Single accent token -->
<section class="hero" style="background: var(--color-accent);">
  <h1>Tailored Landing</h1>
</section>

Italic Header Correction

Use weight and color instead of faux emphasis:

<!-- BANNED: Major anti-pattern -->
<h2 style="font-style: italic;">Built to <em>think</em> fast</h2>

<!-- FIXED: Roman type with weight variation -->
<h2 style="font-weight: 600; color: var(--color-primary);">
  Built to <span class="highlight">think</span> fast
</h2>

Hard Ban Layout Fix

Eliminate two-column section heads:

<!-- BANNED: Hard-ban violation -->
<div class="section__head" style="display:grid;grid-template-columns:1fr 2fr;">
  <span class="eyebrow">01 · THE TOUR</span>
  <h3 class="title">Our Journey</h3>
</div>

<!-- FIXED: Single column stack -->
<div class="section__head" style="display:flex;flex-direction:column;">
  <span class="eyebrow">01 · THE TOUR</span>
  <h3 class="title">Our Journey</h3>
</div>

Transition Specificity

Avoid performance-killing transition-all:

/* BANNED: Micro-interaction tell */
.card { 
  transition: all var(--dur-short) var(--ease-out); 
}

/* FIXED: Enumerate properties */
.card {
  transition:
    background-color var(--dur-short) var(--ease-out),
    transform var(--dur-short) var(--ease-out);
}

UI Chrome Authenticity

Use real assets instead of fabricated interfaces:

<!-- BANNED: Re-drawn chrome -->
<div class="chrome">
  <div class="url-bar">https://example.com</div>
  <div class="traffic-dots">● ● ●</div>
</div>

<!-- FIXED: Real screenshot -->
<figure class="screenshot">
  <img src="screenshot.png" alt="App in the browser">
</figure>

Summary

• Hallmark maintains a catalogue of anti-patterns in skills/hallmark/references/anti-patterns.md that define what constitutes "AI slop"
• Violations are categorized as Critical, Major, Hard bans, Micro-interactions, and Minor issues
• The slop-test in skills/hallmark/references/slop-test.md enforces 58 gates that automatically flag banned patterns during hallmark audit
• Design tokens in site/css/tokens.css prevent improvisation, while macrostructures and the component cookbook provide compliant building blocks
• Hard bans like the tag-left/header-right layout are enforced even when users request parity with existing designs

Frequently Asked Questions

What happens if Hallmark detects a banned anti-pattern during the audit?

The build fails immediately and generates a punch-list of violations. According to SKILL.md, the engine must apply fixes to eliminate all tells before proceeding. The audit specifically references anti-patterns.md to provide specific remediation guidance for each flagged pattern.

Are there any anti-patterns that Hallmark bans even if a client specifically requests them?

Yes. The tag-left / header-right two-column section head is a hard ban that must be enforced "even if a user asks for parity." This layout is considered a definitive AI template tell, and the system requires flattening it to a single-column stack regardless of user instructions.

How does Hallmark prevent designers from improvising colors or fonts not in the design system?

Mid-render token improvisation is listed as a Major anti-pattern. Hallmark enforces compliance through site/css/tokens.css, which locks all color and typography decisions. The slop-test gates check that every color, background, and font-family declaration references a token variable rather than hard-coded values.

What is the difference between Critical and Major anti-patterns in Hallmark?

Critical anti-patterns—such as purple-gradient heroes and card-in-card layouts—are considered "ships as slop" and represent the most recognizable AI aesthetics. Major anti-patterns—including bounce easing and italic headers—still trigger build failures but represent slightly less obvious "default" tells or accessibility issues. Both categories block builds, but Critical issues are considered more visually offensive.

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