These guidelines apply to the center stack display. To create a cohesive experience for customers, Alexa should be seamlessly integrated into your system (see Guiding Principles). When it comes to visual language, the highest priority is to help customers know they are speaking to Alexa and to follow the Alexa brand guidelines. The guidelines in this section highlight our requirements and some suggestions to make your experience feel more aligned with the Amazon visual language.
(Required) Attribute Alexa when she is speaking or displaying content. Follow the Amazon Brand Guidelines.
(Required) Use the "Amazon Alexa" logo only on the introduction screen. Everywhere else use the "Alexa" logo.
(Required) Display the Alexa logo only in black, white or Alexa blue (#00CAFF).
Alexa blue #00CAFF
(Required) Use only Alexa brand graphics to indicate that Alexa is listening.
This includes microphones, face/speaking icon, or any other graphic. Only Alexa logo or PTT button should be present.
(Recommended) Use a font size that is glanceable.
Because screen size, density, and location differ across systems, we don't have a prescribed minimum font size. We do ask that you make the font size as reasonably large as possible so that the screen is glanceable for driving.
(Recommended) To follow Alexa's visual language, use Amazon Ember.
If your experience does not have a unique system font, you may use Amazon Ember for Alexa experiences. This is included in the Design Toolkit.
(Required) You must use 4.5:1 or higher for color contrast on text or images with text.
To make sure all customers can easily see and use Alexa, you must use an AA accessible contrast ratio of 4.5:1.
(Required) Use more than just color to convey meaning. For example, change font style or include an icon.
For example, a red label on a text box might not be perceptible as a required signifier to colorblind customers. However, the color could still be used if paired with a redundant visual indicator such as bold type.
(Recommended) Only use red to indicate error messages. Do not use red outside of error cases.
Red can often be associated errors or warnings. Do not use red within an Alexa interface unless its to indicate a warning or error.
(Recommended) In UI elements, use #151920 instead of pure #000000 black.
Using a slight off-black improves the visual aesthetics of a system. This color also better aligns with the Alexa visual language.
Voice chrome design
The Alexa voice chrome represents the different attention states for Alexa. The voice chrome should respond to the amount of sound in the vehicle. As a customer speaks, it changes in size as it responds to their voice. Any Alexa implementation requires voice chrome be implemented as detailed in the UX Design Attention page.
- For the voice chrome vectors, download them in the Design Toolkit.
Voice chrome animations
The Sound Library can be downloaded from the Resources tab of the AVS Developer Portal.