Skip to main content
The Brand Designer lets you customize every aspect of your brand’s visual appearance. Configure standard templates with simple settings, or use custom MJML/Handlebars for full control.
Brand Designer

​
Standard Template

Customize Standard Template Brands with:
  • Name
  • Logo
  • Brand colors (Primary, Secondary, Tertiary)
  • Brand Header color
  • Brand Footer Social URLs
Logo Requirements
  • Format: JPEG, PNG, or GIF
  • Width: 140px (height is flexible)
  • Maximum file size: 5MB

​
Custom MJML/Handlebars Template

Use a Custom MJML/Handlebars Template to fully customize the header, footer, and background using HTML, MJML, or Handlebars.
Brand Custom Template

​
Custom CSS

Customize the <style> element in the Head section of your Brands. In addition to standard CSS, you can style Courier blocks using CSS Classnames.

​
Reusing Styles Across Brands

​
Inheriting from the Default Brand

Use the Inherit from Default Brand toggle to inherit the Head, Header, or Footer from the Default brand. Both brands must use the standard brand type.
Inherit from Default Brand

​
Using Brand Snippets

Brand Snippets let you share custom styles between standard and custom brand templates (Handlebars & MJML).
  1. Create a snippet in your default brand with reusable CSS styling. You can use CSS Classnames to style Courier blocks.
CSS Snippet
  1. Reference the snippet in a custom brand’s Head section:
<style>
    {{>css-snippet-1}}
</style>
Snippets in your Default brand can be referenced in custom brands as long as the snippet name is unique.

​
Previewing Brands

To preview how your notification looks with different brands:
  1. Open the template in the designer
  2. Open Preview
  3. Select a brand from Preview Details > Brand
Notification Preview Details

​
Brand Variables Reference

Reference brand attributes in templates using the var helper with the brand prefix.

​
Available Variables

VariableDescription
brand.idBrand identifier
brand.colors.primaryPrimary brand color
brand.colors.secondarySecondary brand color
brand.colors.tertiaryTertiary brand color
brand.email.header.barColorEmail header bar color
brand.email.header.logo.hrefLogo click-through URL
brand.email.header.logo.imageLogo image URL
brand.social.facebookFacebook profile URL
brand.social.instagramInstagram profile URL
brand.social.linkedinLinkedIn profile URL
brand.social.mediumMedium profile URL
brand.social.twitterTwitter/X profile URL

​
Examples

Using brand colors for inline styling: 
<div style="background-color: {{var "brand.colors.primary"}};">
  Welcome to our platform!
</div>
Adding social links in a footer: 
{{#if (var "brand.social.twitter")}}
  <a href="{{var "brand.social.twitter"}}">Follow us on Twitter</a>
{{/if}}
Referencing the brand logo: 
<img src="{{var "brand.email.header.logo.image"}}" alt="Logo" />