Menu

Keeping the brand consistency throughout customer facing media is as important as sending the same message across different communication channels. For example, even though email and website designs have their own limitations, they should be as similar to each other as possible. 

When your subscribers open your emails you want them to immediately recognise your brand. From your choice of colours to the type of imagery you use, everything in your email can contribute to making your brand as recognisable and memorable as possible.  

Colour palette

Colour is a crucial part of your brand identity, therefore you might want to consider using the same or similar colours for your emails, to the ones used across all of your other channels.

Other things you may need to consider:

  • Think about specific colours you will be using for different elements, such as headlines, body copies, call-to-action buttons and backgrounds.
  • How your logo is going to look on different background colours.
  • Do you want to use different colour schemes for the different types of emails you'll be sending?
  • If you're going to include a spacer module, are there any specific colours for it?
  • Think about the color palette and combinations for the CTA buttons and other elements.

Fonts 

Fonts are also an important element to consider. You may have your own font specific to your brand or use a certain typography for your emails.

You may also need to think about:

  • Will you use different fonts to different parts of text, such as headlines, body copy or CTA's copy?
  • Will you use different fonts for mobile? 
  • Unfortunately, a number of web fonts are not supported by email clients, therefore you may want to think about fall back fonts to make sure that no matter who is opening your email, they receive the best experience possible with your brand.
  • If using a brand specific font, you should also remember that in order to make your fonts work in email, they should be in the WOFF or WOFF2 format.
  • Web safe fonts such as Arial and Times New Roman are supported across the vast majority of devices and offer a greater variety in terms of the typography that you can use in your emails. This is particularly important if you want to maintain consistent branding throughout your campaigns. 

You can read more on other web safe fonts here and you are able to find many web fonts here. 

Spacing and dimensions 

Consider how much padding you are going to add in between modules. Adding space will not only make the content easily readable but will also make your email more accessible. Spacing, such as margins and paddings, between elements help create a seamless flow of content without making the message look cluttered. 

You may want to consider things like:

  • How much padding you are going to add in between modules. 
  • Adding white space or/and spacer modules to give users more flexibility while building email campaigns.
  • How wide the email is going to be.
  • The default dimensions of the images you're going to use in the modules. 

Assets 

Including images in an email is a powerful tactic. Think about:

  • You may want to create some guidelines around what types of imagery can be used within your emails and support these with examples. 
  • Perhaps you should consider using high resolution images to make sure they render correctly without losing on the quality.
  • Think about where you're going to host your images. Ideally, they should be uploaded to a CDN (content delivery network) through your ESP or a third party hosting tool. You can also host your images in Taxi. Here you can find out more about hosting your images with us.
  • Do you have an internal library with assets?
  • Think about asset formats. Jpegs are useful for the smaller file size, while pngs can have a transparent background so they're perfect for logos or social media icons. Both formats are well supported across email clients.

Social icons and logos 

Similar to fonts, the design of the social media icons should ideally be the same as the ones that you have on other platforms. With your logo, if you have multiple designs you'll need to decide which ones are to be included in your brand guidelines. Equally, if you only have one version, you may want to consider designing another logo with a contrasting colour scheme.  

Default images 

When building your Email Design System, you'll find some elements such as your brand logo, category images and social media icons may always stay the same and therefore won't need to be swapped out when creating emails. With these, try hardcoding those images into your Email Design System which means they will always appear by default whenever you create a new mailing in Taxi. You can also take a step further and lock them down so no one will be able to edit or remove them.

Default images in dark mode

With new advances in technology, such as dark mode, email marketing teams are often exposed to new challenges. In order to ensure your emails adapt to recipients using dark mode, you may want to consider using transparent pngs and adding a white outline around elements in your Email Design System. You will want to think about designing your default images for dark mode, such as social icons, logo, link colours etc and how they're going to contrast with the dark background.

Here are examples of some icons in light mode with added white outline:


Here are the same icons in the dark mode, as you can see by adding a white outline, you are still able to see them correctly:


Here are two examples of the icons without the outline: 


For more information on dark mode, and how it affects your email, you can read more here. 

Mobile considerations

Regardless of how many of your subscribers open your emails on mobile devices, your Email Design System should be mobile responsive.

Think how all of the elements chosen are going to look on mobile: 

  • Think about how modules will display, for example, is a two-column module going to stack on mobile for a better readability?
  • Will you want different sets of images designed for mobile?
  • Think about the spacing between modules and elements on mobile.
  • Will your font size need to change on mobile? Think about how headlines, body copies, and CTA buttons will appear. 

Alternative text 

Having an alternative text is important for the accessibility of your emails and supporting images that don't load. By having alt text you are still able to get the message of the image across and enable screen readers to give a seamless experience to recipients using them.

Rules 

You may want to think about setting some rules within your Email Design System to ensure elements are used correctly when emails are built. For example, are there elements that can't be used next to each other? Or is there specific spacing needed below certain elements? 

Here are things to consider:

  • What elements can and/or cannot be placed next to each other.
  • What colour schemes can be used, for example black background can only go with white headline and body copy, or CTA colour must be green if the text is black etc. 
  • Which colours can be used where? 

Accessibility 

According to WHO, by October 2018 there were 1.3 billion people across the globe living with a visual impairment. That means a big chunk of your subscribers may be currently struggling with accessing your emails. 

Here are the things you need to consider implementing:

  • Make the text large enough so it's easy to read regardless of what devices your subscribers use to open your emails. 
  • Avoid walls of text, keep the chunks of text relatively short. If the copy looks too cluttered, try to split it into a few paragraphs.
  • Use headlines that give the context of what the main message is about.
  • Think about the line height.
  • Avoid thin font weights.
  • Consider using simple terms.
  • Use contrasting colours across the whole template and try to avoid saturated colours.
  • Align your body copy to fit the language you send your emails in. For example, languages that are read from left to right are easy to read when left-aligned.  Taxi supports right to left copy, you can read more here.
  • Avoid justified alignment. Some email clients and web browsers don't support this. 
  • With underlined text, consider applying this to your links only. 
  • A lot of users with disabilities use screen readers to access their emails. As mentioned above, alternative text in images will give them a context of what your images represent.

Next: Once your brand guidelines is ready, start the advanced design of your Email Design System

← Back to /Code