Metro

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 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 as the industry adopted it, and the corrective that followed in 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 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.