Color

Color is a great way to invoke emotion, meaning, and personality in simple ways. The color palette is rooted in Alexa blue, harmonizing from that core color. The color choices represent meaning and emotion for customers, with rules around why and when to use them.

Styles packages

In this Design Guide, we include recommendations that reference properties which are not part of core APL, for example certain color resources. These are available in the Styles package, which is available for you to use. Please refer to the information on importing document properties for implementation details.

Use of color

There are two types of experiences you can designing towards; dynamic experiences and determined experiences.

Dynamic experiences

Dynamic experiences change background color based on content or context. For example, weather backgrounds change based on the contextual weather conditions. This application helps create a more branded and intentional experience for our customers to engage with.

Determined experiences

Determined experiences fall into two types of content categories: content with pure typography or rich media content. For the pure typographic experiences, the typography color choices are pulling from mental models to represent emotion and meaning for our customers.

For rich media or photographic content experiences such as empty states, photos, or data visualization, the deep blue color is used as a neutral background to let the content take primary focus.

Palette

The built-in Alexa color palette below uses a primary palette of black, white, and light gray for text, with blue as the primary accent color and a deeper blue as the primary background color. Other color choices are shown. Some, like background, are only used once, while others, like text, are seen on almost every screen.

Text palette

colorText #FAFAFA

#DADADA (for TV, landscape, extra large)

The default color used for text elements.
colorTextReversed #FAFAFA Used when standard text elements are displayed over elements with dramatically different color value than the background.
colorSecondaryText #FAFAFA

#DADADA (for TV, landscape, extra large)

Used to de-emphasize metadata text.
colorSecondaryReversed #1E2222 Used for metadata text which appears over elements with dramatically different color values than the background.
colorDisabledText #EBEDED4D Used for any disabled text, whether primary or secondary.
colorDisabledTextReversed #1E22224D Used for any disabled text, when displayed over elements with dramatically different color value than the background.

Background palette

colorBackground #232F3E The color displayed behind content if when no other background styling is applied, i.e. imagery as a background.
colorBackgroundOverlay #00000099 Used to cover images with a semi-opaque filter to make them easier to read. It can be a static value or dynamically generated from the imagery.
colorRed800 #65151E Red background color. But can be used as a dark red hue.
colorGreen800 #34581B Green background color. But can be used as a dark green hue.
colorTeal800 #0A655E Teal background color. But can be used as a dark teal hue.
colorBlue800 #2E536F Blue background color. But can be used as a dark blue hue.
colorPurple800 #3E3F68 Purple background color. But can be used as a dark purple hue.
colorGray800 #6B7878 Gray background color. But can be used as a dark gray hue.

Controls palette

colorComponent #FAFAFA

#DADADA (for TV, landscape, extra large)

The primary color used within components in their default state. Examples include default buttons, iconography, button border, or unselected checkbox.

Accessibility

Color contrast

The baseline color system has been designed to be AA accessible with contrast ratios of 4.5:1 for all text and colors, although most of the color and contrast meets AAA ratios.

Using color to convey meaning

UI elements should use more than just color to convey meaning. For example, a red label on a form field might not be perceptible as a "required" signifier to a colorblind customer. However, the color could still be used if paired with a redundant visual indicator such as bold type. Review the accessibility guidelines for more information.

Additional resources


Back to top