Soft UI / neumorphism design — tactile interfaces using paired light and dark box-shadows on matching-background elements. Covers the shadow math, color generation, accessibility fixes for low contrast, inset/extruded states, dark mode adaptation, and when neumorphism works vs when it fails. Activate on 'neumorphism', 'soft UI', 'soft shadows', 'neumorph', 'tactile UI', 'extruded buttons', 'inset cards', 'skeumorphic shadows'. NOT for hard shadows / brutalism (use neobrutalist-web-designer), not for glassmorphism / frosted glass (use vaporwave-glassomorphic-ui-designer).
Soft UI / neumorphism design — tactile interfaces using paired light and dark box-shadows on matching-background elements. Covers the shadow math, color generation, accessibility fixes for low contrast, inset/extruded states, dark mode adaptation, and when neumorphism works vs when it fails. Activate on 'neumorphism', 'soft UI', 'soft shadows', 'neumorph', 'tactile UI', 'extruded buttons', 'inset cards', 'skeumorphic shadows'. NOT for hard shadows / brutalism (use neobrutalist-web-designer), not for glassmorphism / frosted glass (use vaporwave-glassomorphic-ui-designer).
allowed-tools
Read,Write,Edit,Glob,Grep,WebSearch,WebFetch
metadata
{"category":"Design & UX","tags":["neumorphism","soft-ui","shadows","tactile","accessibility","css","design-trend"],"pairs-with":[{"skill":"color-contrast-auditor","reason":"Neumorphism's low contrast is its biggest accessibility risk"},{"skill":"dark-mode-design-expert","reason":"Neumorphic shadows require complete recalculation for dark backgrounds"},{"skill":"native-app-designer","reason":"Neumorphism mimics physical surfaces — natural fit for native app feel"}]}
Creates soft, tactile web interfaces using the neumorphism aesthetic — elements that appear to extrude from or sink into the background surface, like buttons molded from clay. The effect relies on paired directional shadows (one light, one dark) on elements whose background color matches the parent surface.
Neumorphism is the opposite of neobrutalism. Where neobrutalism is hard, opaque, and high-contrast, neumorphism is soft, subtle, and monochromatic. It is beautiful when done right and an accessibility disaster when done wrong. This skill covers both.
When to Use
Use for:
Music players, media controls, and audio interfaces
Dashboard widgets and data displays (non-critical)
Settings panels with toggles and sliders
Personal portfolios seeking a premium, tactile feel
Fitness/wellness apps where softness aligns with brand
Smart home control panels
Any UI where the interaction model is "physical" (dials, knobs, switches)
Do NOT use for:
Hard shadows / brutalist aesthetic → use neobrutalist-web-designer
Glassmorphism / frosted glass / blur → use vaporwave-glassomorphic-ui-designer
Primary CTAs and conversion-critical buttons (too subtle)
Data-dense enterprise dashboards (legibility issues at scale)
Every neumorphic element uses two box-shadows: a light highlight (simulating light source) and a dark shadow (simulating depth). The light source is conventionally top-left.
The Critical Rule: The element's background color MUST closely match (or exactly match) the parent container's background. Neumorphism breaks visually when element and background colors diverge.
Neumorphism's original sin was low contrast. Here is how to fix it without losing the aesthetic.
Problem 1: Text Contrast
Failure: Light gray text on a light gray background — common in early neumorphism.
Fix: Use high-contrast text colors. The soft shadows provide the aesthetic; the text provides the information.
:root {
/* Neumorphic bg is light gray — text must be near-black */--text-primary: #2d3748; /* 7.2:1 contrast on #e0e5ec */--text-secondary: #4a5568; /* 5.1:1 contrast on #e0e5ec */--text-muted: #718096; /* 3.8:1 — large text only (18px+) */
}
Problem 2: Element Boundary Perception
Failure: Users (especially with low vision) cannot distinguish neumorphic elements from the background.
Element background differs from parent surface. The shadows create a visible rectangle instead of an extruded form. Every neumorphic element must match its parent's background color.
Anti-Pattern: Neumorphic CTAs on Critical Paths
"Sign Up" or "Buy Now" buttons styled as subtle neumorphic raised surfaces. Users do not perceive them as clickable. Use flat, high-contrast buttons for primary actions.
Anti-Pattern: Stacking Neumorphic Surfaces
A neumorphic card inside a neumorphic panel inside a neumorphic section. The compounding shadows create visual mud. One level of neumorphic depth per view. Use inset for sub-elements.
Anti-Pattern: Pure Monochrome Everything
Gray text on gray background with gray shadows. Looks elegant in Dribbble shots, fails in practice. At minimum: near-black text, an accent color for interactive states, and subtle borders on interactive elements.
Anti-Pattern: Sharp Corners
Neumorphism with border-radius: 0 looks wrong because real physical objects have softened edges. Minimum border-radius: 8px. Circular for knobs and toggles.
Anti-Pattern: Missing Prefers-Reduced-Motion
Shadow transitions cause issues for motion-sensitive users.
