Material Design 3
Material Design 3
A complete design system but leaning toward Android.
Google's design system: colors, typography, components and usage guidelines.
Overview
Material Design 3 (also called Material 3 or M3) is Google's open-source design system, providing guidelines, styles and components for building user-friendly interfaces. This version is tied to Material You, which lets apps personalize colors to the user.
On Android 12 and above, the dynamic color feature takes a palette from the user's wallpaper and applies it to the app. The M3 color system starts from five key colors, each with a 13-tone palette used by role such as primary, secondary, tertiary. There is also a five-role type scale and a shape system with five levels of corner rounding.
The Material Theme Builder tool helps create a color palette from brand colors and export code. The M3 Expressive extension adds updates to theming, components, motion and typography.
Highlights
Google's design system
An open-source set of guidelines, styles and components for modern interfaces.
Dynamic color
On Android 12 and above, app colors can be taken from the user's wallpaper.
Color by role
Five key colors, each with 13 tones, used by role to ensure contrast.
Clear type scale
Five roles: display, headline, title, body, label, each with three sizes.
Material Theme Builder
Creates a color palette from brand colors and exports code for the app.
M3 Expressive
An extension with updates to theming, components, motion and typography.
What it's for
Android apps for customers
Build booking or loyalty apps with an interface standard familiar to Android users.
Standardizing brand colors
Put the logo color into Theme Builder to get consistent light and dark palettes.
Referencing design principles
Designers use the guidance on color, type and layout as a foundation when there is no design system of their own.
Internal apps
Use ready-made components to build inventory or timekeeping apps quickly and consistently.
How to use it
- 1
Read the guidelines on m3.material.io
Learn the foundations, styles and components before designing.
- 2
Create a brand color palette
Use Material Theme Builder to generate a palette from the main color and export code.
- 3
Add the library to a Compose project
For an Android app using Jetpack Compose, add the Material 3 library to the build.gradle file.
$implementation "androidx.compose.material3:material3:$material3_version" - 4
Apply the theme
Wrap the interface in MaterialTheme with the defined color scheme, typography and shapes.
- 5
Enable dynamic color
Check the Android version, use dynamic color when the device supports it and use your own palette for older devices.
Video guides
Build next-level UX with Material 3 Expressive
Android Developers
Everything you need to Know about Material Design 3
Stevdza-San
How to generate a Material Design 3 theme using the Material Theme Builder Figma plugin
Design Chillout
Real-world example
A dental clinic in Hai Phong hires a small dev team to build an Android appointment booking app. The team puts the blue from the logo into Material Theme Builder to get light and dark color sets, exports the code for Jetpack Compose and uses ready-made Material 3 components for buttons, appointment cards and forms. On Android 12 and above, the app can use dynamic color, while older devices use the brand palette.
Tips & notes
Use color by role
Pair each color with its matching on color so text always has enough contrast.
Always have a fallback
Dynamic color exists only on Android 12 and above, so you need your own palette for older devices.
Watch for experimental APIs
Some M3 APIs in Compose are still experimental and require an opt-in declaration.
FAQ
Is Material Design 3 free?
Yes, Google presents it as an open-source design system.
Is it only for Android?
The design guidelines apply to many digital products. In this session we only verified the Jetpack Compose implementation on Android.
What is Material You?
It is the personalization direction of Material 3, notable for dynamic color that takes colors from the user's wallpaper.
Useful links
Want to apply this in your business?
2dm looks at your workflows, picks the right tools and sets them up with your team. The first call is free.
Same topic
shadcn/ui
4.5
A set of UI components for React and Tailwind CSS: copy the code into your project, then customize it.
Lucide Icons
4.5
An open-source set of thin-stroke icons, usable for the web, React and design.
Tailwind CSS
4.5
A utility-class CSS framework for building interfaces quickly right in HTML.