Avoid Visual AI Tells

Reflexive decoration is the root tell. AI reaches for the same flourishes regardless of what's being built, because they're the path of least resistance, not because the design needs them. Before worrying about any single pattern, ask of each visual element: did this earn its place, or did it appear by reflex? If you can't say what it's doing that a plainer choice wouldn't, it's decoration standing in for design.

These are descriptive signs, not banned patterns. Humans use every one of them well. The rule here is not "never use a left border" — it's: when a flagged pattern appears, either remove it or leave a one-line reason for keeping it. A pattern used once, on purpose, for a stated reason is fine. The same pattern reached for by default, on every card, is the tell.

Mechanism: before finalizing UI, scan the CSS/markup against the catalogue below. For each match, delete it or annotate it — a CSS comment is enough: /* left accent kept: encodes severity, not decoration */. No annotation, no flagged pattern.

Self-check loop after building: (1) strip decoration that isn't doing work, (2) replace generic defaults with choices that fit this specific tool, (3) break forced symmetry and rule-of-three grids, (4) remove chatbot residue (placeholder text, lorem, unfilled labels), (5) confirm contrast and tap targets survived the cleanup.

The most common cluster. Ornament applied uniformly instead of meaningfully.

• Left-accent border — the border-left: 3–4px solid stripe on every card, callout, or list row. Fix: use it only to encode something (severity, state), not as default trim. Reach for weight, spacing, or a heading before a colour stripe.
• Uppercase letter-spaced eyebrows / kickers — small caps labels above headings (text-transform: uppercase; letter-spacing). The visual "it's worth noting." Fix: sentence case, normal spacing; or drop the kicker and let the heading stand.
• Glassmorphism by reflex — backdrop-filter: blur() on bars and cards where nothing sits behind them. Fix: a solid surface with a border reads cleaner; keep blur only where content genuinely scrolls under.
• Gradient text, glow blobs, soft radial auras — decorative gradients with no informational role. Fix: flat fills unless a gradient encodes a scale.
• Floating-card overload — everything in rounded-2xl with a soft drop shadow, hovering on a tinted page. Fix: vary elevation; let some things sit flat on the surface.

• The three-up grid — icon + bold title + one-line description, times three, centered. The visual rule-of-three. Fix: vary count; use two or five; break the icon/title/line rhythm when the content isn't parallel.
• Reflexive centering and symmetry — everything centered, mirror-balanced, no intentional asymmetry. Fix: left-align body content; let weight sit off-center when the material suggests it.
• The generic hero — centered headline, one-sentence subhead, two buttons (one filled, one outline), on a faint gradient. Fix: only if the page is a landing page, and even then make the specifics carry it.

• Default palette — untouched slate/zinc gray, or the purple-to-indigo gradient that ships with every starter. Fix: use a palette with a point of view (your house tokens already do this — the win is not reaching for the default).
• Characterless type — system-default sans at one weight throughout, no pairing, no scale contrast. Fix: a deliberate face and a real type scale.
• Low-contrast gray-on-gray — muted text on tinted surfaces that fails AA. Fix: verify contrast; the tokens are already tuned for it, so don't override downward.

• Emoji as section markers or bullets, and green-tick checklist bullets — decorative iconography standing in for structure. Fix: real headings and plain lists; icons only where they aid recognition.
• An icon next to every heading by reflex. Fix: icons earn their place in navigation and controls, not as heading garnish.
• Big-number stat rows — three giant numerals with caps labels beneath, whether or not the numbers matter. Fix: only when the figures are the point.
• Pill-badge scatter — status pills sprinkled decoratively. Fix: keep pills where they carry state; remove where they're filler.

Prevention sits low, detection sits high.

• Tokens (1): ship defaults with character so the generic look isn't the easy path.
• Atoms (2): keep components structurally plain — no baked-in accent stripes, no caps labels, no default icons.
• Layout shells (3): audit each shell; a caps section label or a blur bar inherited here spreads to every tool built on it.
• Behaviour (4): not a source of visual tells.
• Tool (5): run the self-check loop here, over the finished composition — this is where per-tool CSS reintroduces flourishes even when the base is clean.

Stripping all structure produces a different tell: the flat, borderless, monospace-everything "I'm avoiding AI aesthetics" look. A left border, a kicker, a centered hero, a gradient — each is right somewhere. Don't purge them reflexively; that's just the mirror of reflexively adding them. Keep the ones doing work, annotate why, and cut the rest. The goal is considered design, not the absence of decoration.