A customer meets your business twice in the same hour: once on the website, and again in their inbox when a receipt or a reply arrives. The website was designed. Someone chose its colors and wrote them down. The email usually runs on whatever the sending tool shipped as a default. Both go out under your name, and they don’t look related.
Why email can’t just reuse your website’s design
The obvious fix, pointing the emails at the website’s stylesheet, doesn’t work: mail clients strip most of what modern web design is built from. Our own site serves its brand typeface itself, so every visitor sees it; an email cannot deliver a font at all, so our messages declare the brand face first and fall back to whatever the reader’s system has, which is what most people actually see. Outlook renders email with the same engine Word uses, and that engine ignores rounded corners and throws away padding.
A consistent email is the same brand rebuilt inside those limits. Colors go in flat, since transparency breaks in mail clients; our guidelines work out every blended color ahead of time against the white of the card, so no client is asked to blend anything. Layouts stay plain enough for Word’s renderer. And the type rule admits defeat up front: declare the brand face, design for the fallback.
Write the brand down once
What keeps the website and the mail in agreement at our shop is a written document. Our brand guidelines name every color with a measured contrast ratio next to it, and email has its own section, with rules the web pages never need. Text never drops below 14 pixels. Links are underlined and near-black rather than brand-colored, because we measured our bright accent at 1.76 to 1 against white, far too faint to carry a link.
The document earned its keep within a week of being ratified, on our own mail. The email shell had drifted: its heading rendered in a serif that was never one of our faces, its footer text sat below the 14-pixel floor and measured 3.46 to 1 against the card, and even the card’s corner radius was wrong. Because the rules were written down, the repair was mechanical. Hold the shell against the spec, and every fault has a number beside it and a rule it violates.
The details that decide whether it holds
The clearest example is dark mode. Gmail’s dark mode repaints an email’s backgrounds but never touches the pixels inside an image, so a dark wordmark on a transparent background disappears into the repainted ground. On the website we serve a light version of the logo wherever the band behind it is dark; an email cannot make that swap. Our fix was baking the logo onto a small white plate inside the image file itself, a background no mail client is able to repaint.
Hosting is a quieter one. A website can keep its logo files private to its own server. An email has to fetch its logo from a public address every time someone opens it, which is why one client’s mail carries the artwork their storefront already serves publicly instead of the mark that exists only in their design files. A logo that isn’t hosted anywhere public cannot appear in email at all.
And size is its own trap. Our email header once gave every brand’s logo the same height, which suited our own wide lockup and shrank one client’s square mark until the name inside it was unreadable. Each brand now gets its own logo height, chosen so the mark takes up the same share of the 560-pixel email card that it takes of that brand’s storefront page, and the mark reads with the same weight in both places.
The envelope is part of the brand
One more surface gets forgotten: the sender line. For eight days, one client’s mailings looked exactly right, their colors and their type and their footer, and arrived from a no-reply address on our domain, because their own mailbox didn’t exist yet. The card said one business; the envelope said another. Recognition starts in the inbox list, before the email is ever opened, and a well-dressed message from a stranger’s address reads like phishing. The sender line is also where this subject meets email deliverability, a different problem with its own fixes.
What to ask for
None of this requires our tooling. It does require what the tooling enforces: logo files generated from one master, with a version hosted where email can fetch it; a palette written down with a contrast measurement beside each color; and email rules that accept what mail clients actually render. That written document is the lasting part of a brand system, and it is the thing a new email tool, or a new developer, gets checked against.