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
A custom template has four configurable fields: The Head field injects content into the <head> element of the compiled email. Use it for <style> blocks, MSO conditional CSS for Outlook, and custom font imports. This is also where you apply CSS Classnames to style Courier blocks. 
<style>
  /* Custom styles applied to all emails using this brand */
  .courier-text-block { font-family: Georgia, serif; }
  .courier-action-block a { background-color: #7d2f9a !important; }

  /* Outlook-specific overrides */
  <!--[if mso]>
  <style>
    td { font-family: Arial, sans-serif !important; }
  </style>
  <![endif]-->
</style>
Courier’s MJML compiler generates inline styles that take precedence over class-based rules. Add !important to your custom CSS class selectors to ensure they apply. See CSS Classnames for details.
The Header field renders MJML or HTML content above your template’s content blocks. Use it for branded banners, navigation bars, or promotional strips that appear at the top of every email. 
<mj-section background-color="#7d2f9a" padding="12px 24px">
  <mj-column>
    <mj-text color="#ffffff" font-size="14px" align="center">
      Free shipping on orders over $50
    </mj-text>
  </mj-column>
</mj-section>
The Footer field renders MJML or HTML content below your template’s content blocks. Use it for legal disclaimers, unsubscribe links, social media icons, or company address. 
<mj-section padding="24px">
  <mj-column>
    <mj-text font-size="12px" color="#999999" align="center">
      © 2026 Your Company · 123 Main St · <a href="{{{unsubscribe_url}}}">Unsubscribe</a>
    </mj-text>
  </mj-column>
</mj-section>
For Outlook-compatible footers, wrap table-based HTML in <mj-raw> with MSO conditional comments. See Email Safe Formatting for the pattern.

​
Background Colors and Layout

Both the Custom MJML/Handlebars and Handlebars template types expose a Background Color field and a Width field. The Handlebars type also exposes additional layout controls:
FieldCustom MJML/HandlebarsHandlebarsDescription
Background ColorYesYesOverall email background color (behind the entire email)
WidthYesYesEmail container width (default 600px)
Content Background ColorNoYesBackground color for the content area (behind your template blocks)
Footer Background ColorNoYesBackground color for the footer section only
Full Width FooterNoYesWhether the footer background extends to the full email width
In Custom MJML/Handlebars mode, control content and footer backgrounds directly in your MJML code using background-color attributes on <mj-section> and <mj-wrapper> elements. These fields can also be set via the Brands API on settings.email.templateOverride.

​
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" />