Material Design × Metro

Layered paper and shadow against Metro's single flat plane; mix elevation into tiles only to signal interaction.

From the research on Metro (Microsoft Design Language)

Mix them and make something Material Design Metro

A sample layout drawn from the recipe: shapes from Metro, their arrangement from Material Design, the finish from Material Design. Not a real work, and not an image of either style.

What each style brings

Each part of the design comes from the style with the stronger say in it, and each style gives at least two.

Material Design Metro (Microsoft Design Language)

Type from Metro: Humanist sans
Type as image
Colour from Metro: Flat fields
Limited spot colours
Form from Metro: Rectilinear
Pictogram
Composition from Material Design: Modular grid
Illusion of depth

Metro avoids illusion of depth: this is where the two pull against each other, which is the point of the contrast.
Surface from Material Design: Flat

The type

Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.

Display · Metro

Grid

Inter, standing in for Segoe UI

Text · Metro

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.

Inter; Metro used Segoe UI and Segoe WP

The colours

The ground and leading colours come from Metro, with a counter-accent from Material Design. The ink reads on the ground at 4.5:1 or more.

Material Design Metro (Microsoft Design Language)

#ffffff ground · 36%
#000000 ink · 14%
#fa6800 accent · 18%
#ffc107 accent · 14%
#d80073 accent · 10%
#ff4081 accent · 8%

As CSS

:root {
  --ground: #ffffff;
  --ink: #000000;
  --accent-1: #fa6800;
  --accent-2: #ffc107;
  --accent-3: #d80073;
  --accent-4: #ff4081;
  --font-display: "Inter", sans-serif;
  --font-text: "Inter", sans-serif;
}

The two styles

A plant-care homepage titled Sproutly features a large “Greener Days” headline beside an illustrated potted plant and light, water, and growth indicators. Below are four feature links and four colorful plant-category cards showing tropical plants, a snake plant, a trailing plant, and a succulent.

2014–present · North America, Global / networked Material Design Google's design system, launched in 2014, which reintroduced controlled depth to flat design through the metaphor of 'material': sheets of digital paper and ink that sit at defined elevations, cast consistent shadows and move with meaningful motion. Built on an 8dp grid, Roboto and a bold primary-and-accent colour scheme, it later evolved into the personalised, tonal Material You (2021).

A black poster reads “MOVE MORE” in large white letters above a white running-person symbol on a blue panel. A right-hand column contains white symbols of a sun, a leaf, ascending bars, and a right-pointing arrow, with blue, green, orange, and black backgrounds.

2010–2017 · Global / networked, North America 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.

More combinations

With Material Design

With Metro

Every style combination