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. It is not necessarily white, sparse, monochrome, or minimal. Those are styles. Clean is a relationship between the page and the job its visitor came to do.

That definition is useful because you can test it. You do not have to tell an agent to “add more polish” and hope 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 you can 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. Where it is a working convention, we call it a convention.

Clean is a relationship, not a look

The most 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 things could make the page simpler and the experience worse.

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

Research supports treating visual complexity as consequential, but not as a score you can optimize in isolation. In two controlled studies, Tuch and colleagues found that visual complexity and familiarity affected rapid aesthetic judgments. The studies used screenshots and ratings; they did not prove that sparse sites are more usable or that any of the rules below improve sales.

Test the five rules on the same content

This small 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 not that our “on” state is the only good design. The point is to isolate decisions instead of changing the entire 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 your attention first? Which action looks primary? If you cannot answer either question, the hierarchy is distributing importance instead of expressing it.

This is 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, but they should look secondary. Section headings should predict what follows. That last point 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 empty 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 one a job. For example:

• a small gap within a component;
• a medium gap between related components;
• a large gap between sections.

The numbers themselves 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 exact values universal.

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

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. Test the page by reading only its headings. Do they summarize the route through the page? The top heading has a second job beyond looking like a heading, 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. A better instruction is: give each color a role, then remove colors with no job.

A practical palette might have:

• surfaces and text neutrals;
• one brand or action color;
• separate success, warning, and error colors where the interface needs them.

Do not use restraint as an excuse for low-contrast gray 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 color 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 the same as 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 controls that use the strongest treatment. If three unrelated actions are equally loud, none is primary. Choose the action 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 interactive controls above are larger because minimum conformance is a floor, not an argument for making buttons tiny.

This is where clean design often fails in practice: a visually restrained page uses whisper-small links, invisible focus states, or controls that only become obvious when a mouse hovers over them. 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. Editing an incomplete draft for polish usually creates churn.

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 important part. It separates diagnosis from mutation. If you need a fuller method for specifying intent and boundaries, use the prompt-as-brief framework. If the result is already working and you are deciding 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.