# Metro (Microsoft Design Language)

> An interface language from Microsoft that put typography ahead of chrome: large light sans-serif headings, flat rectangular Live Tiles, lateral panoramic scrolling and bold single accent colours on dark or white grounds. It borrowed from Swiss graphic design and public transport signage, and gave way to Fluent Design from 2017.

- Period: 2010–2017
- Where: Global / networked, North America
- Origin: Microsoft, Redmond, USA: unveiled as the Windows Phone 7 Series interface in February 2010, with earlier traces in Windows Media Center and the Zune software; the name Metro was dropped in 2012 for Microsoft design language after a reported trademark concern
- Branch: Digital native
- Also known as: Metro UI, Modern UI, Windows Phone 7 design
- Page: https://stylogeny.com/styles/microsoft-metro/

## How it works

- Put content before chrome: let type and data replace buttons, frames and bezels.
- Build screens from flat rectangular tiles on a strict grid with generous gutters.
- Set oversized, light-weight Segoe headings flush left and cut off at the screen edge to invite panning.
- Choose one saturated accent colour per theme and apply it to flat fields on a dark or white ground.
- Reduce icons to simple monoline glyphs and let motion confirm every touch and transition.
- Use small all-caps labels for section and app titles.

## 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)
- [Dynamic asymmetry](https://stylogeny.com/design-choices/dynamic-asymmetry/) (characteristic)
- [Full bleed](https://stylogeny.com/design-choices/full-bleed/) (characteristic)
- [Column grid](https://stylogeny.com/design-choices/column-grid/) (occasional)

### Space & hierarchy
- [Extreme scale contrast](https://stylogeny.com/design-choices/extreme-scale-contrast/) (defining)
- [Generous white space](https://stylogeny.com/design-choices/generous-white-space/) (characteristic)
- [Repetition & rhythm](https://stylogeny.com/design-choices/repetition-and-rhythm/) (characteristic)
- [Flat hierarchy](https://stylogeny.com/design-choices/flat-hierarchy/) (occasional)

### Typography
- [Humanist sans](https://stylogeny.com/design-choices/humanist-sans/) (defining)
- [Flush left, ragged right](https://stylogeny.com/design-choices/flush-left-ragged-right/) (defining)
- [Type as image](https://stylogeny.com/design-choices/type-as-image/) (characteristic)
- [All caps](https://stylogeny.com/design-choices/all-caps/) (characteristic)
- [Lowercase only](https://stylogeny.com/design-choices/lowercase-only/) (occasional)

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

### Form & shape
- [Rectilinear](https://stylogeny.com/design-choices/rectilinear/) (defining)
- [Pictogram](https://stylogeny.com/design-choices/pictogram/) (characteristic)
- [Non-representational](https://stylogeny.com/design-choices/non-representational/) (occasional)

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

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

### Imagery
- [Typography only](https://stylogeny.com/design-choices/typography-only/) (characteristic)
- [Icons & pictograms](https://stylogeny.com/design-choices/icons-and-pictograms/) (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)
- [Motion & broadcast](https://stylogeny.com/design-choices/motion-and-broadcast/) (characteristic)
- [Web & CSS](https://stylogeny.com/design-choices/web-and-css/) (occasional)

### Tone & intent
- [Rational & objective](https://stylogeny.com/design-choices/rational-and-objective/) (defining)
- [Technological & futurist](https://stylogeny.com/design-choices/technological-and-futurist/) (characteristic)
- [Authoritative & institutional](https://stylogeny.com/design-choices/authoritative-and-institutional/) (occasional)

Avoids: Skeuomorphic material, Gloss & highlights, Frosted glass, Illusion of depth, Rounded & pill, Abundant decoration, Borders & frames, Gradients, Ornamented display

Palette: #ffffff, #000000, #1ba1e2, #d80073, #60a917, #fa6800

Typefaces: Segoe UI, Segoe WP, Zegoe UI

Known for: Windows Phone 7 (unveiled February 2010, released October 2010); Zune software and Zune HD; Xbox 360 dashboard update and Xbox One interface; Windows 8 Start screen (2012); Outlook.com (2012)

## 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)
- Influenced by: [Die Neue Typographie](https://stylogeny.com/styles/new-typography.md) (1923–1940)
- Alike in its design choices: [Total Design & Dutch Functionalism](https://stylogeny.com/styles/dutch-total-design.md) (1963–1990), 76% alike
- Alike in its design choices: [Neo-Swiss Revival](https://stylogeny.com/styles/swiss-revival.md) (2005–present), 73% alike
- Alike in its design choices: [Contemporary Arabic & Dual-Script Type Design](https://stylogeny.com/styles/arabic-latin-bilingual-type.md) (2004–present), 72% alike
- Alike in its design choices: [Roman-like Thai Typography (modern loopless Thai)](https://stylogeny.com/styles/thai-loopless-type.md) (1973–present), 70% alike
- Alike in its design choices: [HfG Ulm Systematic Design](https://stylogeny.com/styles/ulm-school.md) (1953–1968), 66% alike
- Alike in its design choices: [Schematic Transit Diagram (Beck Tube Map Idiom)](https://stylogeny.com/styles/transit-diagram-map.md) (1931–present), 66% alike

## Sources

- https://en.wikipedia.org/wiki/Metro_(design_language)
- https://en.wikipedia.org/wiki/Windows_Phone_7
- https://en.wikipedia.org/wiki/Fluent_Design_System

---

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, “Metro (Microsoft Design Language)”, https://stylogeny.com/styles/microsoft-metro/