Design: Elevation
Material measurements
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 icons and type, can align to a 4dp grid.
Grids
Icons, type, and some elements within components can align to a 4dp grid.
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 can be measured both vertically and horizontally and does not need to span the whole height of a layout.
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 can be measured both vertically and horizontally and does not need to span the whole height of a layout.
Touch targetslink
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.
Line length
Line lengths for body text are usually between 40 to 60 characters. In areas with wider line lengths, such as desktop, longer lines that contain up to 120 characters will need an increased line height from 20sp to 24sp.
Color Tool: Pick Swatch Colors here
Icon sizes
System icons are displayed as 24 x 24 dp. Create icons for viewing at 100% scale for pixel-perfect accuracy.
Icon content is limited to the 20dp x 20dp live area, with 2dp of padding around the perimeter.
Square
Height: 18dp
Width: 18dp
Circle
Diameter: 20dp
Vertical Rectangle
Height: 20dp
Width: 16dp
Horizontal Rectangle
Height: 16dp
Width: 20dp
