Because unique shapes stand out, they can direct attention to different parts of a screen.


Emphasis

Shape provides a way for users to recognize components and identify different Material surfaces.

* Example

Identity

You can communicate an element’s change of state by using a different shape from the rest of the elements or surfaces in that group. When using shape to indicate a state change, use it consistently with that state, in every instance it occurs.

* State example

State

To express a brand’s visual language throughout an app, use shape in tandem with other customizations (like color) in consistent ways. 

Small adjustments to shape, applied strategically through an app, contribute to the overall impression a brand makes.

* Branding example



Branding

University of Michigan - Ann Arbor

Arizona State University

Shaping material

Material Design Documentation

"Material surfaces have a rectangular shape by default, with 4dp rounded corners. Their shape can be customized by adjusting their:

* Corner angles and curves
* Edge angles and curves

The size of shape changes can be subtle or more significant."

About shape

Shape is made visible when surface edges have sufficient contrast against their background. By default, Material Design makes shapes noticeable by using shadows to display surfaces edges. Other methods to show surface edges and shapes can be used in combination with shadows, or on their own, such as color fills and opacity.

* Displaying shape: **Do**
* Displaying shape: **Don't**

Learn Before

Related

Learn After