---
name: Metro
slug: metro-design
category: aesthetic
status: published
created: 2026-08-21T00:00:00.000Z
modified: 2026-08-21T00:00:00.000Z
definition: Microsoft's typography led design language of flat coloured tiles,
  large light headings, and motion used in place of chrome, shadow, and texture.
aliases:
  - name: Modern UI
    source: microsoft
  - name: Windows Phone design
  - name: Microsoft design language
  - name: tile UI
    source: community
tags:
  - retro
relations:
  contrastWith:
    - flat-design
    - frutiger-metro
  variantOf: []
  partOf: []
  seeAlso:
    - windows-aero
    - long-shadow
implementations: []
sources:
  - title: "Wikipedia: Metro (design language)"
    url: https://en.wikipedia.org/wiki/Metro_(design_language)
demo: inline
exhibit: false
useWhen: flat coloured tiles and oversized light headings
---

Metro arrived on the Zune in 2006 and reached its full form on Windows Phone 7 in 2010,
before being pushed onto the desktop in Windows 8. Its rules were unusually explicit for a
visual language. Type carries the hierarchy, set in Segoe at a wide range of sizes with the
large sizes in a light weight and mostly lowercase. Surfaces are flat colour with no
gradient, no bevel, no drop shadow, and no texture. Chrome is stripped so that content sits
directly on the background, and the live tile replaces the icon, since a tile can show the
weather or the next message rather than only naming an app. Movement does the work chrome
used to do: panels slide, letters fly in and out, and the transition tells you where you
went. Panorama headings deliberately run off the edge of the screen, which says there is
more to the right and doubles as decoration.

The phrase the team used for it was "authentically digital", meaning a screen should not
pretend to be paper, leather, or brushed aluminium. The reference points offered were
transport signage and airport wayfinding, which is where the name came from, and the
underlying discipline was Swiss. Setting it beside [Swiss style](/swiss-style) makes the
debt obvious: a grid, a neo-grotesque, flush left type, generous space, and ornament
treated as dishonest. What Metro added was colour used as a flat block rather than as a
single accent, and motion, which print could not have.

Its place in the timeline is usually got wrong. Metro came before the flat wave, not with
it. [Flat design](/flat-design) as the industry adopted it, and the corrective that
followed in [flat design 2](/flat-design-2), both arrived after Metro had already shipped a
shadowless, textureless, typography led system at scale, and iOS 7 in 2013 is the moment
the rest of the industry turned. Metro is the ancestor, and the reason the family looks the
way it does.

It also failed in an instructive way. Flat colour with no edges removed the boundary
between a control and a background, so tappable and non tappable looked alike, which is the
affordance problem [flat design 2](/flat-design-2) was invented to fix. Light weight type
at large sizes is elegant and thins out badly on low resolution screens and low contrast
backgrounds. Headings cut off at the viewport edge read as a deliberate signal to people
who have learned it and as a rendering bug to everyone else. And live tiles asked every app
to have something worth saying at all times, which most did not. What survives is the good
part: content over chrome, type as the main instrument, and colour used in confident flat
blocks.