Layout Principles


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.

How paper works Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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.

An application’s behavior mimics the paper’s ability to be re-sized, shuffled, and bound together in multiple sheets. Elements that live outside of applications, such as status or system bars, receive a different treatment. They are separate from the app content beneath them, and do not carry the physical properties of paper.

For detailed information about material, see Material Properties.


Two sheets of paper that share an entire common edge are called seams. While joined by a seam, they move together.

Seams in two sheets of material


Two overlapping sheets of paper, with different z-positions (or depths), form a step. They move independently of each other.

Steps in two sheets of overlapping material

Floating action button Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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.

Floating action buttons straddling steps

A floating action button can straddle a seam if it relates to the content of both sheets.

Do not introduce a decorative seam to provide an anchoring point for an action.

Floating action buttons straddling seams

For detailed information about floating action buttons, see Floating Action Buttons.