Good web design mostly comes from six habits: rank content with clear visual hierarchy, leave enough whitespace, keep text contrast at 4.5:1 or better, align things to shared edges, group related items close together, and make tap targets at least 24 pixels square. Flip each demo below between before and after to see the difference.
| Principle | Typical fix in CSS |
|---|---|
| Visual hierarchy | font-size, font-weight and color steps |
| Whitespace | padding and gap from one spacing scale |
| Contrast | darker text color, checked against the background |
| Alignment | one text-align and a shared container edge |
| Proximity | smaller gap inside groups, larger gap between them |
| Tap target size | min-height and min-width with padding |
Updated
Articles on design principles describe them in words and stock photos. Here each principle is a small product card or form drawn twice, broken and fixed, so you can toggle between the two and see exactly what changed.
Before: Title, price and button share one size and weight, so the eye has nowhere to land.
After: Size, weight and colour rank the content: title first, price second, action third.
Before: Everything is packed edge to edge, which reads as cluttered and hard to scan.
After: Generous padding and gaps separate groups and give each item room to breathe.
Before: Light grey text on white falls well under the WCAG minimum for normal text.
After: Dark text on white clears 4.5:1, the WCAG 2.2 level AA minimum for normal-size text.
Before: Mixed centred and left-aligned lines create ragged edges the eye has to chase.
After: One shared left edge turns separate lines into a single readable block.
Before: Labels sit equally far from every field, so it is unclear which label belongs where.
After: Each label hugs its own field and pairs are spaced apart, so grouping is obvious.
Before: Tiny links crowd together and are easy to miss with a finger.
After: Targets are at least 24 by 24 CSS pixels, the WCAG 2.2 level AA minimum, with space between.
Three type steps rank the content, spacing comes from an 8px scale, and the muted text stays dark enough to pass 4.5:1 on white.
<style>
.card { max-width: 280px; padding: 24px; border: 1px solid #e5e7eb; border-radius: 12px; font-family: system-ui, sans-serif; }
.card h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: #111827; }
.card .price { margin: 0 0 16px; font-size: 16px; color: #4b5563; }
.card a { display: inline-block; min-height: 44px; padding: 12px 20px; box-sizing: border-box;
border-radius: 8px; background: #1d4ed8; color: #fff; font-weight: 600; text-decoration: none; }
</style>
<div class="card">
<h3>Sourdough loaf</h3>
<p class="price">$9, baked daily</p>
<a href="#order">Order now</a>
</div>Fixing one principle often fixes another. Adding whitespace between groups improves proximity, and a single alignment edge makes the hierarchy easier to read because sizes are compared along the same line.
When a layout feels wrong but you cannot say why, run through the six in order. The first one that fails is usually the cause.
A page can follow every principle and still feel messy if each section invents its own sizes. Define a short type scale, a spacing scale and a colour set, then reuse them everywhere.
That shared set is what designers call tokens. Once they exist, applying these principles becomes picking the right step instead of guessing a new number.
The ones that matter most day to day are hierarchy, whitespace, contrast, alignment, proximity and comfortable tap targets. Consistency ties them together: the same spacing, type sizes and colours repeated across every page.
Visual hierarchy is the order in which people notice things on a page. Designers control it with size, weight, colour, position and space, so the headline is seen first, supporting details second and the main action is easy to find.
WCAG 2.2 success criterion 1.4.3, level AA, asks for at least 4.5:1 for normal text and 3:1 for large text, which it defines as at least 18 point, or 14 point bold.
It describes how people often scan text-heavy pages: across the top, across again a little lower, then down the left side. The practical lesson is to put key words at the start of headings and lines, and not to bury important points mid-paragraph.
WCAG 2.2 criterion 2.5.8 at level AA sets a minimum of 24 by 24 CSS pixels for pointer targets, with some exceptions such as links inside a sentence. Many design teams go larger for primary buttons so they are easy to hit.
Related: Colour contrast checker, Website accessibility checklist, Design system examples, How to design a homepage, Mobile-first web design.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.