# What Are the Named AI‑Slop Anti‑Patterns in Hallmark? A Complete Reference Guide > Discover Hallmark's 50+ AI-slop anti-patterns. Learn to identify and fix critical UI issues in AI-generated content with this comprehensive guide. - Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark) - Tags: api-reference - Published: 2026-08-01 --- **Hallmark defines 50+ named UI anti‑patterns that signal AI‑generated "slop," categorized by severity from Critical to Minor, with concrete fixes for each.** The open‑source Hallmark project by Nutlope encodes a systematic catalogue of design clichés that betray machine‑generated interfaces. These **named AI‑slop anti‑patterns** live in [`skills/hallmark/references/anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/anti-patterns.md) and power the `hallmark audit` command, which scans HTML/CSS for slop signals before code ships. --- ## How Anti‑Patterns Are Organized Hallmark sorts anti‑patterns into three severity tiers: - **Critical** — Ships as obvious slop; immediate fix required - **Major** — Looks AI‑generated to trained eyes - **Minor** — Small‑taste issues that erode polish Each entry includes the pattern name, why it reads as artificial, and a concrete remediation. Below is the full taxonomy as implemented in the Hallmark source. --- ## Critical Anti‑Patterns That Ship as Slop These 16 patterns are the strongest signals of AI generation. The `hallmark audit` verb flags any occurrence with highest priority. ### Visual Gradient & Color Offenders | Pattern | The Slop | The Fix | |---------|----------|---------| | **The purple‑gradient hero** | Purple‑to‑blue/pink gradient with centered white text — the single most recognized AI aesthetic | Single anchor hue; no gradient backgrounds on heroes | | **The gradient headline** | `background-clip: text` with purple‑to‑pink or blue‑to‑cyan gradients | Solid ink; use weight, italics, or display typeface | | **Aurora‑blob background** | Flowing organic mesh blobs (purple‑to‑pink‑to‑cyan) | Solid surface or subtle two‑stop gradient with low‑opacity grain | | **Pure black / pure white** | Flat `#000000` or `#ffffff` surfaces | Tint backgrounds toward the anchor hue per [`color.md`](https://github.com/Nutlope/hallmark/blob/main/color.md) | ### Layout & Structure Templates | Pattern | The Slop | The Fix | |---------|----------|---------| | **The 3‑column feature grid** | Three equal‑width columns, each icon‑above‑heading‑above‑body | Break the grid: vary widths, heights, move icons inline, or drop a card | | **Card‑in‑card** | Unnecessary nesting without semantic purpose | Single containment layer; remove inner card | | **The side‑stripe card** | Thick colored border on one edge (usually left) | Hairline border all around or subtle accent square | | **Full‑viewport centred hero** | `min-height: 100vh` with short sentence and large CTA | Height matches content; bias layout left/right; add more copy | ### Typography Defaults | Pattern | The Slop | The Fix | |---------|----------|---------| | **Inter‑everywhere** | Same font (Inter, Roboto, Open Sans) for display and body | Pair distinctive display face with refined body face per [`typography.md`](https://github.com/Nutlope/hallmark/blob/main/typography.md) | ### Navigation & Footer Templates | Pattern | The Slop | The Fix | |---------|----------|---------| | **The AI nav** | Left wordmark, center links, right CTA, full‑width sticky bar | Choose navigation style from `component‑cookbook.md` matching the genre | | **The AI footer** | Four‑column link groups with social‑icon row | Pick footer variant from `component‑cookbook.md` appropriate to purpose | ### Decoration & Ornament | Pattern | The Slop | The Fix | |---------|----------|---------| | **Floating‑orb decoration** | Generic 3‑D spheres or blurred circles behind hero text | Remove ornament; focus on typographic hierarchy | ### Workflow & Macrostructure | Pattern | The Slop | The Fix | |---------|----------|---------| | **Default‑attractor sameness** | Same macrostructure across consecutive Hallmark outputs | Choose different macrostructure per page per [`macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/macrostructures.md) | | **Specimen fall‑through** | Applying Specimen macrostructure to non‑editorial briefs | Use Specimen only when brief explicitly requests editorial/type‑foundry feel | ### Performance & Accessibility | Pattern | The Slop | The Fix | |---------|----------|---------| | **Sound‑on autoplay** | Hero videos playing sound | Always include `muted`, `autoplay`, `loop`, `playsinline` | | **Lazy‑loaded LCP** | Lazy‑loading the Largest Contentful Paint element | Use `fetchpriority="high"` and preload metadata for LCP assets | --- ## Major Anti‑Patterns That Look AI‑Generated These 18 patterns signal template‑driven design to discerning viewers. ### Motion & Interaction - **Bounce and elastic easing** — Over‑the‑top bounce/wobble easings are outdated. Fix: Apply exponential ease‑out per [`motion.md`](https://github.com/Nutlope/hallmark/blob/main/motion.md). - **Hover‑only affordances** — Break accessibility for touch users. Fix: Provide focus states and tap‑friendly equivalents. - **Animate‑on‑scroll everywhere** — Universal scroll‑triggered fades prevent the page from settling. Fix: Single orchestrated entrance; remainder static. ### Layout & Alignment - **Centred everything** — Uniform center‑alignment feels templated. Fix: Bias layout left or right; introduce asymmetry. ### Typography & Content - **Italic headers** — Italicized emphasis in headings signals faux‑editorial intent. Fix: Keep headings roman; use weight, color, or underline. - **Eyebrow on every section** — Repeating uppercase mono‑cap labels creates ornamental noise. Fix: Use only when genuinely required (e.g., numbering). - **Invented metrics** — Fabricated numbers ("10× faster") appear dishonest. Fix: Replace with placeholders, ask user, or redesign macrostructure. - **Placeholder names / Startup‑cliché product names** — Betrays unreviewed generation. Fix: Use real names or clear `[placeholder]` markers. ### Components & Surfaces - **Shadow‑glow on dark** — Soft colored halo shadows look artificial. Fix: Use elevation via lightness instead. - **Icon‑tile feature card** — Universal icon‑top‑heading‑copy tile. Fix: Vary sizes, alignments, or drop the icon. - **Glassmorphism without purpose** — Unnecessary frosted‑glass panels. Fix: Use only when conveying depth and context. ### Assets & Icons - **Mismatched icon sets** — Mixing Material Icons, Heroicons, Lucide. Fix: Choose one library per project per [`assets.md`](https://github.com/Nutlope/hallmark/blob/main/assets.md). - **AI‑illustration look** — Smooth‑mesh‑blob characters, generic stock poses. Fix: Hand‑build in CSS/SVG or use curated assets. - **Generic emoji as feature icon** — Typographic shortcuts lacking coherence. Fix: Use proper icon library or omit. - **Re‑drawn UI chrome** — Fake browser bars, phone frames, IDE windows. Fix: Wrap real screenshots in `
` with minimal borders. ### Technical Implementation - **Tabular data without tabular‑nums** — Proportional figures misalign numeric columns. Fix: Apply `font‑variant‑numeric: tabular‑nums`. - **Mid‑render token improvisation** — Inline color values or font families bypass tokens. Fix: Reference all via tokens (`var(--color‑…)`). - **Wrap‑to‑two‑lines clickable text** — Buttons/links breaking onto two lines. Fix: Shorten labels, `white‑space: nowrap`, or hide non‑essentials. - **Lottie shortcut** — Using Lottie for CSS‑able animation. Fix: Implement with CSS or hand‑built SVG. - **Three.js for a still object** — Static 3D object with heavy bundle, no interactivity. Fix: Replace with photograph or static SVG. --- ## Minor Anti‑Patterns: Small‑Taste Issues The Minor tier in `anti‑patterns.md` catalogs polish gaps that accumulate into slop perception: - Straight quotes → curly quotes - Double‑hyphen dashes → em dash - Three periods → ellipsis - `z-index: 9999` → sensible scale - Uniform section padding → varied rhythm - `100vw` widths → account for scrollbar These are quick wins that separate careful craft from careless generation. --- ## Code Examples: Before and After ### Fixing the Purple‑Gradient Hero (Critical) ```html

Welcome

Welcome

``` ### Fixing Inter‑Everywhere (Critical) ```html

Title

Body copy.

Title

Body copy.

``` ### Fixing Re‑drawn UI Chrome (Major) ```html
App screenshot
App screenshot
``` --- ## How Hallmark Uses These Anti‑Patterns The `hallmark audit` verb defined in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) scans target HTML/CSS against this catalogue. The process: 1. **Pattern detection** — Match structural, visual, and code signatures 2. **Severity assignment** — Critical/Major/Minor per `anti‑patterns.md` 3. **Remediation suggestion** — Concrete fix from the reference table 4. **Pre‑emit gate** — Block generation until Critical issues resolve The 58‑gate checklist in `slop‑test.md` cross‑references these patterns for comprehensive quality control. --- ## Key Source Files | File | Purpose | |------|---------| | `skills/hallmark/references/anti‑patterns.md` | Central catalogue of all named patterns with descriptions and fixes | | `skills/hallmark/references/slop‑test.md` | 58‑gate post‑generation quality checklist | | [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) | Skill definition including `hallmark audit` verb implementation | | [`skills/hallmark/references/typography.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/typography.md) | Token system enforcing anti‑pattern rules | | [`skills/hallmark/references/color.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/color.md) | Color tokens with "no pure black/white" enforcement | | [`skills/hallmark/references/macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/macrostructures.md) | 21 named layouts; prevents "Specimen fall‑through" | --- ## Summary - **Hallmark codifies 50+ named AI‑slop anti‑patterns** in `anti‑patterns.md`, the definitive reference for detecting machine‑generated UI. - **Severity tiers** (Critical/Major/Minor) prioritize fixes and gate releases. - **Each pattern includes** a descriptive name, explanation of artificiality, and concrete remediation. - **The `hallmark audit` verb** automates detection against this catalogue before code ships. - **Cross‑reference files** ([`typography.md`](https://github.com/Nutlope/hallmark/blob/main/typography.md), [`color.md`](https://github.com/Nutlope/hallmark/blob/main/color.md), [`macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/macrostructures.md)) provide the token systems that enforce anti‑pattern compliance. --- ## Frequently Asked Questions ### What makes an anti‑pattern "Critical" versus "Major"? Critical patterns ship as obvious slop — they are immediate tells like purple‑gradient heroes or Inter‑everywhere typography. Major patterns look AI‑generated to trained eyes but may pass casual inspection, such as centered‑everything layouts or hover‑only affordances. The distinction determines whether `hallmark audit` blocks generation or merely warns. ### How does Hallmark detect these patterns programmatically? The `hallmark audit` verb scans HTML/CSS for structural signatures (e.g., `linear-gradient` with specific hue ranges, `font-family` declarations matching default LLM choices, `min-height: 100vh` with centered single‑line content) and reports matches with severity and fix guidance from `anti‑patterns.md`. ### Can I contribute new anti‑patterns to Hallmark? Yes. The repository welcomes additions to `skills/hallmark/references/anti‑patterns.md` following the established format: pattern name, "why it reads as AI‑generated," and concrete fix. Proposals should include real‑world examples from generated code and reference the appropriate token system ([`color.md`](https://github.com/Nutlope/hallmark/blob/main/color.md), [`typography.md`](https://github.com/Nutlope/hallmark/blob/main/typography.md), etc.) for remediation. ### What's the difference between anti‑patterns and the slop‑test checklist? Anti‑patterns are the **named design clichés** — the "what" and "why." The 58‑gate checklist in `slop‑test.md` is the **operational QA流程** — the "how" of verification. Many gates directly test for specific anti‑patterns, while others cover performance, accessibility, and semantic correctness not tied to visual slop signals.