Conversational Actions will be deprecated on June 13, 2023. For more information, see Conversational Actions sunset.

Customization

Customizing your Action’s theme allows you to better reflect your brand and provide visual context to your user’s experience.

Overview


Color

Color is a strong brand identifier. You can customize primary and background colors to represent your brand. Primary color is used to highlight important components on the visual surface, like the card title and any action buttons. This color should be the one most often associated with your brand.

Choose a primary color first.

After you choose a primary color, pick a background color that goes with both the primary color and the secondary text color.

The background color can be a lighter version of the primary color.

The background color can be a complementary color.


Background image

One of the most powerful ways to lend visual richness and dimension to a card is to use an image as the background instead of a solid color. Consider the following when choosing an image as the background:
Note that to ensure foreground legibility, we apply a dark protection mask on the background image. Text will automatically turn to white.

This basic card uses a background image. A background image will replace any background color, so choose the option that best represents your brand.

The image needs to be neutral enough to maintain your desired look and feel through multiple dialog turns. Here, the same background image applies to both the basic card above and this carousel card.


Typography

Typography can express your brand while guiding the user’s attention to the most important information. For the biggest impact, you’re able to customize the largest text, like the title, on each card in your Action. In this location, an expressive typeface such as a serif font, a script-style font, or a heavier-weight font can attract attention and provide contrast to the secondary text. For general typography guidance, please refer to the Material Design Foundation.

Choose a font that works well with secondary text.

Do.

With its bold typeface and bright color, this font stands out against the background and attracts attention to the card title.

Don't.

Without the heavier weight, this font is hard to read and fails to draw the eye to the title before the body text.


Shape

Image shape

In line with the components of Material Foundation, the shape of your images offers another dimension for expressiveness. Right now, you can choose between angled and curved shapes for images in visual components. Pick an image shape that’s suitable to your overall brand style.

Your logo is a good place to look for guidance on which shape to choose. In this example, the logo is sharp and angular, so angled corners are in line with the brand.

Other components can also guide you in your decision. Here, the action button’s rounded edges and the logo both match the curved corners of the image.

For more guidance on choosing image shapes, visit the Material Design site.