Principles
Material is the metaphor
Material Design is inspired by the physical world and its textures, including how they reflect light and cast shadows. Material surfaces reimagine the mediums of paper and ink.
Bold, graphic, intentional
Material Design is guided by print design methods — typography, grids, space, scale, color, and imagery — to create hierarchy, meaning, and focus that immerse viewers in the experience.
Motion provides meaning
Motion focuses attention and maintains continuity through subtle feedback and coherent transitions. As elements appear on screen, they transform and reorganize the environment with interactions generating new transformations.
Components
Material Components are interactive building blocks for creating a user interface, and include a built-in states system to communicate focus, selection, activation, error, hover, press, drag, and disabled states. Component libraries are available for Android, iOS, Flutter, and the web.
Components cover a range of interface needs, including:
- Display: Placing and organizing content using components like cards, lists, and sheets.
- Navigation: Allowing users to move through the product using components like navigation drawers and tabs.
- Actions: Allowing users to perform tasks using components such as the floating action button.
- Input: Allowing users to enter information or make selections using components like text fields, chips, and selection controls.
- Communication: Alerting users to key information and messages using components such as snackbars, banners, and dialogs.
Resources
Theming
Material Theming makes it easy to customize Material Design to match the look and feel of your brand, with built-in support and guidance for customizing colors, typography styles, and corner shapes.
Resources
Updates
See the latest Material updates on our