All components align to an 8 dp square baseline grid. Type aligns to a 4 dp baseline grid. Iconography in toolbars align to a 4 dp square baseline grid. This applies to mobile, tablet, and desktop.
See detailed information on components.
See detailed information on typography.
The mobile layout template includes a wide variety of screens and information about how keylines and spacing work across screen edges and elements. Below is a sample of the screens included in the download.
Mobile Layout Template (Download)
Context
This screen shows how icons, avatars, and a 2-line list align on the left and how a 56 dp floating action and text align on the right.
Vertical Keylines and Horizontal Margins
Vertical keyline at 16 dp from the left and right edges. Content associated with an icon or avatar aligns 72 dp from the left edge. 16 dp horizontal margins on mobile.
Vertical Spacing
- 24dp
- 56dp
- 48dp
- 72dp
Context
This screen shows how icons, avatars, a 2-line list, a subtitle, and a 40 dp floating action align on the left. Icons align to the right.
Vertical Keylines and Horizontal Margins
Vertical keyline for icons at 16 dp from the left and right edges. Content associated with an icon or avatar aligns 72 dp from the left edge. 16 dp horizontal margins on mobile.
Vertical Spacing
- 24dp
- 56dp
- 72dp
- 48dp
- 8dp
Context This screen shows how icons align on the left and how icons and a 56 dp floating action align on the right.
Vertical Keylines and Horizontal Margins
Vertical keyline for icons at 16 dp from the left edge. Content associated with an icon or avatar aligns 72 dp from the left edge. An extra keyline is added 32 dp from the right edge to account for the 56dp circular floating action. This allows icons below the floating action to align.
16 dp horizontal margins on mobile.
Vertical Spacing
- 24dp
- 56dp
- 8dp
- 72dp
Context This screen shows how icons, avatars, and text align on the left and how the floating action, icons, and text align on the right.
Vertical Keylines and Horizontal Margins
Vertical keyline for icons at 16 dp from the left and right edges. Content associated with an icon or avatar aligns 72 dp from the left edge.
16 dp horizontal margins on mobile.
Vertical Spacing
- 24dp
- 56dp
- 48dp
- 8dp
Context
This screen shows the width of a side navigation menu and how icons, avatars, and text align on the left and icons on the right.
Vertical Keylines and Horizontal Margins
Vertical keyline for icons at 16 dp from the left and right edges of the side nav. Content associated with an icon or avatar aligns 72 dp from the left edge of the side nav. The width of the side nav is equal to the width of the screen minus the height of the action bar, or in this case 56 dp from the right edge of the screen.
16 dp horizontal margins on mobile.
Vertical Spacing
- 48dp
- 8dp
- 56dp
The tablet layout template includes 14 different screens and shows how keylines and spacing work across screen edges and elements. Below is a sample of two of the 14 screens included in the download.
Tablet Layout Template (Download)
- 24dp
- 64dp
- 8dp
- 72dp
- 24dp
- 64dp
- 8dp
- 48dp
- 80dp
The desktop layout template includes 4 different screens each with 4 different window sizes and shows how keylines and spacing work across windows and elements. Below is a sample of a screen available in the download. Based on the window size, the keylines and spacing blocks will inherit grid rules from both tablet and mobile.
Desktop Layout Template (Download)
Applies to mobile screen width and UI element widths on mobile, tablet, and desktop.
Screen width
Example
Element width
Example
An incremental keyline defines an increment, like the height of the action bar, and uses a multiple of that increment to determine the size and position of other elements in the app.
Applies mostly to desktop, often to tablet, rarely to mobile. Number of increments will vary based on window size.
Minimum touch target size is 48 dp. Keep this in mind when spacing icons (24 dp) or avatars (40 dp) in a layout. Touch targets shouldn’t overlap.
