0design / Library
Dribbble2020UI Style

Neumorphism

Soft plastic realism.

Soft UI. Elements appear to be extruded from the background material. A play on light, shadow, and depth without the heavy textures of skeuomorphism.

Interactive Playground

Live components rendered with Neumorphism tokens.

Live Preview

Authentication

Secure your account with our new multi-factor authentication system.

Badges & Tags

NewFeaturedBetaPro

Type Scale

Display XL
H1 / 800 / 100%
Heading L
H2 / 600 / 80%

Typography

Primary / Headings

Aa

Secondary / Body

Aa

“The typography in Neumorphism relies on geometric clarity.”

Use high contrast for headings. Maintain strict hierarchy and translate the font stack into design tokens so brands can extend the style without guesswork.

Color System

Background
Surface
Accent
Text

Usage Guidelines

When to Use Neumorphism

Neumorphism excels when you need soft ui. elements appear to be extruded from the background material. a play on light, shadow, and depth without the heavy textures of skeuomorphism.. This style works best when you want to soft plastic realism..

Best Practices

  • •Maintain consistent spacing using the gap-12 grid system.
  • •Use font-sans font-semibold tracking-wide text-[#4e5d78] for headings and font-sans text-[#7887a0] for body text.
  • •Apply rounded-[30px] for rounded corners and shadow-[9px_9px_16px_rgb(163,177,198,0.6),-9px_-9px_16px_rgba(255,255,255, 0.5)] for depth.

Style Playbook

Neumorphism blends skeuomorphic depth with minimal UI. It uses soft extrusions to make components feel tactile without heavy textures.

History

  • •Started on Dribbble in 2020 as a reaction to flat design.
  • •Adopted in wellness, IoT, and finance dashboards for calm tone.

Layout Principles

  • •Use large padding and keep components centered inside cards.
  • •Balance raised vs. inset surfaces to create visual hierarchy.

Color Guidelines

Monochrome base

Pick a single neutral hue and manipulate light/dark shadows.

Accent restraint

Use saturated colors only for primary CTAs to avoid muddiness.

Typography

Headlines

Rounded sans-serif with medium weights to match softness.

Body

Use subtle letter-spacing to keep readability high on soft backgrounds.

Best For

  • Smart home dashboards
  • Meditation apps
  • Hardware companion UIs

Watch Outs

  • ⚠️Low contrast if shadows are too subtle.
  • ⚠️Excessive blur can result in performance issues on low-end hardware.

Notable Brands

Nothing OS conceptsCalm explorationsConcept banking apps

Execution Tips

  • →Switch to flat surfaces for data tables and forms to keep clarity.
  • →Test in dark mode early—neumorphic shadows invert quickly.

AI Palette Generator

Describe a mood, scene, or style (e.g., "Cyberpunk Tokyo Rain" or "Scandinavian Morning"), and let our AI craft the perfect color system.