How to Keep the Marketing Site and the App Visually Related

Two products from the same company can look like they were made by strangers. The marketing site has a full-bleed hero, a custom typeface, generous whitespace, and photography shot at golden hour. The app has a default system font, cramped rows, and a button that has been the same shade of blue since a redesign nobody remembers. Both are real. Both ship. The gap between them is not a law of nature, though plenty of teams treat it like one.

The comfortable excuse is that a marketing site and an app do different jobs, so they should look different. That argument has a kernel of truth in it and a mountain of laziness on top. A landing page persuades a stranger. A dashboard keeps a committed user working. Those are different jobs. They still belong to the same company, and a person who clicks from one to the other should not feel like they changed trains in a foreign country.

Visual kinship between a site and an app is a design problem with known parts: color, type, spacing, motion, iconography, and the tone of the copy. None of it is mysterious. What makes it hard is that the two surfaces are usually built by different teams, on different timelines, with different constraints, and nobody is assigned the job of keeping them in the same family.

The Brand Guidelines Document Nobody Opens

Most companies have a brand book. It lives in a shared drive, gets updated once a year, and contains a page of hex codes with names like Midnight and Ember. The marketing team treats it as scripture. The app team treats it as a suggestion, partly because the brand book was written for print and web campaigns, and the app has states the book never imagined: error, empty, loading, offline, disabled.

A hex code is not a design system. Midnight on a poster is a mood. Midnight as a button background with white text at 14 pixels is a contrast problem. The app team runs into this and quietly substitutes a slightly darker blue so the text passes accessibility checks. That substitution is correct in isolation and corrosive in aggregate. Do it forty times across a product and the app has a palette of its own that no one chose on purpose.

The fix is not a thicker brand book. It is a shared token layer: named values for color, type scale, spacing, and radius that both surfaces consume. The marketing site imports the tokens. The app imports the same tokens. When Midnight needs to become Midnight-accessible for small text, that decision happens once, in the token file, and both surfaces inherit it. This is unglamorous plumbing, and it is the single highest-leverage move available.

Tokens solve the mechanical half of the problem. They do nothing for the felt half, which is where most of the visual mismatch actually lives.

Type That Survives the Jump From Poster to Panel

A display typeface that looks confident at 72 pixels on a hero can look like a ransom note at 13 pixels in a settings row. This is the most common and most forgivable mismatch, and teams often respond by banning the display face from the app entirely. That is an overcorrection. The better pattern is a pairing: the display face for headings and moments of emphasis, a sturdy workhorse for body and interface text, and a clear rule about which is which.

The rule matters more than the fonts. If the marketing site sets headlines in a high-contrast serif and body in a neutral sans, the app should use the sans for nearly everything and reserve the serif for the app's own headline moments: onboarding screens, empty-state messages, the occasional celebratory modal. A user who saw the serif on the site will recognize it in the app and feel the continuity, without the app becoming unreadable.

Line height and letter spacing are where the seams show. Marketing sites tend to set body copy loose, around 1.6 to 1.7 line height, because long paragraphs need air. Apps compress to 1.4 or tighter to fit more rows. Both are correct for their context. The mistake is treating the number as brand rather than as a per-context decision, then letting the divergence read as inconsistency. Document the divergence. Say out loud that the app runs tighter because it is denser by design. The mismatch stops looking like neglect once it has a reason written down.

Spacing Is the Quietest Signal

Spacing is the part of a visual identity people feel without naming. A marketing site built on an 8-pixel grid with generous section padding feels calm and deliberate. An app built on a 4-pixel grid with tighter padding feels efficient. Neither is wrong. The failure mode is when the two grids are unrelated, so the rhythm of the site and the rhythm of the app share no common denominator.

A shared spacing scale, even one as simple as 4, 8, 12, 16, 24, 32, 48, 64, gives both surfaces a common pulse. The site will use the large end of the scale for section breaks. The app will live in the small end. The numbers in between keep the two in conversation. When a designer on either team needs a value that is not on the scale, that is a signal worth examining rather than a shortcut worth taking.

Corner radius is the same story with a shorter scale. If the marketing site uses pill-shaped buttons and the app uses 4-pixel rounded rectangles, the two products read as different eras of the same company. Pick a radius language and hold it across both. A single radius value used everywhere is boring but coherent. A small set of two or three radii, applied consistently, is better still.

Photography, Illustration, and the Empty State

Marketing sites lean on imagery because imagery sells. Apps lean on imagery sparingly because imagery slows the work. The mismatch shows up most sharply in the empty state, that screen a new user sees before any data exists. The site promised a rich, warm, human product. The app delivers a gray box with the words "No items yet."

The empty state is where visual kinship gets tested hardest, because it is the one screen in the app that has room to be expressive. It is also the screen most likely to be built last, by whoever has time, with whatever asset is lying around. A company that invests in a coherent illustration style for the marketing site and then ships a default empty state has told the user, in visual language, that the app is the lesser product.

Treat the app's expressive moments, onboarding, empty states, success confirmations, error pages, as small pieces of marketing inside the product. Use the same illustration style, the same photography treatment, the same tone of voice. A user who arrives from a site full of warm, hand-drawn spot illustrations and then meets a matching illustration on the first empty screen will trust the product more, not less. The continuity is doing real work.

Motion Should Share a Vocabulary, Not a Script

Marketing sites use motion for drama: a hero that fades and slides, a scroll-triggered parallax, a button that lifts on hover. Apps use motion for feedback: a row that slides away when deleted, a sheet that rises from the bottom, a spinner that appears after a beat. The two vocabularies are different, and they should be. What they should share is a feel: the same easing curve, the same general sense of speed, the same relationship between cause and effect.

A site that animates with a slow, luxurious ease and an app that snaps instantly will read as two different personalities. A shared motion language, even a loose one, keeps them relatives. Pick two or three easing curves and a duration scale, then use them on both surfaces. The site will use the longer durations. The app will use the short ones. The curves stay the same, and the family resemblance holds.

The Copy Carries More Brand Than the Logo

Visual kinship is not only visual. The words on the marketing site and the words in the app are the same brand talking, and they often sound like two different companies. The site says "Let's get you set up." The app says "Error: configuration incomplete." The site says "Welcome aboard." The app says "User created."

Copy is the cheapest surface to align and the one most often ignored in visual-consistency conversations. A shared voice guide, even a short one, that covers button labels, error messages, empty states, and confirmation toasts will do more for the felt continuity between site and app than a new palette will. The same person should be able to read a sentence from either surface and know it came from the same place.

This is where a lot of teams discover that their marketing site and their app are not actually the same brand. The site sells a version of the company the product has not caught up to, or the product has evolved past the story the site still tells. The visual mismatch is a symptom. The useful conversation is the one about which version is true.

Who Owns the Seam

The reason site and app drift apart is organizational before it is aesthetic. Marketing owns the site. Product owns the app. Each team has its own designers, its own review process, its own definition of done. Nobody's job description includes making sure the two surfaces look related, so the seam between them goes unowned, and unowned seams rot.

Assigning that seam to a person, or a small group, with the authority to review both surfaces against a shared token set is the structural fix. It does not need to be a large role. It needs to be a real one, with a standing review and the ability to say no to a one-off color that will not survive the next redesign. A design system team, even a team of one, is the usual home for this work.

The payoff shows up in the small moments. A user signs up on the site, gets the confirmation email, clicks through to the app, and the whole path feels like one continuous place. None of those individual screens is remarkable. Together they build the quiet confidence that the company knows what it is doing. That confidence is worth more than any single hero image, and it is built one shared token at a time.