Material design is guided by print-based design elements – such as typography, grids, space, scale, color, and imagery – to create hierarchy, meaning, and focus that immerse the user in the experience. Material design adopts tools from the field of print design, like baseline grids and structural templates, encouraging consistency across environments by repeating visual elements, structural grids, and spacing across platforms and screen sizes. These layouts scale to fit any screen size, which simplifies the process of creating scalable apps.
In material design, the physical properties of paper are translated to the screen. The background of an application resembles the flat, opaque texture of a sheet of paper, and an application’s behavior mimics paper’s ability to be re-sized, shuffled, and bound together in multiple sheets.
The surfaces that comprise applications are referred to in this spec as material, or sheets of material.
Elements outside of applications, such as system bars, are separate from the app content beneath them, and are not treated as material.
For detailed information about material, see Material Properties.
Two sheets of material that share an entire common edge are called seams. While joined by
aseam, they move together.
Two overlapping sheets of material, with different z-positions (or depths), form a step. They move independently of each other.
Floating action button
A floating action button is a circular sheet separate from a toolbar. It represents a single promoted action.
It can straddle a step if it relates to the content creating that step.