Elevation & Layers
Level 2
Resting elevation for cards and contained buttons
Level 4
Hover elevation for cards and raised buttons
Level 8
Elevation for menus and navigation drawers
Level 16
Elevation for modal dialogs
Material Color Palette
Primary
Secondary
Surface
Background
Material Components
Buttons
Floating Action Button
Input Fields
Material Motion
Material Design emphasizes meaningful motion that focuses attention and maintains continuity
Design Principles
Material is the metaphor
Inspired by the study of paper and ink, grounded in reality
Bold, graphic, intentional
Print-based design elements guide visual treatments
Motion provides meaning
Motion respects and reinforces the user as the prime mover