Brand Designer

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:

Head

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:

Field	Custom MJML/Handlebars	Handlebars	Description
Background Color	Yes	Yes	Overall email background color (behind the entire email)
Width	Yes	Yes	Email container width (default `600px`)
Content Background Color	No	Yes	Background color for the content area (behind your template blocks)
Footer Background Color	No	Yes	Background color for the footer section only
Full Width Footer	No	Yes	Whether 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).

Create a snippet in your default brand with reusable CSS styling. You can use CSS Classnames to style Courier blocks.

CSS Snippet

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:

Open the template in the designer
Open Preview
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

Variable	Description
`brand.id`	Brand identifier
`brand.colors.primary`	Primary brand color
`brand.colors.secondary`	Secondary brand color
`brand.colors.tertiary`	Tertiary brand color
`brand.email.header.barColor`	Email header bar color
`brand.email.header.logo.href`	Logo click-through URL
`brand.email.header.logo.image`	Logo image URL
`brand.social.facebook`	Facebook profile URL
`brand.social.instagram`	Instagram profile URL
`brand.social.linkedin`	LinkedIn profile URL
`brand.social.medium`	Medium profile URL
`brand.social.twitter`	Twitter/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" />

Platform

Developer Tools

Help

Standard Template

Custom MJML/Handlebars Template

Head

Header

Footer

Background Colors and Layout

Reusing Styles Across Brands

Inheriting from the Default Brand

Using Brand Snippets

Previewing Brands

Brand Variables Reference

Available Variables

Examples

​Standard Template

​Custom MJML/Handlebars Template

​Head

​Header

​Footer

​Background Colors and Layout

​Reusing Styles Across Brands

​Inheriting from the Default Brand

​Using Brand Snippets

​Previewing Brands

​Brand Variables Reference

​Available Variables

​Examples

Standard Template

Custom MJML/Handlebars Template

Head

Header

Footer

Background Colors and Layout

Reusing Styles Across Brands

Inheriting from the Default Brand

Using Brand Snippets

Previewing Brands

Brand Variables Reference

Available Variables

Examples