Developing hierarchy
Unique shapes
Shapes that are unique differ from the shapes around them, making them stand out. Components with unique shapes stand out from other components, the content...
Shapes that are unique differ from the shapes around them, making them stand out. Components with unique shapes stand out from other components, the content that surrounds them, and the UI as a whole. Their shape gives them emphasized importance that helps direct user attention.
Surface relationships
Connecting surfaces through shape
Shape can help users understand how Material surfaces are related to one another. Similar shapes can indicate that surfaces are peers, such as cards in...
Shape can help users understand how Material surfaces are related to one another.
Similar surfaces
Similar shapes can indicate that surfaces are peers, such as cards in a collection with matching dimensions and corners.
Related surfaces
Surfaces that are related to one another can be indicated by using shapes that resemble arrows, such that they “point” to other surfaces. For example, an arrow-like corner of a menu can point to a related surface.
Separate surfaces
Shapes can emphasize when surfaces are separate from one another. For example, when a unique shape appears at a higher elevation than another surface, it emphasizes that the two surfaces are separate.