Color, type, and whitespace: the principles behind premium-feeling sites
There's a moment, looking at your own site, where you know something is off but can't say what. The content is right. The photos are decent. It just looks —…
There's a moment, looking at your own site, where you know something is off but can't say what. The content is right. The photos are decent. It just looks — homemade. And because you can't name the problem, you can't fix it, so you move a few things around and it stays exactly as wrong as it was.
Almost always, the answer is one of three things: colour, type, or space. This is a plain-language guide to what actually separates a polished site from a DIY one, and how to apply each principle without a design degree.
The principle underneath all of them
Amateur design is almost never a failure of taste. It's a failure of restraint — too many colours, too many typefaces, too many sizes, too many things competing to be the most important thing on the page.
Professional design looks expensive largely because it repeats itself. The same accent colour. Two typefaces, not five. Three text sizes, used consistently. The same spacing between sections all the way down. Repetition reads as intent, and intent reads as quality.
If you're unsure whether to add something, don't. Nearly every page we've been asked to look at got better by subtraction.
Colour: one accent, used sparingly
Most sites have too many colours doing too many jobs. A workable palette is smaller than people expect:
- A background — usually near-white or near-black, rarely pure either.
- A text colour — high contrast against the background, and usually not pure black on white, which is harsher than it needs to be.
- One accent — your brand colour, used for the things you want clicked.
- A neutral or two for borders, muted text and quiet section backgrounds.
That's it. The temptation is to give every section its own colour; resist it. Your accent earns its power from scarcity. If every heading, button, icon and divider is your brand orange, nothing on the page is emphasised — you've just made an orange page.
How this works here
You set your colours once, in settings, and they flow through the entire site: buttons, links, headings, highlights, section backgrounds. There's no page-by-page fiddling and no way to end up with three slightly different versions of your accent across five pages, because there's one place the colour comes from.
Section backgrounds are chosen from swatches drawn from your palette rather than an open colour picker. That constraint is a feature: it lets you alternate light and darker bands down a page for rhythm while guaranteeing every band belongs to the same family.
And if you don't trust your own eye, the AI builder proposes three palettes chosen for your business. Preview each one live across the whole site, then apply the one that feels right. It's a shortcut past the part of this that genuinely is hard.
Contrast is not optional
The most common colour mistake on small-business sites is light grey text on a white background, or white text over a photograph. It looks refined on your screen and it's unreadable on a phone in daylight — and for readers with lower vision it may be unreadable anywhere.
If you're putting text over an image, put something between them: a darkened overlay, a solid panel, a scrim. Then check it outside on your phone. If you have to angle the screen, it's failing.
Type: two faces, three sizes, and generous line height
Typography is where DIY sites give themselves away fastest, and it's also the easiest thing to get right — because the correct move is mostly to leave it alone.
Two typefaces, maximum
One for headings, one for body text. That's a complete system. Every template here ships with a pairing chosen by someone who does this professionally, tested at every size the template uses. Changing it is the single quickest way to undo the work.
If you must have your brand's typeface in the mix, use it for headings only and keep a proven, readable face for body copy. Display faces are designed to be looked at; text faces are designed to be read, and at paragraph length the difference is punishing.
A clear hierarchy
Readers scan before they read. They need to be able to tell, at a glance and without reading a word, what's a heading, what's a subheading and what's body text. That means real steps between sizes — a heading that's fractionally larger than the text beneath it reads as a mistake rather than a hierarchy.
Three levels is usually enough for a page: the page title, the section headings, and the text. Reach for a fourth only when a section genuinely has sub-sections.
Line length and line height
Two numbers do most of the work in making text feel comfortable:
- Line length. Somewhere around 60–75 characters per line is where reading is easiest. Full-width paragraphs across a wide monitor are exhausting — the eye loses its place returning to the start of the next line. This is why our templates constrain body text to a column rather than letting it run edge to edge.
- Line height. Body text wants noticeably more space between lines than headings do. Tight line spacing on paragraphs is the most common reason a page feels cramped even when everything else is fine.
Sentence case, and stop shouting
Long stretches of capital letters are hard to read, because the shape of a word — the pattern of ascenders and descenders the eye recognises — disappears. Capitals are fine for a short label or an eyebrow above a heading. They're not fine for a sentence.
Whitespace: the one that costs nothing
Whitespace is not empty space. It's the thing that tells a reader what belongs with what, and it's the clearest single difference between a designed page and an assembled one.
Proximity means relationship
Things close together read as related; things far apart read as separate. So a heading should sit closer to the paragraph it introduces than to the paragraph above it. A caption should hug its image. A price should sit near its product name, not floating between two.
Get this wrong and readers do a small amount of work on every element to figure out what goes with what. They won't notice they did it. They'll just find the page tiring.
Consistency beats generosity
Even spacing matters more than a lot of spacing. Sections separated by wildly different gaps look accidental; sections separated by the same gap look intentional even when that gap is modest. Our templates handle this for you — which is precisely why building a page from the provided sections looks better than improvising one.
Let things breathe
The instinct when a page feels empty is to add more to it. Try the opposite first: give what's already there more room. A hero with one headline and a lot of space around it reads as confident. The same headline crowded by three buttons and a badge reads as anxious.
The squint test: step back from your screen and squint until the text turns to grey blocks. You should still be able to see the structure of the page — where things group, what's most important, where the eye goes first. If it squints into an undifferentiated mass, the problem is spacing and hierarchy, not content.
A fourth thing: alignment
Less discussed than the other three and just as visible. Every element on a page should line up with something else — a shared left edge, a shared centre, a consistent grid. Elements that are almost aligned are worse than elements that are clearly not, because the eye reads the near-miss as an error.
This is another reason to use your template's sections rather than improvising: the grid is already there, and everything you drop in snaps to it.
One practical rule: pick left-aligned or centred for a section and commit. A centred headline over left-aligned body text over a centred button is three decisions fighting each other. Centred text also gets harder to read the longer it runs, so keep it for short things.
Applying this to a page you already have
Open your home page and work through this list in order. Most sites improve substantially without a single new asset.
- Count your colours. More than four or five in play? Reduce. Reserve the accent for what you want clicked.
- Count your typefaces. More than two? Remove one.
- Check contrast on a phone, outdoors. Fix anything you have to squint at.
- Find your competing headlines. If three things on a screen are all shouting, decide which one actually matters and quiet the others.
- Look for cramped groups. Anywhere elements are touching that shouldn't be, add room.
- Delete one section. The one you kept because it came with the template. You know which.
Why any of this matters commercially
None of this is decoration. A visitor decides whether your business is credible in the first second or two, long before they've read anything, and design is nearly all they have to go on at that point. Sites that look considered get the benefit of the doubt. Sites that look thrown together have to earn it back with words most people won't stay to read.
The good news is that the principles are few and boring: fewer colours, two typefaces, clear hierarchy, generous and consistent space, honest alignment. You don't need taste to apply them. You need restraint — and a template that's already made most of these decisions correctly, so all you have to do is not undo them.
