3

Set global styles

Global styles in Design Studio let you define reusable design elements—like colors and fonts—that apply across all your messages. Set them once, and every component using that style will automatically update when you make changes.

You’ll add global styles — your colors, fonts, spacing, and radii — then assign them to standard elements — headings, paragraphs, links, and buttons.

This way, your components will default to styles that best support your brand, making it easy to keep your messages consistent no matter the content, or how many people are making edits.

Access your global styles

You can access your global styles through the left-hand menu. Click Design Studio, then choose Styles from the dropdown.

You can also preview or modify global styles while editing a message without leaving the message itself:

• Click in the top right then select Global Styles or
• Go to the visual editor’s Properties menu. Select an element on the canvas, then find a property for colors, fonts, radii, or spacing. Select the field and you’ll see View Global Styles.

Add your global styles

Set default, global style variables for messages made in Design Studio so you can assign them to content.

Add colors

In Global Styles, click Add color then specify a Variable name. This name is the label you’ll see when assigning the color to Text Styles, Links, and Buttons. This is also how you’ll locate the global style when editing colors in the Properties menu.

Next, add the hex value and specify the opacity. You can also click the color preview to choose from a color wheel, specify the RGBA value, use the dropper to capture a color on your screen, or specify a recently used color.

Add fonts

In Global Styles, click Add font then specify a Variable name. This name is the label you’ll see when assigning the font to Text Styles, Links, and Buttons. This is also how you’ll locate the global style when editing fonts in the Properties menu.

Choose the Type of font. Click Standard to choose from a list of available fonts. If you choose Custom, you can add a link to an external stylesheet, provide the name for that font, and specify a fallback.

Add custom fonts

You can use a custom font in Design Studio by linking to an external stylesheet. This can be a font hosted by a third-party service (like Google Fonts) or a custom stylesheet you host yourself.

To add a custom font:

1. Host your font stylesheet.
   • Use a trusted service like Google Fonts
   • Or upload your own stylesheet to a publicly accessible URL

      Only include font-related styles in your stylesheet

     Extra CSS can affect rendering or slow down your message.

2. If you’re using a font hosted by a third party, make sure you have the right to use the font. Otherwise, the font may not load.
3. From Styles > Fonts, click Add font.
4. Enter a Variable name. This is the label you’ll see when assigning the font to Text Styles, Links, and Buttons. This is also how you’ll locate the global style when editing fonts in the Properties menu.
5. Click Custom.
6. Add the Font name.

    The font name in Design Studio must match the font family name in your external stylesheet. Otherwise, the font won’t load.

7. Add the URL.
8. Set a Fallback font for email clients that don’t support custom fonts. Choose one that is as similar as possible to your custom font so your message looks consistent across devices.

Add radii

In Global Styles, click Add radius then specify a Variable name. This name is the label you’ll see when assigning the radius to buttons. This is also how you’ll locate the global style when editing radii in the Properties menu.

Add the pixel value for the radius.

Add spacing

In Global Styles, click Add spacing then specify a Variable name. This name is the label you’ll see when assigning the spacing to buttons. This is also how you’ll locate the global style when editing spacing in the Properties menu.

Add the pixel value for the spacing.

Assign styles to content

Once your global styles are set, you can apply them as defaults for key components—like headings, paragraphs, links, and buttons—or use them manually in the Properties menu.

Text styles

In Global Styles, you can set default styles for text-based components under Text Styles. You’ll see options for each heading type (1-6) and paragraphs. Note that paragraph global styles also apply to lists. The font of the paragraph global style also applies to links.

Hover over a text style and click the pencil icon to edit it. Choose a color from your existing global styles, or specify a new one. You can add the hex value and specify the opacity or click the color preview to access more options. Choose your font, size, weight, and line height too. Click Update to save your changes.

In a message, any component that has text styles will default to these global styles. Headings will default to the global style set for that level header. Message settings, boxes, sections, and columns will default to your paragraph styles, as will actual paragraphs and lists.

Links

In Global Styles, hover over the Links block, then click the pencil icon to edit them. Choose the weight, decoration, and color for your links. Click Update to save your changes. The global paragraph font applies to links.

In a message, highlight a piece of text and click the hyperlink button to add your URL. Click Save and we’ll apply your global link styles.

Button

In Global Styles, hover over the button block and click the pencil icon to edit it.

When you style the Text for your button, you can choose between your global fonts and colors, or set new ones. Set the font size and weight for your button here as well.

Under Layout, you can set the padding for your button. Choose between your global spacing styles, or add a new pixel value.

Under Styles, choose your fill color from your existing color styles, or set a new one, then specify the opacity. You can also click Add a Gradient/Image if you don’t want your button to be a solid color. Learn more about setting a background gradient or image.

Choose a Radius from your existing styles, or type in a new pixel value.

To add a border, click Add then set a border style, pixel value for width, and border color based on your existing color styles, or choose a new one. Click anywhere to exit the border pop-up.

Click Update to save your changes. Now when you drag a button into your message, you’ll see your styles applied.

Edit your global styles

You can update global styles from the Global Styles page, or while editing a message. From the editor, click in the top right, then select Global Styles.

When you make a change, it applies across all messages using that style—emails and templates.

For example, if you update your paragraph font in Text Styles, every component using that paragraph style will automatically update in Design Studio. Then if the message is connected to a campaign, you’d have to go into the message in Design Studio and click Publish. If you customized a specific paragraph to use a different font, that one won’t change.

Delete a global style

If you delete a global font, color, radius, or spacing, it is no longer discoverable as a global style and no new messages will use the old styles.

If any of these global variables were in use in your messages before deleting the style, we’ll make no changes to your messages; they’ll continue to use the style that you deleted. You’ll see the value of the former global style, rather than the variable’s name.