17 AI Design Patterns Hallmark Actively Avoids: The Complete Anti-Slop Guide

Hallmark flags 17 specific visual and structural "AI fingerprints" as critical slop, forcing redesigns whenever they appear in generated interfaces.

The Hallmark repository by Nutlope is an open-source design system built to eliminate generic AI-generated aesthetics from web interfaces. Rather than prescribing what to create, Hallmark codifies what to reject—treating recurring LLM output patterns as design anti-patterns that must be purged. This article breaks down every pattern the system targets, with direct references to source files and audit rules.

Why Hallmark Exists: Fighting the "Generic AI Look"

Modern LLM-powered code generators reliably produce the same visual tropes: centered heroes, three-card feature grids, glowing purple orbs, and italic headings. Hallmark treats these as structural failures, not stylistic choices. The system cross-checks every generated page against a taxonomy of forbidden patterns, flagging violations and triggering redesigns until the output feels handcrafted rather than machine-generated.

Structural Anti-Patterns

Generic Macro-Structure: Hero → Three Features → CTA → Footer

The most recognizable AI layout fingerprint is the formulaic landing page skeleton: full hero, three equal-width feature cards, call-to-action block, footer. This pattern appears in structure.md at line 3 as explicitly forbidden, and slop-test.md gate 8 rejects any page reusing this layout. The system forces designers to break this sequence intentionally.

Centered-Everything Layouts

AI defaults to vertical stacking: eyebrow label, centered title, centered subhead, centered CTA. Hallmark limits centered elements to at most two per section, requiring left or right alignment for remaining content. This rule appears in hero-enrichment.md at line 391, which treats perfect centering as a structural failure.

Three-Equal-Card Feature Grids

The 3-column grid with identical cards—icon above heading above copy—is banned by default in layout-and-space.md at line 39. Hallmark requires asymmetric arrangements, varying card sizes, or deliberate visual tension instead of perfect modular repetition.

Visual Anti-Patterns

Glowing Orbs, Spheres, and Rings

The generic "AI tool" visual cue—luminous orbs, gradient spheres, pulsing rings—is explicitly banned in lumen.md at line 371. Hallmark enforces bespoke visual artifacts tied to specific product semantics rather than recycled tech aesthetics.

Default Color Palettes

Pure blues, pure blacks, purple-to-cyan gradients, and "accent on 30% of page" distributions are flagged as AI defaults. The color.md file requires custom palettes per theme, rejecting over-used hues that signal generative origin.

Symmetrical Compositions

Perfect grids and mirrored sections are default LLM outputs. assets.md at line 157 mandates intentional asymmetry—cropped images, offset elements, broken visual rhythms—to escape the "machine-made" feel.

Generic Stock Photography and Unprocessed AI Rasters

Raw AI-generated images read as AI 100% of the time. assets.md at line 149 requires post-processing: asymmetric cropping, grain addition, color grading, or compositing with physical artifacts.

Typography Anti-Patterns

Italic Headings

Any font-style: italic on <h1> through <h6> triggers an audit failure per slop-test.md at line 100. Italics on display text are a top AI tell; Hallmark requires roman typefaces throughout.

Multiple Display Weights in Single Headlines

AI attempts emphasis by weight-shifting within headlines (e.g., <strong> with heavier weight). hero-enrichment.md at line 393 mandates single-weight headlines, using color or underline for emphasis instead.

Em-Dash Overuse

Multiple em-dashes per heading—AI's attempt at "stylish" punctuation—are capped at one per paragraph in slop-test.md at line 100.

Interactive Anti-Patterns

Hover-Scale-105 on Every Card

The generic transform: scale(1.05) hover effect, applied without narrative purpose, is flagged in microinteractions.md at line 203. Hallmark requires purposeful micro-interactions tied to user intent, not decorative motion.

Excessive Motion

Hover lifts on every card, scroll-fade-ins, bouncing icons—AI adds "more motion" without purpose. motion.md at line 3 mandates minimal, narrative-driven animation with clear functional justification.

Component Anti-Patterns

Default Navigation (N1a) and Footer (Ft3)

The wordmark-left, links-centered/right navigation and 4-column link footer are the most-recognized AI fingerprints. component-cookbook.md requires alternative components: navigation variant N1b or footer variants Ft1-Ft8 replace these defaults.

Re-Drawn UI Chrome

Fake browser bars, phone frames, IDE windows, and other invented chrome—elements that already exist in the user's environment—are disallowed per slop-test.md at line 147. Hallmark uses actual device frames or abandons chrome entirely.

Mixed Icon Libraries and Emoji Icons

Using multiple icon sources or emoji as feature-card symbols creates the "mixed-library" look. slop-test.md at line 76 fails any page with inconsistent iconography, requiring unified sets.

Copy Anti-Patterns

AI-Fluff Terminology

Words like unlock, leverage, super-charge, ecosystem, AI-powered are banned per copy.md at line 313. These buzzwords are tell-tale markers of AI-written marketing copy.

Code Comparison: Compliant vs. AI-Default

Hallmark-Compliant Hero

<header class="hero">
  <div class="hero__grid">
    <picture class="hero__art">
      <img src="assets/hand-crafted-apparatus.svg" alt="Custom-built device">
    </picture>
    <div class="hero__copy">
      <p class="eyebrow">product</p>
      <h1 class="title">trace · explore · connect</h1>
      <p class="subhead">
        A hand-engineered interface for structured data exploration.
      </p>
      <a href="/docs" class="cta btn-primary">Read the docs</a>
    </div>
  </div>
</header>

Key compliance points: off-axis art (not centered), roman headline (no italics), left-aligned body copy with only CTA centered. Satisfies hero-enrichment.md line 391 and avoids the glowing orb ban from lumen.md line 371.

AI-Default Hero (Rejected)

<header class="hero">
  <div class="hero__center">
    <h1 class="title" style="font-style:italic;">Unlock AI-Powered Insights</h1>
    <p class="subhead">Leverage the ecosystem of modern ML platforms.</p>
    <a class="cta btn-primary" href="#">Get Started</a>
    <img src="assets/glowing-orb.svg" alt="AI orb">
  </div>
</header>

Violations: italic heading (slop-test.md line 100), banned buzzwords (copy.md line 313), centered everything, glowing orb icon (lumen.md line 371).

Source Files and Audit System

File	Purpose
skills/hallmark/references/structure.md	Forbidden macro-structures
skills/hallmark/references/slop-test.md	Concrete audit gates
skills/hallmark/references/layout-and-space.md	Layout anti-patterns
skills/hallmark/references/motion.md	Motion principles
skills/hallmark/references/microinteractions.md	Hover and interaction rules
skills/hallmark/references/component-cookbook.md	Alternative components
skills/hallmark/references/themes/lumen.md	Visual artifact bans
skills/hallmark/references/assets.md	Image processing requirements
skills/hallmark/references/copy.md	Prohibited terminology
skills/hallmark/references/hero-enrichment.md	Hero composition rules

The audit system evaluates every generated page against these files, forcing redesign loops until all AI fingerprints are eliminated.

Summary

• Hallmark treats 17 recurring patterns as critical slop, from generic macro-structures to italic headings
• Structural failures include centered-everything layouts, three-equal-card grids, and the hero-features-CTA-footer skeleton
• Visual tells span glowing orbs, default palettes, symmetrical compositions, and unprocessed AI imagery
• Typography rules ban italics on headings, weight-shifting within headlines, and em-dash overuse
• Interactive defaults like hover-scale-105 and excessive motion require functional purpose
• Component defaults—navigation N1a and footer Ft3—must be replaced with alternatives from the cookbook
• Copy standards prohibit AI-fluff terminology entirely

Frequently Asked Questions

How does Hallmark detect AI-generated design patterns?

Hallmark's audit system cross-references generated pages against documented anti-patterns in its knowledge base. The slop-test.md file contains specific "gates" that catch structural, visual, and textual tells. Each violation triggers a redesign requirement rather than a warning.

Can I use any centered elements in a Hallmark-compliant design?

Yes, but limited. Hallmark permits at most two centered elements per section—typically the CTA and optionally one heading. All other content must break alignment (left or right) to avoid the "centered-everything" AI fingerprint documented in hero-enrichment.md.

What makes glowing orbs specifically problematic?

Glowing orbs, spheres, and rings have become the universal visual shorthand for "AI product" in generative outputs. lumen.md at line 371 bans them because they carry no specific product meaning—replacing them with bespoke artifacts tied to actual product semantics is required.

Are there approved alternatives to the banned navigation and footer patterns?

Yes. component-cookbook.md enumerates specific alternatives: navigation variant N1b replaces the default N1a, and footer variants Ft1 through Ft8 replace the generic Ft3. These alternatives are designed to feel intentional rather than default-generated.

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