Global styles for in-app messages

Updated

In Design Studio, you can define colors, fonts, and more in Global Styles to reuse them across your messages. This way, you spend less time adding the same branding to each message. Global styles apply to emails made in Design Studio and in-app messages.

How Design Studio works

Design Studio is a flexible editor that helps you create beautiful, responsive messages faster than ever before. Use it to set branding across emails made in Design Studio and in-app messages.

If you’re new to Design Studio, this is the core of what you need to know:

  • You continue to create an in-app message in a workflow, like a campaign or broadcast. By default, new messages use the styles set in Design Studio.
  • You create global styles in Design Studio > Styles.
    1. Set global style variables (your colors, fonts, radii, and spacing).
    2. Then assign them to standard components, like paragraphs and headings, so each part of a message uses the right branding.
      The global Styles page. On the left are a list of styles. Text styles is selected. On the right are a list of heading styles.
      The global Styles page. On the left are a list of styles. Text styles is selected. On the right are a list of heading styles.
  • When you update global styles, you decide whether to “Save only” or “Save and publish”.
    • Choose “Save only” if you don’t want workflows (your campaigns, broadcasts, etc) to use the latest styles.
    • Choose “Save and publish” if you’re ready to update messages in your workflows (and start sending messages with the latest styles).

Go to Design Studio’s page on Global Styles for more information:

  1. How to set global style variables
  2. How to set default branding for components
  3. How to publish styles to emails & in-app messages

Get started

In-app messages use global styles set in Design Studio. The variables you assign to components are the defaults for in-app messages.

If you’re creating an in-app message from scratch, it will automatically pull in your global styles. For existing messages, you can choose to sync global styles from Design Studio.

Global styles only apply to in-app messages made with our drag-and-drop editor (aka the visual editor); we are sunsetting the legacy editor.

Exceptions for in-app messages

In-app messages work a little different from emails, so here are a few notes on which settings apply to in-app:

  • In-app messages pull in the default, light mode styles. Dark mode styles do not yet apply to in-app messages.
  • In-app messages and emails have the same breakpoint: 600px wide. Both pull in desktop and mobile styles based on the recipient’s screen size. With modal in-app messages, the breakpoint continues to be 600px wide; however, it’s based on the message width, not the screen width. For instance, if a modal message is 300px wide, but the screen width is 800px, the modal message will display the mobile version of the styles.
  • The single button component automatically use global styles. However, the components built from multiple buttons do not automatically use global styles; you have to reset the properties to pull in your branding.

Sync global styles to in-app messages

Any message made before we rolled out global styles for in-app messages in February 2026 do not automatically use Design Studio; we won’t change your messages without your permission.

You can choose to pull in global styles by syncing individual in-app messages:

A video showing how the font was Arial and changed to Primary after clicking Sync with Global Styles.
  1. Open your in-app message.
  2. Click Sync with Global Styles.
  3. Click Sync. Syncing does not save the message; you’ll have time to review first.
  4. Review your message:
    1. Do the styles and formatting look correct? If not, you can edit the message further or click Discard Changes to go back.
    2. If something doesn’t sync as you expect, click and select your message background (click outside the message) to open Message properties. Click next to a property that you want using your global style. You’ll likely only run into this issue if you started an in-app message from one of our out-of-the-box templates.
  5. Click Save Changes. Any future sends of this message will include your global styles.

Set global styles on multi-button components

Single button components automatically use global styles. However, components with multiple buttons need an extra step to start using global styles.

To change the styling of multi-button components to match your global styles, you need to manually reset them in the message. After you reset and save, the styles will use global styles (and any changes to them) moving forward.

  1. Open your in-app message.
  2. Drag in a multi-button component or click one to open the properties panel.
    The insert panel of an in-app message. The Buttons expander is open and shows three multi-button components.
    The insert panel of an in-app message. The Buttons expander is open and shows three multi-button components.
  3. Find a property that was modified in your global styles and click . The button preview will now show your global style. Do this for each property you modified in global styles, like Fill, Hover, etc.
  4. Click Save Changes. Any future sends of this message will include your global styles.
Copied to clipboard!
  Contents