Clean website design: 5 rules you can actually test

A clean website makes four things easy to identify: what matters most, which elements belong together, what the words say, and what to do next. Not necessarily white, sparse or minimal, because those are styles. Clean is a relationship between the page and the job its visitor came to do.

That definition is testable. Instead of telling an agent to "add more polish" and hoping it shares your taste, you can point to two headings competing for attention, three buttons pretending to be equally important, or a paragraph that becomes a horizontal-scroll problem when you zoom in, then ask for one bounded change and inspect the result.

The five-rule method below is our editorial rubric, not a universal design law. Where a rule comes from an accessibility standard or research, that source is named.

Clean is a relationship, not a look

The useful distinction is between necessary richness and avoidable competition. A restaurant menu may need dozens of items, a musician's page may need motion and sound, a data product may need a dense table. Removing those could make the page simpler and the experience worse.

Avoidable competition is different: the second button with the same visual weight as the primary action, a decorative colour that looks like a status, a heading only slightly larger than the paragraph beneath it, five unrelated gap sizes chosen by feel.

Research supports treating visual complexity as consequential, not as a score to optimize in isolation. In two controlled studies, Tuch and colleagues found that visual complexity and familiarity affected rapid aesthetic judgments. Those used screenshots and ratings; they did not prove sparse sites are more usable.

Test the five rules on the same content

This lab holds the offer and words constant. Switch off one rule at a time and ask a precise question: did the relationship between elements become harder to read? The point is isolating decisions rather than changing the whole page at once.

If a switch barely changes your reading of the preview, that is useful too. It means the rule may not be the source of the problem you are trying to fix.

1. Give every screen a clear winner

Look at the page before reading it. On the first screen, which message attracts attention first, and which action looks primary? If you cannot answer either, the hierarchy is distributing importance instead of expressing it.

Not an instruction to make everything enormous. Start with three roles: one page-level proposition, one supporting explanation, one primary next action. Secondary actions may remain, and they should look secondary. Section headings should predict what follows, which is also an accessibility requirement: WCAG 2.2 says headings and labels should describe their topic or purpose.

Give an agent the conflict, not an adjective:

In the hero, keep “Monthly bookkeeping for independent studios” as the only
page-level message. Reduce the eyebrow to supporting text. Keep “Book a fit
call” as the filled button and render “See the process” as a text link. Do not
change the copy or add new sections.

The final sentence matters. A bounded instruction prevents a hierarchy fix from turning into an unsolicited rewrite.

2. Use spacing to show relationships

Spacing is not decoration. It tells the reader which label belongs to which field, which paragraph belongs to which heading, and where one idea ends. Use fewer gap sizes and give each a job: a small gap within a component, a medium gap between related components, a large gap between sections.

The numbers are contextual; the repeatability is the contribution. The GOV.UK Design System publishes a small static and responsive spacing scale, demonstrating the practice without making its values universal.

The audit is simple: find the two closest elements that are unrelated, then two related elements separated by a larger gap. If both exist, spacing is contradicting the content.

Use the existing spacing scale only. Keep the heading and its lead paragraph
one small step apart. Separate the next section by one large step. Remove
one-off margin values introduced only on this page.

3. Make the type easy to scan before making it expressive

A type system needs visible roles. Body copy, section headings, labels and buttons should not depend on position alone to tell you what they are. Read only the headings: do they summarize the route through the page? The top one has a second job, since the H1 is one of four things people call the website title and it has to agree with the other three.

Then test the body:

1. Zoom text to 200 percent. Important content and controls should remain available; WCAG includes this in its resize-text criterion.
2. Narrow the viewport. For ordinary vertically scrolling content, WCAG's reflow guidance uses a width equivalent to 320 CSS pixels.
3. Find any paragraph that feels harder to return to at the next line. Shorten its measure or break the argument into real paragraphs; do not insert line breaks only to make one screen look composed.

Type can be expressive and still pass those checks. The goal is not one font, one size or one line length, it is a stable set of roles that survives content and viewport changes.

4. Restrain color without erasing meaning

"Use fewer colors" is too crude. Better: give each colour a role, then remove colours with no job. A practical palette has surfaces and text neutrals, one brand or action colour, and separate success, warning and error colours where the interface needs them.

Do not use restraint as an excuse for low-contrast grey text. WCAG 2.2 requires at least 4.5:1 contrast for normal text and 3:1 for large text, with defined exceptions. And contrast is not enough when colour carries meaning: WCAG's use-of-color criterion requires another visual cue, such as text, an icon, a border pattern or a change in shape.

Keep the brand teal for the primary action and active navigation. Use neutral
surfaces elsewhere. Do not communicate error or selection by color alone, and
verify text contrast against WCAG 2.2 AA thresholds.

Passing those checks does not certify the whole site as accessible. It means the specific contrast and color-use decisions have a defensible baseline.

5. Keep the next action obvious—and usable

Action focus is not one button per page. A visitor may need to see work, read terms, contact you or sign in. The question is whether the visual treatment describes priority.

On each screen, count the controls using the strongest treatment. If three unrelated actions are equally loud, none is primary: choose the one that advances the page's promise and demote the rest without hiding them.

Then inspect the physical targets. WCAG 2.2's Level AA target-size criterion specifies at least 24 by 24 CSS pixels or sufficient spacing, with defined exceptions. Our controls above are larger, because minimum conformance is a floor rather than an argument for tiny buttons.

This is where clean design fails in practice: a restrained page with whisper-small links, invisible focus states, or controls that only appear on hover. Quiet is not clean when the action disappears.

Run the 10-minute clean-design pass

Do this after the agent has produced a complete page, because editing an incomplete draft for polish creates churn. If what you want removed is specifically the generated look, the five defaults behind it are in AI website examples.

1. Step 1Name the winner

   At desktop and mobile widths, identify the first message and primary action without reading every word. Record conflicts; do not fix them yet.

2. Step 2Trace the groups

   Check whether spacing joins related elements and separates sections. Flag every one-off gap that has no structural reason.

3. Step 3Read headings, then body

   Scan headings alone, zoom text, and narrow the viewport. Note clipping, horizontal scrolling, and paragraphs with no readable measure.

4. Step 4Audit color and controls

   Test contrast, remove color-only meaning, and check the size, spacing, keyboard focus, and priority of actions.

5. Step 5Issue one bounded revision

   Ask the agent to fix the smallest coherent set of failures. Keep the copy and working behavior unchanged unless either caused the failure.

Copy this as a final review prompt:

Review this completed commercial page without redesigning it.

1. Identify the dominant message and primary action at desktop and mobile.
2. List spacing values that do not belong to the existing scale.
3. Check heading roles, text zoom, narrow-screen reflow, and paragraph measure.
4. Check text contrast, color-only meaning, target size, keyboard focus, and
   competing primary actions.
5. Return a short failure list before changing code.

After I approve the list, fix only those failures. Preserve the copy, content
order, brand character, and working behavior.

That two-step instruction is the point: it separates diagnosis from mutation. For a fuller method of specifying intent and boundaries, use the prompt-as-brief framework, and if the result already works and you are choosing between a contained edit and a rebuild, treat editing as the default.

What clean design must not remove

Do not remove evidence because a testimonial makes the hero taller. Do not hide the price because two numbers disturb a perfect grid. Do not replace descriptive navigation with unexplained icons. Do not flatten every heading into the same size. And do not delete the second path when different visitors genuinely need different actions.

Clean design is not the smallest number of elements. It is the smallest amount of avoidable competition around the elements the page needs.