Customer.io

Set global styles

Beta This feature is new and we're actively working on it.
Updated August 19, 2026

Global styles in Design Studio let you define reusable design elements—like colors and fonts—that apply across emails made in Design Studio and in-app messages.

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 profiles are making edits.

Global styles now apply to in-app messages!

Styles apply differently to in-app messages than they do to emails, so make sure you check out our article on using global styles with in-app messages.

Access your global styles

Go to Design Studio in your sidebar, and click Styles.

Under the heading Design Studio, the Styles tab is highlighted.

You can also preview or modify global styles while editing an email 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 so you can assign them to global components or quickly add them when editing a message.

Add colors

In 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 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. It must have the extension .css. This can be a font hosted by a third-party service (like Google Fonts) or a custom stylesheet you host yourself.

Custom font display depends on the recipient's email client

Custom fonts (webfonts) rely on the email client to download and render them. Many email clients don’t support webfonts at all, typically for security reasons. For example, Gmail only supports its own fonts (Roboto and Google Sans). See Can I email for more about webfont support across email clients.

To add a custom font:

  1. Host your font stylesheet. You should only include font-related styles in your stylesheet; extra CSS can affect rendering or slow down your message.
    • Use a trusted service like Google Fonts
    • Or upload your own stylesheet to a publicly accessible URL
  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.

    Warning

    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. It must have the extension .css.
  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. You can check CSS Fonts for compatibility.

Add custom font stacks

You can fully customize your font stack in the advanced settings of a global font. This lets you customize fallbacks, in case our automatic fallbacks don’t suit your needs.

Custom font stacks override font dropdown selections

The fonts you specify in the custom font stack field take precedence over the Font name or Fallback font fields. If you want these dropdown selections included, add them to your custom font stack.

To get started, click Show advanced to find the Font stack field. When writing a font stack, keep the following in mind:

  • Order your fonts by preference: primary-font, secondary-fallback, tertiary-fallback, etc.
  • Add single ticks around font names with spaces like 'Helvetica Neue'.
  • Include web safe fonts as fallbacks—fonts that are widely supported.

If your primary font is a custom font, make sure you include a font name that matches the linked stylesheet.

Add radii

In 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 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.

Generate styles with AI

Generate styles using AI to quickly add your brand info. Add up to five sources, like a website or design doc, to view suggested styles for your variables and components.

Save your changes

You must save changes for the AI-generated styles to take effect; we won’t change your styling without your consent.

Generating styles adds onto or replaces existing styling for global variables and component. Make sure you review the results before saving to ensure the results are what you want. The suggested styles are indicated with a sparkle icon .

If you have a sending domain, we surface it as an optional source for you when you open Styles. Your domain doesn’t have to be verified, and if you have multiple sending domains, we use the oldest one. You have to click Add before clicking Generate styles to add it to your source list. You can find your domains in Workspace Settings > Email > Sending domains.

Generate and review your styles

To generate styles with AI in Design Studio, go to the Styles tab on your dashboard:

  1. Add up to five sources. Paste a URL or upload a file.
  2. Click Generate styles to begin the process. It may take up to a few minutes to finish.
  3. Review the summary of the style changes and check the suggested styles, indicated by . Are the variables accurate? Were components updated correctly? For instance, are buttons using a desired variable? Edit your variables and components as you see fit.
  4. Click Save updates.

If you’re not happy with the results, click Discard.

Add your sources

Include multiple brand assets and links to generate global styles for Design Studio messages.

  • Website URLs: add a link to any page that reflects your brand.
  • Uploaded files: drop in screenshots or images, PDF files, or text-based files like CSS, HTML, JSON, Markdown, CSV, or email exports (.eml).

You can add up to five sources per run. If you want to update styles from more than five files, just run the generator again with your additional sources.

Your URL must load a webpage

If a URL doesn’t load a webpage, we won’t be able to generate styles from it. You’ll have to manually enter your styles or remove that source and try another.

Update & publish your global styles

You can update global styles from the Styles page or while editing an email.

From the email editor, you can save global styles across your Design Studio files, but will still need to publish them separately:

  1. Click and then select Global Styles.
  2. Make your change and click Save Updates. This saves across your messages in Design Studio, but does not push changes to connected automations, broadcasts, or transactional messages. You still have to manually publish your changes.

From Styles, you can save only or save AND publish changes across your messages and automations.

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 a deleted global variable was in use in your messages before you removed it, your existing messages continue to use the deleted style. The only difference you see is in the Properties menu. Where you used to see the name of the global style variable, you now see the value of the style. For instance, instead of the color variable “Primary-bg”, you’d see the hex value #e4ffce.