Visual language

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.

Branding

(Required) Attribute Alexa when she is speaking or displaying content. Follow the Amazon Brand Guidelines.

Note: “Alexa” is a proper noun and must be capitalized when written as text. Follow Amazon's Marketing Guidelines. See also: Media Attribution.

Alexa logo

(Required) Display the Alexa logo only in Alexa Blue (#00CAFF), Squid Ink (#232F3E), or White (#FFFFFF).

My alternative image text

Alexa Blue #00CAFF

My alternative image text

Squid Ink #232F3E

My alternative image text

White #FFFFFF

(Required) Use only Alexa brand graphics to indicate that Alexa is listening.

Except for physical PTT buttons (e.g. on the steering wheel), don't use additional icons to invoke or represent Alexa. Use only Alexa icons and voice chrome to represent Alexa.

Do not use these icons with Alexa.

Typography

(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.

Colors

(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. For details, see the section on voice chrome in Invoking Alexa