# Common Anti-Patterns in Nutlope/Hallmark Development: The Complete Reference

> Discover common anti-patterns in Nutlope/hallmark development. Learn to detect over 30 AI-generated design signals with the hallmark audit command.

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

---

**TLDR:** The Hallmark framework defines over 30 specific anti-patterns—from purple-gradient heroes to "Inter-everywhere" typography—that signal AI-generated design, and provides the `hallmark audit` command to detect them via [`skills/hallmark/references/anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/anti-patterns.md).

Hallmark is a design skill framework that deliberately avoids the "AI-generated" look by enforcing strict architectural guardrails. According to the `Nutlope/hallmark` source code, particularly in [`skills/hallmark/references/anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/anti-patterns.md), the system categorizes tells into Critical, Major, and Minor anti-patterns that must be removed to achieve a handcrafted aesthetic.

## Critical Anti-Patterns: The "AI Look" Killers

These patterns are flagged as Critical because they are immediate indicators of templated, generic output.

### Purple-Gradient Heroes and Aurora Blobs

The **purple-gradient hero**—a full-viewport section with a purple-to-blue or pink-to-cyan gradient—is recognized as the single most common AI aesthetic. Similarly, **aurora-blob backgrounds** (flowing mesh gradients) are immediate tells. According to [`skills/hallmark/references/color.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/color.md), these should be replaced with a single anchor hue and solid background, using tint neutrals instead.

```html
<!-- ❌ Anti-pattern: Purple gradient hero -->
<section class="hero" style="background: linear-gradient(135deg, #7e5aff, #2b5aff);">

```

```html
<!-- ✅ Hallmark-approved: Token-based solid background -->
<section class="hero" style="background: var(--color-background);">

```

### Inter-Everywhere Typography

Using the same font family (e.g., Inter or Roboto) for both display and body copy creates indistinguishable, template-like pages. The [`skills/hallmark/references/typography.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/typography.md) file mandates pairing a distinctive display face with a refined body face to maintain visual hierarchy.

### Three-Column Feature Grids

The **three-column feature grid**—equal-width cards with icons above headings—is the default LLM output for "features" sections. Hallmark recommends varying column widths, mixing card heights, or moving icons inline to break the grid monotony.

### Card-in-Card Nesting

**Card-in-card** describes nested bordered containers without semantic purpose. This visual nesting appears as filler content. The fix is simple: maintain a single containment layer and drop the inner card.

```html
<!-- ❌ Nested cards -->
<div class="card outer">
  <div class="card inner">
    <h2>Feature</h2>
    <p>Details</p>
  </div>
</div>

```

```html
<!-- ✅ Single-layer card -->
<div class="card">
  <h2>Feature</h2>
  <p>Details</p>
</div>

```

### Gradient Headlines

Applying `background-clip: text` with a linear gradient to headings is a quick AI tell. Instead, use solid ink from the token system defined in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css).

```css
/* ❌ Gradient headline */
h1 {
  background: linear-gradient(to right, #7e5aff, #ff7e5a);
  -webkit-background-clip: text;
  color: transparent;
}

```

```css
/* ✅ Solid ink with weight emphasis */
h1 {
  color: var(--color-accent);
  font-weight: 800;
}

```

### Full-Viewport Centered Heroes

The **full-viewport centered hero** (`min-height: 100vh` with centered content and a single CTA) is the default LLM landing page structure. To fix this, allow the hero to grow with its content, bias the layout left or right, and add meaningful copy rather than minimalist centered text.

### Pure Black and Pure White

Using `#000000` or `#ffffff` backgrounds creates flat, synthetic appearances lacking brand hue. The [`color.md`](https://github.com/Nutlope/hallmark/blob/main/color.md) reference specifies tinting toward the chosen anchor hue instead.

### AI Navigation and Footers

**AI nav** (wordmark + inline links + CTA) and **four-column footers** are genre-blind patterns identical across many SaaS pages. The [`skills/hallmark/references/components/component-cookbook.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/components/component-cookbook.md) provides routing tables to select appropriate navigation and footer variants that match the specific brand architecture.

## Major Anti-Patterns: Layout and Interaction Smells

These issues degrade perceived quality through animation, spacing, or structural choices.

### Centred Everything and Tag-Left Headers

**Centred everything**—where all sections, headings, and buttons are centered—removes visual hierarchy. Similarly, the **tag-left/header-right** pattern (two-column section headers with an eyebrow label on the left and heading on the right) is the strongest AI tell for editorial-style SaaS pages. Collapse these to a single vertical stack.

### Animation Excess

**Bounce or elastic easing** creates dated, noisy motion. Replace with exponential ease-out (`--ease-out` from [`skills/hallmark/references/motion.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/motion.md)). **Animate-on-scroll everywhere** makes pages overly busy; choose a single orchestrated entrance instead.

### Hover-Only Affordances

UI that only reacts on hover is inaccessible on touch devices. Provide focus states and tap-able equivalents for all interactive elements.

### Invented Metrics and Placeholder Content

**Invented metrics**—fabricated numbers like "Trusted by 50,000+ teams"—are classic AI tells. Replace these with placeholders (`—`) or remove the stat-led macrostructure entirely.

```html
<!-- ❌ Fabricated stat -->
<div class="stat">
  <h3>Trusted by 50,000+ teams</h3>
</div>

```

```html
<!-- ✅ Placeholder for real data -->
<div class="stat">
  <h3>Trusted by <span class="placeholder">—</span> teams</h3>
  <p class="note">Metric to confirm</p>
</div>

```

### Technical Shortcuts

**Lottie shortcut** (using Lottie for simple effects) and **Three.js for a still object** add unnecessary performance costs. Implement simple effects with CSS keyframes or SVG animation, and use photographs for static 3D objects. The [`skills/hallmark/references/assets.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/assets.md) file specifies canonical asset choices to prevent these mismatches.

## Minor Anti-Patterns: Polish Details

Minor tells include **straight quotes** instead of typographic quotes, **double-hyphen dashes** instead of em-dashes, **placeholder names**, **startup-cliche product names**, `z-index: 9999`, **uniform section padding**, and `width: 100vw` instead of relative widths. These small quality-of-life issues hint at rushed generation and should be cleaned according to standard typographic conventions.

## How to Audit Your Code with `hallmark audit`

The `hallmark audit` verb scans a target file against the complete list in [`skills/hallmark/references/anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/anti-patterns.md) and produces a punch-list of violations. This audit checks against the 58 post-emit gates defined in [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md) to enforce anti-patterns at runtime.

To maintain compliance, reference all colours and fonts via CSS custom properties (`var(--color-accent)`) from [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) rather than inline values, ensuring token discipline and cohesion.

## Summary

- **Critical anti-patterns** like purple-gradient heroes, Inter-everywhere typography, and three-column feature grids immediately signal AI-generated design.
- **Major anti-patterns** including centered everything, bounce easing, and invented metrics degrade interaction quality and credibility.
- **Minor anti-patterns** such as straight quotes and uniform padding indicate rushed generation.
- The `hallmark audit` command in [`skills/hallmark/SKILL.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md) automatically detects these violations against [`anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/anti-patterns.md).
- Always use the token system in [`site/css/tokens.css`](https://github.com/Nutlope/hallmark/blob/main/site/css/tokens.css) and reference [`typography.md`](https://github.com/Nutlope/hallmark/blob/main/typography.md), [`color.md`](https://github.com/Nutlope/hallmark/blob/main/color.md), and [`macrostructures.md`](https://github.com/Nutlope/hallmark/blob/main/macrostructures.md) for compliant alternatives.

## Frequently Asked Questions

### What makes purple-gradient heroes an anti-pattern in Hallmark development?

Purple-to-blue gradients are recognized as the single most common AI aesthetic in the Hallmark framework. According to [`skills/hallmark/references/anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/anti-patterns.md), this pattern conveys a "template" feel that contradicts the handcrafted aesthetic. The recommended fix uses a single anchor hue with solid backgrounds defined in the token system.

### How does the `hallmark audit` command detect anti-patterns?

The `hallmark audit` verb scans target files against the master list in [`skills/hallmark/references/anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/anti-patterns.md) and outputs a formatted punch-list. It evaluates markup against 58 post-emit gates specified in [`skills/hallmark/references/slop-test.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/slop-test.md), checking for critical tells like gradient headlines and card-in-card nesting.

### What is the "Inter-everywhere" anti-pattern?

**Inter-everywhere** refers to using the same font family (typically Inter or Roboto) for both display and body text. As documented in [`skills/hallmark/references/typography.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/typography.md), this one-font approach makes pages indistinguishable from generic templates. The fix requires pairing a distinctive display face with a refined body face.

### Where should developers place real screenshots instead of re-drawn UI chrome?

The **re-drawn UI chrome** anti-pattern involves hand-crafting browser bars, phone frames, or IDE windows in CSS. According to [`skills/hallmark/references/anti-patterns.md`](https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/references/anti-patterns.md), developers should use real screenshots wrapped in `<figure>` elements with genuine device frames rather than decorative CSS approximations, removing redundant and often inaccurate representations.