# What Anti-Patterns Does Hallmark Detect? The Complete Catalogue of AI UI Tells

> Discover Hallmark's comprehensive AI UI anti-pattern detection. Learn about critical, major, and minor tells including visual, structural, and technical issues to improve your interfaces.

- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: deep-dive
- Published: 2026-08-02

---

**Hallmark detects over 40 distinct anti-patterns organized into Critical, Major, and Minor severity tiers, from visual tells like purple-gradient heroes to structural patterns like the 3-column feature grid and technical issues like lazy-loaded LCP elements.**

Hallmark (Nutlope/hallmark) is an open-source design auditing tool that identifies when user interfaces carry the visual and structural signature of AI generation. The `audit` verb implemented in this repository traverses HTML markup and CSS stylesheets against a canonical catalogue of "tells" documented in [`skills/hallmark/references/anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/anti-patterns.md), flagging each instance with its severity level, rationale, and specific remediation guidance.

## Critical Anti-Patterns (Ships as Slop)

**Critical** anti-patterns are the strongest signals that a page was generated by an LLM. When Hallmark identifies any of these during an audit, it assumes the UI **"reads as AI-generated"** unless explicitly corrected.

### Visual Aesthetic Tells

These patterns represent the most recognizable "AI aesthetic" clichés:

- **The purple-gradient hero**: Gradient-filled hero backgrounds (purple→blue or purple→pink) that dominate LLM outputs. Hallmark recommends using a single anchor hue with no hero gradient, referencing [`skills/hallmark/references/color.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/color.md).
- **Aurora-blob background**: Flowing organic blobs in purple-to-pink-to-cyan behind the hero section. The fix uses a solid surface or a subtle two-stop gradient with low-opacity grain (see [`skills/hallmark/references/hero-enrichment.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/hero-enrichment.md)).
- **Floating-orb decoration**: Generic 3-D spheres or blurred circles drifting behind content. Hallmark recommends removing these in favor of strong typography.
- **The gradient headline**: `background-clip: text` with a linear gradient (typically purple-to-pink). Replace with solid-ink text and vary weight or italics instead.
- **Pure black / pure white**: Flat `#000000` backgrounds or `#ffffff` surfaces. The audit directs users to tint toward the project's anchor hue.
- **The side-stripe card**: Thick colored borders on a single edge (usually left), a 2018-era SaaS AI pattern. Use a thin all-around border or no border.

### Structural Layout Tells

These macro-layout patterns trigger immediate flags:

- **The 3-column feature grid**: Three equal-width columns, each with icon→heading→body, spanned full-width. Hallmark suggests varying column widths, breaking the grid, mixing card heights, or dropping a column entirely.
- **Card-in-card**: Nested card containers without semantic purpose. Keep only one containment layer.
- **Full-viewport centred hero**: `min-height: 100vh` with everything centred, a short sentence, and a big CTA. Size the hero to its content, bias left/right, and add more copy.
- **The AI nav**: Word-mark left, a row of inline links centred/right, CTA button right, full-width sticky bar. Choose a navigation style from [`skills/hallmark/references/component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/component-cookbook.md) § Navigation.
- **The AI footer**: Four-column generic link layout with a social-icon row and tiny copyright line. Replace with patterns from [`skills/hallmark/references/component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/component-cookbook.md) § Footers.
- **Default-attractor sameness**: Re-using the same macrostructure across consecutive Hallmark outputs. Switch to a different macrostructure documented in [`skills/hallmark/references/macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures.md).
- **Specimen fall-through**: Using the "Specimen" macrostructure on briefs that aren't editorial. Choose a macrostructure that matches the brief's actual content type.

### Technical Performance Tells

- **Sound-on autoplay**: Hero video that plays with audio. The audit requires adding `muted` and optionally a manual audio toggle.
- **Lazy-loaded LCP**: `loading="lazy"` on the Largest Contentful Paint element. Replace with `fetchpriority="high"` or `preload` for LCP assets.

## Major Anti-Patterns (Looks AI-Generated)

**Major** anti-patterns are less damning than Critical ones but still clearly betray a templated, LLM-originated design.

### Motion and Animation Issues

- **Bounce and elastic easing**: Over-the-top bounce animations on buttons or icons. Use exponential ease-out as specified in [`skills/hallmark/references/motion.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/motion.md).
- **Animate-on-scroll everywhere**: Every section fades in on scroll. Choose a single orchestrated entrance instead.
- **Lottie shortcut**: Pulling in Lottie animations for simple effects. Replace with pure CSS or hand-crafted SVG.
- **Three.js for a still object**: 3D models that never interact. Use a static image or SVG instead.

### Component and Layout Patterns

- **Centred everything**: All sections, headings, and buttons centred. Bias layout left/right to break symmetry.
- **Icon-tile feature card**: Uniform icon-top-left, heading, body layout. Vary icon placement, size, or drop the icon entirely.
- **Glassmorphism without purpose**: Frosted-glass panels used purely decoratively. Keep glassmorphism only when it conveys actual depth.
- **Hover-only affordances**: Critical UI only reachable by hover. Provide focus/keyboard equivalents.
- **Re-drawn UI chrome**: Fake browser/phone/IDE frames around screenshots. Use real screenshots with minimal framing.

### Typography and Content Signals

- **Inter-everywhere**: Using the same typeface (e.g., Inter, Roboto, Open Sans) for both display and body text. Pair a distinct display face with a refined body face, per [`skills/hallmark/references/typography.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/typography.md).
- **Italic headers**: Italicised words in headlines to mimic editorial style. Keep headings normal and use weight or colour for emphasis.
- **Eyebrow on every section**: Upper-case mono-cap labels on every section (e.g., `01 / EXAMPLES`). Ship eyebrows only when genuine numbering is required.
- **Mismatched icon sets**: Mixing Material Icons, Heroicons, Lucide, and emojis. Choose one icon library (default: Lucide).
- **AI-illustration look**: Generic AI-generated SVG/illustrations. Hand-build or use a controlled custom craft (see [`skills/hallmark/references/custom-craft.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/custom-craft.md)).
- **Invented metrics**: Made-up statistics (e.g., "10× faster"). Replace with placeholders or request real numbers.
- **Generic emoji as feature icon**: Using emojis as primary icons. Use a proper icon library or omit the icon.
- **Tabular data without tabular-nums**: Numbers misaligned due to proportional fonts. Apply `font-variant-numeric: tabular-nums;`.
- **Mid-render token improvisation**: Inline colour or font values that bypass the token system. Reference only declared tokens (`var(--token-name)`).
- **Wrap-to-two-lines clickable text**: Buttons or nav links breaking onto two lines. Shorten labels or enforce `white-space: nowrap`.

## Minor Anti-Patterns (Taste Issues)

**Minor** anti-patterns are typographic and CSS nit-picks that still suggest copy-paste AI output:

- Straight quotes → curly quotes
- Double-hyphen dashes → em-dash
- Three periods → ellipsis
- Placeholder names (Jane Doe, John Smith) → realistic placeholders
- Startup-cliché product names (Acme, Pulse) → domain-specific names
- `z-index: 9999` → named scale (see [`skills/hallmark/references/layout-and-space.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/layout-and-space.md))
- Uniform section padding → vary vertical rhythm
- `width: 100vw` → `width: 100%` with container padding

## Running the Hallmark Audit

Hallmark's audit engine is deliberately **strict**: it will not silently ignore a banned pattern even if explicitly requested. Instead, it strips the offending tell and enforces the canonical rule (noted as "Hard ban" in the source).

Execute the audit from your project root:

```bash

# Run Hallmark's audit on a generated site

hallmark audit ./site

```

Sample output follows this structured format:

```bash
[critical] The purple-gradient hero — site/index.html:12
  a gradient hero is the single most-recognised AI aesthetic
  → Fix: use a single anchor hue, no hero gradient

[major] Bounce and elastic easing — site/css/components.css:47
  over-the-top bounce animation
  → Fix: use exponential ease-out (see motion.md)

[minor] Straight quotes — site/content/README.md:3
  plain ASCII quotes
  → Fix: replace with curly quotes

```

The command parses HTML and CSS, matches each tell against the patterns in [`skills/hallmark/references/anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/anti-patterns.md), and prints a concise report suitable for CI integration or pull-request comments.

## Summary

- **Hallmark** detects AI-generated UI patterns through the `audit` verb, classified as **Critical**, **Major**, or **Minor** severity.
- **Critical tells** include the purple-gradient hero, Inter-everywhere typography, 3-column feature grids, AI nav/footer patterns, and lazy-loaded LCP elements.
- **Major tells** cover bounce animations, centred everything, glassmorphism abuse, and invented metrics.
- **Minor tells** catch typographic issues like straight quotes and `z-index: 9999` magic numbers.
- All patterns are documented in [`skills/hallmark/references/anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/anti-patterns.md) with specific fixes referencing companion files like [`typography.md`](https://github.com/Nutlope/hallmark/blob/main/typography.md), [`color.md`](https://github.com/Nutlope/hallmark/blob/main/color.md), and [`motion.md`](https://github.com/Nutlope/hallmark/blob/main/motion.md).

## Frequently Asked Questions

### What is the most critical anti-pattern Hallmark detects?

According to the [`anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/anti-patterns.md) source, **the purple-gradient hero** is considered the single most-recognised AI aesthetic and is classified as Critical severity. Hallmark treats this visual pattern as immediate evidence of LLM generation unless removed in favor of a single anchor hue.

### How does Hallmark determine the severity of an anti-pattern?

Severity derives from how strongly a pattern signals AI generation. **Critical** patterns (like aurora-blob backgrounds or card-in-card nesting) immediately mark a design as "slop." **Major** patterns (like bounce animations or centred everything) make a site look AI-generated. **Minor** patterns (like straight quotes) are taste issues that degrade perceived craftsmanship.

### Can Hallmark automatically fix the anti-patterns it finds?

Hallmark operates on a **"hard ban"** philosophy: it will strip offending tells and enforce canonical rules rather than attempting partial fixes. The tool outputs specific file locations and recommended fixes referencing [`typography.md`](https://github.com/Nutlope/hallmark/blob/main/typography.md), [`macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/macrostructures.md), and other guidance documents, but expects human or automated build-step implementation of those corrections.

### Where is the complete reference documentation for these anti-patterns?

The master catalogue lives at [`skills/hallmark/references/anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/anti-patterns.md) in the Nutlope/hallmark repository. This file contains every tell with severity ratings, rationales, and fixes. Related guidance appears in companion files like [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) (defining the audit workflow), [`skills/hallmark/references/typography.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/typography.md) (font pairing), and [`skills/hallmark/references/component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/component-cookbook.md) (approved navigation and footer patterns).