Flat Design / Vector Minimalism vs Material You / Material 3
フラットデザイン / ベクターミニマリズム / マテリアル・ユー／マテリアル3
Flat Design / Vector Minimalism comes from UI Expression and Material You / Material 3 from Google UI. Both are read here as style. They are reached for with some of the same intent, which is where they get confused.
Flat Design / Vector Minimalism
Reduces information to plain planes and color, portable across screens and media.
Material You / Material 3
Derives a color system from the user's wallpaper and choices, adapting shape, color, motion and components to the individual.
| Flat Design / Vector Minimalism | Material You / Material 3 | |
|---|---|---|
| Era | 2010s– | 2021– |
| Family | UI Expression | Google UI |
| Kind | Style | Style |
| Cues | Uniform planes / Simple shapes / Few shadows / Clear color | Dynamic color / Large corner radii / Personalized themes / Adaptive components |
| Best used for | Light, understandable explanation · Large sets of consistent figures | 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 | A rounded sans-serif | Assign text colors by role and keep raw values out of screen code. |
| Composition | Simple silhouettes and clear hierarchy | Keep corner radii as a scale by role and choose by component size. |
| Material | Three to five colors; shadows only when they mean something | Verify contrast in both light and dark for every wallpaper derived palette. |
| Caution | Figures easily become generic. Define your own ratios, lines and color rules. | 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. |