Metro

メトロ / 2010–2015 / Style / Microsoft UI

Windows Phone's flat language, which cast type rather than icons in the lead role. Large typography, flat-color live tiles and layouts that run off the edge of the screen transplanted the clarity of transit signage into UI, opening the flat era ahead of iOS 7.

Metro — AI-generated interpretation 1 — AI-generated interpretation, not a reference work

Metro — Microsoft Zune HD radio screen — Wikimedia Commons / CC BY-SA 2.0 · © Manimecker — Microsoft Zune HD radio screen — Wikimedia Commons / CC BY-SA 2.0 · CC BY-SA 2.0 · © Manimecker

Metro — Microsoft Windows Phone 7 tile screen 2010 — Wikimedia Commons / CC BY 2.0 · © Microsoft Sweden — Microsoft Windows Phone 7 tile screen 2010 — Wikimedia Commons / CC BY 2.0 · CC BY 2.0 · © Microsoft Sweden

At a glance

Visual cues

Type as the hero
Flat-color tiles
Compositions running off-screen
Chrome eliminated

Best used for

Dashboards listing news or weather where borders would only add noise
Indoor wayfinding and signage read from a distance in one word

Use this style

Take the compact brief into a project or hand the structured version to an AI tool.

design.md image prompt JSON API MCP & machine access Compose

open in ChatGPT open in Claude open in Google AI

Detailed guidance and sourcesProduction rules, reference works, comparisons, research and citation formats

Dictionary entry

Type: Headings five times body size, kept in a light weight
Composition: Headings running off the edge, tiles in two rectangle sizes
Material: No shadows or borders, black or white ground, saturated flat panels
Caution: Stripping every border and shadow erases the difference between a tappable tile and a plain heading, leaving people guessing where to touch.
Further study: from Zune HD to Windows Phone 7 / the transit-signage influence behind the name / the inheritance into Fluent

Related entries

Flat Design / Vector Minimalism (フラットデザイン / ベクターミニマリズム)Shared effects: Trust.Compare Metro and Flat Design / Vector Minimalism
Swiss (スイス・スタイル)Shared effects: Trust.Compare Metro and Swiss

Often confused with

Flat Design / Vector Minimalism (フラットデザイン / ベクターミニマリズム)compare

Cite this entry

The dictionary is meant to be linked to. Take whichever form fits where you are writing.

Link: https://indexstyle.org/styles/metro
Markdown: [Metro — IndexStyle](https://indexstyle.org/styles/metro)
HTML: <a href="https://indexstyle.org/styles/metro">Metro — IndexStyle</a>

Back to index position