> This page is part of the [Customer.io documentation](https://docs-customerio.netlify.app). For the complete index, see [llms.txt](https://docs-customerio.netlify.app/llms.txt).
> Last updated: June 22, 2026

# Assign global styles to components

[BetaThis feature is new and we're actively working on it.](/accounts/settings/beta-experimental-features/#beta-features)

In Styles in Design Studio, you set global style variables and then assign them to one or more variants of a component. For instance, you set your colors as variables then assign them to buttons, sections, and more so your messages automatically use your branding.

## How to assign global styles to components

[After you set your global styles](/journeys/design-studio/emails/styles/set-styles/#add-your-global-styles), you have two ways to use them: assign styles so key [componentsA pre-built block that helps you build beautiful, engaging messages as quickly as possible in Design Studio.](/journeys/design-studio/reusable/components-overview/#standard-components) use them by default, or [apply styles from the message editor as needed](/journeys/design-studio/emails/visual-editor/properties-menu/).

From your Styles page, you can assign global variables to text-based components, links, buttons, dividers, images, and sections.

You can also [add variants](#manage-variants-for-components) to create multiple versions that meet your brand. You can set variants for all of the components, except headings and paragraphs.

[![The global styles page shows a button with two variants called primary and secondary.](https://docs.customer.io/images/ds-gs-june-2026.png)](#5c6c865b86affecd71febef4ec3b87bb-lightbox)

## Manage variants for components

Variants let you set multiple versions of your components, like a primary and secondary call-to-action (button), so you can more quickly create messages that fit your brand. You can add variants to links, buttons, dividers, images, and sections.

[![ds-gs-variant.png](https://docs.customer.io/images/ds-gs-variant.png)](#9669cfab3c0bf305abe31bdf62b63452-lightbox)

Changes to variants take effect after you save. Remember to [publish your changes](/journeys/design-studio/emails/connected/publish-changes/#publish-changes-to-global-styles) so your messaging workflows reflect your updates.

### Add a variant

From your Styles page, click **Add variant** next to a component to get started. Then update the variant with the global styles and settings you want, like dark mode and mobile responsiveness.

### Delete a variant

To delete a variant you no longer need, hover over a variant, click , and select **Delete**. If the variant is in use, choose a replacement variant before deletion.

[![ds-gs-menu.png](https://docs.customer.io/images/ds-gs-menu.png)](#5223092563f0d6c3b91b1ea0db50a72e-lightbox)

### Change the default variant

Each component has a default variant. This is the variant that is automatically used when you drag in a button, image, or other component into a message.

After you save changes to your default styles, new components pull from the latest default variant, and existing messages that used the old default variant also update to use the new default styles. **If you don’t want existing content to change, create a new variant instead.**

To change which variant messages automatically use, hover over a variant, click , and select **Set as default**.

[![ds-gs-menu.png](https://docs.customer.io/images/ds-gs-menu.png)](#5223092563f0d6c3b91b1ea0db50a72e-lightbox)

To edit the current default variant, hover over the variant with the default label, click , and select **Unlock to edit**.

[![ds-gs-menu-default.png](https://docs.customer.io/images/ds-gs-menu-default.png)](#68537ed89f5ffe379ad20573392e8ddc-lightbox)

## Assign dark mode styles

Dark mode styles apply to Design Studio emails only, not in-app messages at this time.

To modify global dark mode styles:

1.  Hover over a component block, like Heading 1, and click .
2.  Click next to a color field.
3.  Specify the dark mode color or choose a global style variable.
4.  Save your changes.

In Styles, you can click the toggle to switch between light and dark mode previews under *Components*.

When you toggle dark mode in Styles, you’ll see your dark mode styles against a dark background—but we don’t do this in your actual emails. When toggling between [light and dark mode in a Design Studio email](/journeys/design-studio/emails/preview-email-in-design-studio/#access-preview-settings), make sure you set a [background color on your containers](/journeys/design-studio/emails/visual-editor/properties-menu/#components-that-support-backgrounds), like a section block, or on your base component through *Layers > Message > Properties*.

## Define responsive styles

You can define responsiveness for your brand styles in *Styles > Components*:

1.  Hover over a component block, like Heading 1, and click .
2.  Click next to a style.
3.  Specify the values for mobile and desktop, indicated by the different icons.
4.  Save your changes.

In Styles, you can click the toggle to switch between desktop and mobile views under *Components*. Remember to [preview your emails](/journeys/design-studio/emails/preview-email-in-design-studio/#access-preview-settings) in Design Studio to test them for responsiveness.

## Set styles for global components

Add global styles and other settings to global components so your messages automatically use your branding.

### Text styles

In Styles, you can set default styles for text-based components under **Text Styles**. You can specify styles for **heading types (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 to edit it.

You can choose a color from your existing global styles, or specify a new one. Click to specify a color for dark mode. 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. For font size, you can click to specify mobile vs desktop styling. 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 properties, boxes, sections, and columns will default to your paragraph styles, as will actual paragraphs and lists.

### Links

In Styles, hover over the **Links** block, then click to edit it. Choose the weight, decoration, and color for your links. Click to specify a color for dark mode. Click **Update** to save your changes. The global paragraph font applies to links.

If you have multiple looks for links, you can [create a variant](#manage-variants-for-components) for each type to easily reuse styles across your messages.

In a message, you highlight text and click the hyperlink button to add a URL. From this menu, you can also specify a different global style variant.

### Buttons

In Styles, hover over the button block and click 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. For dark mode, click to specify a color.

Under **Layout**, you can set the padding for your button. Choose between your global spacing styles, or add a new **pixel value**. Click to specify mobile vs desktop styling.

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](/journeys/design-studio/emails/visual-editor/properties-menu/#set-a-background). For dark mode, click to specify a color. Click to specify mobile vs desktop styling.

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

If you have multiple types of buttons, like a primary and secondary call-to-action, you can [create a variant](#manage-variants-for-components) for each type to easily reuse styles across your messages.

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

 For in-app messages, you must reset components with multiple buttons to make them use global styles

Single button components automatically use global styles in new messages. However, [components with multiple buttons in an in-app message must be manually reset to connect to global styles](/journeys/channels/in-app/global-styles-in-app/#set-global-styles-on-buttons).

### Dividers

In Styles, hover over the dividers block and click to edit it.

Specify the **Fill** or color of the line, and click to specify a color for dark mode. You can add colors or choose from global variables.

Modify the **Height** to change the thickness of the divider. Click to specify mobile vs desktop styling.

If you have multiple looks for dividers, you can [create a variant](#manage-variants-for-components) for each type to easily reuse styles across your messages.

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

### Images

In Styles, hover over the image block, and click to edit it. Set your brand’s margin, width, border, and more.

If you have multiple types of images, like a logo and hero image, [create a variant](#manage-variants-for-components) for each type so you can easily reuse styles across your messages.

Click **Update** to save your changes. When you drag an image into your message, you’ll see your default styles applied.

### Sections

In Styles, hover over the section block, and click to edit it. Set your default layout for messages made in Design Studio, like how content aligns, background colors, and more.

If you have multiple types of sections, like a header and footer, you can [create a variant](#manage-variants-for-components) for each type to easily reuse styles across your messages.

Click **Update** to save your changes. When you drag a section into your message, you’ll see your styles applied.