All components align to an 8dp square baseline grid for mobile, tablet, and desktop. Iconography in toolbars align to a 4dp square baseline grid.
Example of baseline grid
Example of baseline grid
Type aligns to a 4dp baseline grid. See detailed information on typography.
Example of typography in a baseline grid
The following templates and examples contain keylines, spacing guidance, and sample screens for elements on mobile, tablet, and desktop.
List
A two-column, left-aligned list with a 56dp floating action button.
Keylines and margins
Screen edge left and right margins: 16dp
Content associated with an icon or avatar left margin: 72dp
Horizontal margins on mobile: 16dp
Vertical spacing
Keylines and margins
Screen edge left and right margins: 16dp
Content left margin from screen edge: 72dp
Vertical spacing
Detail view
A detail card with a 56dp floating action button.
Keylines and margins
Screen edge left and right margins: 16dp
Content left margin from screen edge: 72dp
Right-side icons align 32dp from the right edge to coordinate with the floating action button.
Vertical spacing
Navigation drawer
A side navigation menu with icons, avatars, and text aligned on the left. Other icons align on the right.
Keylines and margins
Screen edge left and right margins: 16dp
Content associated with an icon or avatar left margin: 72dp
Side nav width: The screen width minus the height of the action bar. Here, the width is 56dp from the right screen edge.
Vertical spacing
List with detail view
Left-aligned list with a right-aligned floating action button
Keylines and margins
Screen edge left and right margins: 24dp
Content left margin from screen edge: 80dp
Card left and right padding: 24dp
Card content left padding: 104dp
Vertical spacing
List with detail view
Left-aligned list with a left-aligned floating action button
Keylines and margins
Screen edge left and right padding: 24dp
Icons’ vertical center distance from screen edge: 52dp
Nav item left padding from screen edge: 104dp
Content left margin from screen edge: 80dp
Card left and right padding: 32dp
Card nav item left padding: 96dp
Vertical spacing
Keylines and spacing blocks for desktop inherit grid rules from tablet and mobile, depending on window size.
Desktop full screen
Resized windows
Horizontal window
Vertical window
The proportion of an element’s width to its height (called the aspect ratio) applies to both UI elements and screen size. It is written as width:height.
These aspect ratios are recommended:
For example:
Determine the width or height of your element for a chosen aspect ratio using the below formulas. The aspect ratio is always expressed as a fraction. For example, 3:2 is treated as 3/2.
Width = Aspect ratio * Height
Height = Width/Aspect ratio
Screen width
Example of screen width on mobile
Element width
Example of element width on mobile
An increment is a measurement used to determine the size and position of other elements in the app.
For example, you can define an increment as the height of a standard element, such as the action bar. If the action bar is 56dp tall, you may define one increment as equal to 56 x 56dp. Determine the size of other elements by how many 56dp increments wide or tall an element should be.
If an element is 8 increments wide, using 56dp as the increment size, the width is equal to 448dp.
Incremental keylines apply mostly to desktop, often to tablet, and infrequently to mobile. The number of increments varies based on window size.
This example card width has a horizontal increment of 8x.
The height of the example extended app bar is 2x the increment, and the width of the right panel is 5x the increment.
Increments can work across many elements in material design UI.
To ensure balanced information density and usability, touch targets should be at least 48 x 48 dp. In most cases, there should be 8dp or more space between them.
Size elements at least 48dp high and wide to ensure a physical size of about 9mm regardless of screen size. The recommended target size for touchscreen objects is 7-10mm.
Avatar: 40dp
Icon: 24dp
Touch target on both: 48dp
Touch target height: 48dp
Button height: 36dp
Example of touch targets
Example of touch targets and buttons
