Email design
To ensure our emails are visually appealing and recognisable, accessible, and perform well across different devices and email clients, all official Scania emails (newsletters, information, system notifications etc) should adhere to our key best practices.
Foundations
- Max width of 600-800 pixels, with 600px as the default option
- Simple grid-based layouts for consistent rendering
- Single-column design for mobile responsiveness and readability
- Web-safe fonts like Arial, Verdana, Georgia, and Times New Roman (ensure required license)
- Font size of 14-16px for optimal readability on desktop and mobile devices
- Line height: 1.3-1.5 times the font size to improve readability
- Optimise images to reduce file size and improve load times
- Limit the use of images. Assume images will be initially blocked by email clients, or that certain images will comletely fail to load.
- Avoid reliance on background images or those with embedded text
The colours referred to on this page are colours for digital applications according to Scania's digital design system Tegel. The following colours and HEX codes are used:
Blue-400: #2B70D3
Blue-800: #041E42
Grey-50: #F9FAFB
Grey-100: #EDEFF3
Grey-700: #56657A
Grey-958: #0D0F13
- Include descriptive alt text for images
- Ensure sufficient contrast between text and background colours
- Avoid text in images so that content is readable by screen readers
- Use headings to creat a clear content structure that is easy to navigate
- Underlined links provide a clear indication of interactive elements
- Use a contrasting colour and clear actionable text
- CTA buttons should be large enough for easy tapping (min 44px)
- Include sufficient whitespace around CTAs to prevent accidental clicks
- Use short paragraphs and bullet points to make content easy to read
- Place the most important information at the top
Basic elements
This example showcases basic elements for establishing a consistent email look across Scania.
It offers a modular approach that allows adaptation to various platforms and unique scenarios while preserving brand integrity and maintaining consistency.
This layout is available for use in Scania's UI Resources in Figma. Note that a Scania Figma account is required to access this file.
Header
A single header style can have many adaptations while still maintaining consistency.
1. Fixed internal: The header can be used as an image for fixed-width layouts.
2. Responsive internal: Left-aligned wordmark and right-aligned symbol ensure the header resizes to any width.
3. Application: Emails sent by a Scania application can include a name in the header, following Tegel's header guidelines.
4. External: We use a blue header as standard in external emails and when a more expressive feel is needed.
5. Mobile internal: In adaptive layouts, the header follows Tegel's guidelines for mobile headers, and only the symbol is present.
6. Mobile external: In adaptive layouts, the header follows Tegel's guidelines for mobile headers, and only the symbol is present.
7. Basic: In situations where customisation options are extremely limited, the Scania horizontal lock-up logotype can be used instead. The size of the wordmark remains the same as the default header.
Footer
We use two different footers depending on if the email is sent internally or externally.
1. Internal: Footer for internal emails with minimal branding and information.
2. Mobile internal: Footer for internal emails in mobile.
3. External: Footer for external emails with more expressive branding and links to social media.
4. Mobile external: Footer for external emails in mobile.
Other elements
1. Background: Grey-100 frames the content of the email and maintains a clean, polished look.
2. Imagery: Images can be full-bleed or with padding
3. Primary headline (H1): Arial Bold, 36px/110%, Blue-800.
4. Body text: Arial, 16 px/130%. Grey-958.
5. Inline link: Underlined, Blue-400.
6. Primary CTA (button): Tegel's primary medium button, using Arial.
7. Secondary headline (H2): Arial Bold, 24px/130%, Blue-800.
8. Callout: Grey-50 container to highlight important content.
9. Padding: 24px using the base-4 system of the Tegel design system (16px for mobile devices).
10. Tertiary headline (H3): Arial Bold, 16px/130%, Grey-958.
11. Secondary CTA (link): Underlined, Arial Bold, 16px/130%, Blue-400.
12. Footer: Contact information, disclaimer and links. Small text: Arial, 12px/130%, Grey-700.
Examples
- Branding in the header is sharp and clear
- Channel name has been moved from the header to allow for greater flexibility with long channel names
- CTA button is placed close to body text to ensure it isn't overlooked
- Underlined links are kept short to adhere to usability and best practices
- Header is sharp and aligned with the content
- Content styling and alignment has been optimised for improved readability
- An alternative yet subtle colour in the header helps distinguish the email as a newsletter (internal)
- The title of the newsletter is written as text (and not in an image), improving accessibility
- Important information is highlighted, and a CTA button added to improve findability
- Contact information is present, but not longer the most visually prominent part of the email
- Footer contains only essential information and is not overwhelming the layout
- The example demonstrates how the email elements can be adapted to be more expressive and dynamic
- With a more branded footer this option could be suitable for external-facing emails
- A concise, action-oriented heading is instantly understandable, and is easy to read when set in Arial
- The layout uses few containers and padding, keeping the email length short and moving the CTA higher
- The most important information is highlighted (status message) and linked
- Contact information is condensed and clearly organised above the footer
- The footer does not dominate the layout, allowing the most important information to take precedence at the top of the email
- The header is in line with Tegel styling guidelines
- A concise, action-oriented heading is instantly understandable, and is easy to read when set in Arial
- Important information is prominently highlighted, with an actionable link and button guiding users towards the intended action
- Contact information is condensed and clearly organised above the footer.
- The footer does not dominate the layout, allowing the most important information to take precedence at the top of the email
- For emails with minimal customisation options (e.g. for emails sent from third party applications) we use a basic header image, i.e. the Scania horizontal lock-up logotype (left-aligned)
- Text styling is simple with focus on a clear headline and informative text
Email signature
For personal emails (sent by individual employees working at Scania) the global Scania email signature should be used. Read more on the page for office, email and stationery
More information
Read more about the foundations and components for digital products in our digital design system Tegel.
Visit the pages Imagery and Internal communication for more information about Scania image guidelines and some practical advice when working with internal communication.