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

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.

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, 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, these should be replaced with a single anchor hue and solid background, using tint neutrals instead.

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

<!-- ✅ 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 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.

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

<!-- ✅ 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.

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

/* ✅ 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 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 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). 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.

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

<!-- ✅ 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 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 and produces a punch-list of violations. This audit checks against the 58 post-emit gates defined in 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 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 automatically detects these violations against anti-patterns.md.
• Always use the token system in site/css/tokens.css and reference typography.md, color.md, and 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, 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 and outputs a formatted punch-list. It evaluates markup against 58 post-emit gates specified in 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, 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, developers should use real screenshots wrapped in <figure> elements with genuine device frames rather than decorative CSS approximations, removing redundant and often inaccurate representations.

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