The email signature goes out under every employee’s name, dozens of times a day, to exactly the people you most want to impress. On most days it reaches more people than your website does.
And in most companies, nobody is in charge of it. Marketing assumes IT set it up. IT assumes people manage their own. Each person assumes theirs is fine, because they set it once, years ago, and email never shows you your own signature breaking. It’s brand infrastructure with no owner, so it drifts, one laptop at a time, until the company’s most-sent asset is 15 personal interpretations of the wordmark.
Fixing it for good takes less than an hour. Here’s our playbook, style sheet included.
Why signatures break
Somewhere in your company today, an email went out with a stretched logo. Another went out with no logo at all, just an empty frame where an image didn’t load. A third sent your wordmark as an attachment named image001.png, for the fourth time in the same thread. Nobody did anything wrong. Email did.
Email is a hostile place for design. Outlook renders HTML with Word’s layout engine, not a browser’s. Phones rescale anything wider than the screen. The fonts you chose aren’t installed on your reader’s machine. And images fail in more ways than most people know they can:
- The stretch. A mobile client scales the whole signature to fit the screen, and the logo squishes with it.
- The blank frame. Many clients block remote images by default, so a first-time recipient sees an empty box. Alt text and locked dimensions keep that box from looking broken.
- The dead link. The logo points at a URL on your website, someone reorganizes the site, and every signature in the company 404s at once.
- The attachment. A logo embedded in the signature instead of hosted rides along as image001.png, and re-attaches itself on every reply until the thread weighs more than the work.
- The font swap. Your brand typeface silently falls back to Times New Roman, usually in blue.
- The reply pileup. Full signatures stacked six deep in a back-and-forth, each with its own disclaimer.
The system that works
You don’t need one perfect signature. You need two.
The full signature goes on new messages: wordmark, name, title, contact line, and one accent-colored link to somewhere worth sending people. The return signature goes on replies and forwards: two lines, no images, nothing that can break or re-attach in a long thread. Outlook and Gmail both support this split natively; most people just never use it.
| Full | Return | |
|---|---|---|
| Set as | New messages | Replies and forwards |
| Carries | Wordmark, name, title, contact, one accent link | Name and contact, two lines |
| Images | One hosted logo, dimensions locked | None, nothing to break in a thread |
Write the style sheet first
Every broken signature we’ve ever audited traces back to the same root cause: the design lived in somebody’s head. The fix is a style sheet, one page that pins every decision so nobody remakes it badly later. Write down the fonts and their fallbacks, the exact colors, the image treatment, what changes per person, and what’s locked for everyone.
Ours, verbatim:
| Field | Spec |
|---|---|
| Fonts | Poppins Bold for the name, Open Sans for the title, IBM Plex Mono for contact lines. Arial and Courier New declared as fallbacks in every stack. |
| Colors | Ink #212721 for the name, #4A463F for the title, #75716B for contact, #9B968C for pronouns and fine print. Accent #FF4713 on exactly one link. |
| Full | Wordmark at 100×42 from a 200×84 hosted PNG. 2px ink divider. Name 18px, title 14px with optional pronouns, contact in uppercase mono with 1px letter spacing, gallery link bold in the accent. Fine print at 9.5px, fluid width capped at 600px. |
| Return | Name at 15px, then one mono line: company, phone, email. No images. |
| Per person | Name, title, pronouns (optional), email, phone. Five fields, nothing else. |
| Locked | Wordmark link, LinkedIn URL, gallery link, confidentiality disclaimer. Set once, not editable. |
Two of those rows do more work than the rest. Per person is the short list of fields a teammate is allowed to change. Locked is everything else. The moment those two lists exist, your signature stops being 15 personal interpretations of the brand.
Host the logo like you mean it
The logo in a signature isn’t attached; it’s fetched from a URL every time the email is opened. That URL is now brand infrastructure, so treat it that way:
- Host it somewhere public and permanent that you control: your website’s media library, HubSpot’s file manager, or a brand CDN. Not a Google Drive or Dropbox share link; those are viewer pages, not image files, and they break as hotlinks.
- It must load without a login, and live at a URL nobody will reorganize away. If the file 404s, every installed signature in the company goes down with it.
- Export at exactly twice the display size, a few kilobytes at most, with alt text in the markup.
- Pick a host that lets you replace the file in place. When we later doubled our logo’s resolution, we replaced the file in HubSpot, the URL stayed the same, and every installed signature got the sharper version without anyone re-pasting anything.
Installing it: Outlook, Gmail, and the platforms
There are two ways a signature gets installed, and using the wrong one is its own failure mode. Mail clients want the rendered block: you copy the signature as it looks, not as it’s written. Paste code into a signature editor and you’ll be signing your emails with a wall of angle brackets.
In Outlook: Settings → Mail → Compose and reply (new Outlook and web), or File → Options → Mail → Signatures (classic desktop). Paste the rendered full signature, set it for new messages, then paste the return signature and set it for replies and forwards.
Gmail does the same split, which almost nobody knows. Settings → See all settings → General → Signature: create both signatures, then use the signature defaults to assign one for new emails and one for replies and forwards. While you’re there, check “insert this signature before quoted text” so replies don’t bury it at the bottom of the thread.
Platform tools want the opposite door: raw HTML. HubSpot’s signature field has an HTML toggle, most CRM email tools take code, and Microsoft 365 roaming signatures deployed by IT are HTML all the way down. Same signature, different door. This is why the signature generator we build below has two buttons: copy signature for the mail clients, copy HTML for the platforms.
The rollout checklist
- Host the logo at a public, permanent URL you control, exported at twice its display size, with alt text.
- In Outlook and Gmail, paste the rendered signature into the signature editor. In HubSpot and platform tools, paste the raw HTML into the code view.
- Set the full signature for new messages and the return signature for replies and forwards, in both clients.
- Send yourself a test in both directions, open it on your phone, and view it once with images turned off.
- After any change, everyone re-copies. The pasted signature doesn’t update itself; only the hosted logo does.
Why code, and why Claude
A signature is code whether you like it or not. The moment it lands in an inbox, it’s HTML. If the design lives anywhere else (a slide, a PDF, a screenshot of what it should look like), someone eventually hand-translates it into HTML, and every translation drifts. Building it as code from the start means the design is exact, testable, and lockable. Those aren’t developer virtues; they’re brand virtues.
That used to mean a developer favor or an agency line item. Now it’s a working session with an AI assistant. Ours took less than an hour with Claude, start to finish, including the part where we broke it on a phone and fixed it. Here’s the loop.
STEP 01
Hand over everything
Claude is only as good as what you give it. Our handover was:
- The style sheet above, verbatim.
- The logo at original quality. Claude resized and exported the email version itself; ours started as a 587KB print file and ended as a 4.5KB PNG.
- The fixed URLs: website, LinkedIn page, the link we wanted in the accent color, and the hosted logo URL once it was live.
- The two lists: what’s per person, what’s locked.
STEP 02
Review it like a proof
You’re not reading code. You’re checking that what renders matches what you approved: the right sizes, the right colors, the accent in exactly one place. Say what’s wrong in plain language, “the logo has room to be bigger,” “that dot goes,” and make it show you the result again. Every note we gave came back fixed in a minute or two.
STEP 03
Share the generator, not the code
Claude published our generator as an artifact: a small private web page at its own link. We shared that link with view access, which is the quiet genius of the setup. The team can use the page, type their five fields, watch both signatures update live, and copy what they need. What they can’t do is change the locked design, because view access doesn’t let them edit the page. The style sheet enforces itself.
STEP 04
Break it on purpose
Test the failure modes before your clients find them. Shrink the window to phone width and watch the logo. Reply to yourself five times. Turn off image loading and check that the alt text reads like a brand, not an error. Ten minutes of trying to break it beats a month of clients doing it for you.
The ask itself, more or less: “Build two Outlook-safe HTML signatures from this spec as locked templates: tables only, every style inline, fallback fonts in every stack. Then build a generator page my team can use: the five per-person fields, live previews of both signatures, one button that copies the rendered signature, and one that copies the raw HTML.”
The fix is never make it prettier. The fix is make it survive email.
That’s the whole system. It takes an hour, it holds up in the wild, and it ends the era of everyone’s signature being slightly different in ways nobody can name.
And that’s the real point. A signature is one or two lines at the bottom of an email. If something that small deserves a style sheet, a system, and a test plan, imagine what the big things deserve.
