Visual Design Fundamentals

You already know how to change font-family and color. What this page gives you is the vocabulary to decide whether a choice is good: the three pillars designers work from before any tool is opened. Here's a bonus I particularly enjoy: this vocabulary makes your AI prompts dramatically more precise. "Asymmetric two-column layout with a high-contrast accent" gets you accurate output. "Make it look professional" gets you vibes.

Pillar 1 — Layout & Grid

Every professional page is built on an invisible grid: columns, gutters, and margins that everything snaps to. The web default is a 12-column grid, and content tends to span groups of 4.

• Symmetric layouts read as stable and institutional — schools, banks, government.
• Asymmetric layouts read as dynamic and editorial — news, magazines, portfolios. Neither is better; they're different voices.
• Scale creates hierarchy. The largest element at the highest contrast is where the eye lands first. Designers call it dominant; everything else is subordinate.
• Whitespace is not empty. The space around an element is as designed as the element itself. Curiously, more whitespace gives content more weight, not less.

Can't see the grid on a site? Hold a straight edge up to the screen. Where text blocks start and end, that's a column edge. Once you start seeing grids you can't stop, fair warning.

Pillar 2 — Colour

Colour has three axes:

Three useful relationships on the wheel: complementary colours (opposite) create maximum contrast; analogous (adjacent) harmonize; triadic (three evenly spaced) feel vibrant but are harder to control.

The 60-30-10 rule

Allocate your palette by weight:

• ~60% dominant — usually a neutral: backgrounds, large panels.
• ~30% secondary — section backgrounds, mid-weight UI elements.
• ~10% accent — buttons, links, calls to action. This is usually the brand colour, and everything else exists to make it pop.

Look at Spotify: near-black dominant, grey secondary, and that single green on every play button. One 10% colour doing all the work.

Pillar 3 — Typography

Typefaces carry texture and personality:

• Pair by contrast of texture, not similarity. A geometric sans headline over a humanist body works; two typefaces from the same category look nearly identical, so there's no contrast and no reason to have both.
• Maximum two typefaces per design. One primary, one supporting. More than two usually signals a decision that hasn't been made.
• Type hierarchy is the reading order you build into the page: display → heading → body → caption. Each level should be clearly distinct in size, weight, or both.
• Leading (line-height) and tracking (letter-spacing) are the whitespace inside your text. Tight leading reads as editorial; loose leading reads as comfortable.

Prompting with Design Vocabulary

Instead of "make my site look better," try specs:

Restyle this page with: an asymmetric two-column layout,
a dark-value dominant background with a single high-saturation accent
(60-30-10), and a display-weight hero heading over a humanist body font.

The model can act on grid, 60-30-10, accent, type hierarchy. It can only guess at better.

Stretch Challenges

• Redesign critique: pick a site you use every day and write a one-paragraph critique. Name the grid structure, identify the 60-30-10 palette, describe the type hierarchy, and name one specific thing you'd change, using design vocabulary rather than "it looks off."
• Inspiration board: find three page designs you genuinely admire (web, posters, magazine layouts all count). For each, annotate the grid, the colour relationships, and the typeface pairing. What do all three have in common?