The Design Decisions Nobody Explains (And Why They Make or Break a Page)

Short answer: Good pages come from eight decisions, not from taste — one job per page, content before layout, a systematic spacing scale, an obvious type hierarchy, one accent colour, a 65–75 character line, 4.5:1 contrast, and deleting a third of what you built. AI tools execute all eight well when you specify them and badly when you don’t. The tool is not the variable. The decisions are.

Everyone shows you the finished design. The polished screenshot, the smooth scroll, the case study with the numbers at the end. Almost nobody shows you the part in the middle — the forty small decisions that turned a blank canvas into that page.

Those decisions are the design. The visual result is just what they add up to.

This is a walkthrough of the ones that matter most, and how to get Claude and ChatGPT to respect them instead of overriding them with defaults. If you want to sanity-check a prompt before you spend a generation on it, our free AI prompt checker scores it and tells you what is missing.

Part 1 — The eight decisions

01What is this page actually for?

Before anything visual, one question: what is the single thing this page should cause?

A service page should cause a booked call. A blog post should cause trust and a subscription. A pricing page should cause a purchase or a qualified enquiry.

One job per page. When a page tries to do two things — book a call and sell a course and grow the newsletter — it does none of them. Every element either serves the one job or competes with it.

How to apply it: write the job at the top of your document before you design anything. “This page exists to get operations managers at 20–200 person companies to book a 30-minute call.” Every later decision gets tested against that sentence. Does this section move someone toward booking? If not, it is a candidate for deletion.

This is also the decision that separates a designer from a decorator. A decorator makes the page look nice. A designer makes the page work.

02Content first, layout second

Most people open Figma and start with boxes, fill them with lorem ipsum, then bend the design around real copy when it finally arrives.

Work the other way. Write the actual words first — headline, subhead, section content, button labels — then build the layout around what you wrote.

Two things happen when you do this. The layout fits the message instead of the message fitting the layout. If your value proposition needs 40 words, you will design a section that holds 40 words comfortably. And weak copy becomes visible immediately — lorem ipsum hides the fact that you have nothing to say, real words do not.

This is the single biggest reason AI-generated pages feel hollow. Ask a model to design a landing page without giving it real content and it will invent placeholder copy — and placeholder copy produces placeholder layout.

03Spacing — the one that separates amateur from professional

If you fix only one thing on a page, fix the spacing. Cramped pages read as amateur regardless of how good the typography and colour are. Generous pages read as considered and expensive. Highest leverage available, and it costs nothing.

Use a spacing scale, not arbitrary numbers. Pick a base unit — 4px or 8px — and only use multiples of it: 8, 16, 24, 32, 48, 64, 96, 128. The moment you use 13px here and 27px there, the page loses its rhythm even if nobody can articulate why.

Related space belongs together. A heading should sit closer to its own paragraph than to the section above it. Get proximity wrong and readers cannot tell which heading belongs to which content, no matter how clear the words are.

04Typography hierarchy

Hierarchy answers a question the reader never consciously asks: what do I read first? If everything is roughly the same size and weight, the eye has nowhere to land, and most readers will not do that work for you.

• H1: 48–64px desktop, 32–40px mobile
• H2: 32–40px
• H3: 24–28px
• Body: 16–18px — never below 16px, it triggers zoom on mobile
• Small print: 14px minimum

The gap between levels needs to be obvious. If your H2 is 20px and your body is 18px, that is not hierarchy, that is noise. Aim for at least a 1.25× jump between levels, more at the top.

Two font families maximum. One is usually better. A single family with three weights (400, 500, 700) produces more coherent results than two families do. If you use two, make them obviously different — a serif and a sans — so it reads as intentional.

Line height matters more than people think. Body text 1.5–1.7, headings 1.1–1.25. Tight line height on body text is the most common readability mistake in long-form content.

05One accent colour

Multi-colour pages look cheap. Uncomfortable to hear if you like colour, but the pattern holds almost universally.

Look at Stripe, Linear, Vercel, Notion. Neutral foundation — white, black, a range of greys — and one accent that appears only where it means something: the primary button, a link, an active state.

Why it works: colour is a signal. If everything is colourful, nothing is signalled. When the accent appears in only one context, the eye learns within seconds that this colour means action, and the page becomes navigable without conscious effort.

Practical rule: neutrals for everything, one accent, and the accent appears on the primary CTA and nowhere else on the first screen. If you need a second colour, make it a state colour — red for errors, green for success — not a decorative one.

Skip the gradient. The purple-to-blue gradient is the single most recognisable AI-design tell in 2026. Not because gradients are bad, but because that particular one has been generated ten million times.

06Line length

Body text should run 65–75 characters per line. On a 16–18px font that is roughly a 600–700px column, and it matches what Nielsen Norman Group’s readability research has found repeatedly.

Full-width paragraphs on a 1400px screen are genuinely hard to read — the eye loses its place returning to the start of the next line. Readers do not notice this consciously. They just leave.

Practical rule: constrain your text column with max-width: 65ch even when the section background runs full-width. The ch unit scales with your font, so the measure stays right when the type size changes. Content column and background width are separate decisions.

07Contrast

Body text against its background: 4.5:1 minimum. Large text at 24px and above: 3:1. Those are the thresholds in the WCAG 2.2 contrast guidelines.

Light grey text on white is the most common design mistake on the modern web. It looks refined on a good monitor in a dark room and becomes unreadable on a phone outdoors — which is where a large share of your traffic actually is.

Treat it as a quality standard, not just an accessibility box. If your text needs perfect conditions to be readable, the design has failed.

08What you take away

The last decision, and the hardest. Once a page is built, go through it and ask of each element: if I deleted this, would the page be worse? Most elements fail that test.

Restraint is what reads as premium. Not more polish — less content. One idea per section. Three features instead of six. One CTA instead of four. A page with five strong elements outperforms a page with fifteen mediocre ones, every time.

Part 2 — Making these decisions with AI

Here is the problem with AI design tools: they will happily make all eight decisions for you, and they will make them badly, because “make it beautiful” contains no information.

The output is predictable. Purple gradient hero. Floating card with a fake dashboard screenshot. Three feature columns with generic icons. Tight spacing. Two or three accent colours competing. Testimonials from people who do not exist.

It is not that the models cannot design well. An underspecified prompt gets answered with the statistical average of every landing page on the internet — and the average landing page is mediocre. This is the same failure mode behind most stalled AI projects: the brief was never specific enough to succeed.

The fix is to make the decisions yourself and hand them to the model as constraints.

09Which model for which job

Both lineups moved fast through 2026, so verify against the vendor docs before you rely on a specific name — Anthropic’s model overview and OpenAI’s model list are the sources of truth.

Anthropic currently offers Claude Opus 5 as the frontier model for complex work, Claude Sonnet 5 as the balanced everyday model, and Claude Haiku 4.5 for fast, cheap tasks. OpenAI currently runs the GPT-5.6 family, with GPT-5.5 and the GPT-5.4 tiers below it.

If you are choosing between Claude tiers on price and context rather than on design specifically, we compared all four in which Claude model you should actually use.

Claude Design is worth calling out separately because it changes the workflow rather than just the output. It works on a canvas — you describe a change, see it applied live, and refine from there. For pages you will iterate on ten or fifteen times, that loop is meaningfully faster than copy-pasting code between a chat window and an editor.

A combination that works well in practice: draft the copy with a strong general model, then build and iterate the page in Claude Design with the copy already written. That way you are never designing around placeholder text.

10The prompt structure that actually works

A weak prompt looks like this:

Design a modern, beautiful landing page for my AI automation agency.

That gets you the average. Here is the structure that does not:

ROLE
You are designing a [page type] for [specific audience].

GOAL
The single job of this page is to [one outcome].

CONTENT
[Paste your actual copy — headline, sections, CTA text.
Do not invent placeholder content.]

REFERENCES
Visual direction similar to [2–3 named sites].
Specifically: [what you like about them].

TYPOGRAPHY
[Font] for headings, [font] for body. Two families maximum.
H1 56px, H2 36px, body 17px, line height 1.6.

COLOR
Background [hex]. Text [hex]. ONE accent [hex].
Accent appears only on the primary CTA. No gradients.

SPACING
8px base scale. Section padding 112px desktop, 72px mobile.
Text column max-width 65ch.

LAYOUT
Single column, max-width 1100px, left-aligned.

CONSTRAINTS — do NOT use:
- Stock illustrations or 3D blob graphics
- Purple-to-blue or any multi-stop gradient
- Floating card mockups in the hero
- Emoji as icons
- More than one CTA above the fold
- Fabricated testimonials, logos, or statistics
- Carousels or auto-playing anything

OUTPUT
Single HTML file, inline CSS, no external dependencies
except the Google Font import.

Three parts of that carry most of the weight.

References beat adjectives. “Modern” means nothing — every model has seen a million pages described as modern. “Like Linear.app: dark background, tight type, minimal colour, generous spacing, no illustrations” gives the model something concrete.

Numbers beat descriptions. “Generous spacing” is interpretable. “112px section padding” is not. Anywhere you can specify a number, specify a number.

The negative constraints matter most. This is the part almost everyone skips, and it does the most work. Models default to the most common pattern in their training data, and the do NOT use block is how you steer away from it.

11How do I check if my prompt is good enough?

Read it back and ask whether a competent freelancer could build the page from it without asking you a single question. If they would need to ask “what font?” or “how much spacing?”, the model is guessing too.

Faster version: paste it into our free prompt checker, which scores the prompt and names what is missing — role, constraints, output format, success criteria. We wrote up the common failure patterns in why your prompt is weak and how to correct it. It is the same discipline as a design brief: vague in, average out.

12Iterating properly

The first output will not be right. That is expected — the skill is in the second, third and fourth pass. Change one thing at a time, specifically.

“Make it better” invites the model to change things randomly, and you will often lose something that was working.

Lock in what works. When a section is right, say so explicitly: “The hero is final — do not change it. Now work on the pricing section.” Models will otherwise happily rewrite what you were happy with.

13Getting more professional output specifically

Ask for the reasoning first. “Before writing any code, list the design decisions you are making and why.” You catch bad choices before they are built, and it forces the model to be deliberate rather than reflexive.

Give it a critique pass. Paste the output back with: “Critique this design as a senior designer would. Identify the three weakest decisions and what you would change.” Models are consistently better at criticism than at first drafts.

Constrain the palette to hex codes. Do not say “blue” — give the exact hex. Otherwise you get a different blue every generation and nothing matches across pages.

Ask for a design token block. “Output all spacing, colour and type values as CSS custom properties at the top.” Global changes become trivial and every later page stays consistent with the first.

Set the tone explicitly. “Confident and technical, not playful. No exclamation marks.” Tone drift is one of the fastest ways a page starts feeling generic.

Part 3 — Optimisation

Design decisions and performance decisions are not separate. A beautiful page that loads in six seconds is a failed page.

Images. Convert to WebP or AVIF. Serve responsive sizes rather than one 3000px file scaled down in the browser. Lazy-load everything below the fold — but never the hero image, because lazy-loading it delays your Largest Contentful Paint, which is the opposite of the goal.

Fonts. Every family and weight is a separate download. Two families at three weights each is six files before any content renders. Subset to the characters you use, self-host rather than pulling from a third party, and set font-display: swap so text appears immediately — web.dev’s font guidance covers the trade-offs.

Mobile. Over half your traffic, and it needs decisions rather than a squeeze. Reduce section padding by roughly 40%. Drop heading sizes by 30–40%. Stack multi-column grids. Keep tap targets at 44×44px minimum. And cut content — a mobile page does not need everything the desktop page has.

Heading hierarchy. One H1 per page, containing your primary keyword naturally. H2s for sections, H3s for subsections. Do not skip levels for visual reasons — style them with CSS instead. Screen readers and search crawlers both navigate by this structure, and it is one of the levers that still works now that AI Overviews are absorbing a large share of clicks.

CTA placement. One above the fold, one mid-page after you have made the case, one at the end. Three is enough. Sticky headers with a permanent CTA work well; sticky bars that cover content do not.

Frequently asked questions