Neumorphism

Contexto Histórico

Emerge em 2020, Neumorphism combina Skeuomorphism (realismo) com Flat (simplicidade) criando soft UI com sombras duplas e efeito 3D suave.

Quando Usar

Neumorphism works for low-density interfaces where each element has breathing room — think fitness trackers, meditation apps, smart home controls, single-purpose dashboards. It's great when you want physicality without literal textures. Don't use it for text-heavy interfaces, complex forms, or anything requiring clear visual hierarchy at a glance. The contrast problem is real and unsolved — if your users include anyone with even mild visual impairment, neumorphism will fail them. Never use it for primary navigation or critical actions where discoverability matters more than aesthetics.

Princípios de Design

• Single light source, always. Pick top-left or top-right and commit. Mixed lighting kills the illusion instantly and makes the UI look broken rather than intentional.
• Background and element colors must share the same hue. Neumorphism only works when shadows create the depth — introduce color contrast between surface and element and you've just made a regular card with weird shadows.
• Pair every neumorphic element with a non-shadow affordance. A label, an icon, a color accent — something that communicates interactivity even if the shadows disappeared. This is your accessibility escape hatch.
• Keep shadow distances tight (4-8px) and blurs generous (12-20px). Harsh shadows break the soft illusion. You want the viewer to feel depth, not see edges.
• Reserve pressed/concave states for active selections only. If everything looks pushed in, nothing looks pushed in. The convex-to-concave transition is your most powerful feedback tool — don't waste it on hover.

Especificações Técnicas

Relacionados

Flat & Soft UI

Soft UI Evolution

Flat & Soft UI

Glassmorphism

Minimalismo & Swiss

Minimalism & Swiss Style

Brutalismo

Brutalism

Futurista & Tech

3D & Hyperrealism