Glassmorphism × Metro

Translucent depth against opaque flat colour blocks; use blur sparingly to soften an overly stark tile wall.

From the research on Metro (Microsoft Design Language)

Mix them and make something Glassmorphism Metro

A sample layout drawn from the recipe: shapes from Glassmorphism, their arrangement from Metro, the finish from Glassmorphism. 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.

Glassmorphism Metro (Microsoft Design Language)

Type from Metro: Humanist sans
Type as image
Colour from Metro: Flat fields
Limited spot colours
Form from Glassmorphism: Rounded & pill
Biomorphic curves

Metro avoids rounded & pill: this is where the two pull against each other, which is the point of the contrast.
Composition from Metro: Modular grid
Extreme scale contrast
Surface from Glassmorphism: Frosted glass

Metro avoids frosted glass: this is where the two pull against each other, which is the point of the contrast.

The type

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

Display · Metro

Future

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 Glassmorphism. The ink reads on the ground at 4.5:1 or more.

Glassmorphism Metro (Microsoft Design Language)

#ffffff ground · 36%
#000000 ink · 14%
#fa6800 accent · 18%
#2cb1fc accent · 14%
#d80073 accent · 10%
#7f5af0 accent · 8%

As CSS

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

The two styles

A vivid blue, purple and pink focus-timer interface features a large translucent circular timer reading 25:00 with a play button. Glossy abstract shapes surround glass-like navigation tabs, a session bar chart and two habit-building cards.

2020–present · Global / networked Glassmorphism An interface style of translucent, frosted panels floating over vivid, blurred backgrounds, so that depth and hierarchy come from layered transparency. Rooted in Windows Aero glass, the blur layers of iOS 7 and Fluent Design's Acrylic, it was named in 2020 around the launch of macOS Big Sur and returned in 2025 as Apple's refractive Liquid Glass.

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 Glassmorphism

With Metro

Every style combination