Material You

Material You / 2021– / Style / Google UI

Material You makes adaptability itself consistent: dynamic color, generous shapes and personalized motion vary by person while semantic roles stay stable.

Material You — Google《マテリアル3のコンポーネント》2021 — Wikimedia Commons / CC BY 4.0 · © Google LLC
Google《マテリアル3のコンポーネント》2021 — Wikimedia Commons / CC BY 4.0 · CC BY 4.0 · © Google LLC
Material You — Android 12 の壁紙由来カラーを表示した折りたたみ端末 2021年 — Wikimedia Commons / CC BY 3.0 · © The photo: Own work The logos: Google LLC
Android 12 の壁紙由来カラーを表示した折りたたみ端末 2021年 — Wikimedia Commons / CC BY 3.0 · CC BY 3.0 · © The photo: Own work The logos: Google LLC

At a glance

Visual cues

  • 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

  • Safely reflecting a user's palette in a product
  • Letting one component system support varied personal appearances

Use this style

Take the compact brief into a project or hand the structured version to an AI tool.

design.mdimage promptJSON APIMCP & machine accessCompose
open in ChatGPTopen in Claudeopen in Google AI
Detailed guidance and sourcesProduction rules, reference works, comparisons, research and citation formats

Dictionary entry

Type
Keep hierarchy in weight and scale so it survives changes of color.
Composition
Set large rounded surfaces in generous space and express selection through shape, color and motion together.
Material
Generate tonal palettes from a seed, then assign them to semantic surface and content roles.
Caution
Automatic color generation alone can produce unreadable interfaces. Contrast and semantic roles come first.
Further study
Dynamic color / Material 3 shape system / Personalization and accessibility

Related entries

More from Google UI

Continue through styles in the same Google UI family, prioritised by shared effects.

Browse all Google UI entries

Cite this entry

The dictionary is meant to be linked to. Take whichever form fits where you are writing.

Link
https://indexstyle.org/styles/material-you
Markdown
[Material You — IndexStyle](https://indexstyle.org/styles/material-you)
HTML
<a href="https://indexstyle.org/styles/material-you">Material You — IndexStyle</a>

Back to index position