Approach · 2021–present (Material 3 Expressive, 2025) · Google; Android and the web
Material You and Expressive
A design system that adapts its colour to you.
What is Material You and Expressive?
Material You, also called Material 3, is Google's third generation of Material Design, introduced in 2021. Its signature idea is dynamic colour: a palette taken from the user's wallpaper and applied across the interface with tonal surfaces, rounded shapes and accessible contrast. In 2025 Google announced Material 3 Expressive, which adds more vibrant colour, bolder shape and spring-based motion. It shows how a design system can allow personal expression while staying consistent.
The story
Google introduced Material You at I/O 2021 and Material 3 Expressive in May 2025. Google describes the latter as its most researched design update, drawing on 46 studies with over 18,000 participants.
How do you recognise Material You and Expressive?
- Colours derived from the user's wallpaper
- Tonal surfaces instead of heavy shadows
- Rounded shapes with varied radii
- Spring-based, responsive motion
Colour, type, layout and material
- #6750A4
- #EADDFF
- #FEF7FF
- #625B71
Typography. A clear type scale of display, headline, title, body and label roles, set in Roboto or a brand face, with weight used for emphasis.
Composition. Use containers and tonal surfaces to group content, large rounded shapes for key actions, and consistent spacing from a small scale.
Materials. Tonal colour roles, shape, elevation expressed by tone, and spring motion.
Why does Material You and Expressive work?
Personal colour can create a sense of ownership and delight. Because the system generates accessible tonal pairs, it also protects readability, which hand-picked palettes often do not.
The principle. Personalise within a system. Let the person's own colour drive the palette, and let the system guarantee roles, contrast and hierarchy so every combination still works.
Where it was used
Android 12 Material You and Android 16 Material 3 Expressive, Google, 2021 and 2025. Dynamic colour and expressive components shipped across Android and Google apps.
- Android and cross-platform apps
- Design systems with user theming
- Accessible colour generation
What to avoid
- Overriding dynamic colour with fixed brand tints everywhere
- Bright expressive shapes with no hierarchy
- Ignoring tonal contrast pairs
Try it: a short exercise
Take one brand colour and generate light and dark tonal surfaces from it. Build a card, a filled button and a tonal button, and check every text pair for contrast.
How do you prompt for Material You and Expressive?
These prompts ask for an original piece informed by the style, not a copy of any work. Replace the words in square brackets.
For an image or visual design
Create an original Material You and Expressive-informed [FORMAT] about [SUBJECT] for [AUDIENCE]. Use a tonal palette generated from one source colour: soft container fills, large rounded shapes, pill-shaped buttons and clear colour roles. Expressive but orderly. Use a disciplined palette drawn from #6750A4, #EADDFF, #FEF7FF, #625B71. Typography direction: A clear type scale of display, headline, title, body and label roles, set in Roboto or a brand face, with weight used for emphasis. Composition: Use containers and tonal surfaces to group content, large rounded shapes for key actions, and consistent spacing from a small scale. Make every detail follow a clear visual idea. Build the subject from observations specific to the brief, not stock symbols. Do not copy existing products, branding or screens. Return one resolved composition and explain three deliberate design decisions.
For an interface
Implement a contemporary responsive interface for [SUBJECT], serving [AUDIENCE], in [FORMAT], using Material You and Expressive as a design principle rather than a costume. Generate a tonal palette from one seed colour and use colour roles (primary, container, surface). Use filled, tonal and outlined buttons, large radii, tonal surfaces instead of shadows and spring-style motion. Check every text pair for contrast in light and dark. Use real content, semantic HTML, responsive CSS and a coherent spacing scale. Keep body text at WCAG AA contrast, never encode meaning only through colour, provide visible keyboard focus, touch targets of at least 44px, and working loading, empty, error and success states. Use motion only to explain interaction and respect prefers-reduced-motion. Explain which principles you translated and test keyboard navigation and mobile overflow.
Lineage
Draws on: Material Design, Flat design.