In this article:
Density is the number of pixels available on-screen for a device. Density is an important consideration when you design for Alexa because manufacturers can create devices of almost any screen shape, size, and density with Alexa built-in. When you understand how to use density, you ensure a consistent and appropriate customer experience across all Alexa-enabled devices.
How to use density
Density is determined by dividing the screen-resolution (SR) of the display by the horizontal screen-width (SW).
SR (screen resolution) / SW (screen width) = D (density)
- Screen resolution (SR) is measured as pixels.
- Screen size (SW) is measured as horizontal inches.
- Density (D) measured as pixels per inch (ppi).
For example, you would represent a small round hub device as:
480 pixels / 2.5 inches = 192 ppi
Density Classifications
When you design for Alexa you use a set of standard density classifications to achieve density independence across devices. The density (or ppi) of a device determines its class.
| PPI | Android Classification | Multiplier |
|---|---|---|
| ~120 ppi and below | ldpi | .75x |
| ~160 ppi | mdpi | 1x |
| ~240 ppi | hdpi | 1.5x |
| ~320 ppi | xhdpi | 2x |
| ~480 ppi | xxhdpi | 3x |
| ~640 ppi | xxxhdpi | 4x |
Density Independence
When you use density, your user experience is independent from the physical size of your interface. Density independence enables you to have a consistent user experience across screens with variable density without distortion or unpredictable sizing.
To achieve density independence, follow these best practices:
- Use dp (density independent pixels) instead of px (pixel) values.
- Define and leverage a dynamic grid that uses percentage-based values for your layouts.
- Provide vector-based images to ensure appropriate scaling and rendering to match each screen density where your user experience appears.
Grids and spacing create visual consistency and alignment across different screen sizes and viewing distances, ensuring your designs look great across all endpoints.
How to use grids
Grids are comprised of three elements: margins, columns, and gutters.
Margins
Margins, outlined in pink in the illustration, are the space between the outer edge of content and the left and right edges of a device. Adding margins separates content from the edge of the display, which improves its readability.
| Device Class |
Viewport Width (dp) | Margin (dp) |
|---|---|---|
| Hub, Round, Small | 480 | 64 |
| Hub, Landscape, Medium | 1024 | 64 |
| Hub, Landscape, Large | 1280 | 80 |
| TV, Landscape, X-Large | 960 | 48 |
Columns
Columns, outlined in pink in the illustration, act as a guide, so you can place content consistently. The number of grid columns varies by viewport profile.
Note: Column count is not fixed. Columns can be added or dropped when a device is rotated.
Gutters
Gutters, outlined in pink in the illustration, are the spaces between columns. The size of the gutter is determined by the viewing distance of the device mode. Content that you intend users to view from further away requires a larger gutter to separate content pieces and improve the readability of all the content at a distance.
How to use spacing
Consistent spacing, outlined in blue in the illustration, creates visual rhythm and consistency across components and layouts.
| Spacing sizes | Hub (dp) | TV (px) |
|---|---|---|
| 3XL | 72 | 72 |
| 2XL | 64 | 64 |
| Extra large | 56 | 56 |
| Large | 48 | 48 |
| Medium | 32 | 32 |
| Regular | 24 | 24 |
| Small | 16 | 16 |
| XS | 12 | 12 |
| 2XS | 8 | 8 |
Related developer documentation
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.
Text Palette
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. |
Background Palette
colorBackground |
colorBlue800 #232F3E |
The color displayed behind content when no other background styling is applied. For example, when using imagery as a background. |
| colorBackground | 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. |
Controls Palette
| 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. |
How to use color
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.
Accessibility
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.
Related developer documentation
Icons are used most often as image buttons to indicate a state or action. Because of the simplicity of the design, icons complement the messages within the user interface (UI).
How to use iconography
Alexa’s iconography is minimalist and slightly rounded. The icons scale properly for their size and stroke weight, in accordance with the Android convention.
Image formatting
Amazon designed the Alexa service to display on a vast range of devices with different screen sizes and resolutions. As you design, you need to consider how icon assets scale up or down with the various resolution capabilities of these Alexa-enabled devices.
To use image-based icons in your Alexa experience, you must provide an asset for each of the six primary density classes. For example, if you have an icon that is 72 x 72 pixels for medium-density screens, you must provide that same icon in all of the following sizes: 54, 72, 108, 144, 216, and 288.
| Icon Size Examples | Multiplier | Classification | PPI |
|---|---|---|---|
| 54 x 54 px | .75x | ldpi | ~120 ppi and below |
| 72 x 72 px (baseline) | 1x | mdpi | ~160 ppi |
| 108 x 108 px | 1.5x | hdpi | ~240 ppi |
| 144 x 144 px | 2x | xhdpi | ~320 ppi |
| 216 x 216 px | 3x | xxhdpi | ~480 ppi |
| 288 x 288 px | 4x | xxxhdpi | ~640 ppi |
The primary typeface of Alexa is Amazon Ember Display. The typeface for hint text is Bookerly. Amazon fonts are available to download here to assist you in designing for Multimodal displays.
Note: APL does not currently support custom fonts.
How to use typography
Amazon designed Alexa's type scale to be legible across device modes with different viewing distances. Most of the type scale is larger than what you might be accustomed to. This large scale ensures that users can read on-screen content quickly, even if they're far away from the device. Use Headline or larger styles when your content is important and must be easy to read.
- Display 1 and Display 2 sizes – Use for quick, easy-to-glance text, such as acronyms or large numbers that show time or the day of the week.
- Display 3 and Display 4 sizes – Use when you display a small amount of text, such as list items or inline titles that users need to read at a distance.
- Display 5 and Display 6 sizes – Use when you display longer sentence-length text that users need to read at a distance.
- Body size – Reserve for long-form content, such as a synopsis of a book. Consider that at this size, content can be difficult to read at a distance and users might need to get closer to the device.
- Hint size – Use exclusively to show what a user can say to invoke Alexa.
- Callout size – Use for text that is playing a supporting role, such as a grid view of images, in which each has a title.
- Title size – Use only for headers and buttons.
- Metadata size – Use to accompany callouts, such as when you display additional information about a movie time.
- Caption size – Use rarely, if ever, and is best for when you display UI elements, such as time passed in a progress bar.
Weights
Alexa pairs light and bold weights of Amazon Ember Display to create contrast. In the type scale, there is always a default type style and an alternate style. For example, the default style for Display 3 is light and the alternate uses bold. When you use bold and light together, use bold to call out key text items.
Note: For hints in the footer, Bookerly uses a regular weight and is only shown in an italic style.
Accessibility
Text style and size is critical to readability and accessibility for your experience. Alexa Responsive Layouts presets the minimum contrast ratios for foreground text and background colors to ensure high readability and contrast. However, consider checking the contrast ratio yourself to ensure legibility for all text sizes, weights, and background images — especially at small sizes, such as Caption. For more details about text and accessible content, see the Web Content Accessibility Guidelines (WCAG) 2.1.
Size
Across the type scale, exact size values are calculated based on the distance the customer is from their device.
Hub Landscape Small, Hub Round (5 feet)
| Style |
Typeface | Default Weight | Alternate Weight | Size (in dp) |
|---|---|---|---|---|
| Display 1 | Ember Display | Bold | Light | 106 |
| Display 2 | Ember Display | Bold | Light | 80 |
| Display 3 | Ember Display | Light | Bold | 66 |
| Display 4 | Ember Display | Light | Bold | 53 |
| Display 5 | Ember Display | Light | Bold | 48 |
| Display 6 | Ember Display | Light | Bold | 40 |
| Body | Ember Display | Light | Bold | 32 |
| Hint | Bookerly | Regular Italic | - | 32 |
| Callout | Ember Display | Bold | Light | 28 |
| Title | Ember Display | Medium | - | 28 |
| Metadata | Ember Display | Bold | Light | 24 |
| Caption | Ember Display | Regular | - | 24 |
Hub Landscape Medium, Hub Landscape (7 feet)
| Style | Typeface | Default Weight | Alternate Weight | Size (in dp) |
|---|---|---|---|---|
| Display 1 | Ember Display | Bold | Light | 148 |
| Display 2 | Ember Display | Bold | Light | 111 |
| Display 3 | Ember Display | Light | Bold | 92 |
| Display 4 | Ember Display | Light | Bold | 74 |
| Display 5 | Ember Display | Light | Bold | 48 |
| Display 6 | Ember Display | Light | Bold | 40 |
| Body | Ember Display | Light | Bold | 32 |
| Hint | Bookerly | Regular Italic | - | 32 |
| Callout | Ember Display | Bold | Light | 28 |
| Title | Ember Display | Medium | - | 28 |
| Metadata | Ember Display | Bold | Light | 24 |
| Caption | Ember Display | Regular | - | 24 |
TV Fullscreen, TV Overlay Landscape (10 feet)
| Style | Typeface | Default Weight | Alternate Weight | Size (in dp) |
|---|---|---|---|---|
| Display 1 | Ember Display | Bold | Light | 192 |
| Display 2 | Ember Display | Bold | Light | 128 |
| Display 3 | Ember Display | Light | Bold | 96 |
| Display 4 | Ember Display | Light | Bold | 64 |
| Display 5 | Ember Display | Light | Bold | 48 |
| Display 6 | Ember Display | Light | Bold | 40 |
| Body | Ember Display | Light | Bold | 32 |
| Hint | Bookerly | Regular Italic | - | 32 |
| Callout | Ember Display | Bold | Light | 28 |
| Title | Ember Display | Medium | - | 24 |
| Metadata | Ember Display | Bold | Light | 24 |
| Caption | Ember Display | Regular | - | 24 |
Line length
“Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.” - Bringhurst, Elements of Typographic Style
Shorter text, such as headlines or titles should have a maximum line length of 40 characters. Long form text, such as body copy, should have a maximum of 60 characters. Use the maxLines property to set how many lines you want to display, while ensuring that you take translation for different languages into consideration.
Text Markup Tags
You should take advantage of out-of-the-box styles for the best experience, but you can also apply optional markup tags to text strings in the text component, as described in the following list.
Note: Similar to how too much text on screen can distract and overwhelm users of the voice experience, too many formatting options can make your content difficult to read.
- Strike-through (strike) is used to mark a type element as complete or deleted. It can be layered over another style without changing the typeface, weight, color, etc.
- Bold (strong) is used to add strong emphasis. It can be layered over another style and only affects weight.
- Italic (italic) is used for titles of books, magazines, newspapers, etc. or to add gentle emphasis to type. It can be layered over another style without changing the typeface, weight, color, etc.
- Underline (underline) is used in rare cases to add additional emphasis to text. It can be layered over another style without changing the typeface, weight, color, etc. It should not be used as a link styling; instead use the Hint style for this use case.
- Subscript (subscript) is used for math functions, chemical compounds, and similar text that falls below the baseline of a typeface. It can be layered over another style and only affects size.
- Superscript (superscript) is used for letters in ordinal indicators (for example th, nd, st), exponential data, and other such text that falls above the cap-height of a typeface. It can be layered over another style and only affects size.
- Line height (lineHeight) adjusts the leading, or the amount of space between lines of text.
- Letter spacing (letterSpacing) adjusts the kerning, or the amount of space between characters.