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

> Discover the 17 AI design patterns Hallmark actively avoids to prevent interface slop. Learn how Hallmark ensures quality by flagging and redesigning AI fingerprints.

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

---

**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`](https://github.com/Nutlope/hallmark/blob/main/structure.md) at line 3 as explicitly forbidden, and [`slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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

```html
<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`](https://github.com/Nutlope/hallmark/blob/main/hero-enrichment.md) line 391 and avoids the glowing orb ban from [`lumen.md`](https://github.com/Nutlope/hallmark/blob/main/lumen.md) line 371.

### AI-Default Hero (Rejected)

```html
<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`](https://github.com/Nutlope/hallmark/blob/main/slop-test.md) line 100), banned buzzwords ([`copy.md`](https://github.com/Nutlope/hallmark/blob/main/copy.md) line 313), centered everything, glowing orb icon ([`lumen.md`](https://github.com/Nutlope/hallmark/blob/main/lumen.md) line 371).

## Source Files and Audit System

| File | Purpose |
|------|---------|
| [`skills/hallmark/references/structure.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/structure.md) | Forbidden macro-structures |
| [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md) | Concrete audit gates |
| [`skills/hallmark/references/layout-and-space.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/layout-and-space.md) | Layout anti-patterns |
| [`skills/hallmark/references/motion.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/motion.md) | Motion principles |
| [`skills/hallmark/references/microinteractions.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/microinteractions.md) | Hover and interaction rules |
| [`skills/hallmark/references/component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/component-cookbook.md) | Alternative components |
| [`skills/hallmark/references/themes/lumen.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/themes/lumen.md) | Visual artifact bans |
| [`skills/hallmark/references/assets.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/assets.md) | Image processing requirements |
| [`skills/hallmark/references/copy.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/copy.md) | Prohibited terminology |
| [`skills/hallmark/references/hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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.