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.
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.
16 dp horizontal margins on mobile.
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 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 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.
Applies to mobile screen width and UI element widths on mobile, tablet, and desktop.
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.
