What Anti-Patterns Does Hallmark Ban in Code? A Complete Catalog of AI Detection Rules

Hallmark bans 50+ specific anti-patterns across five severity tiers, from critical "AI slop" tells like purple-gradient heroes to minor taste issues like straight quotes, all enforced through automated slop-test gates in the build pipeline.

Hallmark is an open-source quality framework that audits generated web pages for visual signatures commonly associated with AI-generated templates. Its hallmark audit command scans every build against a strict catalog of banned patterns. This article documents every anti-pattern category defined in [skills/hallmark/references/anti-patterns.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/anti-patterns.md) and enforced through 58 post-emit gates in [slop-test.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md).

Critical Anti-Patterns: Banned "AI Slop" Signatures

Critical anti-patterns are never allowed in production builds. Per Hallmark's classification, any page shipping with these tells is considered slop and fails the audit automatically.

Purple-Gradient Hero

The quintessential AI landing page signature: a full-viewport header with a violet-to-blue gradient.

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

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

Fix: Replace gradients with a single accent hue from site/css/tokens.css.

3-Column Feature Grid

Rigid three-column symmetry screams template. Vary column widths and compositions instead.

Card-in-Card

Nested containment layers violate the single-containment principle. Flatten to one card wrapper.

Gradient Headline

Text gradients are a definitive AI aesthetic. Use solid var(--color-primary) with weight or scale for hierarchy.

Side-Stripe Card

Asymmetric thick borders on one edge are template tells. Use uniform borders or none.

Full-Viewport Centered Hero

Forcing height: 100vh with centered content creates generic impact. Let height adapt to content and bias alignment.

Pure Black / Pure White Backgrounds

#000000 and #ffffff are harsh defaults. Tint backgrounds toward the anchor hue in the token palette.

Major Anti-Patterns: Signs of AI-Generated Defaults

Major anti-patterns don't auto-fail builds but must be flagged and fixed. They signal lack of intentional design.

Bounce & Elastic Easing

Over-eager motion curves betray AI defaults. Replace with exponential ease-out:

/* BANNED */
animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

/* FIXED */
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);

Centered-Everything Layouts

Symmetry is the default attractor. Bias layouts left or right using asymmetric grids.

Italic Headers

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

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

Keep headings roman. Use weight, color, or position for emphasis—not faux-sophisticated italics.

Eyebrow on Every Section

Decorative kicker labels ("01 · THE TOUR") on every block create visual noise. Remove unless genuinely needed for orientation.

Tag-Left / Header-Right Two-Column Section Heads (Hard Ban)

This pattern is never allowed, even if users request parity with reference designs.

<!-- BANNED -->
<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 -->
<div class="section__head" style="display:flex;flex-direction:column;">
  <span class="eyebrow">01 · THE TOUR</span>
  <h3 class="title">Our Journey</h3>
</div>

Mandatory fix: Stack vertically with display: block or single-column flex. Hallmark's slop-test.md explicitly ignores user instructions to preserve this pattern.

Other Major Bans

• Shadow-glow on dark surfaces: Softer shadows on dark backgrounds create muddiness.
• Icon-tile feature card: Grid of identical icon blocks. Vary card layouts.
• Glassmorphism without purpose: Translucency needs depth rationale.
• Hover-only affordances: Violates accessibility. Add focus states.
• Tabular-nums missing on numeric tables: Always apply font-variant-numeric: tabular-nums for aligned data.
• Animate-on-scroll everywhere: Limit to one orchestrated entrance sequence.
• Mismatched icon sets: Pick one library and stay consistent.
• AI-illustration look: Swap for hand-drawn or curated SVGs.
• Invented metrics: Never fabricate numbers like "2.3x faster."
• Generic emoji as feature icon: Replace with proper iconography.
• Re-drawn UI chrome: Fake browser chrome fools no one.

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

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

Use real screenshots wrapped in <figure>.

• Mid-render token improvisation: All colors and fonts must reference site/css/tokens.css. No arbitrary values.

Micro-Interaction Anti-Patterns: Motion Noise

These recommended bans prevent performance overhead and visual clutter.

Universal transition-all

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

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

Enumerate only the changed properties.

Universal hover:scale-105

Every card growing on hover creates carnival motion. Reserve transforms for meaningful feedback.

Bouncy Overshoot Easings

Reserve physical-simulation curves (spring, bounce) for actual physical interactions like toggles.

Animated Hover Gradients

Gradient position animation is expensive and distracting. Cut entirely.

Cursor-Follower Dots

Decorative cursor effects add no value. Discard.

Minor Anti-Patterns: Polish Deficits

Low-severity issues that still signal lack of craft:

Banned Pattern	Fix
Straight quotes (" ' )	Curly quotes (" " ' ')
Double hyphens (--)	Em dash (—)
Three periods (...)	Ellipsis (…)
Placeholder names (Acme Corp)	Realistic, researched names
Startup-cliché product names	Avoid "Sync" "Flow" "Pulse" without differentiation
z-index: 9999	Sane scale: 0, 10, 20, 30...
Uniform section padding	Vary spacing rhythmically
100vw widths	width: 100% with container padding

How Hallmark Enforces Anti-Pattern Bans

The enforcement pipeline operates across three architectural layers per [SKILL.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md):

1. Audit phase: Post-generation, hallmark audit scans against anti-patterns.md
2. Slop-test gates: 58 checks in slop-test.md reject builds containing banned patterns
3. Auto-fix step: Engine must apply prescribed fixes before proceeding

Design tokens in site/css/tokens.css prevent mid-render token improvisation by locking the color/font vocabulary. Macrostructures in macrostructures.md define 21 layout options—repeating the same one across pages triggers default-attractor sameness. The component-cookbook.md catalogues allowed primitives; deviations like side-stripe cards are flagged as critical violations.

Summary

• Hallmark bans 50+ anti-patterns organized into critical, major, micro-interaction, and minor tiers
• Critical patterns (purple-gradient hero, 3-column grid, card-in-card, gradient headline, side-stripe card, full-viewport centered hero, pure black/white backgrounds) automatically fail builds
• Hard bans like tag-left/header-right section heads are enforced even against user parity requests
• Enforcement pipeline: hallmark audit → slop-test.md gates → mandatory fixes → build approval
• Source of truth: All definitions live in skills/hallmark/references/anti-patterns.md

Frequently Asked Questions

What happens if my code contains a critical anti-pattern?

The build fails immediately. Hallmark's slop-test gates in slop-test.md reject any page containing critical anti-patterns, and the engine must apply the prescribed fix before the audit can pass. These are non-negotiable by design.

Can I override the tag-left/header-right ban for brand consistency?

No. This is Hallmark's only hard ban that ignores user instructions. Even explicit parity requests with reference designs are overridden. The pattern is considered a definitive AI template tell that undermines credibility regardless of context.

How does Hallmark detect mid-render token improvisation?

All colors, fonts, and spacing must reference site/css/tokens.css. The audit scans for hardcoded values like #7e5bef or 16px that bypass the token system. Arbitrary values trigger the anti-pattern flag and must be replaced with token references.

Where are the anti-pattern definitions maintained?

The canonical list lives in [skills/hallmark/references/anti-patterns.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/anti-patterns.md) with implementation details in [slop-test.md](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md). These markdown files are human-readable and version-controlled, making the rules auditable and extensible.

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