The 8 design principles every site relies on

Hierarchy — where should the eye land first?

Good design tells visitors what to look at in what order. Use size, weight, color, and position to rank content from most → least important.

• Biggest = most important — headlines always out-size body text
• Two sizes is rarely enough — try a scale of 4–6 sizes (12 / 14 / 16 / 22 / 32 / 48 px)
• Use weight, not just size — bold a word, don't grow it
• Color & whitespace set the secondary hierarchy after size

Contrast — make differences feel different

Contrast isn't just about accessibility. It's the main tool for drawing attention: a dark element on a light background pulls your eye, and vice-versa.

• Size contrast: headline 3× the body
• Color contrast: black on white, brand color on neutral bg
• Weight contrast: bold vs regular
• Temperature contrast: warm accent on cool background

Alignment — nothing placed arbitrarily

Every element should line up with something else on the page. Left-aligned text, centered headlines, right-aligned prices — pick a grid and stick to it. Random indentation signals amateur work faster than anything.

• Pick one edge: left, center, or right — and commit
• Use a grid: 12 columns or CSS Grid with consistent gutters
• Align to a baseline: text on neighboring elements should share a line

Repetition — consistent patterns build trust

Repeat colors, fonts, shapes, and spacing throughout your site. Repetition is how a collection of pages becomes a product.

• Reuse the same card pattern, button shape, icon style
• Stick to 2 fonts maximum (one serif + one sans is a classic combo)
• Define a spacing scale (4 / 8 / 16 / 24 / 48 px) and use it everywhere
• Design tokens (CSS custom properties) make repetition easy to maintain

Proximity — group related things

Elements close together look related; elements far apart look distinct. Use space to show what goes with what.

White space — less is more

Whitespace (also called negative space) isn't wasted space. It's the breathing room that lets content feel premium instead of cluttered. Apple, Stripe, and every luxury brand owe their polish to generous whitespace.

• Padding is bigger than you think it needs to be — double it
• Line-height 1.5–1.7 for paragraph text
• Use max-width on text blocks (45–75 chars is the readability sweet spot)
• Sections should feel distinct — use 60–120px of vertical space between them

Balance — symmetric or intentionally asymmetric

Every layout has a visual weight. You can balance it by mirroring elements (symmetric) or by offsetting a large element with several smaller ones (asymmetric). The only wrong answer is accidental imbalance.

• Symmetric: formal, classic — think editorial, publications
• Asymmetric: dynamic, modern — think tech startups
• A large left element balances 2-3 smaller elements on the right

Color & unity — a palette that tells one story

Limit your palette. A 5-color system (background, surface, text, primary, accent) is plenty. Too many colors and the site feels like a clown car.

• One dominant color (60%) — usually neutral
• One secondary (30%) — often a muted complement
• One accent (10%) — your "pop" color, used sparingly
• See the Color Lab for palette generators and color wheel theory

Exercise — find the principles everywhere

Open apple.com, stripe.com, or linear.app and count:

• How many font sizes? How many colors?
• What's the ratio of whitespace to content?
• Are sections left-aligned, centered, or asymmetric?
• What card shape repeats throughout?

Every polished site is just these 8 principles applied consistently. Once you see the system, you can build one too.