Product Brand Guidelines
Product Brand Guidelines
Overview – Logo Specifications
Primary Logo
Horizontal Lockup
Icon Only
N Icon Variations
Small
40 × 63px
Medium
60 × 94.5px
Large
100 × 157.5px
Usage Examples
Light & Dark Backgrounds
Light Background
Dark Background
Logo Formats
When to Use Each Version
Full Logo Lockup
Use when space allows (min. 240px wide)
Icon Only
Use for app icons and compact spaces
Colours – Brand Colour Palette
N Icon Colours
Three-Bar Gradient Palette
Left Bar (Blue)
#95A2FF → #066A77
Middle Bar (Fade)
#7BAD1E → Transparent
Right Bar (Green)
#7BAD1E → #009689
Typography Colours
Text Palette
Primary text
#222222
Muted text
#62748E
Blue – Call to Action
#3847BC
White (Dark BG)
#FFFFFF
Coloured Text
#3F5684
Dark Background
#2E3F5F
Colour Applications
Logo in Context
Full colour on white
Full colour on brand gradient
Typography – Brand Font Guidelines
Primary Typeface
Outfit – Modern Sans-Serif
Outfit
Outfit is a modern, versatile geometric sans-serif typeface designed for optimal readability across all digital platforms. Known for its clean lines, balanced structure, and high legibility, especially on screens, it's an open-source font on Google Fonts. Available in weights from 100 to 900.
Regular (400) – The quick brown fox jumps over the lazy dog
Medium (500) – The quick brown fox jumps over the lazy dog
Semibold (600) – The quick brown fox jumps over the lazy dog
Bold (700) – The quick brown fox jumps over the lazy dog
Typography Scale
Hierarchy & Sizing
Heading 1
36px (2.25rem) • Medium (500) • Line height 1.5
Heading 2
24px (1.5rem) • Medium (500) • Line height 1.5
Heading 3
20px (1.25rem) • Medium (500) • Line height 1.5
Body Text / Paragraph
16px (1rem) • Regular (400) • Line height 1.5
Secondary / Muted Text
16px (1rem) • Regular (400) • Line height 1.5
Usage Guidelines
Typography Best Practices
✓ Consistent Weights
Use Medium (500) for headings and Medium (500) for buttons. Use Regular (400) for body text and descriptions.
✓ Line Height
Maintain a line height of 1.5 (150%) for optimal readability across all text sizes.
✓ Minimum Size
Never use text smaller than 14px for body content. 16px is recommended for optimal accessibility.
✓ Colour Contrast
Ensure text meets WCAG AA standards with a minimum contrast ratio of 4.5:1 against backgrounds.
Implementation
How to Use Outfit
Download from Google Fonts
Outfit is available as a free, open-source font from Google Fonts. Include it in your project using:
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
Then apply it to your body:
font-family: 'Outfit', sans-serif;
Spacing – Clear Space & Usage
Clear Space
Minimum Spacing
Minimum Size
Size Requirements
Full Logo (Horizontal Lockup)
• Minimum width: 240px
• Recommended: 320px or larger
Icon Only
• Minimum: 40 × 63px
• Recommended: 60 × 94.5px or larger
Usage Guidelines
Logo Dos & Don'ts
✓ Do maintain clear space
✓ Do use approved colours
✓ Do scale proportionally
✗ Don't reduce opacity
✗ Don't distort or stretch
✗ Don't change colours
Guide for Creating HTML Email Templates
Overview
Creating accessible HTML email templates requires attention to foundational HTML structure, visual design, and thorough testing. This guide covers essential best practices including semantic markup, bulletproof buttons, colour contrast requirements, typography standards, and maintaining brand consistency whilst ensuring excellent user experience. Following these guidelines ensures your emails are perceivable, operable, understandable, and robust (POUR principles) for all users, including those using assistive technologies like screen readers.
Foundation
HTML Structure Best Practices
Use a simple, logical layout
A single-column design is generally easiest to navigate and ensures a logical reading order on all devices. Avoid overly complex layouts or nesting tables unnecessarily.
Semantic HTML
Use HTML elements that add meaning and structure to your content. This helps screen readers interpret the content correctly. Use heading tags (<h1>, <h2>, <h3>) in proper hierarchical order—only one <h1> per email, followed by <h2> for main sections, and <h3> for subsections. Use <hr> elements to create thematic breaks between sections, and use <p> tags for paragraphs rather than <div> or <br> tags.
Set the language attribute
Always include the lang attribute in your opening <html> tag (e.g., <html lang="en">) so screen readers use the correct pronunciation rules.
Accessibility
Visual Design & Email Accessibility
✓ Brand consistency, simplicity and user experience
Keep your email design consistent with your brand identity whilst maintaining simplicity for better user experience. Focus on clear hierarchy, intuitive navigation, and purposeful design elements that guide users towards your primary call-to-action without overwhelming them with unnecessary visual complexity.
Colour contrast
Maintain a high contrast ratio between text and background colours (WCAG recommends a minimum of 4.5:1). Do not rely on colour alone to convey information; use text or icons as well.
Typography
Use clear, easily readable sans-serif fonts (like Arial, Helvetica, or Verdana) with a minimum size of 14px or 16px for body text. Set line height to at least 1.5 times the font size for readability.
✓ Semantic HTML markup
Ensure your HTML code is semantic and properly structured. Users should be able to access and understand the code when a section is selected, with clear hierarchy and meaningful markup for assistive technologies.
✓ Add relevant image alt tags
Add descriptive alt text to all images for vision-impaired users using screen readers. Alt text should convey the purpose and content of the image, helping users understand the email content without seeing the visual elements.
✓ Bulletproof buttons
Buttons in emails should be built with HTML and CSS ("bulletproof buttons") rather than using image files for several key reasons, including email client compatibility, deliverability, and accessibility. An image-based button can break or disappear entirely, creating a poor user experience and reducing the chances of a user clicking the call-to-action (CTA).
Testing
Comprehensive Testing
Accessibility checkers
Use accessibility testing tools (like those in Litmus or Email on Acid) to evaluate colour contrast and other accessibility features.
Screen reader testing
Test your emails using actual screen readers to ensure a logical and smooth user experience.
Image blocking simulation
Preview your email with images turned off to ensure the message and CTAs still make sense using only live text and alt text.
Responsive testing
Test across various email clients and devices (mobile, desktop, webmail) to confirm consistent rendering and functionality.