Stylogeny combining Glassmorphism × Material Design

Try

Style combination · Pairs well

Glassmorphism × Material Design

Replace opaque sheets with frosted panes at the highest elevations (dialogs, navigation) so the stack stays legible over imagery.

From the research on Material Design

Mix them and make something Glassmorphism Material Design

IndexGlassmorphism × Material Design2020 · 2014
A sample layout drawn from the recipe: shapes from Glassmorphism, their arrangement from Material Design, the finish from Glassmorphism. Not a real work, and not an image of either style.

01

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 Material Design

Type from Material Design
Colour from Glassmorphism
Form from Glassmorphism
Composition from Material Design
Surface from Glassmorphism

02

The type

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

Display · Material Design

Index

Inter, standing in for Roboto

Text · 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).

Inter; Material Design used Roboto and Google Sans

03

The colours

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

Glassmorphism Material Design

  • #1b1a33 ground · 36%
  • #ffffff ink · 14%
  • #2cb1fc accent · 18%
  • #ffc107 accent · 14%
  • #7f5af0 accent · 10%
  • #ff4081 accent · 8%

As CSS

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

04

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 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).

05

More combinations

With Glassmorphism

With Material Design

Every style combination