Neomorphic
Darkness
A FREE UI Kit For Adobe XD
With the start of 2020 a big question for me was what is going to be the predominant web/mobile design style that is inevitably going influence my work at the start of this new decade. After scavenging my usual inspiration sources on the web there was simply one style that I felt excited about and that was the promised but never delivered Neomorphism or “Soft UI” as it is more commonly referred to. So I decided to test my XD and CSS skills and put something together for fun.
What is Soft UI?
Soft UI is a modern take on the classic skeuomorphism approach that Apple adopted for their design system almost a decade ago now. It uses shadow layers that mimic lighting conditions to apply a realistic feel and look to any UI element. Combine that with the proper sound feedback and animations and your UI can feel as real as a real silicon button.
The UI Kit.
I had so much fun playing around with this style and before I knew it I had more components on my XD Artboard than I usually use in a project. This is why I decided to publish the artboard as a free resource on Behance.
Do It Yorself.
I had a lot of requests on Behance to share a tutorial on how to use this style specifically in XD so here is my quick guide to Soft UI.
Using Adobe XD
1) Start by choosing your colors. In my opinion it works best if you use a blend of the same color. Start with the background color you are going to use and then create a lighter and a darker blend of it.
#4F5D67
#243441
#0C1116
2) Now create an element with the same background color as your background and apply a subtle dark shadow to it using your dark blend. Lower the opacity of the shadow to 0.5.
3) Duplicate that element and add a shadow with the reverse direction and the light blend as a color. Lower the opacity of the shadow to 0.5.
And there you go! Your first Soft UI element!
Using CSS
Oddly, using CSS is even easier. Simply add a layered box-shadow to any element to make it look Neomorphic.
.layered_box_shadow {
box-shadow: 3px 3px 10px rgba(12,17,22,0.5), -3px -3px 10px rgba(79,93,103,0.5);
}
Download the UI Kit
Wanna try it out? Get started by downloading this free resource and do not forget to show us your interpretation of the style!