What is Neumorphism?

Neumorphism in brief

Neumorphism, also called soft UI, is an interface style in which every element is made from the same material as its background. The surface is one pale, cool blue-grey. Cards, buttons and knobs do not float above it and do not carry outlines. Instead they either rise out of the plane or sink into it, shaped only by a dark shadow falling to the lower right and a white highlight at the upper left. The effect is of soft, matte plastic that has been moulded by light.

Its parts are simple. There is a single base colour, near-monochrome. Shapes have generous radii, so corners look pressed rather than cut. Shadows come in pairs, one dark and one light, and they are the only thing that gives an element form. Pressed states are shown by reversing the shadows so that the element appears pushed into the surface. Typography is quiet, and colour accents are rare.

The style became famous for its calm, tactile beauty and equally famous for its weakness: because every element shares one colour and the only difference is shadow, it can be hard to tell what is active, what is clickable and what is on. The version described here keeps the original restraint but fixes that problem with a red accent and a clearly inset pressed state, so a person can always see what is switched on.

See the Neumorphism design system

Where does Neumorphism come from?

The style has an unusually precise birthday. In the autumn of 2019, the designer Alexander Plyuto posted a concept for a skeuomorphic mobile banking app to Dribbble. His shot was archived on 8 November 2019 and spread through design circles through early 2020. Within weeks, designers all over the world were copying the soft, moulded look of its buttons and cards, imitating the way the elements seemed to grow out of a single surface.

The name followed shortly afterwards. Michal Malewicz, a designer who wrote tutorials and commentary on interface trends, gave the look the name Neumorphism, a contraction of new and skeuomorphism, and the name stuck. In Chinese-speaking design circles it is usually called new skeuomorphism, which carries the same idea. Jason Kelly is another name connected with the conversation around the style and its practical use. Through the first half of 2020 the style spread widely on Dribbble and on design Twitter, which makes it a clear example of a trend that moved across the global design community in a matter of weeks.

To understand why it caught on, it helps to place it in its moment. By 2019 many designers had grown tired of the two dominant looks of the previous years: completely flat design on one side and Material-style layered surfaces on the other. Neumorphism offered a third path, a post-flat, post-Material revival of skeuomorphism. It reintroduced physical feeling to screens, but in a restrained way, without the leather textures and glossy buttons of earlier skeuomorphic interfaces. It was tactile without being literal.

It also became a case study in the limits of trend culture. Because the style was born as a concept on a design-sharing platform, it was judged by beauty first and usability second. Critics pointed out the weakness at once: with such low difference between elements, controls were hard to find and states were hard to read. The system described here is a response to that criticism. It keeps the near-monochrome plane, matte plastic and generous radii, and adds the clear red indicator and inset pressed state that the original images lacked.

What defines the Neumorphism look?

See the Neumorphism design system

Who shaped Neumorphism?

How do you use Neumorphism today?

Neumorphism suits products that want to feel like physical devices: smart-home panels, music players, timers, wellness apps, fintech dashboards with a few clear controls and any interface built around toggles, sliders and dials. It is best used where the number of controls is small and each one deserves visual attention. It is a poor choice for dense data tables, long forms or any screen where accessibility depends on strong contrast between elements.

For presentation slides, use the style on cover and concept slides rather than on slide after slide of dense content. A cover can be a single pale blue-grey page with a raised circular badge holding the title or logo, with soft paired shadows. Content slides can place one or two raised cards on the surface, with text kept short. Data slides work if charts are simple: raised bars, inset tracks for progress and a red marker for the key figure.

For web and app interfaces, build around a single base colour and a consistent light direction. Buttons, cards and inputs share the same colour as the page, with raised shadows at rest and inset shadows when pressed or focused. Toggles and sliders are natural fits, with a red indicator for the on state. Avoid putting text directly on low-contrast raised surfaces unless it is dark enough to read clearly, and always provide a second cue, such as a label or icon, so that state is never carried by shadow alone.

For editorial and marketing work, the style is most effective in hero sections and product showcases. A device mock-up, a dial or a control cluster rendered in soft plastic makes a strong centrepiece. Surrounding copy should be spare. For long articles, keep the reading area flat and place neumorphic elements only in navigation or interactive modules, since large surfaces with soft shadows are tiring over long stretches.

The commonest mistake is to rely on shadow alone, so that users cannot tell what is clickable or what is active. Use the red accent and the inset pressed state consistently to avoid this. A second mistake is inconsistent lighting, with different elements casting shadows in different directions, which immediately looks wrong. A third is turning the contrast up until the shadows look like heavy drop shadows, which destroys the soft, moulded feel. Keep the plane near-monochrome and the shadows gentle.

See the Neumorphism design system

Neumorphism — FAQ