design-patterns

name	design-patterns
description	Reference guide for detecting AI slop patterns in visual and UX design including generic gradients, cookie-cutter layouts, and buzzword-heavy copy. Use as reference when reviewing design quality.

Design Slop Patterns

This reference documents common "AI slop" patterns in visual and UX design that indicate generic, low-quality, AI-generated content.

Table of Contents

• Visual Design Slop
• Color and Typography
• Layout Antipatterns
• Component Overuse
• UX Writing Slop
• Animation and Interaction

Visual Design Slop

Generic Gradient Backgrounds

High-Risk Patterns:

• Purple/pink/blue mesh gradients (the "AI startup" gradient)
• Holographic gradients on everything
• Gradient overlays on every image
• Gradients as the primary design element rather than accent

Better Approach:

• Use solid colors as foundation
• Gradients sparingly for emphasis
• Consider brand-specific color palettes
• Explore textures, patterns, or illustrations

Overused Visual Motifs

Common AI Design Clichés:

• Floating 3D geometric shapes (cubes, spheres, toruses)
• Glass morphism everywhere
• Neumorphism (soft UI) on inappropriate elements
• Excessive blur effects
• Particle systems for no reason
• Tilt/perspective transforms on cards

Detection Signal: If every section has floating 3D shapes or glass effects, it's likely slop.

Stock Photo Aesthetics

Red Flags:

• Generic diverse workplace photos
• Excessive whitespace with minimal content
• Hero images of people pointing at screens enthusiastically
• Business people in suits shaking hands
• Overhead shots of "creative workspace" with MacBook and coffee

Better: Use authentic, specific imagery that relates to actual content.

Color and Typography

Color Palette Slop

Generic Palettes to Avoid:

• Purple (#7F5AF0) + Cyan (#2CB67D) + Pink (#FF6AC1)
• Entire palette of pastel colors
• Neon everything
• Pure black (#000) and pure white (#FFF) as main colors

Better Approach:

• Build palette from brand or content needs
• Use color theory intentionally
• Consider accessibility (WCAG contrast ratios)
• Limit palette to 2-3 primary colors + neutrals

Typography Slop

Overused Font Combinations:

• Inter for everything
• Montserrat + Open Sans
• Poppins + Roboto
• Using same font family for headings and body

Generic Font Choices:

• Defaulting to "modern" sans-serif for everything
• Using display fonts for body text
• Inconsistent font weights and sizes
• Excessive variation (5+ different fonts)

Better:

• Choose fonts that match content tone
• Establish clear hierarchy (H1, H2, body, caption)
• Test readability at various sizes
• Use 2-3 font families maximum

Type Hierarchy Issues

Slop Indicators:

• Every heading the same size
• Body text too small (<16px)
• Insufficient line height (< 1.5 for body text)
• Poor contrast ratios
• Centered text for long paragraphs

Layout Antipatterns

Generic Landing Page Structure

The AI Landing Page Template:

1. Hero with gradient background + "Empower Your Business"
2. Three feature cards with icons
3. Stats section with big numbers
4. Testimonials (often fake-looking)
5. Pricing cards (often generic)
6. FAQ section
7. CTA button "Get Started Today"

Better: Design layout based on user journey and actual content needs.

Spacing Slop

Red Flags:

• Everything spaced exactly the same
• Excessive whitespace without purpose
• Cramped sections alternating with huge gaps
• No visual grouping (everything floating equally)

Better:

• Use spacing to create visual hierarchy
• Group related elements closer
• Vary spacing intentionally
• Follow 8px or 4px grid systems

Card Overuse

When Cards Become Slop:

• Everything is in a card
• Cards within cards within cards
• Cards with excessive shadows and borders
• All cards same size regardless of content

Better:

• Use cards to group related information
• Vary card styles based on importance
• Consider alternatives: simple borders, background colors, spacing

Center-Alignment Everywhere

Slop Pattern:

• All text center-aligned
• All elements centered on page
• Symmetry forced where it doesn't belong

Better:

• Use alignment intentionally
• Left-align body text for readability
• Center when it serves a purpose
• Consider asymmetric layouts

Component Overuse

Button Slop

Generic Button Patterns:

• Every button has excessive border radius (fully rounded)
• Buttons floating with huge shadows
• Gradient buttons everywhere
• "Ghost buttons" as primary CTAs
• Buttons with icons but no text labels

Better:

• Style buttons based on hierarchy (primary, secondary, tertiary)
• Use appropriate sizes for context
• Ensure sufficient click target size (44x44px minimum)
• Clear, action-oriented labels

Icon Slop

Red Flags:

• Generic line icons for everything
• Icons without labels in unclear contexts
• Decorative icons that add no meaning
• Inconsistent icon styles (mixing outlined and filled)
• Icons from different icon sets

Better:

• Use icons to clarify, not decorate
• Maintain consistent icon style
• Include text labels when meaning is unclear
• Source from single icon system

Form Slop

Generic Form Patterns:

• Every input has an icon inside it
• Excessive placeholder text
• Floating labels that don't add value
• No clear error states
• Generic validation messages

Better:

• Clear labels outside inputs
• Helpful error messages
• Logical field grouping
• Progressive disclosure for complex forms

UX Writing Slop

Generic Microcopy

Overused Phrases:

• "Empower your business"
• "Take control of your future"
• "Join thousands of satisfied customers"
• "Transform your workflow"
• "Seamless experience"
• "Unlock your potential"

Generic CTAs:

• "Get Started"
• "Learn More"
• "Sign Up Now"
• "Try It Free"

Better:

• Be specific about the value proposition
• Use action-oriented, clear language
• Tell users exactly what happens when they click
• Match brand voice and tone

Empty State Messages

Generic Slop:

• "No items found"
• "Nothing to see here"
• "Oops! Something went wrong"
• Unhelpful error messages

Better:

• Explain why the state is empty
• Provide next steps or actions
• Use appropriate tone (not overly casual for serious errors)
• Helpful recovery suggestions

Animation and Interaction

Animation Slop

Overused Patterns:

• Everything fades in on scroll
• Parallax effects on every element
• Excessive slide-in animations
• Bouncing elements
• Rotating 3D elements for no reason

Better:

• Use animation to direct attention
• Keep animations subtle and purposeful
• Respect prefers-reduced-motion
• Animation duration < 300ms for most interactions

Interaction Slop

Generic Patterns:

• Hover effects on everything
• Cursor changes to pointer on non-clickable elements
• Confusing interactive vs non-interactive cues
• Inconsistent interaction patterns

Better:

• Clear interactive affordances
• Consistent interaction patterns
• Appropriate feedback for all interactions
• Consider touch and keyboard users

Platform-Specific Slop

Web Design

• Dashboard templates with generic metrics
• Unnecessary infinite scroll
• Pop-ups and modals for everything
• Cookie consent banners that hide content

Mobile Design

• Bottom navigation with 5+ items
• Hamburger menus hiding important navigation
• Inconsistent gesture handling
• Ignoring platform conventions (iOS vs Android)

Presentation Design

• Every slide with same template
• Bullet point overload
• Tiny unreadable text
• Generic stock photos as backgrounds
• Excessive transitions between slides

Detection Signals

High-Confidence Slop Indicators

1. Design looks exactly like other AI-generated designs
2. No clear visual hierarchy
3. Generic color palette (purple/pink/cyan)
4. Copy uses only buzzwords and generic CTAs
5. Layout follows template exactly without customization

Medium-Confidence Indicators

1. Overuse of glassmorphism or neumorphism
2. All components have same visual weight
3. Excessive use of trendy design patterns
4. No clear information architecture
5. Design ignores actual content needs

Cleanup Strategies

Visual Audit

1. Remove decorative elements that don't serve purpose
2. Simplify color palette to 2-3 main colors + neutrals
3. Establish clear typographic hierarchy
4. Ensure sufficient contrast for accessibility
5. Remove excessive animations and effects

Content-First Redesign

1. Start with actual content and user needs
2. Design information hierarchy based on importance
3. Choose visual style that matches content tone
4. Create layouts that serve content, not templates
5. Test with real content, not lorem ipsum

Accessibility Pass

1. Check color contrast ratios (WCAG AA minimum)
2. Ensure interactive elements are keyboard accessible
3. Add proper ARIA labels where needed
4. Test with screen readers
5. Verify all text is legible at various sizes

Context Matters

Some patterns are appropriate in context:

• Gradient backgrounds: Fine for marketing sites if on-brand
• Cards: Appropriate for displaying distinct, comparable items
• Generic CTAs: "Get Started" is fine if that's actually what happens
• Animations: Purposeful motion can enhance UX
• Stock photos: Sometimes you need generic imagery

The issue is thoughtless application of patterns without considering whether they serve the user's needs or your design goals.

Red Flags Checklist

Your design might be slop if:

• Could be for any product/company
• Looks like Figma community templates
• All visuals are decorative, none informative
• Copy is entirely buzzwords
• Design decisions can't be justified
• Layout doesn't adapt to actual content
• No clear visual hierarchy
• Looks trendy but serves no purpose
• Every element uses the same design treatment
• Design ignores brand and user context