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

> Discover over 50 anti-patterns Hallmark bans in code, from critical AI slop to minor taste issues. Learn how Hallmark uses automated tests to enforce code quality.

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

---

**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)](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/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.

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

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

```html
<!-- 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.

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

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

```css
/* 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/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`](https://github.com/Nutlope/hallmark/blob/main/anti-patterns.md)
2. **Slop-test gates**: 58 checks in [`slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) prevent *mid-render token improvisation* by locking the color/font vocabulary. Macrostructures in [`macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/macrostructures.md) define 21 layout options—repeating the same one across pages triggers *default-attractor sameness*. The [`component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/slop-test.md) gates → mandatory fixes → build approval
- **Source of truth**: All definitions live in [`skills/hallmark/references/anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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`](https://github.com/Nutlope/hallmark/blob/main/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)](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/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.