Customization
Overview
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
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.
Primary and background colors can work together to enhance the expression of your brand.
![](https://developers.google.cn/static/assistant/conversation-design/images/pesto-white.png?authuser=9)
Choose a primary color first.
![](https://developers.google.cn/static/assistant/conversation-design/images/pesto-yellow.png?authuser=9)
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.
![](https://developers.google.cn/static/assistant/conversation-design/images/primarycolor.png?authuser=9)
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.
![](https://developers.google.cn/static/assistant/conversation-design/images/complementarycolor.png?authuser=9)
The background color can be a complementary color.
Background image
Choose a background image that provides context without distracting from the conversation.
![](https://developers.google.cn/static/assistant/conversation-design/images/example1.png?authuser=9)
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.
![](https://developers.google.cn/static/assistant/conversation-design/images/example2.png?authuser=9)
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.
![](https://developers.google.cn/static/assistant/conversation-design/images/typography-do.png?authuser=9)
Do.
With its bold typeface and bright color, this font stands out against the background and attracts attention to the card title.
![](https://developers.google.cn/static/assistant/conversation-design/images/typography-dont.png?authuser=9)
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.
Use angled corners if your brand incorporates sharp edges and clean lines.
![](https://developers.google.cn/static/assistant/conversation-design/images/shapesharp.png?authuser=9)
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.
![](https://developers.google.cn/static/assistant/conversation-design/images/shaperound.png?authuser=9)
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.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2021-02-25 UTC.