There's a "look" now. Purple-to-blue gradient. Inter font. A hero with a centered headline, a rounded button, and three feature cards with emoji-ish icons below. It's the default output of every AI website builder and it screams generated in 30 seconds.
The problem isn't AI. The problem is defaults. Here are seven specific decisions that move a page from "generated" to "art-directed." Each is a small change with an outsized effect.
A page built on all seven: https://meridian-demo-flax.vercel.app — and the file behind it: https://1h-money-store.vercel.app/?utm_source=devto&utm_medium=article&utm_campaign=meridian
1. Kill the flat blue. Use a warm, off-black palette.
The generated look is flat, cool, and high-brightness: #000 or pure white backgrounds, saturated blue accents. Break every part of that:
- Use a warm near-black like
#0d0b08, not#000000. It reads as considered. - Use off-white text (
#f4efe6), not#fff. Pure white on pure black is a beginner tell. - Pick an unexpected accent — burnt orange, gold, oxblood — instead of SaaS blue.
:root{ --bg:#0d0b08; --ink:#f4efe6; --accent:#e8622c; --accent2:#d9b44a; }
2. Use a real serif for headlines.
Nothing says "template" like Inter or Roboto everywhere. A high-contrast serif for headlines instantly reads editorial and human. Fraunces is ideal because its optical sizing gives big text dramatic thick/thin contrast:
--serif:"Fraunces",Georgia,serif;
.hero h1{font-family:var(--serif);font-weight:500;letter-spacing:-.03em}
Pair it with a monospace for small labels — the contrast of elegant serif + technical mono is a signature of designed pages, not generated ones.
3. Set headlines huge, tight, and asymmetric.
Generated hero headlines are medium-sized and centered. Designed ones are oversized, tightly tracked, and often left-aligned or broken across lines for rhythm:
.hero h1{font-size:clamp(3.2rem,11vw,9.5rem);line-height:.92;letter-spacing:-.03em}
line-height:.92 (below 1) and negative letter-spacing make large type feel intentional. Break the headline manually so line breaks land where you want emphasis.
4. Add texture. One grain overlay changes everything.
Generated pages are perfectly flat. Real design has texture. A single fixed noise overlay at ~3% opacity adds an analog quality across the whole page — no image required:
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:9999;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
5. Motion that's choreographed, not decorative.
Generated pages either have no motion or a generic fade-in-on-scroll on everything. Designed motion is specific: a headline that reveals line-by-line on load, a marquee that scrolls, a card that lifts on hover. Staggered timing is the key:
.hero h1 span{overflow:hidden}
.hero h1 span i{transform:translateY(105%);animation:rise 1s forwards}
.hero h1 span:nth-child(2) i{animation-delay:.28s}
@keyframes rise{to{transform:translateY(0)}}
The line clips its own text and slides it up — reads as deliberate craft, not a plugin.
6. Use hairlines and negative space, not boxes and shadows.
The generated look loves rounded cards with drop shadows. Designed pages tend to use thin dividing lines and lots of space. A grid where the gap is the border line looks sharp and editorial:
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line)}
.card{background:var(--bg);padding:44px 36px}
7. Write like a human, not a feature list.
Design isn't only visual. Generated copy is "Boost your productivity with our all-in-one platform." Human copy has a point of view: "We build things worth remembering." "Precision is a feeling, not just a metric." Short, opinionated, specific. No page looks designed with generic copy pasted into it.
Put it together
Warm off-black palette · serif + mono type · oversized tight headlines · grain texture · choreographed motion · hairlines over boxes · human copy. Seven decisions, and the page stops looking generated.
You can see all seven working together here: https://meridian-demo-flax.vercel.app
If you want the finished, single-file version to start from — every technique above baked in, editable in minutes, commercial license — it's MERIDIAN: https://1h-money-store.vercel.app/?utm_source=devto&utm_medium=article&utm_campaign=meridian
The irony: the fastest way to not look AI-generated is to start from something a human already art-directed, then make it yours.
Top comments (0)