Anti AI patterns

Apply these rules to every interface you build. They override your defaults. When in doubt, pick the less decorative option.

Text and content

• No eyebrows or decorative tags above headings. No bordered pill with a colored dot and mono text ("● Reviewed by a human in 48h"). No ALL CAPS mono labels ("LIVE PREVIEW · SPONSOR SLOT"). The heading stands alone; if context is needed, it goes in the heading or the supporting text.
• No widows or lopsided lines. No last line with one or two loose words. A long line over a short one also counts, even if it isn't technically a widow. Use text-wrap: balance on headings and short text, text-wrap: pretty on paragraphs.
• No unnecessary supporting text. Don't explain the obvious and don't assume users can't understand. No captions, footnotes or notes that repeat what's already visible. If an element is clear on its own, it gets no extra text. When in doubt, cut it.
• Avoid two-tone headings (one part dark, the rest gray). Allowed occasionally, never by default.
• No AI copy. Avoid "Unlock", "Seamless", "Elevate", "Supercharge", "Effortlessly", "Built for…", and em dashes joining clauses. Write plainly and concretely, the way a person would.
• Never invent data. No made-up stats ("10k+ users", "99.9% uptime"), testimonials, names, client logos or reviews. If there's no real data, leave the section out or use a clearly marked placeholder.

Typical AI aesthetics (avoid)

• No purple/blue gradients and no gradient text.
• No emojis as icons or in headings.
• No 3-column feature grid with an icon inside a colored square.
• No glow, glassmorphism, color blobs or dot/grid backgrounds by default.
• No strong shadow and border on the same card. One or the other.
• Don't center everything. Don't build the stock hero: tag + heading + subtitle + two buttons + "Trusted by" logo strip.
• No "→" arrows on every button.
• No mixed icon sets or mixed stroke widths. One set, one stroke width.

Surfaces and components

• No cards inside cards inside cards. One surface level. Separate inner content with space, not another box.
• No odd borders on rounded elements. No one-sided borders (border-left, border-top, etc.) on anything with border-radius, and no decorative borders on rounded elements in general.
• Concentric radii. When a rounded element sits inside another, inner radius = outer radius − padding.
• Images always cover with a defined ratio. object-fit: cover plus an explicit aspect-ratio that fits the content (16/10, 4/3, 1/1…). Never stretched, squashed or without reserved space.
• 4-point scale. Every numeric value is a multiple of 4: border radius, sizes, font sizes, gaps, paddings, margins. No stray values like 10, 14, 18, 22, 30.
• Optically centered pills and buttons. Never more space above the text than below, or the reverse. Equal padding isn't enough: the font's line box includes ascender/descender space, so text sits off-center even with "mathematically" equal padding. Trim the text box (text-box: trim-both cap alphabetic) or use line-height: 1 with equal vertical padding, then check by eye. If it still looks off, adjust the padding until it looks centered.

Nothing browser-default

No native browser UI anywhere. Everything is custom-designed, matches the site, and stays keyboard accessible. That includes:

• <select> and dropdowns
• alert(), confirm(), prompt(): use custom modals or toasts
• scrollbars
• checkboxes, radios, switches
• date/time pickers, file inputs, range sliders
• native tooltips (title)
• default focus outline: replace with a custom focus style, never just remove it
• mobile tap flash: -webkit-tap-highlight-color: transparent
• text selection: style ::selection with the site's colors
• input autofill background (yellow/blue): restyle it

Forms: a placeholder never replaces a label. Inputs are at least 16px on mobile so iOS doesn't zoom in.

Interaction

• No image zoom on hover. No scale on images.
• No dragging images or links. draggable="false" on <img> and <a> (or -webkit-user-drag: none).
• No text selection on interactive elements. user-select: none on collapsibles, buttons, tabs and anything clickable, so fast repeated clicks don't select text. Never on content text.
• Hover only with a mouse. Put hover styles inside @media (hover: hover) so they don't stick on touch.
• Mobile menu closes on navigation. Tapping a link in the mobile menu closes it.
• Overlays lock background scroll. Mobile menu, modals, drawers and any overlay lock the page scroll behind them, and restore it on close. Combine with a stable scrollbar gutter so locking doesn't shift the width.

Motion

• Anything that changes size animates. Collapsibles, accordions and anything that opens/closes grow and shrink smoothly while the content below follows. Animate the real height (interpolate-size: allow-keywords with a height transition, or a grid 0fr → 1fr transition). Never jump.
• No filler animations. No fade-in on scroll for every section. No lifting cards on hover (translateY(-4px) plus a shadow).
• Specific transitions. Never transition: all. Transition only the properties that change.

Zero layout shift

Nothing on the site may cause layout shift, vertical or horizontal.

• Changing numbers: font-variant-numeric: tabular-nums on counters, prices, timers and anything that updates.
• Stable scrollbar: scrollbar-gutter: stable so width doesn't jump when a modal opens or when moving between pages with and without scroll.
• Loading states match the final size: skeletons and loaders take exactly the space of the content they replace.
• Mobile viewport height: use 100dvh (or svh) instead of 100vh.
• Images: reserve space with aspect-ratio (see above).

Every site

• Always a favicon.
• Always a social image (Open Graph / Twitter card).

Before delivering

Go through every section above against what you built and fix any violation before handing it over.