Visual components Customization

Customization

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

Overview Expand and collapse content An arrow that points down when collapsed and points up when expanded.

When theme customization, or theming, is used properly, it can help differentiate your Action. The choices you make when customizing the visual components of your Action (like basic cards, carousels, lists, etc.) will help you effectively convey your brand.

The Assistant’s design is constantly evolving to help users wherever they are, on whichever device they choose. So we’ve designed the guidelines in this section to evolve along with it. Our goal is to enable you to express your company’s identity in a way that 1) feels natural in the overall system interaction, 2) focuses on the biggest opportunities for brand expression, and 3) scales across all primary devices (for example, phones and smart displays) without additional work.

The default Assistant surface theme is applied to your Action visual component if you don’t specify theming details. You can go to the Actions Console to customize your Action theme.

Color Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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.

Note: secondary text color is not open for customization at this point.

Primary and background colors can
work together to enhance the expression
of your brand.

This example is a basic card that shows an image, description, and nutritional information for Creamy Chicken Pesto Pasta. The background is plain white since no primary color has been selected. The title is orange, and the rest of the text is either gray or black.

Choose a primary color first.

This example is a basic card that shows an image, description, and nutritional information for Creamy Chicken Pesto Pasta. The background is a pale yellow, which coordinates well with the orange primary color in the title. The rest of the text is either gray or black.

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

Choosing your primary and background colors
from the same color family can help make your
Action a cohesive experience.

This rich list card, titled Explore Restaurants by Destination, shows three locations: Naples, Italy; Córdoba, Argentina; and Big Sur, California. Each list item has a related image to the right of its title and description. The background color of this card is light purple, while the title (or primary) color is dark purple.

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

Choosing a complementary color for your
background can make your primary color
stand out even more.

This basic card shows an image, a description, and nutritional information for creamy chicken pesto pasta. The title is orange, and the background is a complementary seafoam green.

The background color can be a complementary color.

To ensure the colors you choose are accessible, we do a color contrast check in the developer console to ensure sufficient color contrast ratios between the primary and background colors and between the secondary and background colors.

For more guidance on choosing and coordinating primary and background colors, visit the Material Design site.

Background image Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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:

Choose a background image that provides context
without distracting from the conversation.

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 shows an image, title, and description of cookies called Sander’s Dutch Stroopwafels. The text and foreground image are shown over a background image of a baker kneading dough on a counter covered in flour.

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

If your Action has multiple dialog turns, choose a
background image that works with different dialog
turns.

This carousel card shows several recipes, like Dutch anise bread, Sander’s Dutch stroopwafels, and blackberry meringues. The carousel is displayed over the same background image from the basic card above: a baker kneading dough on a counter covered in flour.

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 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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.

Note: secondary text is applied based on different Assistant surface defaults and is not open for customization at this point.

Choose a font that works well with secondary text.

This basic card shows an image, description, and nutritional information for Creamy Chicken Pesto Pasta. The primary text, or title, is bolded orange text. The heavier font stands out against the pale yellow background.

Do.

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

This basic card shows an image, description, and nutritional information for Creamy Chicken Pesto Pasta. The primary text, or title, is light, thin orange text. The lighter font is hard to read against the pale yellow background.

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 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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.

Use angled corners if your brand incorporates
sharp edges and clean lines.

This carousel card by a fake clothing and lifestyle retailer shows several products, including teacups, a lamp, a sweater, and a turntable. The brand logo is a geometric diamond shape, and the corners of each item’s image are sharp and angular.

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.

Use curved corners if they fit your brand’s overall
style.

This example is a basic card by a fake travel Action. It shows an image, title, and description for Bukit Panjang, Singapore. The logo is an oval, and the “Take a tour” button is also an oval. The image’s corners are rounded instead of sharp.

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.