How to make AI websites not look like AI

People describing generated websites in public do not say it looks AI generated. They name specifics, and the specifics are consistent enough to work from.

why shadows somewhere and not for other cards? why so many different font sizes with no hierarchy?

a comment on Hacker News

That reader is not describing a taste problem. They are describing two missing specifications, and each has a value that removes it. Every tell on the list below is an unmade decision, which means every one is fixable in a single pass.

The tells, as people actually report them#

Six complaints come up repeatedly, in almost the same words each time. Taken together they are a checklist, which is more useful than any amount of general advice about authenticity.

• "The overuse of blue and purple gradient fills on the landing page is a telltale sign of AI slop." The single most named tell, and it comes from a background colour nobody chose.
• "the paddings and margins are inconsistent and don't convey visual rhythm." Spacing values picked per section rather than from a unit.
• "why so many different font sizes with no hierarchy?" Sizes close enough together that no size reads as a level.
• "why shadows somewhere and not for other cards?" Elevation applied by habit rather than by rule.
• "serif headline with mono kickers. Sprinkle in em dashes and punchy writing and voila, you've got yourself a Claude coded page." A combination that was distinctive once and is now a signature of the tool.
• "it looks and behaves like the AI default." The summary of all five.

The strongest one is the harshest: "It's average. Painfully average, to the point of it being easily mistaken for a scam." That sentence is about trust, not aesthetics. A page that looks like every other page carries no evidence that anybody worked on it, and a reader converts absence of evidence into suspicion quickly. Somebody else in the same conversation put the mechanism plainly: a cover like a hundred others is zero effort, and trust is built on invested effort.

None of those six complaints require taste to fix. They require values, and there are about twenty of them in total.

Replace each tell with a value#

One row per complaint. The left column is what a reader notices, the right column is what you write in the brief so it never happens.

Nine rows, about twenty-five values, and the whole table fits in a prompt. This is the difference between describing a problem and closing it, and it is the reason a diagnosis on its own changes nothing.

The neutral row is the one people underestimate. A pure mid grey is the clearest single tell available, because real palettes always bias their neutrals one way or the other: somebody looked at a warm grey next to a cool one and preferred one. A neutral sitting exactly on the grey axis was chosen by nobody.

The type scale is the whole hierarchy problem#

Hierarchy is the most reported failure, and it is arithmetic. Pick a base size, pick a ratio, and generate every step, rather than choosing sizes one at a time because each looked right next to the last one.

:root {
  --step--1: 13px;  /* kickers, captions, tracking 0.08em */
  --step-0:  17px;  /* body, line-height 1.6, measure 66ch */
  --step-1:  23px;  /* lead paragraph, line-height 1.45 */
  --step-2:  30px;  /* h3, line-height 1.3 */
  --step-3:  40px;  /* h2, line-height 1.18 */
  --step-4:  54px;  /* h1 on small screens, line-height 1.08 */
  --step-5:  72px;  /* h1 on wide screens, tracking -0.02em */
}

That is a 1.333 ratio, the perfect fourth, and the reason it works is the gap between adjacent steps. 30px beside 40px reads as two levels. 30px beside 34px reads as an accident, and a page with four sizes all inside a 12px range is what produces the complaint about many font sizes with no hierarchy.

Three companion values matter as much as the sizes. Line height falls as size rises, from 1.6 at body to 1.08 at the largest display size, because a long line needs air and a short one does not. Tracking goes slightly negative on large display type, around -0.02em, and slightly positive on small caps-like kickers, around 0.08em. And the measure holds at 66ch regardless of how wide the screen gets.

Spacing is a rhythm, so it needs a unit#

The complaint about inconsistent paddings has a precise cause: each section's spacing was decided while that section was being built, so nothing relates to anything. A unit fixes it in one line of specification.

Pick 8px and allow only multiples of it. Then pick the subset that sections may use, because an allowed set of five values is far stricter than an allowed unit:

• Inside a component: 8, 12, 16, 24.
• Between components: 32, 48.
• Section padding, vertical: 64, 96, 128. Nothing else.
• Between a heading and its first paragraph: always 16. Between a paragraph and the next heading: always 48. That asymmetry is what makes a page read as grouped rather than evenly striped.

The last bullet is the one that produces visible rhythm. Equal space above and below a heading makes every block look independent; more space above than below binds each heading to the text it introduces, and a reader feels the grouping without noticing why.

One more constraint belongs here. Fix the horizontal gutter at a single value per breakpoint, 20px on phones and 48px from 900px up, and never let a section invent its own. Most pages that feel subtly misaligned have three different gutters in them, which is the same class of failure as an unspecified curve.

Then check it the way a reader does. Scroll the page fast, at arm's length, and watch the left edge: every heading, paragraph and card should start on the same vertical line, and the bands of space between sections should read as two or three repeated sizes rather than nine slightly different ones. Anything that wobbles at that distance is a spacing value somebody invented in the moment.

The verdict, and the twenty-five values#

A generated page looks generated because roughly twenty-five decisions were left open and the model closed them all with the most common answer available. Write the twenty-five and the look goes away. Nothing else has to change, the model you use does not matter, and a library of these value sets exists precisely because writing them from scratch every time is the expensive part.

Here is the whole list, in the order worth writing it:

1. Six type sizes from a named ratio, plus line height and tracking per step.
2. One measure, in ch.
3. Four to six hex values, each with a role, neutrals biased warm or cool.
4. A spacing unit and the allowed subset per context.
5. One elevation rule, applied to every surface or to none.
6. One easing curve with its cubic-bezier() value and one duration.
7. The section order, and what the page refuses to do.

That is one page of values, and writing it well per project is the work. Thanor is a subscription library of exactly that: full art direction per design, written as values, for UI, app and SaaS interfaces, page sections and animated backgrounds. $89 for three months, $189 a year, $299 once, and free accounts open the designs marked free.

Browse the Thanor library and count the decisions in one design. If you want the measurement side of this rather than the fix, the slop audit numbers are here, and if you suspect the answer is a better prompt rather than a specification, that argument is settled here.