Design Taste & Anti-Slop

Override generic AI-generated output with intentional design decisions. The goal is not to look different for its own sake — it's to ensure every choice is a choice, not a default.

The Slop Fingerprints

These patterns appear in >80% of AI-generated interfaces. If your design has three or more, it reads as machine-made.

Visual Slop

• Purple-blue gradient on white: the single most common AI color scheme. If your hero has a purple-to-blue gradient text or background, you've defaulted.
• Cream/sand/beige body background: the saturated AI default of 2026. The whole warm-neutral band (OKLCH L 0.84–0.97, C < 0.06, hue 40–100) reads as cream/sand/paper regardless of what you call it. Token names like --paper, --cream, --sand, --bone are tells.
• Inter/Roboto/system font stack: the safe default. If you didn't choose a font, you defaulted.
• Centered everything: hero text centered, features centered, CTA centered. Every section with the same centered layout reads as template.
• Card grid for everything: features as cards, testimonials as cards, pricing as cards. Cards are the lazy answer — use them only when they're truly the best affordance. Nested cards are always wrong.
• Rounded corners on everything: border-radius: 1rem on every element. Sharp corners are a design choice too.
• Generic stock-style imagery: gradient blobs, abstract shapes, people smiling at laptops. Use real, subject-specific assets or nothing.
• Identical section structure: hero → features → testimonials → CTA. Every AI page follows this exact sequence.

Structural Slop

• Happy path only: no loading states, no error states, no empty states, no edge cases. The interface only looks right when everything goes perfectly.
• No focus states: keyboard navigation is an afterthought. Tab through the page — if you can't see where focus is, it's slop.
• Hardcoded values: #6366f1 instead of var(--color-primary). Values that don't survive theming.
• Lorem ipsum: placeholder text that teaches nothing. Write real microcopy — it doubles as documentation.

Typography Slop

• Single weight for everything: all regular, or all bold. No hierarchy.
• Similar fonts paired together: two geometric sans-serifs, two humanist sans-serifs. Pair on a contrast axis (serif + sans) or use one family in multiple weights.
• Too many fonts: 4+ font families is chaos, not variety. 2 families + 1 mono is the ceiling.
• Font size without line-height: font-size: 2rem without line-height: 1.1 is a readability disaster.

The Taste Test

Before showing work, run these checks:

The Swap Test

If you swapped the typeface for the most common alternative, would anyone notice? The places where swapping wouldn't matter are the places you defaulted.

The Squint Test

Blur your eyes. Can you still perceive hierarchy? If everything looks the same weight, there's no hierarchy.

The Signature Test

Can you point to five specific elements where a distinctive design choice appears? If not, the design is generic.

The Token Test

Read your CSS variables out loud. Do they sound like they belong to this product's world (--ink, --parchment, --signal) or like a template (--gray-700, --surface-2)?

The Sameness Test

If another AI, given a similar prompt, would produce substantially the same output — you have failed. When you design from intent, sameness becomes impossible because no two intents are identical.

Intent Before Implementation

Before touching code, answer these with specifics:

1. Who is this human? Not "users." The actual person. Where are they when they open this? What's on their mind?
2. What must they accomplish? Not "use the dashboard." The verb. Grade these submissions. Find the broken deployment.
3. What should this feel like? "Clean and modern" means nothing. Warm like a notebook? Cold like a terminal? Dense like a trading floor?
4. What is the signature? One element — visual, structural, or interaction — that could only exist for THIS product.

If you cannot answer these with specifics, stop. Ask the user. Do not guess. Do not default.

Color Decisions

Avoid Warmth-by-Default

"Warmth" in a brand is carried by accent + typography + imagery, not by body background. If the brief says "warm, traditional" — do NOT translate that into a near-white warm-tinted bg. Pick:

• A saturated brand color as the body (terracotta, oxblood, deep ochre, near-black).
• A true off-white at chroma 0 (or chroma toward the brand's own hue, not toward warmth-by-default).
• A darker mid-tone tinted neutral that's clearly the brand's own.

Tinted Neutrals

Add 0.005–0.015 chroma toward the brand's hue. Don't default-tint toward warm or cool "because the brand feels that way" — that's the cross-project monoculture move.

Committed Color

• Committed: one saturated color carries 30–60% of the surface. Brand default for identity-driven pages.
• Full palette: 3–4 named roles, each used deliberately. Brand campaigns; product data viz.
• Drenched: the surface IS the color. Brand heroes, campaign pages.

Typography Decisions

The Pairing Rule

Pair on a contrast axis:

• Serif display + sans body (editorial)
• Geometric sans display + humanist sans body (modern)
• One family, multiple weights (restrained)

Never pair similar-within-category (two geometric sans-serifs).

The Hierarchy Rule

Every heading level should be distinguishable by at least TWO properties:

• Size + weight
• Size + color
• Weight + letter-spacing
• Size + font family

If only one property changes, the hierarchy is too subtle.

Layout Decisions

Break the Grid (Intentionally)

• Asymmetric layouts over centered symmetry.
• Overlapping elements create depth.
• Grid-breaking elements (a wide image in a narrow column) create visual interest.
• Generous negative space OR controlled density — pick one per page, don't default to medium.

Section Variety

Every section should have a different structural pattern:

• Hero: full-bleed image + overlaid text
• Features: alternating image/text rows (not a card grid)
• Stats: horizontal number strip
• Testimonials: single large quote, not three cards
• CTA: full-width colored block

The Mandate

Every choice must be a choice. For every decision, you must be able to explain WHY. If your answer is "it's common" or "it's clean" or "it works" — you haven't chosen. You've defaulted. Defaults are invisible. Invisible choices compound into generic output.

Before showing the user, look at what you made. Ask yourself: "If they said this lacks craft, what would they mean?" That thing you just thought of — fix it first.