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
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
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.