⚠️ 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

Channels / Email Signature
Download .md file
Open .md in new tab
On this page
  • Regulations
  • Standards
  • Formats
  • Tools
  • Don't
  • Checklist

Every team member's signature comes from the Email Signature tool (usage guide), never a hand-built copy. Email is the one place the design system's tokens cannot reach. The studio team owns the generator; each person owns their own details.

Regulations

This is an owned channel, so its regulations come from the technology rather than a platform owner. The constraint is what mail clients render faithfully, and it is unusually severe.

Constraint What it forces Consequence if ignored
No CSS classes or custom properties every rule is an inline style the design system's tokens cannot reach this channel at all
Webfonts are stripped a system font stack the brand face never loads, in any client
Inline SVG is not rendered raster only, hosted rather than embedded the mark disappears in most inboxes
Layout runs on tables nested tables, not flex or grid modern layout collapses to a single column
Images are fetched at render time asset URLs must be permanent a moved file breaks every signature already sent

These are properties of mail clients, not of any one provider, and they have been stable for years. Nothing here is expected to change.

Standards

The values below come from the brand manifest (cms/brands/bydefault/brand.json) at build time, so the signature cannot drift from the brand. Change them in the manifest, never in a sent signature.

Element Value Format Notes
Signature card fixed warm background, 10px corners, 20px padding, max-width 950px inline-styled HTML table one fixed colour, because email cannot read a token
Logo 200×155, animated GIF hosted, fetched at render time
Contact icons 24×24 shown, 48×48 source for retina JPG email, website, LinkedIn, Instagram rows
Body type Helvetica, Arial, sans-serif system fallback 4.3 Typography still governs everywhere the web font loads
Disclaimer 9px confidentiality notice inline-styled table on by default

Verified against the brand manifest's signature settings: 2026-07-05.

  • Logo: the animated By Default mark ships as a hosted GIF rather than the SVG. Variants: 4.1 Logo
  • Colour: the card sits on one frozen warm background, because email HTML cannot read 4.2 Colour tokens
  • The generator is the only source. Nobody hand-writes or hand-edits a signature, because a pasted copy forks the brand and drifts on the first colour or logo change.

Formats

Hosted assets. The logo GIF and contact icons are served from https://assets.bydefault.studio/email/signature/, a host built for URLs that must outlive any site restructure. A signature already sitting in someone's sent folder can never be edited, so its image URLs are permanent: the bytes at a published path never change, and a redesigned asset gets a new filename instead. The copies committed here are what the generator previews from.

Animated By Default logo used in the signature

animated-bydefault-logo.gif, 200×155

Tools

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

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.

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
  • Regulations
  • Standards
  • Formats
  • Tools
  • Don't
  • Checklist
Previous Newsletter
Next Podcast

Was this page helpful?

We use this feedback to improve our documentation.

Thanks for your feedback

Send feedback

© 2026 By Default