AVS UX Logo and Brand Usage
These guidelines were created to help you navigate the Alexa Voice Service (AVS) UX requirements for using Amazon Alexa brand assets in your user interface. Consistent and diligent use of these guidelines will protect product integrity and help customers to instantly recognize references to Amazon Alexa, thereby allowing your app to be clearly understood.
Below is our logo and the two official lockups. The Alexa logo and brand assets for AVS apps can be downloaded from the Resources tab of the AVS Developer Portal.
Margins & minimum size
When you’re using the logo with other graphic elements, make sure you give it some room to breathe. The empty space around the logo should be at least 150% of the width of the logo.
For lockups the clearspace should be at least half of the diameter of the logo.
To ensure the logo maintains its visual impact, do not make the logo any smaller than 30dp.
Never show the logo in any colors other than Alexa blue, squid ink, or white.
|Alexa blue #00CAFF||Squid ink #232F3E||White #FFFFFF|
When placing the logo on an image, always use the white logo version. For images with a light background, we suggest applying a 10-20% black tint to the entire image to maintain legibility.
|The white logo ensures clear contrast between the logo and imagery used.||When placed on a complex pattern, make sure the logo is still readable.||When placed on a light background, use a 10-20% black tint on the image.|
If your UI has an affordance to physically interact with Alexa, also known as an Action button, the button should have the Amazon Alexa logo as its icon, without the logotype "Amazon Alexa" accompanying the mark. The logo should be used in a container to protect it when placing on a background without sufficient contrast.
Never show the logo in any colors other than Alexa blue, squid ink, or white. Choose the color that either matches your existing UI or has the best contrast to the background that it will be placed upon.
We recommend choosing the Alexa logo over a microphone icon whenever possible. A microphone icon could be ambiguous about what type of voice experience the customer will encounter (dictation, Alexa, or something else).
For more information about buttons for AVS products, see UX for Product Buttons.
Appropriate app naming helps customers understand that Alexa is available in your app. If you include the word "Alexa" in the app name, you must:
- Include the word "Alexa" in the overall name
- Not begin with the word "Alexa".
App tiles give customers a way to visually identify any app as an Alexa companion app. If you include the Amazon Alexa logo in the app tile:
- The app tile must contain the Amazon Alexa logo, protected in a white circle or square shape. The shape should have a drop shadow that is 30% Opacity, 0px X Offset, 1px Y Offset, and 3px Blur.
- The background color can be partner-specific.
- High contrast (darker) works best for background colors and gradients.
- Avoid white and light color background tones for maximum readability.
- Use square or circle base shape options, depending on the platform your app is on.
What not to do
|Do not apply outlines.||Do not add shadows.||Do not add styles or gradients.||Do not fill with colors other than Alexa blue, squid ink or white.|
|Do not skew, rotate, or stretch.||Do not change orientation.||Do not add elements to the inside of the logo.||Do not fill with patterns.|
|Do not use a blue container shape with text.||Do not use blue text.||Do not use colors other than Alexa blue, squid ink, or white.||Do not break up Amazon Alexa.|
|Do not multiply the logo.||Do not place our logo with text in a circle.||Do not capitalize Amazon Alexa.||Do not fill with gradients or off-brand colors.|
|Do not place logo without a white cicle to protect it.||Don't use a white or light background.||Do not place the logo on a circle other than white.||Do not fill the inside of the logo with a color.|
These materials are licensed as “Alexa Materials” under the terms of the Amazon Developer Services Agreement.