⚠️ Design system CSS not found. Check the path in cms/docs.config.js → designSystemPath, then re-run npm run docgen.

Email Signature

The one touchpoint where the brand ships as frozen constants, not tokens

Touchpoints / Email Signature
Download .md file
Open .md in new tab

Every team member's signature comes from the generator, never a hand-built copy. Email is the one place the design system's tokens can't reach. Mail clients strip CSS variables and webfonts, so the generator freezes the brand into inbox-safe HTML that renders the same everywhere. The studio team owns the generator; each person owns their own details.

Identity here

  • Logo: the animated By Default mark ships as a hosted GIF, not the SVG; mail clients don't render inline SVG. Variants: 4.1 Logo.
  • Colour: the signature card sits on one fixed warm background. Email HTML can't read 4.2 Colour tokens, so the value is frozen in the generator instead of chosen per signature.
  • Type: no brand webfont survives an inbox. The signature falls back to a system sans by design; 4.3 Typography still governs everywhere the web font loads.

Specs

Element Value Format Notes
Signature card fixed warm background, 10px corners, 20px padding, max-width 950px inline-styled HTML table email HTML uses tables + inline styles, never CSS classes
Logo 200×155, animated GIF hosted, fetched at render time, never inline SVG
Contact icons 24×24 shown (48×48 source, 2× for retina) JPG email, website, LinkedIn, Instagram rows
Body type Helvetica, Arial, sans-serif – system fallback; the brand webfont is stripped by mail clients
Disclaimer 9px confidentiality notice inline-styled table on by default

Verified against the brand manifest's signature settings (cms/brands/bydefault/brand.json): 2026-07-05.

The card background, logo dimensions, and disclaimer come from the brand manifest at build time, so the signature can't drift from the brand. Change them in the manifest, never in a sent signature.

Templates & assets

  • Signature generator: the generator (linked under Tools below) builds the HTML; nobody hand-writes a signature.
  • Hosted assets: the logo GIF and contact icons live on a permanent URL path (/email/signature/) so signatures already in the wild keep rendering; the git repo stays the source of truth.
Animated By Default logo used in the signature

animated-bydefault-logo.gif, 200×155

Don't

Don't hand-build a signature

The generator is the only source. A pasted-together copy forks the brand and drifts on the first colour or logo change.

Don't swap the GIF for an SVG or PNG

Mail clients render neither reliably. The hosted GIF is the tested asset. Every other format breaks in someone's inbox.

Don't expect brand fonts in the inbox

A signature that looks right only in your own client is broken for everyone else. Keep to the system fallback the generator sets.

Tools

  • Email Signature: generates the signature and copies it straight into Gmail, Apple Mail, or Outlook.

Checklist

  • Signature generated from the tool, not hand-edited
  • Name and role correct; only the links you use are toggled on
  • Pasted into the mail client, then a test sent to yourself
  • Disclaimer kept unless there's a reason to drop it
On this page
  • Identity here
  • Specs
  • Templates & assets
  • Don't
  • Tools
  • Checklist
Previous

Newsletter

Next

Instagram

Was this page helpful?

We use this feedback to improve our documentation.

Thanks for your feedback

Send feedback

© 2026 By Default