Spacing methods

Spacing methods use baseline grids, keylines, padding, and incremental spacing to adjust ratios, containers, and touch targets.


Baseline grid

8dp grid

All components align to an 8dp square baseline grid for mobile, tablet, and desktop.

Read More

All components align to an 8dp square baseline grid for mobile, tablet, and desktop.

8dp grid diagram of a layout with an app bar and floating action button

The app bar and floating action button align to the 8dp grid.

4dp grid

Icons, type, and some elements within components can align to a 4dp grid.

Read More

Icons, type, and some elements within components can align to a 4dp grid.

4dp grid diagram with bottom navigation bar and three icons spaced to align with the 4dp grid

Elements of the bottom navigation bar align to the 4dp grid.

4dp baseline grid

Type aligns to the 4dp baseline grid. Type can be placed outside of the 4dp grid when it’s centered within a component, such as a...

Read More

Type aligns to the 4dp baseline grid.

4dp baseline grid lines with text message type aligned to the baseline grid

4dp baseline grid

Type can be placed outside of the 4dp grid when it’s centered within a component, such as a button or list item. When placed outside of the grid but centered within a component, text can still appear vertically center-aligned.

4dp baseline grid with list items and off-center vertical spacing of text within the list item component

The text appears vertically aligned in the center of the list item, though the type is placed outside of the 4dp grid.


Spacing

Spacing methods

Spacing methods are more granular than the responsive layout grid. Spacing methods are a set of rules around how to place elements within layouts and...

Read More

Spacing methods are more granular than the responsive layout grid. Spacing methods are a set of rules around how to place elements within layouts and components.

Padding

Padding is the space between elements within a component.

Dimensions

Dimensions describe the width and height of component elements.

Alignment

Alignment is the placement of elements within a component.

Padding

Padding refers to the space between UI elements. Padding is an alternative spacing method to keylines and is measured in increments of 8dp or 4dp....

Read More

Padding refers to the space between UI elements. Padding is an alternative spacing method to keylines and is measured in increments of 8dp or 4dp.

Padding can be measured both vertically and horizontally and does not need to span the whole height of a layout.

A mobile layout with 24dp padding identified between a list items and again between two icons.

A layout with 24dp padding between components.

Dimensions

Dimensions refer to the width and height of component elements. Some components, such as an app bar or list, only outline the height of an...

Read More

Dimensions refer to the width and height of component elements.

Some components, such as an app bar or list, only outline the height of an element. The heights of these elements should align to the 8dp grid. Their widths are not specified because it’s responsive to a viewport width.

  1. Status bar height: 24dp
  2. App bar height: 56dp
  3. List item height: 88dp

Alignment

Alignment is the placement of elements within a component. Keylines are an alignment tool that enables consistent placement of elements outside of the layout grid....

Read More

Alignment is the placement of elements within a component.

  1. Layout Grid
  2. Alignment

Keylines

Keylines are an alignment tool that enables consistent placement of elements outside of the layout grid. They are vertical lines that show where elements are placed when they don’t align to the grid. Keylines are determined by each element’s distance from the edge of the screen and are measured in increments of 8dp.

Mobile layout with grid alignment identified and keyline which intersects the column and is outside not a part of the layout grid
  1. Layout Grid
  2. Keyline

Keylines can create more or less space between elements in a layout. They are adjustable per breakpoint range.

Text placement showing a range of keyline placement from 48dp to 56dp to 64 to 72 dp

Keylines can expand or reduce the space between elements.


Containers and ratios

Containers

A container is a shape used to represent an enclosed area. Containers can hold UI elements such as images, icons, or surfaces. Containers can be...

Read More

A container is a shape used to represent an enclosed area. Containers can hold UI elements such as images, icons, or surfaces.

An image, an icon, and a button, each surrounded by a border to show the container

200%

  1. Image container
  2. Icon container
  3. Surface container

Containers can be rigid and restrict the size or cropping of elements within them. Alternatively, they can be flexible and grow to support the size of the content they hold.

An image container overlaid on a changing background shape and the container maintaining its size. An image and container expanding vertically and horizontally to show flexibility.
  1. Rigid image container that crops the original image size.
  2. Flexible image container that scales to hold the original image size.

Aspect ratios

An aspect ratio is the proportion of an element’s width to its height. Aspect ratios are written as width:height. To maintain consistency in your layout,...

Read More

An aspect ratio is the proportion of an element’s width to its height. Aspect ratios are written as width:height.

To maintain consistency in your layout, use a consistent aspect ratio on elements like images, surfaces, and screen size.

The following aspect ratios are recommended for use across your UI: 16:9; 3:2; 4:3; 1:1; 3:4; 2:3

Aspect ratios depicted by outlines for each recommended ratio.

Flexible ratios

Flexible ratio sizing is determined by the layout grid: Use a flexible ratio to allow content form determine the height of the container.

Read More

Flexible ratio sizing is determined by the layout grid:

  • Container width is determined by the screen layout and grows to fill the maximum space available
  • Container height is determined by the height of the image in the container

Use a flexible ratio to allow content form determine the height of the container.

Image cards with various heights and widths showing flexibility; both are 156dp width though 112dp and 172 dp in height

Container widths are determined by the column widths in the layout grid.

Responsive cropping

To display images responsively, define how an image will be cropped at different breakpoint ranges. At different breakpoint ranges cropping can: Image sizing can hold...

Read More

To display images responsively, define how an image will be cropped at different breakpoint ranges. At different breakpoint ranges cropping can:

  • Maintain one fixed ratio
  • Adapt to different ratios
  • Fix image heights

Maintain one ratio

Image sizing can hold one fixed ratio across breakpoint ranges.

Side-by-side mobile and tablet examples show a 3:2 ratio is maintained across the surfaces

50%
The image in the UI maintains a 3:2 ratio between breakpoints.

Adapt to different ratios

Image ratios can change by adapting to different breakpoint ranges.

Side-by-side mobile and tablet examples show a mobile image 1:1 ratio changes to 16:9 on a tablet

50%

The image ratio changes from 1:1 to 16:9 between breakpoints.





Fixed image heights

Image sizing can maintain a fixed height and fluid width across and within breakpoint ranges.

Side-by-side mobile and tablet examples show a mobile image with 240dp height stays the same on a tablet but the width changes to the larger layout

50%

The image maintains a fixed height while the width between breakpoints is fluid.






Touch targets

Touch targets apply to any device that receives both touch and non-touch input. To balance information density and usability, touch targets should be at least 48 x 48 dp with at least 8dp of space between targets.

An avatar, a search icon, and a button with 48 dp touch targets

Touch target minimum of 48 x 48 dp