# Flat Design

> An interface and illustration language that stripped screens of simulated materials, replacing bevels, gloss and textures with solid fields of colour, clean sans-serif type and reduced pictograms. Formalised in Microsoft's Metro design language (Windows Phone 7, 2010) and made mainstream by Apple's iOS 7 (2013), it applied Swiss modernist reduction to responsive, touch-first screens.

- Period: 2010–2016
- Where: North America, Global / networked
- Origin: Microsoft (Redmond) and Apple (Cupertino) interface teams, spread through Dribbble and web design
- Branch: Digital native
- Also known as: Flat UI, Metro style
- Page: https://stylogeny.com/styles/flat-design/

## How it works

- Remove every simulated material: no bevels, gloss, stitching, textures or drop shadows on controls.
- Signal what is tappable with colour, position and typography rather than imitated physical buttons.
- Draw icons as simple geometric pictograms on a shared grid and stroke weight.
- Use a handful of bright, saturated hues as solid blocks against white or one dark neutral.
- Let large, clean sans-serif type carry the hierarchy, with generous space around it.
- Arrange content in tiles and simple grids that reflow across screen sizes.

## 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/) (characteristic)
- [Cards & bento tiles](https://stylogeny.com/design-choices/cards-and-bento-tiles/) (characteristic)
- [Isolated object](https://stylogeny.com/design-choices/isolated-object/) (characteristic)

### Space & hierarchy
- [Generous white space](https://stylogeny.com/design-choices/generous-white-space/) (characteristic)
- [Measured density](https://stylogeny.com/design-choices/measured-density/) (characteristic)
- [Repetition & rhythm](https://stylogeny.com/design-choices/repetition-and-rhythm/) (characteristic)
- [Single focal point](https://stylogeny.com/design-choices/single-focal-point/) (occasional)

### Typography
- [Humanist sans](https://stylogeny.com/design-choices/humanist-sans/) (characteristic)
- [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)
- [Lowercase only](https://stylogeny.com/design-choices/lowercase-only/) (occasional)
- [Type as image](https://stylogeny.com/design-choices/type-as-image/) (occasional)

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

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

### Surface & texture
- [Flat](https://stylogeny.com/design-choices/flat/) (defining)
- [Hard offset shadow](https://stylogeny.com/design-choices/hard-offset-shadow/) (occasional)

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

### Imagery
- [Icons & pictograms](https://stylogeny.com/design-choices/icons-and-pictograms/) (defining)
- [Flat vector illustration](https://stylogeny.com/design-choices/flat-vector-illustration/) (characteristic)
- [Straight photography](https://stylogeny.com/design-choices/straight-photography/) (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)

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

Avoids: Skeuomorphic material, Gloss & highlights, Paper & letterpress bite, Grain & noise, Illusion of depth, Abundant decoration, Borders & frames, Ornamented display

Palette: #1abc9c, #3498db, #e74c3c, #f1c40f, #2c3e50, #ecf0f1

Typefaces: Segoe UI, Helvetica Neue, Open Sans, Proxima Nova, Lato

Known for: Microsoft Metro design language (Zune; Windows Phone 7, 2010; Windows 8, 2012); Apple iOS 7 (2013); Google Android 4.0 'Holo' interface (2011); Designmodo, Flat UI kit (2013)

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

- Grew out of: [International Typographic Style](https://stylogeny.com/styles/swiss-international.md) (1950–1975)
- Influenced by: [Minimalist Graphic Design](https://stylogeny.com/styles/minimalism.md) (1965–present)
- Influenced by: [Isotype Pictorial Statistics](https://stylogeny.com/styles/isotype.md) (1925–1971)
- Led to: [GOV.UK Design (GDS Style)](https://stylogeny.com/styles/govuk-design-system.md) (2012–present)
- Led to: [Material Design](https://stylogeny.com/styles/material-design.md) (2014–present)
- Led to: [Corporate Memphis](https://stylogeny.com/styles/corporate-memphis.md) (2017–present)
- Alike in its design choices: [HfG Ulm Systematic Design](https://stylogeny.com/styles/ulm-school.md) (1953–1968), 70% alike
- Alike in its design choices: [Contemporary Arabic & Dual-Script Type Design](https://stylogeny.com/styles/arabic-latin-bilingual-type.md) (2004–present), 69% 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: [Corporate Identity Modernism](https://stylogeny.com/styles/corporate-modernism.md) (1955–1990), 63% alike
- Alike in its design choices: [Munich 1972 Olympic Design (Otl Aicher)](https://stylogeny.com/styles/munich-72.md) (1966–1972), 62% alike
- Alike in its design choices: [Generative & Dynamic Identities](https://stylogeny.com/styles/generative-identity.md) (2007–present), 62% alike

## Real works

- [Windows Phone 7 home page ("Say hello to Windows Phone")](https://web.archive.org/web/20101012124330/http://www.microsoft.com/windowsphone/en-us/default.aspx): Microsoft, October 2010 (archived 12 October 2010), Internet Archive Wayback Machine
- [Flat UI – User Interface Pack (product page)](https://web.archive.org/web/20130307172758/http://designmodo.com/flat/): Designmodo, March 2013 (archived 7 March 2013), Internet Archive Wayback Machine
- [iOS 7 overview page ("The mobile OS from a whole new perspective")](https://web.archive.org/web/20130920043843/http://www.apple.com/ios/): Apple, September 2013 (archived 20 September 2013), Internet Archive Wayback Machine
- [Rocket icon, from the free "Science" round icon set](https://commons.wikimedia.org/wiki/File:Creative-Tail-rocket.svg): Creative Tail, 16 April 2015, Wikimedia Commons

## Sources

- Kate Meyer, 'Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users', Nielsen Norman Group (2015)
- Wikipedia, 'Flat design' (en.wikipedia.org/wiki/Flat_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, “Flat Design”, https://stylogeny.com/styles/flat-design/