# 7 · Avoid: what makes UI look machine-made When nothing guides you, you reach for the patterns you've seen most often. Humans now recognise those patterns instantly as "AI made this", and the work loses their trust before they've read a word. None of these is forbidden. Each one needs a **reason** from the brief. If you can't name the reason, remove it. --- ## Visible clichés (the human notices) | Pattern | Why it hurts | Instead | |---------|-------------|---------| | Purple-to-blue gradients, gradient text | The single most common AI look | One solid accent from the brief's feel | | Three identical feature cards with an icon, a title and two lines (marketing) | Generic; says nothing specific | Show the actual product, a real example, or a comparison. **Not** the same as plan or option comparison cards, which are a decision tool (`3-humans.md` B5) | | Everything centred | Hard to scan; no hierarchy | Left-align text blocks; centre only short, single elements | | Emoji in headings or buttons | Reads as unserious and template-made | Words; a proper icon set if icons are needed | | Glassmorphism, blurred blobs, glows | Trend as decoration; often hurts contrast | Solid surfaces; depth only to show elevation | | Every card has a border **and** shadow **and** large radius | Visual noise | Pick one way to separate surfaces | | Gratuitous animation (everything fades up on scroll) | Slows people down; tiring | Motion only to explain a change | | Marketing filler: "Unlock", "Seamless", "Elevate", "Supercharge", "Revolutionise" | Empty words; people skip them | Say what it does, concretely | | Fake numbers and testimonials ("10,000+ happy users") | Untrue; destroys trust | Real data, or none | | Generic stock illustrations of people with laptops | Says nothing about this product | Real screenshots or no image | | Random icons next to every label | Clutter; icons rarely clarify text | Icons only where they aid recognition | | Too many accent colours | No colour means anything any more | One accent, plus state colours | | Link-styled text that expands, toggles or opens something | Looks like navigation; the result surprises people | Style it as what it does (`3-humans.md` A5) | | "Saving…" text as the only sign of loading | Reads as a changed label, not as activity | A spinner in a button that keeps its size (`3-humans.md` C2) | | A success message beside the submit button | Long messages wrap and push the button | A toast, with Undo where possible (`3-humans.md` C2b) | | A back link in the right side of the global header ("to balance the layout") | Right means forward; the header is for global things | Top-left of the page content, above the title (`3-humans.md` B2b) | --- ## Invisible clichés (the human doesn't notice, the next developer does) These are worse, because nobody catches them until the codebase is a mess. | Pattern | Instead | |---------|---------| | Raw hex colours and px values scattered in components | Tokens (`2-system.md`) | | The same component written several times with small differences | One component with variants | | `div` with `onClick` instead of `button` | Semantic elements | | Inline styles, `!important`, `z-index: 9999` | Scoped classes and a defined layering scale | | Utility-class soup with no shared abstraction (`px-[13px] text-[#555]`) | Use the scale; extract repeated combinations | | Placeholder text used as labels | Visible `