# Material Design

> A design language built on the metaphor of paper and ink: surfaces have real elevation and cast real shadows; colour and motion convey meaning.

- Category: Digital era
- Era: 2014–present
- Origin: Google, Mountain View, USA — announced at Google I/O 2014
- Lesson: https://design.dawit.dev/styles/material-design
- Try it: https://design.dawit.dev/styles/material-design?style=material-design

## Where it came from

Google unveiled Material Design at I/O 2014 as a unified system for Android, Chrome and web apps. The core metaphor is physical: surfaces are paper sheets that can be stacked, split and stretched but not pass through each other. Material 2 (2018) added 'Material Theming' for per-brand customisation. Material 3 (2021, also called Material You) added dynamic colour extracted from the user's wallpaper and shifted to a more expressive, rounded visual language.

## How to spot it

- Elevation model: surfaces at specific heights cast defined shadows
- Ripple ink animation on touch
- Tonal surface layers derived from a primary colour
- Roboto typeface and generous large-screen whitespace

## Strengths

- Deep, consistent design tokens for theming
- Animation guidelines make motion feel principled, not arbitrary
- Large component library for every platform

## Weaknesses

- Unmistakably 'Google' — hard to use for strong individual brand identities
- Elevation depth model requires discipline to not over-use
- Material You's dynamic colour system is complex to implement on the web

## In the wild

- Google Inbox (2014)
- Android system UI
- Google Workspace apps

## Use it when

Android apps, or web products that want depth, motion polish and a well-documented token system.

## Related styles
[Flat 2.0](https://design.dawit.dev/styles/flat-2.md), [Fluent Design](https://design.dawit.dev/styles/fluent.md), [Card UI](https://design.dawit.dev/styles/card-ui.md)