# What Specific Anti-Patterns Does Hallmark Ban? A Complete Guide to AI-Generated UI Detection
> Discover the specific anti-patterns Hallmark AI bans, from critical AI slop tells to micro-interaction mistakes. Learn how Hallmark enforces quality UI through automated testing.
- Repository: [Hassan El Mghari/hallmark](https://github.com/Nutlope/hallmark)
- Tags: deep-dive
- Published: 2026-07-19
---
**Hallmark bans over 30 specific anti-patterns across five severity levels—ranging from critical "AI slop" tells like purple-gradient heroes to micro-interaction mistakes like `transition-all`—enforcing these rules through automated slop-test gates defined in [`anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/anti-patterns.md) and [`slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/slop-test.md).**
Hallmark is an open-source design enforcement system from the repository **Nutlope/hallmark** that treats certain UI patterns as "slop"—visual tells that indicate AI-generated, template-driven design. During the `hallmark audit` command, the system scans generated HTML and CSS against a curated catalogue of banned patterns. Any matches are flagged as violations that must be fixed before the build passes.
## Critical Anti-Patterns: Ships as Slop
The most severe category includes patterns that immediately mark a page as generic AI output. These are **non-negotiable** and will fail the audit regardless of context.
- **Purple-gradient hero**: Any hero section using `linear-gradient(135deg,#7e5bef,#2b2bff)` or similar purple-to-blue fades
- **3-column feature grid**: Rigid three-column layouts without width variation
- **Card-in-card**: Nested containment layers creating visual noise
- **Gradient headline**: Text using gradient fills instead of solid colors
- **Side-stripe card**: Asymmetric thick borders on one side of cards
- **Full-viewport centred hero**: Heroes forced to `100vh` with centered content regardless of text length
- **Pure black/pure white backgrounds**: `#000000` or `#ffffff` instead of tinted neutrals
According to the source code in [`skills/hallmark/references/anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/anti-patterns.md), these patterns represent "the most recognisable AI aesthetics" that make pages look templated. The typical fix involves using single accent hues from [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css), varying column widths asymmetrically, and allowing hero height to adapt to content rather than forcing viewport units.
## Major Anti-Patterns: Looks AI-Generated
These patterns betray an AI-generated "default" look, hurt accessibility, or break visual cohesion. While slightly less severe than critical issues, they still trigger build failures.
**Layout and Typography Tells:**
- **Centred-everything layouts**: Symmetric center alignment throughout the page
- **Italic headers**: Headlines using `font-style: italic` for emphasis
- **Eyebrow on every section**: Overuse of small uppercase labels above headings
- **Tag-left / header-right two-column section heads**: Hard-banned layout where a label sits left and heading right (see Hard Bans section)
**Visual Effects:**
- **Bounce & elastic easing**: CSS animations using `cubic-bezier` overshoot curves for non-physical elements
- **Shadow-glow on dark surfaces**: Soft drop shadows against dark backgrounds
- **Glassmorphism without purpose**: Backdrop blur effects lacking functional depth context
- **Hover-only affordances**: Interactive elements lacking focus states for keyboard navigation
- **Animate-on-scroll everywhere**: Excessive scroll-triggered animations creating visual noise
**Content and Asset Issues:**
- **Mismatched icon sets**: Mixing Font Awesome, Heroicons, and emojis inconsistently
- **AI-illustration look**: Generic 3D renders or vector art styles typical of Midjourney/DALL-E outputs
- **Invented metrics**: Fabricated statistics like "10x faster" without data
- **Generic emoji as feature icon**: Using 🔥 or ⚡ instead of proper SVG icons
- **Re-drawn UI chrome**: Hand-coded browser window frames instead of real screenshots
- **Mid-render token improvisation**: Defining colors or fonts not present in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css)
The enforcement mechanism references these definitions in [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md), which implements 58 post-emit gates checking for these tells.
## Hard Bans: Never Allowed
Certain patterns are **explicitly forbidden even if a user requests parity** with an existing design. The definitive example is the **tag-left / header-right two-column section head** layout.
This pattern places an eyebrow label in the left column and the section heading in the right, creating a definitive "AI template" tell. According to [`anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/anti-patterns.md), "parity instructions must be ignored" for this pattern. The mandatory fix flattens the layout to a single column using `display: block` or `flex-direction: column`, stacking the eyebrow directly above the heading.
## Micro-Interaction Tells
These recommended-but-enforced rules prevent generic motion design that creates performance overhead and visual clutter.
- **`transition-all`**: Using the `all` keyword instead of enumerating specific properties
- **Universal `hover:scale-105`**: Applying uniform scale transforms to all interactive elements
- **Bouncy overshoot easings**: Physics-based curves inappropriate for digital interfaces
- **Animated hover gradients**: Gradient position shifts on mouseover
- **Cursor-follower dots**: JavaScript-driven decorative elements tracking mouse position
The fix requires specifying only needed properties in transitions, using exponential `ease-out` curves rather than elastic physics, and eliminating cursor-tracking effects entirely.
## Minor Issues: Polish Deficits
Low-severity style problems that still indicate lack of human curation:
- Straight quotes instead of curly quotes
- Double hyphens (`--`) instead of em-dashes
- Three periods (`...`) instead of ellipsis (`…`)
- Placeholder names like "John Doe" or "Acme Corp"
- `z-index: 9999` instead of systematic stacking contexts
- Uniform section padding without variation
- `100vw` widths causing horizontal scroll
## Architectural Enforcement
Hallmark separates **design intent** from **implementation** through a specific file architecture that enforces these bans:
1. **[`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md)** orchestrates the workflow: generation → audit → slop-test → fix cycle
2. **[`anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/anti-patterns.md)** contains the master catalogue of banned tells and their remedies
3. **[`slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/slop-test.md)** implements the 58 gates that check emitted HTML/CSS against the ban list
4. **[`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css)** locks design tokens, preventing the *mid-render token improvisation* anti-pattern
5. **[`macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/macrostructures.md)** provides 21 layout vocabularies; repeating the same macrostructure triggers *Default-attractor sameness*
6. **[`component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/component-cookbook.md)** catalogs allowed UI primitives; deviations (like side-stripe cards) trigger critical violations
When `hallmark audit` runs, any anti-pattern presence causes the build to fail, generating a punch-list of specific file locations and required fixes.
## Before and After: Code Examples
### Purple-Gradient Hero Fix
Replace AI-gradient aesthetics with solid design tokens:
```html
AI‑Generated Landing
Tailored Landing
```
### Italic Header Correction
Use weight and color instead of faux emphasis:
```html
Built to think fast
Built to think fast
```
### Hard Ban Layout Fix
Eliminate two-column section heads:
```html
```
## Summary
- Hallmark maintains a **catalogue of anti-patterns** in [`skills/hallmark/references/anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/anti-patterns.md) that define what constitutes "AI slop"
- Violations are categorized as **Critical**, **Major**, **Hard bans**, **Micro-interactions**, and **Minor** issues
- The **slop-test** in [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md) enforces 58 gates that automatically flag banned patterns during `hallmark audit`
- **Design tokens** in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) prevent improvisation, while **macrostructures** and the **component cookbook** provide compliant building blocks
- Hard bans like the **tag-left/header-right layout** are enforced even when users request parity with existing designs
## Frequently Asked Questions
### What happens if Hallmark detects a banned anti-pattern during the audit?
The build fails immediately and generates a punch-list of violations. According to [`SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/SKILL.md), the engine must apply fixes to eliminate all tells before proceeding. The audit specifically references [`anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/anti-patterns.md) to provide specific remediation guidance for each flagged pattern.
### Are there any anti-patterns that Hallmark bans even if a client specifically requests them?
Yes. The **tag-left / header-right two-column section head** is a hard ban that must be enforced "even if a user asks for parity." This layout is considered a definitive AI template tell, and the system requires flattening it to a single-column stack regardless of user instructions.
### How does Hallmark prevent designers from improvising colors or fonts not in the design system?
**Mid-render token improvisation** is listed as a Major anti-pattern. Hallmark enforces compliance through [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css), which locks all color and typography decisions. The slop-test gates check that every `color`, `background`, and `font-family` declaration references a token variable rather than hard-coded values.
### What is the difference between Critical and Major anti-patterns in Hallmark?
**Critical** anti-patterns—such as purple-gradient heroes and card-in-card layouts—are considered "ships as slop" and represent the most recognizable AI aesthetics. **Major** anti-patterns—including bounce easing and italic headers—still trigger build failures but represent slightly less obvious "default" tells or accessibility issues. Both categories block builds, but Critical issues are considered more visually offensive.
