| Using pure black (#000) on white (#fff) | Too harsh, causes eye strain, looks unnatural | Use #111827 on #fff or #f1f5f9 on #0f172a |
| Different border-radius on every component | Destroys visual consistency, looks auto-generated | Pick one radius (8px) and use it everywhere |
| Shadows on everything | Visual noise, no hierarchy, feels heavy | Reserve shadows for elevated elements (modals, dropdowns, cards) |
| Rainbow of colors | No hierarchy, overwhelming, unprofessional | Max 3 hues: primary, neutral, accent. 60-30-10 rule |
| Tiny click targets on mobile | Fails WCAG, frustrates users, increases errors | Minimum 44x44px touch targets (48px preferred) |
| Animating everything | Distracting, feels gimmicky, hurts performance | Only animate what changes state. 150-300ms transitions max |
| Centering everything | Kills readability, looks like a PowerPoint slide | Left-align body text. Center only hero headlines and CTAs |
| Inconsistent spacing | Most obvious tell of unpolished UI | Use a 4/8px spacing scale. Same gap everywhere for same context |
| Using emojis as icons | Render differently across OS/browsers, cannot be styled, break visual consistency, poor a11y | Use a real icon library: Lucide React, React Icons, Heroicons, Phosphor, or Font Awesome |
| Generic font stack (Inter, Roboto, Arial) | Screams "AI generated this", zero personality | Choose fonts that match an aesthetic direction. See references/typography.md |
| Purple/indigo gradient on white | The #1 AI-generated color cliche | Pick context-specific brand colors. Finance: navy+gold. Creative: coral+teal |
| Predictable symmetric layouts everywhere | Every section is centered 3-column grid, looks templated | Use asymmetry, overlapping elements, and grid-breaking for marketing pages |
| Flat solid-color backgrounds | No atmosphere, no depth, feels like a wireframe | Add gradient meshes, subtle grain, or geometric patterns. See references/atmosphere-and-texture.md |
| Multi-hue gradients (blue+green, etc.) | Clashing colors, looks amateur | If using gradients, stick to lighter/darker shades of the SAME hue. Or just use a flat color |
| Redundant UI elements | Arrows that duplicate swipe, borders on already-differentiated elements | Remove anything that doesn't add function. Each element must earn its place |
| AI-repeated KPIs / metrics | Same stats shown 2-3 times on one page | Show each metric once, in the most relevant location |
| Every action as a visible button | Cards with 4+ exposed buttons, overwhelming | Collapse secondary actions into a triple-dot context menu |
| Gradient profile circles with initials | Screams "AI placeholder", never seen in production apps | Use real avatar upload with initials as fallback (flat bg, no gradient) |
| Sparse create forms as full pages | AI gives a form 3 fields but an entire page of space | Use a modal for simple forms, collapse advanced options by default |
| Landing pages with only text + icons | No visual proof the product exists, feels like a template | Use real product screenshots (skewed, shadowed) instead of generic icons |
