Anti-Patterns: What Never to Do
84 rules extracted from 8 expert video sources and 20+ production design tools. Organized as a mental decision flow so you catch mistakes at the stage where they're cheapest to fix.
The 9-Gate Decision Flow
Walk through at every design stage. Each gate catches a category of mistakes before they compound downstream.
Gate 1 — Before You Touch a Design Tool
Did you skip user intent and jump straight to pixels?
Starting with UI elements before mapping user intent is the #1 structural mistake. You'll build something beautiful that nobody can use.
Gate 2 — Color and Theme
Are you using color for decoration instead of communication?
Overusing brand color, clashing gradients, and skipping semantic colors make the UI stressful and meaningless. 60-30-10 is the guardrail.
Gate 3 — Typography
Do you have more than 4 font sizes or 3 weights?
Excessive type variation destroys hierarchy. If everything is a different size, the eye has no entry point.
Gate 4 — Spacing and Layout
Are your pixel values random or too tight?
Random spacing (11px here, 25px there) signals "no system." Cramped layouts are the #1 amateur tell.
Gate 5 — Visual Effects
Are you adding effects because they look cool, not because they communicate?
Default shadows, harsh gradients, heavy glows are the hallmark of "I just learned Figma."
Gate 6 — Components and Consistency
Are similar elements styled differently for no reason?
Mixed corner radii, mismatched icons, inconsistent buttons — each is a tiny trust signal lost.
Gate 7 — Interactive States
Can the user tell that their action registered?
Missing hover states, no loading indicators, no error messages — every gap makes users think "is this broken?"
Gate 8 — Content and Copy
Are you designing with perfect data and lorem ipsum?
The design breaks in production the moment someone enters a 47-character name or has zero items.
Gate 9 — AI Slop Detection
Does this look like every other AI-generated UI?
Emoji icons, generic Inter, timid palettes, redundant KPI cards, stock gradients — if you've seen it on 50 AI demos, it's AI slop.
1. Intent and Planning (7 rules)
| Never |
Instead |
| Start designing before mapping user intent |
Define what the user came to accomplish, map the flow |
| Skip sketching the user flow |
Even boxes on paper catch 80% of flow problems |
| Add features that don't serve a defined intent |
Ask: "Does this add value the simpler version didn't?" |
| Design with lorem ipsum or perfect placeholder data |
Real content surfaces real problems |
| Forget nav links, hidden states, or dynamic interactions |
Audit every screen for: nav, hovers, empty, error, loading |
| Use infinite scroll when load-more works |
Load more gives users control and lets them reach the footer |
| Leave icons on bright images without contrast |
Add a circle/pill background behind floating icons |
2. Color and Theme (8 rules)
| Never |
Instead |
| Overuse brand color (reverse 60-30-10) |
60% neutral, 30% complementary, 10% brand |
| Use multi-hue gradients (blue-to-green) |
Same-hue gradients or flat color |
| Use color for decoration without meaning |
Blue = info, red = danger, yellow = warning, green = success |
| Mix too many different colors |
Shades and tints of one color |
| Use AI-chosen colors without auditing |
One dominant accent with sharp contrast |
| Use pure black (#000) in dark mode |
Near-black: #0f0f0f, #121212, #1a1a1a |
| Keep saturated accents at full brightness in dark mode |
Reduce saturation and brightness |
| Default to dark/cyberpunk/neon |
Start light monochromatic. Dark is opt-in. |
3. Typography (6 rules)
| Never |
Instead |
| Use more than 6 font sizes (4 in dashboards) |
Target 4 sizes, 2 weights |
| Use more than 3 font weights |
Regular + Bold covers 90% |
| Leave loose letter-spacing on headers |
Tighten to -2% to -3%, line-height 110-120% |
| Default to Inter/Roboto/Arial for production UI |
Choose a distinctive sans-serif |
| Use text larger than 24px in dashboards |
Use weight and color for hierarchy, not size |
| Use proportional fonts for changing numbers |
Monospace or tabular-nums for dynamic values |
4. Spacing and Layout (5 rules)
| Never |
Instead |
| Use random pixel values (11px, 25px) |
Snap to 8pt grid: 12, 24, 40 |
| Pack content too tight |
Let things breathe. Group tight, separate wide. |
| Give mobile less space than desktop |
Mobile needs MORE space. 44px tap targets. |
| Break the grid by accident |
Intentional grid-breaking is design. Accidental is sloppy. |
| Use only placeholders as input labels |
Always-visible labels above or beside inputs |
5. Visual Effects (8 rules)
| Never |
Instead |
| Use default shadow values |
Change color to light gray, increase blur, or remove |
| Let the shadow be the first thing noticed |
Shadows should be felt, not seen |
| Use shadows for depth in dark mode |
Use background lightness differences |
| Stack effects (gradient + blur + glow + shadow) |
One subtle effect maximum |
| Use pure black shadows on glass elements |
Sample background color and desaturate |
| Place glass elements over solid/empty backgrounds |
Glass must overlay contrasting content |
| Use full-screen overlays on hero images |
Linear gradient or progressive blur |
| Use glow effects on professional UIs |
Subtle borders and shadows |
6. Components and Consistency (7 rules)
| Never |
Instead |
| Mix corner radii on similar components |
Pick ONE (8-12px) and apply everywhere |
| Mix icon fill, line-weight, or style in same section |
One library, one style, consistent weight |
| Style identical-function elements differently |
Same size, radius, style, padding |
| Use emojis as UI icons |
Lucide, Phosphor, or Feather icons |
| Size icons significantly larger than text |
Match icon size to font line-height |
| Use non-obvious icons without labels |
Tooltips or text labels for non-universal icons |
| Add redundant elements (arrows, strokes, clutter) |
Remove and test. If it works without it, it didn't need it. |
7. Interactive States (6 rules)
| Never |
Instead |
| Ship buttons without hover and disabled states |
Minimum 4 states; full set: 8 |
| Ship inputs without focus and error states |
Focus ring + red border + error message |
| Leave async operations without loading indicators |
Gray out button immediately, spinner for longer ops |
| Skip empty states |
Explain what will appear, give action to populate |
| Use animations that serve only the portfolio |
Every animation adds clarity or functionality |
| Skip confirmation for important actions |
Micro interaction: chip, filled icon, toast |
8. Content, Copy, and Data Viz (7 rules)
| Never |
Instead |
| Repeat words the context already establishes |
"Claim" under "Rewards" heading, not "Claim Voting Rewards" |
| Write button labels that don't match the action |
Button text = what happens. "[Verb] + [what they get]" |
| Use more than 3-4 pricing tiers |
Max 3-4 with highlighted recommended option |
| Use generic icons instead of product screenshots |
Real screenshots, real UI, real product |
| Design charts without a vertical axis |
Always include axes. Flat-top bars. Bar count = data count. |
| Overdesign charts because Dribbble does |
Simple chart with clear data > beautiful unreadable one |
| Use 7+ form fields without knowing the cost |
3-field baseline. Every extra field costs conversions. |
9. AI Slop Detection (9 signals)
If 2+ of these appear in your design, humans will assume a machine made it:
| Signal |
Fix |
| Emojis as functional icons |
Lucide, Phosphor, Feather |
| Inter or Roboto as the only font |
Distinctive sans-serif |
| Evenly-distributed timid palette |
One dominant accent with sharp contrast |
| Redundant KPI cards on every dashboard |
Only metrics the user actually needs |
| Stock gradients (purple-to-blue) |
Flat colors or same-hue gradients |
| Scattered micro-interactions everywhere |
One orchestrated page load |
| Symmetric, centered layouts only |
Asymmetry, overlap, grid-breaking |
| Generic placeholder images |
Real product screenshots |
| Space Grotesk as the "modern" font |
Research fonts for your brand |
10. BLOCK-Level Violations (8 hard blockers)
Any one of these is an automatic block. The design cannot ship until fixed.
| BLOCK |
Fix |
| CTA labels: "Submit," "OK," "Click Here" |
Verb + noun: "Send Message," "Create Account" |
| Empty state: "No data found" |
Explain what appears + give action to populate |
| Error state: "Something went wrong" with no fix |
What broke + how to fix it |
| More than 4 font sizes in a single UI |
Max 4. Use weight and color for additional hierarchy. |
| Any spacing value not a multiple of 4 |
4, 8, 12, 16, 24, 32, 48, 64 |
| Accent color on "all interactive elements" |
List specific elements: primary CTA, active nav, focus ring |
| Hardcoded hex values in component files |
CSS custom properties or design tokens |
| More than 2 font weights |
Regular (400) + Bold (700). Semibold only if structurally justified. |
11. CRO Dark Patterns (7 ethical violations)
These aren't bad UX. They're trust destroyers.
| Never |
Instead |
| Hide or obscure the close button |
Clear, visible close in top-right. Respect the "no." |
| Guilt-trip decline text ("No, I don't want to save money") |
"No thanks" / "Maybe later" |
| Show popups within 5 seconds of page load |
30-60 seconds minimum, or scroll/exit intent |
| Show upgrade prompts during onboarding or mid-flow |
After a value moment, before frustration |
| Disable paste on password fields |
Allow paste. Show requirements upfront. |
| Clear the user's form data on error |
Preserve all data. Highlight only the problem field. |
| Validate while the user is still typing |
Validate on blur (field exit), not on keystroke |
12. Copywriting Traps (6 rules)
| Trap |
Fix |
| "Utilize" instead of "use" |
Everyday words. "Help" not "facilitate." |
| Value buried in qualifications |
Lead with the benefit. Get to the point. |
| "The best solution for your needs" |
Be specific and concrete |
| Trying to say everything at once |
One message per context |
| Feature-focused instead of benefit-focused |
Lead with outcomes, not capabilities |
| Sacrificing clarity for cleverness |
Clarity always wins |
1---2name: anti-patterns3description: 84 UI/UX "never do" rules across 12 categories with a 9-gate mental decision flow. Walk through at every design stage to catch mistakes before they compound.4---56# Anti-Patterns: What Never to Do7884 rules extracted from 8 expert video sources and 20+ production design tools. Organized as a mental decision flow so you catch mistakes at the stage where they're cheapest to fix.910## The 9-Gate Decision Flow1112Walk through at every design stage. Each gate catches a category of mistakes before they compound downstream.1314**Gate 1 — Before You Touch a Design Tool**15Did you skip user intent and jump straight to pixels?16> Starting with UI elements before mapping user intent is the #1 structural mistake. You'll build something beautiful that nobody can use.1718**Gate 2 — Color and Theme**19Are you using color for decoration instead of communication?20> Overusing brand color, clashing gradients, and skipping semantic colors make the UI stressful and meaningless. 60-30-10 is the guardrail.2122**Gate 3 — Typography**23Do you have more than 4 font sizes or 3 weights?24> Excessive type variation destroys hierarchy. If everything is a different size, the eye has no entry point.2526**Gate 4 — Spacing and Layout**27Are your pixel values random or too tight?28> Random spacing (11px here, 25px there) signals "no system." Cramped layouts are the #1 amateur tell.2930**Gate 5 — Visual Effects**31Are you adding effects because they look cool, not because they communicate?32> Default shadows, harsh gradients, heavy glows are the hallmark of "I just learned Figma."3334**Gate 6 — Components and Consistency**35Are similar elements styled differently for no reason?36> Mixed corner radii, mismatched icons, inconsistent buttons — each is a tiny trust signal lost.3738**Gate 7 — Interactive States**39Can the user tell that their action registered?40> Missing hover states, no loading indicators, no error messages — every gap makes users think "is this broken?"4142**Gate 8 — Content and Copy**43Are you designing with perfect data and lorem ipsum?44> The design breaks in production the moment someone enters a 47-character name or has zero items.4546**Gate 9 — AI Slop Detection**47Does this look like every other AI-generated UI?48> Emoji icons, generic Inter, timid palettes, redundant KPI cards, stock gradients — if you've seen it on 50 AI demos, it's AI slop.4950---5152## 1. Intent and Planning (7 rules)5354| Never | Instead |55|---|---|56| Start designing before mapping user intent | Define what the user came to accomplish, map the flow |57| Skip sketching the user flow | Even boxes on paper catch 80% of flow problems |58| Add features that don't serve a defined intent | Ask: "Does this add value the simpler version didn't?" |59| Design with lorem ipsum or perfect placeholder data | Real content surfaces real problems |60| Forget nav links, hidden states, or dynamic interactions | Audit every screen for: nav, hovers, empty, error, loading |61| Use infinite scroll when load-more works | Load more gives users control and lets them reach the footer |62| Leave icons on bright images without contrast | Add a circle/pill background behind floating icons |6364## 2. Color and Theme (8 rules)6566| Never | Instead |67|---|---|68| Overuse brand color (reverse 60-30-10) | 60% neutral, 30% complementary, 10% brand |69| Use multi-hue gradients (blue-to-green) | Same-hue gradients or flat color |70| Use color for decoration without meaning | Blue = info, red = danger, yellow = warning, green = success |71| Mix too many different colors | Shades and tints of one color |72| Use AI-chosen colors without auditing | One dominant accent with sharp contrast |73| Use pure black (#000) in dark mode | Near-black: #0f0f0f, #121212, #1a1a1a |74| Keep saturated accents at full brightness in dark mode | Reduce saturation and brightness |75| Default to dark/cyberpunk/neon | Start light monochromatic. Dark is opt-in. |7677## 3. Typography (6 rules)7879| Never | Instead |80|---|---|81| Use more than 6 font sizes (4 in dashboards) | Target 4 sizes, 2 weights |82| Use more than 3 font weights | Regular + Bold covers 90% |83| Leave loose letter-spacing on headers | Tighten to -2% to -3%, line-height 110-120% |84| Default to Inter/Roboto/Arial for production UI | Choose a distinctive sans-serif |85| Use text larger than 24px in dashboards | Use weight and color for hierarchy, not size |86| Use proportional fonts for changing numbers | Monospace or tabular-nums for dynamic values |8788## 4. Spacing and Layout (5 rules)8990| Never | Instead |91|---|---|92| Use random pixel values (11px, 25px) | Snap to 8pt grid: 12, 24, 40 |93| Pack content too tight | Let things breathe. Group tight, separate wide. |94| Give mobile less space than desktop | Mobile needs MORE space. 44px tap targets. |95| Break the grid by accident | Intentional grid-breaking is design. Accidental is sloppy. |96| Use only placeholders as input labels | Always-visible labels above or beside inputs |9798## 5. Visual Effects (8 rules)99100| Never | Instead |101|---|---|102| Use default shadow values | Change color to light gray, increase blur, or remove |103| Let the shadow be the first thing noticed | Shadows should be felt, not seen |104| Use shadows for depth in dark mode | Use background lightness differences |105| Stack effects (gradient + blur + glow + shadow) | One subtle effect maximum |106| Use pure black shadows on glass elements | Sample background color and desaturate |107| Place glass elements over solid/empty backgrounds | Glass must overlay contrasting content |108| Use full-screen overlays on hero images | Linear gradient or progressive blur |109| Use glow effects on professional UIs | Subtle borders and shadows |110111## 6. Components and Consistency (7 rules)112113| Never | Instead |114|---|---|115| Mix corner radii on similar components | Pick ONE (8-12px) and apply everywhere |116| Mix icon fill, line-weight, or style in same section | One library, one style, consistent weight |117| Style identical-function elements differently | Same size, radius, style, padding |118| Use emojis as UI icons | Lucide, Phosphor, or Feather icons |119| Size icons significantly larger than text | Match icon size to font line-height |120| Use non-obvious icons without labels | Tooltips or text labels for non-universal icons |121| Add redundant elements (arrows, strokes, clutter) | Remove and test. If it works without it, it didn't need it. |122123## 7. Interactive States (6 rules)124125| Never | Instead |126|---|---|127| Ship buttons without hover and disabled states | Minimum 4 states; full set: 8 |128| Ship inputs without focus and error states | Focus ring + red border + error message |129| Leave async operations without loading indicators | Gray out button immediately, spinner for longer ops |130| Skip empty states | Explain what will appear, give action to populate |131| Use animations that serve only the portfolio | Every animation adds clarity or functionality |132| Skip confirmation for important actions | Micro interaction: chip, filled icon, toast |133134## 8. Content, Copy, and Data Viz (7 rules)135136| Never | Instead |137|---|---|138| Repeat words the context already establishes | "Claim" under "Rewards" heading, not "Claim Voting Rewards" |139| Write button labels that don't match the action | Button text = what happens. "[Verb] + [what they get]" |140| Use more than 3-4 pricing tiers | Max 3-4 with highlighted recommended option |141| Use generic icons instead of product screenshots | Real screenshots, real UI, real product |142| Design charts without a vertical axis | Always include axes. Flat-top bars. Bar count = data count. |143| Overdesign charts because Dribbble does | Simple chart with clear data > beautiful unreadable one |144| Use 7+ form fields without knowing the cost | 3-field baseline. Every extra field costs conversions. |145146## 9. AI Slop Detection (9 signals)147148If 2+ of these appear in your design, humans will assume a machine made it:149150| Signal | Fix |151|---|---|152| Emojis as functional icons | Lucide, Phosphor, Feather |153| Inter or Roboto as the only font | Distinctive sans-serif |154| Evenly-distributed timid palette | One dominant accent with sharp contrast |155| Redundant KPI cards on every dashboard | Only metrics the user actually needs |156| Stock gradients (purple-to-blue) | Flat colors or same-hue gradients |157| Scattered micro-interactions everywhere | One orchestrated page load |158| Symmetric, centered layouts only | Asymmetry, overlap, grid-breaking |159| Generic placeholder images | Real product screenshots |160| Space Grotesk as the "modern" font | Research fonts for your brand |161162## 10. BLOCK-Level Violations (8 hard blockers)163164Any one of these is an automatic block. The design cannot ship until fixed.165166| BLOCK | Fix |167|---|---|168| CTA labels: "Submit," "OK," "Click Here" | Verb + noun: "Send Message," "Create Account" |169| Empty state: "No data found" | Explain what appears + give action to populate |170| Error state: "Something went wrong" with no fix | What broke + how to fix it |171| More than 4 font sizes in a single UI | Max 4. Use weight and color for additional hierarchy. |172| Any spacing value not a multiple of 4 | 4, 8, 12, 16, 24, 32, 48, 64 |173| Accent color on "all interactive elements" | List specific elements: primary CTA, active nav, focus ring |174| Hardcoded hex values in component files | CSS custom properties or design tokens |175| More than 2 font weights | Regular (400) + Bold (700). Semibold only if structurally justified. |176177## 11. CRO Dark Patterns (7 ethical violations)178179These aren't bad UX. They're trust destroyers.180181| Never | Instead |182|---|---|183| Hide or obscure the close button | Clear, visible close in top-right. Respect the "no." |184| Guilt-trip decline text ("No, I don't want to save money") | "No thanks" / "Maybe later" |185| Show popups within 5 seconds of page load | 30-60 seconds minimum, or scroll/exit intent |186| Show upgrade prompts during onboarding or mid-flow | After a value moment, before frustration |187| Disable paste on password fields | Allow paste. Show requirements upfront. |188| Clear the user's form data on error | Preserve all data. Highlight only the problem field. |189| Validate while the user is still typing | Validate on blur (field exit), not on keystroke |190191## 12. Copywriting Traps (6 rules)192193| Trap | Fix |194|---|---|195| "Utilize" instead of "use" | Everyday words. "Help" not "facilitate." |196| Value buried in qualifications | Lead with the benefit. Get to the point. |197| "The best solution for your needs" | Be specific and concrete |198| Trying to say everything at once | One message per context |199| Feature-focused instead of benefit-focused | Lead with outcomes, not capabilities |200| Sacrificing clarity for cleverness | Clarity always wins |
nulightjens