Should Your Marketing Site Look Like Your Product?

Should Your Marketing Site Look Like Your Product?

It should share your brand, not your interface. Colour, type, logo, voice and tone belong in both places. Product UI patterns mostly do not, because a marketing page and an application are doing different jobs for different people in different moods. Confusing the two produces sites that look tidy and persuade nobody.

We end up in this conversation on most SaaS redesigns, usually because the product team has built a good design system and someone reasonably asks why the website is not using it. It is a fair question with an unobvious answer.

Here is where we think the line sits, and why.

Why Does This Question Come Up So Often?

Because design systems succeeded. A company invests in tokens, components and documentation for the product, and then looks at the marketing site maintained separately with its own buttons and its own spacing scale, and sees waste.

The instinct to unify is right. The mistake is unifying at the wrong layer. Sharing a colour palette and a type scale is nearly free and nearly always correct. Sharing a data table component with a page whose job is to make someone book a demo is not a saving, it is a category error.

We have watched teams rebuild a homepage out of product components and end up with something that looks like a settings screen with a headline on top.

What Are the Two Jobs, Exactly?

A marketing site persuades a stranger who owes you nothing. A product serves a user who has already committed and now wants to get something done without friction.

That changes everything downstream. Marketing design can afford scale, contrast, motion and whitespace, because attention has to be earned in the first seconds. Product design should be quiet, dense and predictable, because the interface is not the point and every flourish costs someone time on their hundredth visit.

A product's best compliment is that nobody noticed it. A marketing page's best compliment is that somebody remembered it. Those goals pull in opposite directions, and one component library cannot serve both without compromising one.

How Fast Do People Judge the Site Anyway?

Fast enough that the first impression is aesthetic, not rational. The best known study here is Lindgaard, Fernandes, Dudek and Brown, "Attention web designers: You have 50 milliseconds to make a good first impression", published in Behaviour and Information Technology, volume 25, pages 115 to 126, in 2006. Semantic Scholar records it as having been cited more than 1,000 times.

Fifty milliseconds is faster than reading. Whatever judgement forms in that window comes from colour, density, type and layout, not from your value proposition. That is an argument for the marketing site being visually distinctive, not for it being visually neutral.

It is worth being precise about what that research measured, which was visual appeal. It does not say people decide to buy in 50 milliseconds. It says the aesthetic verdict arrives before anything you wrote does.

What Should Definitely Be Shared?

The brand layer. Logo and its usage rules. The core palette, including the exact hex values, because nothing signals carelessness faster than two slightly different blues. Typefaces and their weights. Iconography style. Photography and illustration direction. Voice and tone.

Underneath that, shared design tokens are the practical mechanism. Colour, spacing scale, type scale, border radius and elevation travel well between a marketing stack and a product stack because they are values, not implementations.

That is the level of sharing that pays for itself, and it is the backbone of how we think about design systems for websites.

What Should Stay Separate?

Components and layout patterns. A product button is built for repeated use at small size with clear states. A marketing call to action wants to be large, confident and singular. Forcing one to be the other makes the product loud or the marketing timid.

Density is the other big one. Product interfaces pack information tightly because users are working. Marketing pages breathe because readers are scanning. If your homepage has product level density, it reads as a dashboard and people bounce off it without knowing why.

Navigation too. Product navigation is persistent, hierarchical and built for return visits. Marketing navigation is a routing decision for people who do not know your vocabulary yet.

When Does Showing the Product Actually Help?

When the interface is the argument. If your product's differentiator is that it is genuinely nicer to use than the competition, showing real screens is the most persuasive thing on the page, and stylising them into abstract shapes throws that away.

The rule we use is that product imagery should be honest and legible. Real screens, cropped to one idea, at a size where the text is readable. Not a tilted 3D mockup with fake data and six panels at once, which communicates "software exists" and nothing else.

There is a related trap: building marketing pages that imitate the product shell, with a fake sidebar and fake nav, so visitors cannot tell whether they are looking at a page or an app. That confusion costs you clicks on the thing you actually wanted them to click.

Does Consistency Have a Usability Cost?

Consistency is a usability principle, but it is about meeting expectations, not about uniformity. Nielsen Norman Group's fourth usability heuristic, written up by Rachel Krause in January 2021, splits it into internal consistency within a product family and external consistency with wider conventions.

That article also invokes Jakob's Law: people spend most of their time on sites other than yours, so they arrive carrying expectations formed elsewhere. Read carefully, this is an argument for your marketing site matching marketing site conventions and your product matching product conventions.

In other words, the consistency that helps users is consistency with the category they think they are in, not consistency between your two properties. That distinction resolves most of this debate.

What Goes Wrong When a Site Copies the Product?

Three things, reliably. The page gets quieter than it should be, because product design discipline suppresses exactly the contrast a marketing page needs. Hierarchy flattens, because product components are designed to be equal citizens. And the page starts to feel generic, because product UI conventions are shared across the whole industry.

That last one matters more than people expect. Product interfaces converge by design, since users benefit from familiarity. Build your marketing site from the same vocabulary and you inherit the convergence, which is one of the mechanisms behind why so many websites look the same.

The company then spends a rebrand trying to recover distinctiveness it gave away for a maintenance saving.

How Do You Keep Them in Step Without Merging Them?

Give one person or group ownership of the brand layer, and let each surface own its own implementation. Publish tokens from a single source. Keep a shared page that shows both, side by side, so drift is visible before it is a project.

Review them together on a schedule rather than continuously. Twice a year, put the homepage and the main product screen on one wall and ask whether they look like the same company. That question is answerable in ten minutes and it is the only check most companies need.

When the answer is no, fix the brand layer first. Changing components rarely fixes a mismatch that is really about colour and type, which is the point we make in redesigning without losing your brand.

So What Is the Short Answer?

Your marketing site and your product should be unmistakably the same brand and visibly different artefacts. Same palette, same type, same voice. Different density, different components, different rhythm.

If a visitor can tell within a second that both belong to you, and can also tell which one they are looking at, you have it right. If the homepage feels like an app, or the app feels like a landing page, something has been shared that should not have been.

If your site and product have drifted apart, or been merged too enthusiastically, we are happy to look at both and say which layer needs the work. You can find us at phoenix.studio.