Stylogeny combining Neumorphism × Skeuomorphic UI

Try

Style combination · Pairs well

Neumorphism × Skeuomorphic UI

Neumorphism keeps the light source and extrusion but drops the textures; borrow one material cue to give soft UI more character.

From the research on Skeuomorphic UI

Mix them and make something Neumorphism Skeuomorphic UI

VelvetNeumorphism × Skeuomorphic UI2019 · 2000
A sample layout drawn from the recipe: shapes from Neumorphism, their arrangement from Neumorphism, the finish from Skeuomorphic UI. 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.

Neumorphism Skeuomorphic UI

Type from Skeuomorphic UI
Colour from Neumorphism
Form from Neumorphism
Composition from Neumorphism
Surface from Skeuomorphic UI

Neumorphism avoids gloss & highlights: this is where the two pull against each other.

02

The type

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

Display · Skeuomorphic UI

Velvet

Inter Tight, standing in for Helvetica (iOS 1–6)

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 Neumorphism, with a counter-accent from Skeuomorphic UI. The ink reads on the ground at 4.5:1 or more.

Neumorphism Skeuomorphic UI

  • #ffffff ground · 36%
  • #31456a ink · 14%
  • #6c63ff accent · 18%
  • #4a87c9 accent · 14%
  • #a3b1c6 accent · 10%
  • #2f6b3a accent · 8%

As CSS

:root {
  --ground: #ffffff;
  --ink: #31456a;
  --accent-1: #6c63ff;
  --accent-2: #4a87c9;
  --accent-3: #a3b1c6;
  --accent-4: #2f6b3a;
  --font-display: "Inter Tight", sans-serif;
  --font-text: "Jost", sans-serif;
}

04

The two styles

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. An outdoors-themed homepage places a green leather journal and pen beside layered paper, a mountain lake photograph, a brass compass, pine sprigs and a topographic map on a wooden surface. A stitched leather navigation bar tops the page, and five illustrated shortcuts sit beneath a blue “Start Exploring” button. 2000–2013 · Global / networked Skeuomorphic UI Interface design that imitates physical materials and objects (stitched leather, linen, wooden shelves, brushed aluminium, felt, paper and glass) so that digital tools look and behave like their real-world counterparts. Extending the GUI's desktop metaphor into photorealism, it ran from Apple's Aqua and brushed-metal interfaces around 2000 to its peak in iOS 1–6 and Mac OS X Lion, and was abandoned for flat design with iOS 7 in 2013.

05

More combinations

With Neumorphism

With Skeuomorphic UI

Every style combination