Material Design
Google’s interface system, built around surfaces, color, and motion.
Everyday
objects
and ways of living.Gallery 2
Tickets
How it works
Color
Typography
Characteristics
The material metaphor
Interface surfaces behave like sheets of paper with real thickness, stacked on a z-axis. It is an abstract physical model, not literal realism.
Elevation and shadow
Every surface sits at an elevation. Higher elevation casts a larger, softer shadow, which is how the system shows hierarchy and depth.
Bold, intentional graphics
Print-inspired typography, color, and large imagery create hierarchy and focus. Type and color guide attention instead of borders.
Meaningful motion
Animation connects states and explains change. The ink-ripple on tap gives tactile feedback, echoing ink spreading on paper.
A systematic grid
Layouts align to an 8dp baseline grid (a 4dp baseline in Material 3), keeping spacing and components consistent across screens.
One adaptable system
A documented kit of components and rules that scales across devices and brands, extended by theming and Material You's dynamic color.
Use it
Figma
Start from the Material 3 kit
- Add the Material 3 Design Kit from the Figma Community to your file.
- Use its components for app bars, cards, buttons, and the FAB.
- Adopt its color and text styles as your starting system.
- Customize through the kit's variables so theming stays consistent.
Editing the kit's variables themes the whole UI at once, the Material way.
Realistic elevation
- Decide an elevation for each surface, for example card 1dp, app bar 4dp, FAB 6dp.
- Use two stacked drop shadows per level: a tight ambient one and a softer key one.
- Raise opacity and blur together as elevation increases.
- In Material 3, add a subtle tonal fill step instead of leaning only on shadow.
Two layered shadows read as Material; a single hard shadow looks flat or fake.
Type scale and color roles
- Create Text Styles for Display, Headline, Title, Body, and Label.
- Create color Variables named by role: primary, on-primary, surface, background.
- Apply color only through these role variables, never raw hex.
- Build light and dark themes on the same roles.
Naming colors by role (primary, on-primary) instead of hue lets themes swap cleanly.
The FAB and ripple state
- Draw a circular button filled with the accent color and a 6dp shadow.
- Center a white icon, usually a plus, inside it.
- Add a translucent state layer for hover and press to stand in for the ripple.
- Make it a Component with default, hover, and pressed variants.
A semi-opaque white or black state layer is Material's standard way to show interaction.
Starting points
- Start from the Material 3 guidelines and the official component kit.
- Pick a primary and an accent color, or generate a palette with dynamic color.
- Set a type scale from Display to Label and commit to it.
Research notes & sources
2014 to present
Android & cross-platform UI
Material, Material You, Material 3
Related styles
- Flat designMaterial grew out of flat design, keeping its clarity but adding depth back through light and shadow.
- Swiss / International Typographic StyleIts print-inspired grids, bold typography, and confident color come straight from the Swiss tradition.
- SkeuomorphismMaterial rejects literal imitation of real objects, keeping only an abstract, rule-based paper metaphor.
- GlassmorphismA contemporary system that also builds depth, but through translucency rather than opaque, shadowed elevation.
- Material Design: A Look Back at Its BeginningGoogle Design
- What is Material Design?Interaction Design Foundation
- Start building with Material YouMaterial Design 3
- Google's Material Design: a design system with mass adoptionDesignSystems.com
- Material Design 3 in ComposeAndroid Developers
- The Evolution of Material DesignEspeo
- Key Material Design Principles Every Developer Should KnowTMS