The tells of a template page, and a small design system of your own

The tells of a template page are defaults: slogans, a violet gradient, three identical cards. A small design system made for the project works against them.

A page you have already seen

Open ten sites of small companies and startups from recent years. A good share of them have one and the same page: a violet-to-blue gradient, a big centered heading, three identical cards with icons, a “trusted by” block with round numbers, and rounded buttons with a big shadow. This is no conspiracy: it’s what comes out when decisions are made “by default”.

It’s especially easy to see in pages made by AI builders. In Anthropic’s article on improving the frontend code that Claude writes, it’s put like this: with no guidance a model gives a predictable middle: fonts such as Inter, purple gradients on white, standard components and restrained animation. The cause is in the design itself: a model chooses the likeliest option, and the likeliest is the most common. The authors call it “distributional convergence”. The article is in the sources.

Two conclusions matter.

1. It isn’t only AI. The same tells were in Bootstrap templates ten years ago and on thousands of pages on ready-made themes. AI simply makes such pages faster and in greater numbers.
2. The tells are a symptom. The real cause is that the page has nothing specific in it: none of your words, none of your evidence, none of your decisions. That’s exactly why it can’t be told apart from a thousand others.

Check yourself: why do pages made with no guidance look alike?

With no guidance the likeliest, and so the most common, decision is chosen. The result is “the middle”, the same for everyone.

Eight tells and what to replace them with

Press the switches: each tell is replaced by something taken from your brief. Notice that the page didn’t become “prettier” through ornament: it became more specific.

Replace with your own

A violet-to-blue gradient on the first screen
A slogan for a headline: “Innovative solutions for your business”
The subheading “We help you reach new heights”
A generic “Get Started” button
Three identical cards with emoji and the words “Innovation, Quality, Reliability”
Invented numbers: “10k+ clients, 99.9%”
The default font (Inter) and everything centered
Everything rounded the same way, with a big shadow

Innovative solutions for your business

We help you reach new heights. Your trusted partner in the world of technology.

Get Started

🚀

Innovation

Modern approaches

⚡

Quality

High standards

✨

Reliability

Always by your side

10k+ happy clients · 99.9% · 24/7

Replaced: 0 of 8.

More about the tells.

Words.

• A slogan instead of a name. “Innovative solutions for your business” suits any business, which means none. Replace it with the name and the point: “what” and “for whom”.
• Empty words. “A personal approach”, “a trusted partner”, “reach new heights”. They promise nothing, and the reader knows it. In their place a fact (remember the plain, informative style).
• A generic button (“Get Started”). The label should name an action from your project.

Content.

• Three cards “Quality, Reliability, Innovation”. Not one of your services. Replace them with your project’s real items.
• Invented numbers (“10k+ clients, 99.9%”). They can’t be checked or read without distrust. In their place real evidence: documents, work, people. What must not be invented you’ll read about in more detail in the part on law and advertising.
• Stock photos and made-up testimonials. A single testimonial from “John, Director” with no surname and no company is also a tell.

Look.

• The “default” gradient. The trouble isn’t that a gradient is bad but that it isn’t yours.
• The default font, with everything centered.
• One shadow and one rounding for everything. When everything has the same soft shadow, there’s no hierarchy.

Structure. Always the same chain: a header, three cards, testimonials, three pricing plans, a call to action, a footer. If your project isn’t about pricing plans, why have them?

How not to be caught

More often than not it isn’t “fixes” that help but a few decisions made in advance. They are also the basis of your system:

1. Principles. The three rules you wrote in the passport in the sixth lesson. They suggest what the page won’t have.
2. Your own tokens. A color, a font and a spacing step chosen for the tone of your brief, not by default.
3. One bold decision. The authors of guidance on frontend design advise choosing one cohesive manner and keeping to it: one dominant color with sharp accents, an expressive font, a contrast of sizes. Not a set of effects, but one decision.
4. Real materials. Photographs of real people and of work, real evidence. They are the one thing that can’t be generated for you.
5. Checking. The tells are checked against a list, as now, and then legibility, contrast and focus.

A small design system of your own: the part in review

Everything you have done in this part adds up to a system. Check yourself against the list:

1. A passport with principles and limits (lesson 6).
2. Tokens in three layers and a dark theme (lesson 11).
3. A type scale and a spacing step (lessons 3 and 4).
4. Color with checked contrast (lesson 5).
5. Components with states: a button and a card (lesson 12).
6. A reference with a version and a changelog (lesson 13).
7. A handoff specification for the first screen (lesson 14).
8. A check for the tells of a template (this lesson).

The textbook itself has such a system too: the tokens in the design/ folder are gathered in layers, the colors have roles and comments about contrast, and the pages go through an automatic accessibility check. You can open design/tokens.css and recognize in it what you have done yourself.

If you have done the whole list, you have what most small sites do not: rules to build on from here, which you can hand to a person, an AI builder, or yourself in half a year.

Check yourself: is it enough to remove all the tells for a page to be good?

No: it’s necessary but not sufficient. Legibility, accessibility and usefulness to the visitor are needed too.

Practice

Before you is a home page “by default”. Find at least five tells in it and write them in the note, saying where each is. Then rewrite it: real words from your brief in place of slogans, real items in place of cards with emoji, real evidence in place of invented numbers. In styles.css define your own tokens and remove the gradient and the default font.

And one last check, which you do by hand: press Tab and make sure the button’s focus is visible. It can’t be done automatically, and it must not be skipped.

What was wrong with 2025

In 2025 such pages became mass-produced: a builder gave out a site in a minute, and almost nobody changed it. Readers got used to the tells and stopped noticing such pages at all. What became valuable then was exactly specificity: real photographs, named people, facts that can be checked. That’s why the part on AI begins with how not to give away the main thing: your words and your decisions.