Density, Grids and Spacing 

Density

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.

density classifications

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

Grids and spacing create visual consistency and alignment across different screen sizes and viewing distances, ensuring your designs look great across all endpoints.

Spacing Layout

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

Grid Margins

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.

Grid Columns
Grid Columns across devices

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.

Grid Gutters

How to use spacing

Consistent spacing, outlined in blue in the illustration, creates visual rhythm and consistency across components and layouts.

Grid Spacing
Spacing for Controls

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