Color

Color is a great way to invoke emotion, meaning, and personality in simple ways. 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.

Styles Package

The design recommendations in the guide reference the Styles Package, which is an additional set of properties that you will need to import to use in your skill. Check out the Alexa Styles Package for more information.

Use of color

Harmonious application of color is determined by the content presented and the context in which it is presented in. Color can convey a branded and intentional experience for your customers to engage with in your skill.

Color can represent emotion and have different meanings for different customers. 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. The color could still be used if paired with a redundant visual indicator such as bold type. Always make sure your text has a high enough contrast ratio, ideally 4.5:1 to the background, to make sure it can be seen by customers at a distance or with low-vision. For more information, see Use of Color on the W3C school site.

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.

Text palette

colorText colorGray100 #FAFAFA

#DADADA (for TV, landscape, extra large)

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

#DADADA (for TV, landscape, extra large)

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

Background palette

colorBackground colorBlue800 #2E536F The color displayed behind content if when no other background styling is applied, i.e. imagery as a background.
colorBackgroundReversed colorGray200 #EBEDED The color displayed behind content when no other background styling is applied. For example, when using imagery as a background.
colorBackgroundOverlay colorBlack #000000

colorBlackTVSafe #0F0F0F (for TV, landscape, extra large)

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 colorGray100 #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.
colorComponentReversed colorGray800 #1E2222 A dark color used in components that are placed on light backgrounds.

Additional resources


Back to top