Material Surfaces in Google Material Design

Each material object is measured using device independent pixels, or “dps.” This unit of measurement is a physical unit that can be converted into inches or millimeters based on the device’s screen size. These units allow designers to create interfaces independent of specific screen resolutions.

Material design uses dps to measure the height, width and depth of a material. Since digital material is considered “real,” it lies on a three-dimensional coordinate system with X, Y and Z axes. The following image should illustrate this point:

google material diagram spatial height width

This diagram is from Google’s spatial objects page in the material design specs. The layering of material objects creates a sense of depth, just as it does in the real world. Content, however, lies flat on the material, like print on paper or a tattoo on the skin.

Depth is created using light, which casts shadows onto the material lower in the hierarchy. The primary light source flows down from the screen, so as an object moves closer to the screen, it casts a darker shadow. Most design elements are “flat,” but still use subtle shadows to distinguish between their material depths. Light and shadow is a big topic, but skim through the docs if you’re curious to learn a bit more.