The Website Design Rules I Follow on Every Build

If you're managing your own website — or working with someone to build one — you've probably run into that frustrating feeling where something looks off but you can't pinpoint why. The colors clash, the text feels cramped, the page looks fine on your laptop but broken on your phone. It doesn't feel professional, but you're not sure what to fix.

Most of the time, it's not one big thing. It's a handful of small rules being quietly broken.

I've built websites for businesses ranging from service companies to SaaS products, and I follow the same core set of design principles on every single project. These aren't subjective preferences — they're patterns that show up on virtually every well-designed site you've ever visited. Get them right and your site looks polished and trustworthy. Get them wrong and visitors feel friction without knowing why — and they leave.

Here's the full list, broken down by category.

Typography

Good typography isn't about picking a pretty font. It's about making your content effortless to read and guiding people toward the most important information first.

Never center-align body text

Center alignment works great for a short headline or a two-line tagline. The moment your text runs longer than two lines, center alignment becomes exhausting to read — the eye has to hunt for the start of each new line. Left-align your paragraphs, always.

Use progressive disclosure

The most important text should be the largest. Headlines bigger than subheadings, subheadings bigger than body copy. This sounds obvious but gets violated constantly when people style things by feel rather than by hierarchy. Your H1 should be immediately dominant. Your body copy should be the smallest text on the page.

A related rule: large text should be short. If your headline is 60px, it shouldn't be a full sentence. Big text is for punchy, scannable statements. Details belong in smaller body copy.

Follow proper header structure

Use H1 → H2 → H3 in sequence. Don't skip a level because you want a certain size — adjust the size to match your hierarchy, not the other way around. One H1 per page. Use H2s for major sections, H3s for subsections within those.

Line height

This one gets ignored more than almost anything else and it's immediately visible when it's wrong.

• Headers: 1rem – 1.3rem. Tight line height makes headlines feel confident and intentional.

• Body text: 1.4rem – 1.6rem. More breathing room makes longer text readable without fatigue.

Font pairing

Use a maximum of two fonts per site. Use Inter for all body text — it was specifically designed for screens and is exceptionally readable at every size. Choose one display or heading font to give your site personality, and apply it consistently to every heading level (H1, H2, H3). Don't mix heading fonts or use your display font for body copy.

Layout & Spacing

Spacing is what separates sites that feel polished from sites that feel amateur. The most common mistake is not using enough of it.

Max width

Every section on your site should have a maximum width to prevent content from stretching uncomfortably wide on large screens. I use 1080px to 1400px depending on the site's style — tighter for content-heavy sites, wider for visual/portfolio work. Without this, your layout breaks on large monitors and text becomes nearly unreadable.

Body text width

Within your layout, body text should have its own width constraint. Maximum 720px, with 400px–600px being the sweet spot for most paragraph text. This controls how many words appear per line, which directly affects how comfortable the text is to read. Long lines are exhausting — the eye has to travel too far and losing your place mid-paragraph becomes common.

Section padding

Every section needs consistent breathing room. Here's what I use:

The gap between sections on desktop should also be around 120px. This amount of space feels generous, but it's what separates sections clearly and gives your content room to breathe.

Whitespace within sections

Beyond the outer padding, pay attention to space inside your sections — the padding inside cards, the gap between an icon and its label, the spacing between list items. This internal whitespace is just as important as the structural padding and is easy to overlook when you're building.

Use a consistent spacing scale

This is the rule that ties everything together, and it's the one most self-builders skip entirely.

Every spacing value on your site — padding, margins, gaps, text sizing — should come from a fixed set of numbers. I use this scale on every project:

1 · 2 · 4 · 8 · 16 · 24 · 32 · 40 · 48 · 64 · 80 · 96 · 120px, and then 120px + increments of 40px for larger values (160, 200, 240, etc.).

This is essentially an 8-point grid with a 4px base — a system used by most major design teams at companies like Google, Apple, and Airbnb. Every value is either a multiple of 8 or a half-step of 4. The section padding values listed above (24px, 64px, 80px, 120px) all come directly from this scale.

You can break the rules occasionally — 12px or 72px when something genuinely needs it — but those should be exceptions, not habits.

Why it matters: When every spacing decision comes from the same set of numbers, your site develops an invisible internal rhythm. Elements feel like they belong together. When spacing is chosen arbitrarily — 13px here, 22px there, 37px somewhere else — the page feels restless and unresolved, even to people who couldn't tell you why. Consistent spacing is one of the easiest things to get right and one of the most common things to get wrong.

Color

Color mistakes are the fastest way to make a site look unprofessional. The fix is almost always using less, not more.

Stick to 2–3 hues

Pick two or three color hues and build your entire palette around them. More than that creates visual chaos. Use shades and tints of those hues (lighter, darker versions) to add variety without introducing new colors.

One color for calls to action

Choose a single primary color for your main action — your "Contact Me" button, your "Get Started" link, your "Book a Call" prompt — and use it only for that purpose. Don't use your CTA color for decorative elements or headers. Protecting it means it always signals "do something here" to the visitor.

Your primary brand color should dominate

Don't distribute your colors evenly across the page. Your primary brand color should carry most of the visual weight. Accents and secondary colors should be used sparingly, which makes them more impactful when they appear.

Check your contrast

This one is non-negotiable. Body text needs a 4.5:1 contrast ratio against its background to meet accessibility standards (WCAG AA). Beautiful color palettes often fail this test. Use a free contrast checker — if your text doesn't pass, adjust the shade until it does. Low contrast text is uncomfortable to read and signals a lack of attention to detail.

Match images to your palette

When selecting photos or graphics, look for images whose tones and colors are compatible with your site palette. A warm, earthy brand palette with cold blue-tinted stock photos creates subtle visual dissonance that visitors will feel even if they can't name it.

Design System

This applies specifically if you're building in Framer, but the principle holds in any tool.

Centralize your styles

Set every color and text style as a named variable or asset at the start of the project. Never hardcode a color value directly on an element. When you need to tweak your brand blue or change your body font size, a centralized style system means one change updates the entire site. Without it, you're hunting through every page manually.

Keep components consistent

Cards, buttons, form inputs, and badges should feel like they came from the same place. Same border-radius scale, same shadow style, same internal spacing logic. When components feel visually inconsistent — some rounded, some sharp; some with heavy shadows, some flat — the site feels assembled rather than designed.

Always build interactive states

Every button, link, and interactive element needs three states beyond its default appearance:

• Hover — visual feedback that it's clickable

• Active/pressed — confirms the click registered

• Focus — critical for keyboard navigation and accessibility

The focus state is the most commonly skipped and the most important for accessibility. Don't leave it out.

Images & Performance

A beautiful site that loads slowly is a site people leave. Image optimization is the single highest-leverage performance improvement you can make.

Use WebP format

WebP images are significantly smaller than JPG or PNG files at comparable visual quality. Export everything as WebP before uploading.

Size images at display size

Never upload a 4000px wide image to fill a 600px container. Export images at the size they'll actually be displayed, or close to it. Oversized images are one of the most common causes of slow page loads.

Lazy load below-the-fold images

Images the visitor can't see yet (below the visible area of the screen) shouldn't load until they're needed. Most website builders handle this automatically, but it's worth verifying.

Recommended tool: imageresizer.com — resize and compress images before uploading to your site.

The Short Version

If you only remember a handful of things from this post, let it be these:

• Left-align body text. Use progressive disclosure for hierarchy.

• Cap your layout at 1080–1400px. Cap body text at 720px.

• Use Inter for body text. One display font for all headings, used consistently.

• 2–3 color hues max. One CTA color, protected.

• Check your contrast ratios — don't guess.

• Generous section padding. More than you think you need.

• Stick to a spacing scale (1, 2, 4, 8, 16, 24, 32, 40, 48, 64, 80, 96, 120px). Don't invent numbers.

• Optimize and resize images before uploading.

These aren't advanced techniques. They're the baseline. Getting them right won't make your site look extraordinary, but getting them wrong will make it look like something is off — even to visitors who can't explain why.

If you're building your own site and want a second set of eyes, feel free to reach out.