Skip to content
BrandCloud

How to make a page not look AI-made

Generated pages share a look: the same gradients, the same pill above the headline, the same row of icon cards. Here is how to spot those tells on your own page and what to do instead.

All guides. Updated 2 October 2026.

Why it matters

A page that looks like a template asks the visitor to trust a business that did not take the time to look like itself. When the same few defaults show up on thousands of sites, people learn to recognise them, much as they once recognised a stock theme.

The rules in this guide come from a review of 33 articles and studies on how AI-generated design looks. There are 41 of them, and each has an example page in two versions: one with the tell, one fixed, with the same words and layout otherwise.

The five fixes that matter most

If you only change five things, change these. Each one is a high-severity rule in the score.

1. Swap the purple gradient for one that models light

Indigo to violet, or purple to pink, is the colour of generated sites. A button can still have a gradient: one hue, lighter at the top, deeper at the bottom.

With the tell

Example page showing hue-shifting 'ai' gradient (AP-GRAD-01, the version with the tell).

Fixed

The same example page with hue-shifting 'ai' gradient fixed (AP-GRAD-01).
AP-GRAD-01: Hue-shifting 'AI' gradient. Use a single-hue tonal gradient that models light: lighter top, deeper bottom, thin sheen, same-hue shadow (e.g. #3b82f6 to #1d4ed8). Take it from tokens (action-depth-*, level-*), never hard-coded hex.

2. Remove the pill above the headline

A small rounded label saying "New" or "Introducing" over the main heading is a template habit. Put that news in a sentence, or leave it out.

With the tell

Example page showing eyebrow pill above the h1 (AP-COMP-01, the version with the tell).

Fixed

The same example page with eyebrow pill above the h1 fixed (AP-COMP-01).
AP-COMP-01: Eyebrow pill above the H1. Remove it. If there is real news, put it in the headline or as a plain dated line near the action.

3. Break up the wall of icon cards

Three or six identical cards, each with an icon in a tinted square, a heading and a line of text, say nothing about your business. Write fewer, longer points, or show the work itself.

With the tell

Example page showing walls of identical icon cards (AP-LAY-02, the version with the tell).

Fixed

The same example page with walls of identical icon cards fixed (AP-LAY-02).
AP-LAY-02: Walls of identical icon cards. Rank the points. Lead with the one that matters most, give it room and a specific example; list the rest as plain rows. Drop the decorative icons.

4. Only show proof that is real

A strip of logos you never worked with, or big round numbers with no source, is worse than nothing once someone checks. Show a named client, a dated review or a qualification you can link to.

With the tell

Example page showing 'trusted by' strip of placeholder logos (AP-TRUST-01, the version with the tell).

Fixed

The same example page with 'trusted by' strip of placeholder logos fixed (AP-TRUST-01).
AP-TRUST-01: 'Trusted by' strip of placeholder logos. Only real clients you may name. One named client with what you did beats twelve grey logos.

5. Clear out template leftovers

Old copyright years, placeholder names and builder badges tell visitors nobody read the page before it went live.

With the tell

Example page showing template and builder leftovers (AP-TRUST-05, the version with the tell).

Fixed

The same example page with template and builder leftovers fixed (AP-TRUST-05).
AP-TRUST-05: Template and builder leftovers. Search the build for placeholders before launch. Copyright year from the build date, real company details, builder badges removed.

Gradients: allowed, with one rule

Gradients are not the problem. The problem is gradients with no light logic. A good gradient behaves like light on a real object:

  • one hue family, lighter at the top and deeper at the bottom;
  • a thin sheen near the top edge and a soft shadow of the same hue underneath;
  • used on buttons, offer tiles and at most one coloured section, not everywhere.

What to avoid: violet to pink or cyan, rainbow and mesh backgrounds, gradient text, blurred glow blobs behind the hero, gradient borders on every card and frosted glass behind text.

Every tell, by kind

The full list, grouped the way the score groups them. Each links to its example pair.

Colour and gradient

Layout

Typography

Components

Imagery and decoration

Motion

Trust and fake proof

Check your page

  1. Open the AI-look score, paste your page's HTML and check it at desktop and phone widths.
  2. For each rule that fires, read the evidence first. A rule is a heuristic, not proof: if you made the choice on purpose, it can stay.
  3. Compare your section with the fixed version of the example pair, change it, and check again.
  4. Aim for a score of 0 to 9 with no high-severity rule.

For a live site, or for motion and anything your scripts do, a developer can run the command-line version:

pnpm exec brand-detect https://your-site.co.uk
pnpm exec brand-detect https://your-site.co.uk --mobile

Further reading

Three of the 33 sources behind the rules:

Check a page now

Paste the HTML of any page and see which tells it has, with the fix for each one.