Anti-Patterns

Every piece of UI in Trovella is generated or modified by AI agents. This creates a specific risk: AI models trained on internet-scale data produce the statistical median of the internet. Without deliberate countermeasures, every AI-assisted interface converges on the same look -- indigo gradients, uniform card grids, safe sans-serif fonts, and emotionally flat layouts.

This page documents the specific tells of AI-generated design and how Trovella's design language counters each one. It serves as a review checklist for any contributor (human or AI agent) shipping UI work.

The Core Problem

When an AI is prompted to "build a modern SaaS dashboard," it produces the statistical average of all SaaS dashboards in its training data. The homogenization is accelerating: AI models increasingly learn from prior AI outputs, causing unusual palettes, layouts, and design choices to disappear from the output distribution over time.

The stakes are concrete: 75% of users judge a company's credibility based on its website design, and those judgments form in under three seconds. A site that looks like every other AI-generated template signals "nobody cared enough to design this."

The Twelve Tells

Color Tells

1. Purple/indigo as primary color. The single most reliable indicator of AI-generated design. AI defaults to bg-indigo-500 or purple-to-blue gradients because indigo is massively overrepresented in training data. In August 2025, Adam Wathan publicly acknowledged that making every button in Tailwind UI use bg-indigo-500 five years earlier had caused every AI-generated interface to turn purple.

Trovella's countermeasure: Deep teal primary (hue 188), chosen for brand alignment and competitive differentiation. See Color System.

2. Gradients without meaning. AI adds gradients to hero sections and buttons because gradients appear frequently in templates. Human designers use gradients to convey depth, direction, or brand identity.

Trovella's countermeasure: If a gradient doesn't serve a specific purpose, it is removed and replaced with a flat color. The design system does not include gradient tokens.

3. Default neutral palette. Using Tailwind's gray-50 through gray-900 without tinting produces a cold, generic feel.

Trovella's countermeasure: Warm neutrals (hue 40, stone/sand family) tint every background, border, and text color. The warmth is subtle but structurally different from the default gray scale. See Color System.

Layout Tells

4. The "Hero Left, Cards Below" layout. Left-aligned headline, right-side image, followed by three equal-width feature cards. This is the most common AI-generated landing page structure.

Trovella's countermeasure: Break it by using asymmetric layouts, varied card sizes, bento grids, or full-width content sections. Never accept a three-column feature grid as a first draft.

5. Uniform card grids. Every card the same width, same height, same border radius, same padding, same shadow.

Trovella's countermeasure: Create hierarchy by making one card larger (the primary feature), varying internal layouts across cards, and breaking the grid intentionally. Dashboard widgets use the F-pattern with intentional size variation.

6. Symmetric perfection. Every element perfectly centered, every section perfectly balanced.

Trovella's countermeasure: Intentional asymmetry -- whitespace distributed unevenly to guide the eye, content blocks that don't mirror each other. The dashboard North Star metric card is deliberately wider than the supporting KPIs.

Typography Tells

7. Single sans-serif at predictable sizes. One font, uniform weight, mathematically regular size steps.

Trovella's countermeasure: DM Serif Display for headings + DM Sans for body. The serif/sans-serif contrast is visible within the first second of any page. Four weights used intentionally. See Typography.

8. No typographic personality. AI avoids opinionated typography choices because safe choices score highest statistically.

Trovella's countermeasure: Negative letter-spacing on headings (-0.01em to -0.03em). Line height varies by context (1.5 for body, 1.1-1.25 for headings). Weight contrast used aggressively (400 body, 600 structural emphasis, 700 maximum emphasis).

Content and Copy Tells

9. Vague aspirational headlines. "Empower your workflow," "Unlock your potential," "Transform how you work." These are the written equivalent of purple gradients.

Trovella's countermeasure: Specific, concrete value propositions written in the brand voice. The vocabulary blocklist bans: "empower," "unlock," "transform," "streamline," "leverage," "cutting-edge," "innovative," "seamless," "robust," "utilize," "elevate." See Brand Identity.

10. Uniform section rhythm. Every section has the same structure: heading, subheading, three items, CTA. Repeat.

Trovella's countermeasure: Vary rhythm intentionally -- a dense data section followed by generous whitespace, a single powerful statement between detailed feature blocks, varying content block widths across sections.

Component and Interaction Tells

11. Default component styling. Using shadcn/ui components with zero visual customization -- default shadows, default border radius, default spacing.

Trovella's countermeasure: Teal-tinted shadows (hue 188 at low opacity), hierarchical border radius (sm for inputs, md for cards, lg for modals, xl for large containers), warm neutral borders. Every shadcn/ui component inherits brand-specific styling through the token system. See Design Tokens.

12. Missing or generic micro-interactions. No hover states beyond color changes, no transition timing adjustments.

Trovella's countermeasure: Button hover with subtle translateY (-1px) and increased shadow. Cards lift on hover. Purpose-specific transition timing (100ms for button active, 200ms for modal enter, 350ms for skeleton reveal). Different easing curves for enter vs. exit animations. See Interaction Patterns.

Process Rules for AI Agents

These rules are embedded in the project's CLAUDE.md and enforced by the design token architecture:

1. Never use framework default colors. Every color must come from the project's semantic tokens. If reaching for bg-blue-500 or text-gray-600, stop and find the semantic token.

2. Design tokens in context. Before generating any component, the full color token set and brand personality descriptors must be in the prompt context.

3. Generate one component at a time. Smaller prompts (under 50 words of instruction per component) produce higher quality output. Generate, verify against the checklist, then proceed.

4. Check every output against the twelve tells. After generating any UI code, explicitly verify: Is the primary color from tokens? Are cards varied in size? Is letter-spacing adjusted for headings? Are there micro-interactions? Is copy specific, not aspirational?

5. Reference named products, not adjectives. "Style this like Linear's sidebar density with Stripe's use of whitespace" produces dramatically better output than "make it clean and professional."

6. Specify what NOT to build. Include explicit anti-instructions: "Do not use a three-column feature grid. Do not add a gradient. Do not use uniform card sizes."

7. Treat generated code as a first draft. Every AI-generated component is a starting point. Spacing, heading tracking, border treatments, hover states, and empty state personality all need review.

8. Use specific brand personality descriptors. Never "clean and modern." Instead: "warm but data-dense," "precise but approachable," "confident but not corporate." The unusual pairing forces output away from the average.

Pre-Ship Checklist

Run this before shipping any page or component:

• No Tailwind default colors -- all colors from project tokens
• No purple/indigo unless explicitly justified
• No uniform card grids -- at least one card differs in size or layout
• Headings use negative letter-spacing (-0.02em or tighter)
• Line-height varies between body (1.5) and headings (1.1-1.25)
• At least 3 distinct shadow depths in use
• Border radius varies by component type (inputs vs. cards vs. modals)
• Hover states on all interactive elements with intentional timing
• Copy uses no banned vague words
• Empty states have personality, not just "No data" + icon
• Spacing between sections is deliberately non-uniform
• At least one asymmetric or unexpected layout choice per page
• Neutrals are tinted (warm), not pure gray
• Whitespace is used as a design element, not just default padding
• Every gradient serves a specific purpose or is removed

Iconography and Illustration

Icon System: Lucide

Lucide icons (1,500+, MIT-licensed, 24x24 grid, 2px stroke) are customized for brand identity:

• Color -- CSS custom properties for automatic dark mode switching, not hardcoded values
• Stroke width -- 2px default; 1.5px or 2.5px available for variation
• Size system -- 16px (inline), 20px (nav/buttons), 24px (cards), 32px (empty states). Never freestyle sizes.
• Icon badges -- icons inside rounded shapes with brand colors for feature sections and navigation

Illustration Strategy

Phase	Approach	Cost
MVP	Enhanced Lucide icons in brand colors (Claude Code generates as reusable components)	$0
Post-PMF ($5K+ MRR)	Commissioned flat-with-texture illustrations from a single illustrator	$1,000-2,500
Growth ($30K+ MRR)	Full illustration system from boutique agency	$2,000-7,000

Key principle: Visual consistency across ten "good enough" illustrations outperforms one stunning illustration alongside nine mismatched ones. Consistency is a trust signal.

When AI-Generated Images Are Appropriate

• Brainstorming and mood boards during brand exploration
• Blog post header images
• Documentation diagrams
• Social media quick-turn content

When AI-Generated Images Are Not Appropriate

• Hero illustrations on the marketing site
• Brand-defining spot illustrations in the product UI
• App Store / Play Store screenshots
• Any asset representing brand identity at a glance

Related Pages

• Design Tokens -- the token values that enforce anti-generic design
• Color System -- palette reasoning
• Typography -- font choices that counter the "single sans-serif" tell
• Brand Identity -- voice and copy guidelines
• Interaction Patterns -- animation and micro-interaction design