# Material Design

> Google's design system, launched in 2014, which reintroduced controlled depth to flat design through the metaphor of 'material': sheets of digital paper and ink that sit at defined elevations, cast consistent shadows and move with meaningful motion. Built on an 8dp grid, Roboto and a bold primary-and-accent colour scheme, it later evolved into the personalised, tonal Material You (2021).

- Period: 2014–present
- Where: North America, Global / networked
- Origin: Google, Mountain View, California
- Branch: Digital native
- Also known as: Material, Material You, Material 3
- Page: https://stylogeny.com/styles/material-design/

## How it works

- Treat every element as a sheet of material at a defined elevation and express that elevation with consistent, light-source-based shadows.
- Snap components, spacing and type to an 8dp baseline grid inside a responsive column layout.
- Pick a primary and an accent colour (or derive tonal palettes from one seed colour) and use them to mark hierarchy and action.
- Choreograph motion so surfaces expand, slide and transform in ways that show where content comes from.
- Mark the single most important action on a screen with a prominent floating action button.
- Build hierarchy from a modular type scale in Roboto, using size and weight rather than ornament.

## Its design choices

Defining choices make the style, characteristic ones are usual, occasional ones turn up now and then.

### Layout & composition
- [Modular grid](https://stylogeny.com/design-choices/modular-grid/) (defining)
- [Column grid](https://stylogeny.com/design-choices/column-grid/) (characteristic)
- [Cards & bento tiles](https://stylogeny.com/design-choices/cards-and-bento-tiles/) (characteristic)
- [Full bleed](https://stylogeny.com/design-choices/full-bleed/) (occasional)

### Space & hierarchy
- [Illusion of depth](https://stylogeny.com/design-choices/illusion-of-depth/) (defining)
- [Measured density](https://stylogeny.com/design-choices/measured-density/) (characteristic)
- [Layered information](https://stylogeny.com/design-choices/layered-information/) (characteristic)
- [Single focal point](https://stylogeny.com/design-choices/single-focal-point/) (occasional)

### Typography
- [Grotesque & neo-grotesque](https://stylogeny.com/design-choices/grotesque-and-neo-grotesque/) (characteristic)
- [Flush left, ragged right](https://stylogeny.com/design-choices/flush-left-ragged-right/) (characteristic)
- [Geometric sans](https://stylogeny.com/design-choices/geometric-sans/) (occasional)
- [All caps](https://stylogeny.com/design-choices/all-caps/) (occasional)

### Colour
- [Flat fields](https://stylogeny.com/design-choices/flat-fields/) (defining)
- [Limited spot colours](https://stylogeny.com/design-choices/limited-spot-colours/) (characteristic)
- [Light ground](https://stylogeny.com/design-choices/light-ground/) (characteristic)
- [Dark ground](https://stylogeny.com/design-choices/dark-ground/) (occasional)
- [Analogous harmony](https://stylogeny.com/design-choices/analogous-harmony/) (occasional)
- [Full polychrome](https://stylogeny.com/design-choices/full-polychrome/) (occasional)

### Form & shape
- [Rounded & pill](https://stylogeny.com/design-choices/rounded-and-pill/) (characteristic)
- [Geometric primitives](https://stylogeny.com/design-choices/geometric-primitives/) (characteristic)
- [Pictogram](https://stylogeny.com/design-choices/pictogram/) (characteristic)
- [Rectilinear](https://stylogeny.com/design-choices/rectilinear/) (occasional)

### Surface & texture
- [Flat](https://stylogeny.com/design-choices/flat/) (characteristic)

### Ornament
- [Ornament-free](https://stylogeny.com/design-choices/ornament-free/) (characteristic)

### Imagery
- [Icons & pictograms](https://stylogeny.com/design-choices/icons-and-pictograms/) (defining)
- [Straight photography](https://stylogeny.com/design-choices/straight-photography/) (characteristic)
- [Flat vector illustration](https://stylogeny.com/design-choices/flat-vector-illustration/) (occasional)

### Medium & production
- [App & OS interface](https://stylogeny.com/design-choices/app-and-os-interface/) (defining)
- [Web & CSS](https://stylogeny.com/design-choices/web-and-css/) (characteristic)
- [Motion & broadcast](https://stylogeny.com/design-choices/motion-and-broadcast/) (characteristic)

### Tone & intent
- [Rational & objective](https://stylogeny.com/design-choices/rational-and-objective/) (characteristic)
- [Playful & witty](https://stylogeny.com/design-choices/playful-and-witty/) (occasional)
- [Warm & approachable](https://stylogeny.com/design-choices/warm-and-approachable/) (occasional)

Avoids: Skeuomorphic material, Gloss & highlights, Grain & noise, Photocopy & distress, Abundant decoration, Ornamented display, Experimental & distorted, Collage & layering

Palette: #3f51b5, #ff4081, #009688, #ffc107, #fafafa, #212121

Typefaces: Roboto, Google Sans (Product Sans), Roboto Flex, Noto

Known for: Google Material Design guidelines (announced at Google I/O, 2014); Matías Duarte (Google VP of Design); Android 5.0 Lollipop (2014); Material You / Material 3 (Android 12, 2021); Christian Robertson, Roboto typeface (2011); Material Icons and Material Symbols

## Where it comes from, and what it’s close to

- Grew out of: [Flat Design](https://stylogeny.com/styles/flat-design.md) (2010–2016)
- Influenced by: [International Typographic Style](https://stylogeny.com/styles/swiss-international.md) (1950–1975)
- Alike in its design choices: [HfG Ulm Systematic Design](https://stylogeny.com/styles/ulm-school.md) (1953–1968), 68% alike
- Alike in its design choices: [Munich 1972 Olympic Design (Otl Aicher)](https://stylogeny.com/styles/munich-72.md) (1966–1972), 67% alike
- Alike in its design choices: [Roman-like Thai Typography (modern loopless Thai)](https://stylogeny.com/styles/thai-loopless-type.md) (1973–present), 66% alike
- Alike in its design choices: [Newsroom Data Graphics & Scrollytelling](https://stylogeny.com/styles/newsroom-data-graphics.md) (2009–present), 66% alike
- Alike in its design choices: [Contemporary Arabic & Dual-Script Type Design](https://stylogeny.com/styles/arabic-latin-bilingual-type.md) (2004–present), 65% alike
- Alike in its design choices: [Corporate Identity Modernism](https://stylogeny.com/styles/corporate-modernism.md) (1955–1990), 62% alike

## Real works

- [Material Design guidelines: Introduction (google.com/design/spec)](https://web.archive.org/web/20140626085453/http://www.google.com/design/spec/material-design/introduction.html): Google (Material Design team led by Matías Duarte), June 2014 (archived 26 June 2014, the day after its announcement at Google I/O), Internet Archive Wayback Machine
- [Material Design: Design (material.io/design), Material Theming era](https://web.archive.org/web/20190102140902/https://material.io/design/): Google, 2018 site (Material Theming, launched May 2018), archived 2 January 2019, Internet Archive Wayback Machine
- [Material Design 3: 'Introducing Material You' (m3.material.io)](https://web.archive.org/web/20211027170211/https://m3.material.io/): Google, October 2021 (archived 27 October 2021; Material You announced May 2021), Internet Archive Wayback Machine
- [Material 3 Design Kit: 'Material You in light mode' component screen](https://commons.wikimedia.org/wiki/File:Material_you_light.png): Google (Material Design team), 2021–2023 (kit published on Figma Community in 2021; this export uploaded 2 April 2023), Wikimedia Commons (export from Google's Material 3 Design Kit, Figma Community file 1035203688168086460)

## Sources

- Google, Material Design guidelines (material.io; m3.material.io)
- Wikipedia, 'Material Design' (en.wikipedia.org/wiki/Material_Design)

---

From Stylogeny (https://stylogeny.com/), an atlas of graphic-design styles by Van Riel Online Services. How it is made: https://stylogeny.com/about/. Cite as: Stylogeny, “Material Design”, https://stylogeny.com/styles/material-design/