# 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.

- IndexStyle No.503 — https://indexstyle.org/styles/material-design
- Kind: Style · Family: Google UI · Era: 2014–
- Mood: Trust, Technology, Play
- Color cues: #e9e6dd / #67635d / #171615 (cues taken from reference works, not a fixed palette)

## Defining characteristics

- 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

## Composition recipe

- Typography & lettering: Build the hierarchy from one type family and separate levels by weight and size.
- Layout & structure: Place elements on a grid of multiples of 8 and standardize the spacing.
- Material & texture: Give surfaces elevation and show front and back by the density of the shadow.

## What to avoid

Do not add shadow as decoration. The moment the elevation rules break, the hierarchy is telling a lie.

## Application checklist

Before calling a piece an application of this style, check it against the defining characteristics:

- [ ] Hierarchy and shadow expressed by elevation
- [ ] Surfaces overlapping like sheets of paper
- [ ] Motion that shows cause and effect
- [ ] A standardized unit of spacing
- [ ] At least one reference work below has been studied directly
- [ ] The caution above ("What to avoid") has been addressed

## Related styles

- **Material You / Material 3 (マテリアル・ユー／マテリアル3)** — Derives a color system from the user's wallpaper and choices, adapting shape, color, motion and components to the individual. → https://indexstyle.org/styles/material-you
- **Flat Design / Vector Minimalism (フラットデザイン / ベクターミニマリズム)** — Reduces information to plain planes and color, portable across screens and media. → https://indexstyle.org/styles/flat-design

## Further study

- The first specification of 2014
- The table matching elevation to shadow
- The change into Material You

## Reference works

- Google《Material Design》のUIコンポーネント — Wikimedia Commons / Public domain — https://commons.wikimedia.org/wiki/File:Material%20Design.svg
- Google《Material Design 3》のコンポーネント 2021 — Wikimedia Commons / CC BY 4.0 — https://commons.wikimedia.org/wiki/File:Material%20Design%203.svg
- Google《Material You》ライトテーマの画面 2021 — Wikimedia Commons / CC BY 4.0 — https://commons.wikimedia.org/wiki/File:Material%20you%20light.png

## Source of record

- Material Design — Google — https://m3.material.io/

## Machine surfaces

- JSON: https://indexstyle.org/api/styles/material-design
- Image-generation prompt (legally clean): https://indexstyle.org/styles/material-design/prompt.txt
- MCP: https://indexstyle.org/mcp (tools: search_styles, get_style, compose_styles; prompts: image-prompt, apply-style)

## 日本語

紙とインクという物理の比喩を、影と重なりの規則へ落とし込んだ設計体系。要素に高さを与え、影で階層を示し、動きに物理的な因果を持たせる。以後のUI設計が「体系として配布される」ことの雛形になった。

特徴: 高さで表す階層と影／紙のような面の重なり／因果を示すモーション／規格化された余白の単位
注意: 影を飾りとして足さない。高さの規則が破れた瞬間に階層の情報が嘘になる。