Shape and elevation for designing your Teams app
This article provides how to use shape and elevation to create additional hierarchy in your app.
Shape and form
Depending on the component, Teams uses corner radiuses of 0 pixels, 4 pixels, and fully rounded. Most Teams components, including buttons, have a 4-pixel corner radius. Key calls to action might use different shapes, such as rounded floating action buttons. In cases where you must alter a Teams button shape, follow the sizing and spacing guidelines to maintain a consistent experience.
Don’t: Change the shape of basic UI components
Avoid modifying the shape of basic UI components as much as possible. Try following the common sizing and spacing rules of each component even when the shape needs altering.
Don’t: Modifying or adding to the shadow levels
Customizing the shadow values might create a confusing visual hierarchy when your app is rendered in the Teams interface.