Color is a great way to evoke emotion, meaning, and personality in simple ways. You determine how to apply color harmoniously by the content you present and by the context in which you present it. Color can convey a branded and intentional experience that's appealing to your users.
The following tables show the standard text palette, background palette, and controls palette for Alexa visual experiences.
colorText
|
colorGray100 #FAFAFA #DADADA (for TV) |
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) |
Used to de-emphasize metadata text. |
| colorSecondaryReversed | colorGrey800 #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 |
colorGrey800 #1E2222 |
Used for any disabled text, when displayed over elements with dramatically different color value than the background. |
| colorBackground | colorBlue800 #232F3E |
The color displayed behind content when no other background styling is applied. For example, when using imagery as a background. |
| TV Override #35485E |
On TVs, the colorBackground is overridden by #35485E |
|
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) |
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. |
colorGreen800 |
#34581B |
Green background color. |
colorTeal800 |
#0A655E |
Teal background color. |
colorBlue800 |
#232F3E |
Blue background color. |
colorPurple800 |
#3E3F68 |
Purple background color. |
colorGray800 |
#1E2222 |
Gray background color. |
| colorComponent | colorGray100 #FAFAFA #DADADA (for TV) |
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. |
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.
Amazon designed the baseline color system 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. 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. You can still use the color if it's paired with a redundant visual indicator, such as bold text.
Important: Your text should have a high enough contrast ratio, ideally 4.5:1 to the background, so that users can see your text at a distance or with low-vision.