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

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, 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.
• 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).
• 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 § 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 § 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.
• 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.
• 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.
• 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).
• 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)
• 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:

# Run Hallmark's audit on a generated site

hallmark audit ./site

Sample output follows this structured format:

[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, 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 with specific fixes referencing companion files like typography.md, color.md, and motion.md.

Frequently Asked Questions

What is the most critical anti-pattern Hallmark detects?

According to the 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, 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 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 (defining the audit workflow), skills/hallmark/references/typography.md (font pairing), and skills/hallmark/references/component-cookbook.md (approved navigation and footer patterns).

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