Spacing methods

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


Baseline

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.

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

4dp grid

Iconography, typography, and some elements within components can align to a 4dp grid.

Read More

Iconography, typography, and some elements within components can align to a 4dp grid.

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

4dp baseline grid

Typography can be placed outside of the 4dp grid when it’s centered within a component, such as a button or list item.

Read More

Type aligns to the 4dp baseline grid.

Typography can be placed outside of the 4dp grid when it’s centered within a component, such as a button or list item.

The text appears vertically aligned in the center of the list item, even though the type isn’t resting on the 4dp grid.


Spacing

Keylines

Keylines enable the consistent placement of elements outside of the layout grid . They are vertical lines that show where elements are placed in a...

Read More

Keylines enable the consistent placement of elements outside of the layout grid . They are vertical lines that show where elements are placed in a design that doesn’t align to the grid. Keylines are determined by each element’s distance from the edge of the screen, measured in increments of 8dp.

Keylines should be used in combination with the responsive layout grid to place elements consistently across a design.

  1. Layout Grid
  2. Keyline

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

Padding

Padding refers to the space between UI elements. It’s an alternative spacing method to keylines, measured in increments of 8dp or 4dp. Padding should be...

Read More

Padding refers to the space between UI elements. It’s an alternative spacing method to keylines, measured in increments of 8dp or 4dp.

Padding should be used in combination with the responsive layout grid to place elements consistently across a design.

  1. Layout Grid
  2. Padding

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

Vertical spacing

Vertical spacing refers to the height of a standard element, such as an app bar or list item. The heights of these elements should align...

Read More

Vertical spacing refers to the height of a standard element, such as an app bar or list item. The heights of these elements should align to the 8dp grid.

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

Increment

An increment is a measurement used to measure the size and placement of elements in your app. It has equal height and width. It can...

Read More

An increment is a measurement used to measure the size and placement of elements in your app.

It has equal height and width. It can be any number, but it’s recommended to use the height of a standard element (such as the app bar) as your increment.

This increment is defined using the height of the app bar. If an app bar is 64dp tall, the increment would be 64 x 64dp.

To make a component, like a card, eight increments wide, multiply the number of increments by the size of the increment. If each increment is 56dp, the total width of the card would be:

8 increments x 56dp = 512dp

The card would be 512dp wide.


Containers and aspect ratios

Containers

A container is a shape used to represent an enclosed area. Containers can hold various UI elements such as an image, icon, or surface. Containers...

Read More

A container is a shape used to represent an enclosed area. Containers can hold various UI elements such as an image, icon, or surface.

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.

  1. Rigid image container that crops original the 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. To maintain consistency in your layout, use a consistent aspect ratio on...

Read More

An aspect ratio is the proportion of an element’s width to its height.

To maintain consistency in your layout, use a consistent aspect ratio on elements like images, surfaces, and screen size. Aspect ratio is written as width:height.

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

Flexible ratios

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

Read More

Flexible ratios 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 that container

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

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 remain...

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 remain one fixed ratio across breakpoint ranges.

50%
Image maintains a 3:2 ratio between breakpoints.

Adapt to different ratios

Image sizing can change to different a ratio per breakpoint range.

50%

The image ratio changes from 1:1 to 3:2 between breakpoints.



Fix image heights

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

50%

The image maintains a fixed height with a fluid width between breakpoints.




Touch and click targets

Touch target specs

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...

Read More

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 them.

Touch target minimum of 48 x 48 dp

Click targets

On non-touch-UIs, click targets should be at least 24 x 24 dp with at least 8dp of space between them..

Read More

On non-touch-UIs, click targets should be at least 24 x 24 dp with at least 8dp of space between them..

Click target minimum of 24 x 24 dp