Baseline grid
8dp grid
All components align to an 8dp square baseline grid for mobile, tablet, and desktop.
All components align to an 8dp square baseline grid for mobile, tablet, and desktop.
4dp grid
Icons, type, and some elements within components can align to a 4dp grid.
Icons, type, and some elements within components can align to a 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...
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 button or list item. When placed outside of the grid but centered within a component, text can still appear vertically center-aligned.
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...
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....
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.
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...
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.
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....
Alignment is the placement of elements within a component.
Keylines
Keylines are an alignment tool that enables consistent placement of elements outside of the
Keylines can create more or less space between elements in a layout. They are adjustable per breakpoint range.
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...
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 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.
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,...
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
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.
Flexible ratio sizing is determined by the
- 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.
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...
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.
Adapt to different ratios
Image ratios can change by adapting to different breakpoint ranges.
Fixed image heights
Image sizing can maintain a fixed height and fluid width across and within breakpoint ranges.
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.