# 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. - Period: 2019–2021 - Where: Global / networked - Origin: Dribbble and UX Collective design community (Alexander Plyuto, Michal Malewicz) - Branch: Digital native - Also known as: Neomorphism, Soft UI, New skeuomorphism - Page: https://stylogeny.com/styles/neumorphism/ ## How it works - Give each control the same colour as its background and model it only with two soft shadows: a light one top-left and a dark one bottom-right. - Show pressed and active states by switching to inset shadows, so controls appear pushed into the surface. - Keep the palette to one desaturated hue, usually a pale grey-blue, plus a single accent for state. - Round every corner generously and favour circular dials, knobs and pill-shaped toggles. - Leave wide gaps between elements so the shadows can breathe without colliding. - Add borders, labels or a contrasting accent wherever soft relief alone would fail accessibility. ## Its design choices Defining choices make the style, characteristic ones are usual, occasional ones turn up now and then. ### Layout & composition - [Isolated object](https://stylogeny.com/design-choices/isolated-object/) (characteristic) - [Central symmetry](https://stylogeny.com/design-choices/central-symmetry/) (characteristic) - [Cards & bento tiles](https://stylogeny.com/design-choices/cards-and-bento-tiles/) (characteristic) - [Modular grid](https://stylogeny.com/design-choices/modular-grid/) (occasional) ### Space & hierarchy - [Illusion of depth](https://stylogeny.com/design-choices/illusion-of-depth/) (defining) - [Generous white space](https://stylogeny.com/design-choices/generous-white-space/) (characteristic) - [Flat hierarchy](https://stylogeny.com/design-choices/flat-hierarchy/) (characteristic) ### Typography - [Geometric sans](https://stylogeny.com/design-choices/geometric-sans/) (characteristic) - [Rounded sans](https://stylogeny.com/design-choices/rounded-sans/) (occasional) ### Colour - [Monochrome](https://stylogeny.com/design-choices/monochrome/) (defining) - [Pastel](https://stylogeny.com/design-choices/pastel/) (characteristic) - [Light ground](https://stylogeny.com/design-choices/light-ground/) (characteristic) - [Gradients](https://stylogeny.com/design-choices/gradients/) (characteristic) - [Dark ground](https://stylogeny.com/design-choices/dark-ground/) (occasional) ### Form & shape - [Rounded & pill](https://stylogeny.com/design-choices/rounded-and-pill/) (defining) - [Geometric primitives](https://stylogeny.com/design-choices/geometric-primitives/) (characteristic) - [Pictogram](https://stylogeny.com/design-choices/pictogram/) (characteristic) ### Surface & texture - [Soft extrusion](https://stylogeny.com/design-choices/soft-extrusion/) (defining) - [Skeuomorphic material](https://stylogeny.com/design-choices/skeuomorphic-material/) (occasional) ### Ornament - [Ornament-free](https://stylogeny.com/design-choices/ornament-free/) (characteristic) ### Imagery - [Icons & pictograms](https://stylogeny.com/design-choices/icons-and-pictograms/) (characteristic) - [Diagram & data](https://stylogeny.com/design-choices/diagram-and-data/) (occasional) ### Medium & production - [App & OS interface](https://stylogeny.com/design-choices/app-and-os-interface/) (defining) - [Web & CSS](https://stylogeny.com/design-choices/web-and-css/) (occasional) ### Tone & intent - [Calm & contemplative](https://stylogeny.com/design-choices/calm-and-contemplative/) (characteristic) - [Technological & futurist](https://stylogeny.com/design-choices/technological-and-futurist/) (occasional) - [Luxurious & glamorous](https://stylogeny.com/design-choices/luxurious-and-glamorous/) (occasional) Avoids: Hard offset shadow, Gloss & highlights, Complementary clash, Full polychrome, Fluorescent & neon, Horror vacui, Extreme scale contrast, Abundant decoration Palette: #e0e5ec, #ffffff, #a3b1c6, #31456a, #6c63ff Typefaces: Poppins, Nunito, SF Pro, Montserrat Known for: Alexander Plyuto, 'Skeuomorph Mobile Banking' concept on Dribbble (2019); Michal Malewicz (HYPE4), 'Neumorphism in user interfaces', UX Collective (2019); Adam Giebl, neumorphism.io CSS generator ## Where it comes from, and what it’s close to - Grew out of: [Skeuomorphic UI](https://stylogeny.com/styles/skeuomorphism.md) (2000–2013) - Influenced by: [Flat Design](https://stylogeny.com/styles/flat-design.md) (2010–2016) - Led to: [Claymorphism & Soft 3D](https://stylogeny.com/styles/claymorphism.md) (2020–present) - Alike in its design choices: [Glassmorphism](https://stylogeny.com/styles/glassmorphism.md) (2020–present), 55% alike - Alike in its design choices: [DTC 'Blanding' / Millennial Minimalism](https://stylogeny.com/styles/dtc-blanding.md) (2012–2022), 48% alike - Alike in its design choices: [Material Design](https://stylogeny.com/styles/material-design.md) (2014–present), 45% alike - Alike in its design choices: [Minimalist Graphic Design](https://stylogeny.com/styles/minimalism.md) (1965–present), 42% alike - Alike in its design choices: [Contemporary Arabic & Dual-Script Type Design](https://stylogeny.com/styles/arabic-latin-bilingual-type.md) (2004–present), 38% alike - Alike in its design choices: [Corporate Identity Modernism](https://stylogeny.com/styles/corporate-modernism.md) (1955–1990), 36% alike ## Real works - [Skeuomorph Mobile Banking (Dribbble shot)](https://web.archive.org/web/20191108224005/https://dribbble.com/shots/7994421-Skeuomorph-Mobile-Banking): Alexander Plyuto for Heartbeat Agency, 2019 (archived 8 November 2019), Internet Archive Wayback Machine (Dribbble shot 7994421) - [Neumorphism.io: Generate Soft-UI CSS code](https://web.archive.org/web/20200106185730/https://neumorphism.io/): Adam Giebl, January 2020 (archived 6 January 2020), Internet Archive Wayback Machine - [Neumorphism UI: Bootstrap UI kit, demo homepage](https://web.archive.org/web/20200522134925/https://demo.themesberg.com/neumorphism-ui/): Themesberg, 2020 (archived 22 May 2020), Internet Archive Wayback Machine - [Neumorphism - Zoom (redesign concept, Dribbble shot)](https://web.archive.org/web/20200309051106/https://dribbble.com/shots/10065060-Neumorphism-Zoom): Manan Adhikari, February 2020 (archived 9 March 2020), Internet Archive Wayback Machine (Dribbble shot 10065060) ## Sources - Michal Malewicz, 'Neumorphism in user interfaces', UX Collective (December 2019) - Wikipedia, 'Neumorphism' (en.wikipedia.org/wiki/Neumorphism) --- From Stylogeny (https://stylogeny.com/), an atlas of graphic-design styles by Van Riel Online Services. How it is made: https://stylogeny.com/about/. Cite as: Stylogeny, “Neumorphism”, https://stylogeny.com/styles/neumorphism/