Design Principles for the Web
Good design isn't about making things look pretty — it's about making them work. These principles are the foundation of every effective website, regardless of style or industry.
Visual Hierarchy
Visual hierarchy is the arrangement of elements so the eye knows where to look first, second, and third. Without it, everything on a page competes for attention equally — which means nothing stands out and visitors don't know what to do.
You create hierarchy through size (larger = more important), weight (bold = more prominent), colour (bright or contrasting = focal point), spacing (isolated elements draw attention), and position (top of page = seen first).
Use a large, bold headline as the clear focal point. Make the primary CTA button visually dominant over secondary actions. Keep body text smaller and lighter than headings to create clear levels.
Make every button the same size and colour. Use three different fonts at similar sizes. Have a page where nothing feels like the "main" thing — where everything shouts at the same volume.
Whitespace
Whitespace — also called negative space — is the empty area between and around elements. It's not wasted space. It's one of the most powerful tools in design. Whitespace gives content room to breathe, creates visual grouping, and makes layouts feel premium and clean.
Tight, cramped layouts feel cheap and overwhelming. Generous whitespace signals confidence and quality. Apple and Stripe use whitespace masterfully — their pages feel spacious precisely because they resist filling every inch.
Add generous padding inside cards. Leave breathing room between sections. Use line-height of at least 1.6 for body text. Let content breathe — don't try to fit everything "above the fold".
Pack content tightly because you're worried about scrolling. Set padding to 4px on card components. Use line-height of 1 on body text. Add an element to fill every gap because empty space makes you nervous.
Contrast
Contrast makes elements readable and creates visual interest. The most critical type is colour contrast — the difference in lightness between text and its background. Poor contrast makes text unreadable for millions of people, especially those with visual impairments.
WCAG AA standards require a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Use the contrast checker on the Accessibility page to test your colours. As a rough guide: dark text on a light background, or light text on a dark background — always works. Avoid light grey text on white, or yellow text on white.
Test text/background contrast ratios before shipping. Use your brand accent colour for CTAs against a neutral background. Create visual contrast between sections by alternating light and dark backgrounds.
Use light grey placeholder text that's barely readable. Put your accent colour text on a similar-hue background. Design everything at 100% brightness on a bright monitor — check it on a phone too.
Typography
Typography is arguably the most important design skill on the web — over 90% of website content is text. Good typography makes content readable, sets tone and personality, and creates hierarchy without any imagery at all.
For most websites, two typefaces are enough: a clean sans-serif for body text and UI elements, and a more characterful serif or display font for headings. Pair a personality font (headings) with a neutral font (body). Google Fonts offers free, high-quality options — try the Font Pair tool in our Tools Directory.
Set body text at 16–18px with 1.6–1.8 line-height. Use font-weight contrast to establish hierarchy — 700 for headings, 400 for body. Limit to 2 typefaces per site. Keep text line length at 60–75 characters for readability.
Use 3 or more different fonts. Set body text at 12px or below. Use 400 weight for both headings and body text — they'll all look the same. Choose a decorative font for body text — it's unreadable at small sizes.
Colour Theory Basics
A website's colour palette communicates before a visitor reads a single word. Blue suggests trust and professionalism (used by Facebook, PayPal, LinkedIn). Green suggests health, growth, or finance. Black and dark backgrounds suggest premium quality or modernity. Warm reds and oranges create urgency.
For most websites, a simple palette works best: one neutral background colour, one brand/accent colour for CTAs and highlights, and a muted tone for secondary text and borders. Adding a second accent colour (a teal or orange) can add visual interest without overwhelming the design.
The colour wheel has three useful relationships:
- Complementary — opposite colours on the wheel (e.g., blue + orange). High contrast, energetic.
- Analogous — adjacent colours (e.g., blue + teal + purple). Harmonious, calm, professional.
- Triadic — three equally spaced colours (e.g., red + blue + yellow). Vibrant but hard to balance.
Consistency
Consistency is what makes a website feel designed rather than assembled. When buttons all look the same, spacing follows a pattern, and colours are used purposefully throughout — the design feels cohesive and trustworthy. Inconsistency erodes trust, even when visitors can't articulate why.
Define a limited set of colours, font sizes, and spacing values and stick to them. Make all primary buttons look identical. Use CSS variables for colours and spacing so you change them in one place.
Use a slightly different shade of blue on each page. Have buttons that are different sizes, colours, or shapes throughout the site. Invent new spacing values every time — use a consistent scale (8px, 16px, 24px, 32px, 48px).
Colour Palette Generator
Enter a base hex colour to generate complementary, analogous, and triadic colour palettes. Click any swatch to copy its hex value.