Material Design vs Material You
マテリアルデザイン / Material You
Both sit in Google UI, so the question is not what they belong to but how they behave. 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. The 2021 revision added colour derived from the device wallpaper, so the palette differs from one user to the next.
Material You
.jpg)
Material You makes adaptability itself consistent: dynamic color, generous shapes and personalized motion vary by person while semantic roles stay stable.
| Material Design | Material You | |
|---|---|---|
| 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 | Harmonized colors derived from wallpaper / Large rounded cards and controls / Selection changes both color and shape / Broad spacing and large display type |
| Best used for | Distributing consistent behavior across several platforms · Communicating the depth of a hierarchy visually | Safely reflecting a user's palette in a product · Letting one component system support varied personal appearances |
| Type | Build the hierarchy from one type family and separate levels by weight and size. | Keep hierarchy in weight and scale so it survives changes of color. |
| Composition | Place elements on a grid of multiples of 8 and standardize the spacing. | Set large rounded surfaces in generous space and express selection through shape, color and motion together. |
| Material | Give surfaces elevation and show front and back by the density of the shadow. | Generate tonal palettes from a seed, then assign them to semantic surface and content roles. |
| Caution | Do not add shadow as decoration. The moment the elevation rules break, the hierarchy is telling a lie. | Automatic color generation alone can produce unreadable interfaces. Contrast and semantic roles come first. |