A page can have polished components and still feel generic. Usually the problem is not one bad decision but a stack of defaults: the same centered layout for every section, a card around everything, a purple gradient because it was the first suggestion, and copy that could belong to any product. People have seen these patterns so often, especially in AI-generated pages, that they read as filler before anyone reads a word.
The patterns that read as default
None of these is wrong in itself. Each becomes a problem when it is chosen because it was the default, not because the content called for it.
- A full-screen, centered hero with a purple-to-blue or cyan-to-magenta gradient behind it.
- Gradient text on the main heading.
- Three equal cards in a row, each with an icon in a rounded square, a one-word title, and a vague line underneath.
- Cards nested inside cards, or a thick colored stripe down one side of every card.
- The same font doing every job, usually a neutral sans-serif, at the same few sizes.
- transition: all and hover:scale on everything that can be hovered.
- Statistics nobody supplied (trusted by 10,000+ teams, 10x faster) and placeholder names like Acme or Jane Doe.
- A fake browser window or phone frame drawn in CSS around a screenshot.
A typical generated hero
This hero and feature row contains most of the patterns above. It is the kind of markup a code generator produces when given only a product category:
<section class="flex min-h-screen flex-col items-center justify-center text-center
bg-linear-to-br from-purple-600 to-blue-500">
<h1 class="bg-linear-to-r from-white to-purple-200 bg-clip-text text-6xl font-bold
text-transparent">Supercharge your workflow</h1>
<p class="mt-4 text-lg text-white/80">The all-in-one platform trusted by 10,000+ teams.</p>
<button class="mt-8 rounded-full bg-white px-8 py-3 font-semibold text-purple-700
transition-all hover:scale-105">Get started</button>
</section>
<section class="grid grid-cols-3 gap-6 p-16">
<div class="rounded-2xl bg-white p-6 shadow-lg">
<div class="h-12 w-12 rounded-xl bg-purple-100"></div>
<h3>Fast</h3><p>Lightning-fast performance.</p>
</div>
<!-- …Secure, Simple… -->
</section>Nothing here tells you what the product does. The heading would fit a to-do app, a CRM, or a build tool. The number has no source. The button does not say what happens when you press it. The three cards make claims every product makes.
Start with the content
Before changing any styles, find out what the page actually offers, and let that decide the first section. A visual tool can lead with a working example. A journal can lead with its strongest article. A booking page can lead with availability. For this rewrite, assume the product is an invoicing tool whose real advantage is that clients can pay directly from the invoice email.
<section class="mx-auto grid max-w-6xl gap-10 px-6 py-20 lg:grid-cols-[1.2fr_1fr]">
<div>
<h1 class="max-w-[16ch] font-serif text-5xl leading-tight text-stone-900 text-balance">
Send an invoice. Get paid from the email.
</h1>
<p class="mt-5 max-w-prose text-lg text-stone-700">
Clients pay by card or bank transfer without creating an account.
You see when the invoice is opened and when the money arrives.
</p>
<a href="/invoices/new"
class="mt-8 inline-flex min-h-11 items-center rounded-md bg-emerald-800 px-5
font-medium text-white transition-colors duration-150 hover:bg-emerald-900
focus-visible:outline-2 focus-visible:outline-offset-2
focus-visible:outline-emerald-800">
Create your first invoice
</a>
</div>
<img src="/invoice-email.png" width="1200" height="900"
alt="An invoice email with a Pay £420 button" class="rounded-lg border border-stone-200">
</section>
<section class="mx-auto max-w-6xl px-6 py-16">
<h2 class="text-2xl text-stone-900">What happens after you send it</h2>
<ol class="mt-6 grid gap-8 md:grid-cols-[2fr_1fr_1fr]">
<li><strong>Your client opens the email</strong> and pays with the button in it.</li>
<li><strong>You get a notification</strong> when it's opened and when it's paid.</li>
<li><strong>Overdue invoices</strong> get a reminder on the schedule you set.</li>
</ol>
</section>- The heading states the product's actual advantage. It could not be pasted onto a different product.
- The layout is left-aligned and only as tall as its content, with the product screenshot doing the explaining.
- There is one accent color, used for the action, instead of a gradient across the whole section.
- The button label says what happens next.
- The feature row became a numbered sequence, because the content is a sequence. The first step gets more room because it matters most.
- The statistic is gone. If a verified figure exists, it can return with its source.
Change the rhythm
Use a grid when people need to compare similar things, such as pricing plans or templates. Use a list when they need to scan names. Use a sequence for steps. Give a single important example room to stand alone. Repeating one arrangement, usually a centered heading over three cards, for unrelated content hides the differences between them. Scroll through your page quickly: if every section has the same silhouette, rearrange the content before changing the colors.
Remove a layer
When a component feels busy, try removing its outer frame. A card inside a card inside a section with a background gives three edges where one would do. Spacing and a single divider can group content as clearly as a border:
<!-- Before: a framed list of framed items -->
<div class="rounded-2xl border bg-white p-6 shadow">
<div class="rounded-xl border bg-gray-50 p-4 shadow-sm">Invoice #1042</div>
<div class="mt-3 rounded-xl border bg-gray-50 p-4 shadow-sm">Invoice #1043</div>
</div>
<!-- After: one surface, rows separated by dividers -->
<ul class="divide-y divide-stone-200 rounded-lg border border-stone-200 bg-white">
<li class="px-4 py-3">Invoice #1042</li>
<li class="px-4 py-3">Invoice #1043</li>
</ul>A menu, a dialog, or a code panel may need its own surface. Every heading and paragraph does not.
Write the actual action
- Replace vague button labels with the next action: Get started becomes Create your first invoice; Learn more becomes See pricing.
- Replace slogans with facts: Supercharge your workflow becomes what the product does and for whom.
- Remove praise and inflated claims (seamless, powerful, revolutionary). If a claim is true, a specific detail will show it better.
- Explain a limitation where it matters, such as which countries a payment method supports.
- Use real examples instead of invented testimonials or statistics. If you do not have them yet, leave the section out.
Make motion useful
A pressed button, a selected tab, and a preview updating are good reasons for movement: they confirm that something happened. Keep the response short and name the properties that change. transition: all also animates properties you did not intend, such as layout changes or color changes when a theme switches.
/* Instead of transition: all */
.button {
transition: background-color 150ms ease-out, transform 100ms ease-out;
}
.button:active {
transform: scale(0.98);
}
@media (prefers-reduced-motion: reduce) {
.button {
transition: background-color 150ms ease-out;
}
.button:active {
transform: none;
}
}Avoid making someone wait for decorative entrances, such as sections that fade and slide in as they scroll into view. They delay reading and repeat on every visit. Where motion is not essential, offer a reduced-motion alternative.
Use checks as prompts, not verdicts
Automated checks, whether a lint rule, an accessibility scanner, or a list of known patterns, are good at catching things that show up in code: transition: all, missing focus and active states, hover:scale on every card, a statistic nobody supplied. They are poor at judging whether a choice suits the content.
Run against the generated hero above, a pattern check would catch the full-viewport centered layout, the blanket transitions, and the invented 10,000+ metric. It cannot tell you whether the purple gradient fits this product, or whether the headline says anything a competitor could not. Use the findings as a list of things to look at, fix what applies, and do not chase a clean score.
Review the whole page
Look at the first screen, the middle, and the ending. Read only the headings and buttons: they should tell the product's story on their own. Then read one section as a skeptical visitor and remove any sentence that would still be true of a competitor.