Stylogeny combining Material Design × Neumorphism

Try

Style combination · Contrasts

Material Design × Neumorphism

Material's crisp, directional elevation shadows are the accessible answer to neumorphism's ambiguous soft relief; compare both when tuning shadow contrast.

From the research on Material Design

Mix them and make something Material Design Neumorphism

A white poster headed “Bright Habits” arranges softly raised, rounded tiles containing a yellow sun, a bar chart, a purple toggle, a pink heart, a progress ring, a three-row list, mountains, and a sprout. Subtle shadows give the icons and panels a molded, three-dimensional appearance.
AI-generated by Stylogeny from the recipe below, and checked against it: the type from Material Design, the form from Neumorphism, the composition from Material Design. Not a real or historical work.

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.

Material Design Neumorphism

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

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 · Neumorphism

A short-lived interface trend in which controls are extruded from, or pressed into, a background of the same colour and modelled only by paired soft shadows. Sparked by Alexander Plyuto's 2019 Dribbble banking-app concept and named on UX Collective, it revived skeuomorphic tactility in a monochrome, minimal form, then faded quickly over its weak contrast and poor accessibility.

Jost; Neumorphism used Poppins and Nunito

03

The colours

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

Material Design Neumorphism

  • #fafafa ground · 36%
  • #212121 ink · 14%
  • #ffc107 accent · 18%
  • #6c63ff accent · 14%
  • #ff4081 accent · 10%
  • #a3b1c6 accent · 8%

As CSS

:root {
  --ground: #fafafa;
  --ink: #212121;
  --accent-1: #ffc107;
  --accent-2: #6c63ff;
  --accent-3: #ff4081;
  --accent-4: #a3b1c6;
  --font-display: "Inter", sans-serif;
  --font-text: "Jost", sans-serif;
}

04

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 pale blue meditation app screen titled “Calm Mode” shows a large circular 25-minute timer with a purple progress arc and a play button beneath it. Raised, softly shadowed controls include settings and bottom navigation for Focus, Sleep, Breathe, and Journal. 2019–2021 · Global / networked Neumorphism A short-lived interface trend in which controls are extruded from, or pressed into, a background of the same colour and modelled only by paired soft shadows. Sparked by Alexander Plyuto's 2019 Dribbble banking-app concept and named on UX Collective, it revived skeuomorphic tactility in a monochrome, minimal form, then faded quickly over its weak contrast and poor accessibility.

05

More combinations

With Material Design

With Neumorphism

Every style combination