Material Design 3 Shape and Containment

Overview

This skill guides the implementation of Material Design 3 (M3) Expressive shape and containment principles to create friendly, approachable, and visually distinct interfaces.

Keywords: Material Design 3, M3, shape, rounded corners, border radius, containment, containers, morphing shapes, component shapes

Core Principles

Shape Philosophy

M3 Expressive uses shape to:

1. Create Personality: Distinctive shapes make interfaces memorable and approachable
2. Establish Hierarchy: Different corner radii indicate importance and containment levels
3. Express Brand: Shape language can be customized to match brand identity
4. Guide Attention: Rounded corners naturally draw the eye and feel inviting
5. Support Interaction: Shape morphing provides visual feedback