Layout

Structure

Material Design layouts are visually balanced. Most measurements align to an 8dp grid applied, which aligns both spacing and the overall layout. Smaller components, such as iconography and typography, can align to a 4dp grid

Margins

Margins are the space between content and the left and right edges of the screen.

The minimum margin 16 dp

Baseline 8/4 dp grid


All components align to an 8dp square baseline grid for mobile, tablet, and desktop.

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

Aspect ratios

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, and 2:3


Touch target

Touch target minimum of 48 x 48 dp

Click targets

Click target minimum of 24 x 24 dp