Material Design vs Material You / Material 3
マテリアルデザイン / マテリアル・ユー／マテリアル3
Both sit in Google UI, so the question is not what they belong to but how they behave. Both are read here as style. They are reached for with some of the same intent, which is where they get confused.
Material Design
A design system that reduces the physical metaphor of paper and ink to rules of shadow and overlap. Elements are given elevation, shadow states the hierarchy, and motion carries physical cause and effect. It became the model for UI design being distributed as a system.
Material You / Material 3
Derives a color system from the user's wallpaper and choices, adapting shape, color, motion and components to the individual.
| Material Design | Material You / Material 3 | |
|---|---|---|
| Era | 2014– | 2021– |
| Family | Google UI | Google UI |
| Kind | Style | Style |
| Cues | Hierarchy and shadow expressed by elevation / Surfaces overlapping like sheets of paper / Motion that shows cause and effect / A standardized unit of spacing | Dynamic color / Large corner radii / Personalized themes / Adaptive components |
| Best used for | Distributing consistent behavior across several platforms · Communicating the depth of a hierarchy visually | Android apps that honor the user's color choice and keep the palette intact from device to device · Personal tools where choosing the color is what the user owns, and one system stretched across several brands |
| Type | Build the hierarchy from one type family and separate levels by weight and size. | Assign text colors by role and keep raw values out of screen code. |
| Composition | Place elements on a grid of multiples of 8 and standardize the spacing. | Keep corner radii as a scale by role and choose by component size. |
| Material | Give surfaces elevation and show front and back by the density of the shadow. | Verify contrast in both light and dark for every wallpaper derived palette. |
| Caution | Do not add shadow as decoration. The moment the elevation rules break, the hierarchy is telling a lie. | Pale tints and big radii are not the system, so design color roles, states, accessibility and user driven variation, and keep a brand hue so the app stays recognizable. |