Material Design

マテリアルデザイン / 2014– / Style / Google UI

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 Design — Google, Material Design UI components — Wikimedia Commons / Public domain — Google, Material Design UI components — Wikimedia Commons / Public domain

Material Design — Google, Material Design 3 components, 2021 — Wikimedia Commons / CC BY 4.0 · © Google LLC — Google, Material Design 3 components, 2021 — Wikimedia Commons / CC BY 4.0 · CC BY 4.0 · © Google LLC

At a glance

Visual cues

Hierarchy and shadow expressed by elevation
Surfaces overlapping like sheets of paper
Motion that shows cause and effect
A standardized unit of spacing

Best used for

Distributing consistent behavior across several platforms
Communicating the depth of a hierarchy visually

Use this style

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

design.md image prompt JSON API MCP & machine access Compose

open in ChatGPT open in Claude open in Google AI

Detailed guidance and sourcesProduction rules, reference works, comparisons, research and citation formats

Dictionary entry

Type: Build the hierarchy from one type family and separate levels by weight and size.
Composition: Place elements on a grid of multiples of 8 and standardize the spacing.
Material: Give surfaces elevation and show front and back by the density of the shadow.
Caution: Do not add shadow as decoration. The moment the elevation rules break, the hierarchy is telling a lie.
Further study: The first specification of 2014 / The table matching elevation to shadow / The change into Material You

Related entries

Holo (ホロ)Same Google UI lineage.Compare Material Design and Holo
Flat Design / Vector Minimalism (フラットデザイン / ベクターミニマリズム)Shared effects: Trust / Play.Compare Material Design and Flat Design / Vector Minimalism

Often confused with

Flat Design / Vector Minimalism (フラットデザイン / ベクターミニマリズム)compare

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-design
Markdown: [Material Design — IndexStyle](https://indexstyle.org/styles/material-design)
HTML: <a href="https://indexstyle.org/styles/material-design">Material Design — IndexStyle</a>

Back to index position