You Built It. Now Keep It.

Fix the Visual Mismatch That Makes Sites Feel Homemade

D
DiscoverWorthy
22 September 202610 min read
Contents
  1. The first mismatch to fix is almost never colour
  2. Why layout rhythm beats the other fixes
  3. The inconsistency that survives redesigns
  4. The first thing clients resist changing
  5. The one layer of polish that gives the biggest jump
  6. What breaks first on real pages
  7. The hidden mismatch between tokens and behaviour
  8. Normalise the site, but not into a museum
  9. What to fix first, in practice
  10. The part teams usually get wrong
  11. Make the system easier to keep consistent

#The first mismatch to fix is almost never colour

A site can have decent fonts, a tidy palette, and a logo that does the job, then still feel like it was assembled from three different briefs. That homemade feeling usually comes from visual mismatch, not from a lack of polish in the usual sense.

When the site already looks "pretty good" but still reads as homemade, what visual mismatch do you fix first so the whole brand feels intentional instead of just cleaner? Start with the thing users feel before they consciously notice it: layout rhythm. If spacing, alignment, and component behaviour are inconsistent, the site reads as improvised even when every individual page looks “nice”.

That is the bit most teams miss. They reach for a new colour, a sharper font, or a nicer hero image. The site gets prettier, but not more intentional.

#Why layout rhythm beats the other fixes

If you only have budget for one layer of polish, fix the spacing system first. Not because typography or imagery do not matter, but because spacing is where the whole interface reveals whether it was designed as a system or decorated page by page.

Here is the order I would use on a “good enough” SaaS site:

Layer What it changes Perceived lift
Spacing system Margins, padding, section cadence, card gaps, alignment Highest
Type scale Heading hierarchy, line length, weight contrast High
Button treatment Shape, size, label style, states Medium
Image style Cropping, illustration style, screenshot treatment Medium

If the site already has logo, colours, and fonts but still reads as DIY, the hidden mismatch is usually this: the design tokens say one thing, but the components behave like they were built by different people. The spacing token might be 24px, but one card uses 18px, another uses 32px, and the hero button sits on a different vertical grid again. That is what gives the game away.

When the site already looks "pretty good" but still reads as homemade, what visual mismatch do you fix first so the whole brand feels intentional instead of just cleaner? Fix the rhythm, then the rest starts to hold together.

Key takeaway: A site feels intentional when its spacing, alignment, and component behaviour repeat predictably, not when every page is merely “clean”.

#The inconsistency that survives redesigns

The thing that keeps a site feeling amateurish after a redesign is usually button and card behaviour across contexts.

Not the button colour. The behaviour.

A marketing page might have rounded, roomy buttons with generous padding. The pricing page uses the same colour but tighter padding and a different hover style. The blog cards have one border radius. The feature cards have another. The testimonial block is centred, but the next section snaps back to a full-width grid. Individually, none of that is disastrous. Together, it feels like the site keeps changing its mind.

That mismatch survives redesigns because teams treat pages as assets instead of patterns. They redesign the homepage, then patch the rest later. The homepage looks better. The rest of the site still leaks the old habits.

If you want to see this in the wild, look at sites where the hero feels modern but the inner pages still have old spacing and mismatched component states. The redesign happened. The system did not.

For a practical pass, I would start with the pages people actually use to judge the brand:

  • homepage
  • pricing
  • product detail or feature pages
  • contact or demo page
  • blog index and one article template

Then compare:

  • heading spacing
  • card height
  • button shape and label casing
  • image treatment
  • section padding
  • how much whitespace sits above and below content blocks

If those five pages do not feel like they came from the same system, the site still reads homemade.

#The first thing clients resist changing

The most common resistance is to image treatment, especially screenshots and photography.

People will say the site is “almost there”, then leave in:

  • mixed aspect ratios
  • screenshots with different shadows
  • one-off stock images beside custom product shots
  • illustrations in three different styles
  • logos from customers that have been resized by hand

That is often the piece making the whole site feel less intentional. It is also the piece teams are most attached to because each image feels like evidence of real work. Fair enough. Nobody wants to throw away proof.

But the site does not need more proof. It needs consistent framing.

If you are stuck choosing what to change first, do not start by replacing every image. Start by standardising how images sit in the layout:

  • same corner radius
  • same shadow treatment, or none
  • same crop rules
  • same border treatment
  • same padding inside media cards

That one move usually lifts the site more than a new gradient or a new font weight ever will.

When the site already looks "pretty good" but still reads as homemade, what visual mismatch do you fix first so the whole brand feels intentional instead of just cleaner? Usually it is not the logo. It is the way visuals are contained.

#The one layer of polish that gives the biggest jump

If budget only allows one layer, choose the spacing system, then type scale. That order matters.

Spacing gives the biggest jump in perceived intentionality because it controls:

  • how quickly the eye understands the page
  • whether sections feel related
  • whether the interface breathes or crowds
  • whether the content feels edited or dumped on the page

Type scale matters next because it creates hierarchy. But type alone cannot rescue a site where every block has a different amount of padding. A strong font system on a broken spacing system still looks like someone styled the page in a hurry.

A decent rule:

  • lock your base spacing unit
  • define section spacing, not just element spacing
  • standardise card padding
  • set a clear heading scale
  • keep body copy line length under control

If the site is content-heavy, this matters even more. Long headings, mixed media, and user-generated content expose every inconsistency. A polished homepage can hide a weak system. A blog archive or knowledge base cannot.

#What breaks first on real pages

When you tighten the visual hierarchy, the first thing that usually breaks is long content.

That includes:

  • headings that wrap onto two lines
  • product names with awkward length
  • testimonial quotes that vary wildly
  • screenshots with odd dimensions
  • user-generated content that arrives in different lengths and formats

The temptation is to design for the perfect case and trust the CMS to behave. It will not. Real content always finds the weak spot.

The fix is not to overdesign. It is to build guardrails:

  • set heading line-height so two-line titles still breathe
  • define max widths for text blocks
  • use consistent media aspect ratios where possible
  • allow cards to grow vertically without breaking alignment
  • cap section density so one heavy block does not crush the page

This is where a lot of redesigns go wrong. They look tidy in Figma, then collapse once real copy lands in them. The interface needs to be resilient, not precious.

If you want a useful internal check, compare the polished page against the messy one. Your blog article template, pricing page, and customer story page should survive the same content shape without improvising new spacing every time. If they do not, the system is too fragile.

Related reading: When a DIS scan flags several issues: fix first

#The hidden mismatch between tokens and behaviour

This is the part that gives away a homemade site even when the surface looks good.

The tokens are consistent. The components are not.

You see it when:

  • a button token is reused, but padding changes by page
  • a card token exists, but one template adds a border and another adds a shadow
  • headings use the same font family, but their weights and line-heights drift
  • layout columns are nominally the same, but one page uses 12px gaps and another uses 28px

That is a design inconsistency, but more specifically it is a behaviour mismatch. The system says “reuse me”, then the implementation quietly breaks the rule.

The fix is to make the component behaviour boringly predictable:

  1. define the base component
  2. define the allowed variants
  3. remove page-level one-offs unless they solve a real content problem
  4. test the component against long text, short text, images, and empty states
  5. only then let sections vary

You do not want a stiff interface. You want an interface with a few controlled moves. Enough variation to feel alive, not enough to feel improvised.

When the site already looks "pretty good" but still reads as homemade, what visual mismatch do you fix first so the whole brand feels intentional instead of just cleaner? The answer is usually the gap between what your system says and what the page actually does.

#Normalise the site, but not into a museum

If different sections were built at different times, do not leave the variation in place just because it tells the story of how the site evolved. Users do not care about your build history. They care whether the site feels coherent.

That said, do not flatten every page into the same visual sludge either. A pricing page should not look exactly like a blog article. A product page should not behave like a case study. Variation is useful when it reflects content type, not internal inconsistency.

The right move is to normalise the shared structure, then allow only purposeful differences:

  • product pages can foreground media and CTA blocks
  • blog posts can prioritise reading rhythm and metadata
  • case studies can use stronger quote blocks and outcome callouts
  • support or help pages can be denser, but still follow the same spacing rules

That is how you keep the site from feeling overdesigned. You are not forcing everything into one template. You are making the family resemblance obvious.

If you are managing this across multiple templates, the work is less about new design and more about narrowing the allowed variation. That is the same discipline that keeps context narrow in multi-template content systems, which is why keeping MCP context narrow across similar templates matters once the site starts growing.

#What to fix first, in practice

If I were cleaning up a SaaS site that already looked “pretty good” but still felt homemade, I would do this in order:

  1. Audit spacing across the five most visible templates

    • homepage
    • pricing
    • feature page
    • blog index
    • article or case study
  2. Pick one spacing rhythm and enforce it

    • section padding
    • card padding
    • vertical gaps between blocks
    • max text widths
  3. Standardise component behaviour

    • buttons
    • cards
    • media blocks
    • testimonials
    • callouts
  4. Normalise image treatment

    • crop rules
    • border radius
    • shadow or no shadow
    • screenshot framing
  5. Tighten type scale last

    • heading sizes
    • line-height
    • weight hierarchy
    • link styling

That sequence gives you the biggest jump in intentional branding without asking for a full website redesign. It also makes later changes cheaper, because you are fixing the system, not repainting the surface.

#The part teams usually get wrong

They try to polish everything at once.

That is how you end up with a site that is technically nicer but still feels off. One page gets a new hero. Another gets a new CTA style. The blog gets a different card treatment. The whole thing becomes more refined and less coherent.

Start with the mismatch that users feel before they can name it. Usually that is spacing and component behaviour. Then pull the rest into line.

If you want a quick test, open the site in three tabs, homepage, pricing, and a content-heavy page. Scan only the whitespace and the media blocks. If those three pages feel like different products, the site still has a visual mismatch problem.

For teams publishing regularly, this is also where a managed system helps. DiscoverWorthy’s Website lets you edit pages live and publish in one click, with managed SSL and global edge delivery, so you are not waiting on plugins, themes, or a dev queue just to keep the site consistent.

#Make the system easier to keep consistent

Once the site is aligned, the real job is keeping it that way. That means fewer one-off edits, fewer template exceptions, and fewer “just for this page” decisions that quietly rot the system.

If your site keeps drifting, the fix is not another redesign. It is a publishing setup that makes consistency easier than drift. That is where a managed site, a controlled template set, and one content system behind the pages matters more than another round of visual tinkering.

And if you are still deciding where to start, start with the spacing system. It is the fastest way to make a homemade website feel like it was designed on purpose.

Then, if you want the faster path, see what Website does on your own site.

Keep reading

All posts