Definition
Email design tokens are the atomic design values stored as named variables that define an email programme's visual language. Instead of hard-coding colour values, spacing amounts and font sizes in every email template, these values are defined once as tokens and referenced everywhere. A token named color-primary might resolve to #1a73e8 across every campaign that references it.
When the brand updates its primary colour, changing the token value updates every email that uses it — without hunting through individual templates. This approach brings the efficiency of design systems to email production.
Common Design Token Categories
- Colour tokens: Primary, secondary, accent, background, text, success, warning
- Spacing tokens: Inline padding, block spacing, section margins
- Typography tokens: Font family, size scale, line height, weight
- Border tokens: Radius, width, style
Best Practices
- Define tokens in a shared file that both designers and developers reference as the single source of truth
- Name tokens by their function rather than their value —
color-headingnotcolor-dark-grey— so names remain meaningful when values change - Version tokens so historical campaigns retain their original appearance when tokens are updated
- Integrate tokens into the email build pipeline where possible to automate consistency
Related Glossary Terms
Accessible CTA (Email)
An accessible CTA is a button or link coded with sufficient colour contrast, visible focus states, descriptive screen-reader text, and a minimum touch target of 44×44 pixels.
Dark Mode
Dark mode in email refers to how email clients render messages when the recipient has dark mode enabled. It affects colour display, image rendering, and readability. Designers use CSS media queries and hybrid coding techniques to control the dark mode appearance.
Drag-and-Drop Email Editor
A drag-and-drop email editor is a visual interface that allows marketers to build email layouts by dragging content blocks into place without writing HTML or CSS code.
Email Accessibility Guidelines
Email accessibility guidelines ensure emails are usable by people with disabilities, following WCAG standards for screen readers, colour contrast, keyboard navigation, and readable content.
Email Accessibility
Email accessibility ensures marketing emails are usable by people with disabilities, including those using screen readers, keyboard navigation, or assistive technologies. It follows WCAG 2.1 guidelines for structure, contrast, semantics, and descriptive content.
AI Image Generation for Email
AI image generation for email creates original visual assets for campaigns using tools like DALL-E, Midjourney and Adobe Firefly — reducing dependency on stock photography and custom photoshoots.