# Neumorphism

> “Soft UI”: elements share the background colour and appear extruded from it using a light shadow on one side and a dark shadow on the other.

- Category: The -morphism family
- Era: 2019–2021
- Origin: Dribbble, Alexander Plyuto’s banking app concept
- Lesson: https://design.dawit.dev/styles/neumorphism
- Try it: https://design.dawit.dev/styles/neumorphism?style=neumorphism

## Where it came from

A November 2019 Dribbble banking concept by Alexander Plyuto went viral, and the name “neumorphism” (new + skeuomorphism) caught on in the discussion around it — often credited to a commenter, Jason Kelly, and spread by Michał Malewicz’s articles. It went everywhere on Dribbble, then hit a wall in real products: with no colour or border separating elements, buttons had almost no contrast, which made them fail accessibility checks.

## How to spot it

- Background and component colour are the same
- Paired shadows — light top-left, dark bottom-right
- Inset shadows for pressed or input states
- Large radii, muted single-hue palettes

## Strengths

- Calm, tactile and cohesive
- Pressed/unpressed states feel physical
- Distinctive in a flat world

## Weaknesses

- Very low contrast — hard to see button edges
- Fails WCAG for many users
- Only works on mid-tone backgrounds

## In the wild

- Smart-home controller concepts
- Calculator and music-player Dribbble shots
- Some fitness tracker dashboards

## Use it when

Small, low-stakes control surfaces where mood matters more than scanability — and add borders for contrast.

## Related styles
[Skeuomorphism](https://design.dawit.dev/styles/skeuomorphism.md), [Claymorphism](https://design.dawit.dev/styles/claymorphism.md), [Tactile](https://design.dawit.dev/styles/tactile.md)