or how to make something actually useful out of this design style
Just to break the habit of (more or less) flat designs coming from Google/Microsoft/Apple and elsewhere lets look at neomorphic design, kind of already known between designers, and how I actually managed to make the whole interface based on it despite its drawbacks(described below).
On its own, the neomorphic design, has flatness when you apply just one way to show it:
in this case putting content right in the flat or pressed containers/buttons/inputs might still look fine but you might start to second guess if some element is a button, an input or simple text, not quite straight forward I would say.
So lets add some concave and convex effects to buttons and inputs:
and there you have it, this effects give to the UI elements subtle clues that differentiate inputs(concave) from buttons/actions(convex) and from flat surfaces of simple content such as texts or images.
After some experimentation I built a framework of rules on where apply which effects to have as much as possible diverse UI elements and keep it applied and coherent throughout development. Following are categorized UI elements based on flat(aka elevated), concave, convex and pressed effects:
Flat & Pressed
In no particular order the UI elements on this surfaces are:
Input help/validation texts
Texts, more or less long
Empty containers description texts
By this effect I would apply mostly to:
Inputs, such as texts, textboxes, checkboxes, dropdowns, etc.
Practically the pressed concave effect makes up for a, what I would describe, subtly deep and soft container for input. The concavity comes from having a background linear gradient that goes from top left dark shadow colour to the bottom right light shadow colour.
Meanwhile this kind of effect is more appropriate to:
They look elevated and inflated, pretty similar to real world old style top-rounded physical buttons.
Here I found that stacking layers have to be balanced, the more layers there are the lesser the elevation should be, which gives a pyramid kind of effect.
The same could be said when using pressed layers and going further down:
And then you can mix and match, without exaggerating and trying to use the same level elevation or the one above or below:
Sidenote about icons
I went with a duotone type of icons available in Font Awesome, the solid ones didn't give enough detail or emphasis so I went with duotone with colours coming from the main one.
Here I think I'll do more experimentation to figure out if complementary but different colours can improve a more distinct and emphasised look/perception.
Here's some SCSS that I use for different elevation/flat and pressed effects
I'm sorry for the many !important but I have family and a framework to override.