Neumor
phism
Soft UI, born in 2019. Elements appear to be extruded from the background itself - dual opposing shadows create the illusion that surfaces are either pushing out of or pressing into the material beneath them.
The Shadow System
Neumorphism is built entirely on two shadows per element - a dark shadow on the bottom-right and a light shadow on the top-left, mimicking a single top-left light source.
Extruded (Flat)
The default resting state. Element appears to sit above the surface.
box-shadow:
6px 6px 12px #C8CDD3,
-6px -6px 12px #FFF;Pressed (Inset)
Active/pressed state. Element appears sunk into the surface.
box-shadow:
inset 4px 4px 8px #C8CDD3,
inset -4px -4px 8px #FFF;Coloured + Extruded
Gradient fills with adjusted shadow colors for accented elements.
background: linear-gradient(
135deg, #667EEA, #764ba2);
box-shadow: coloured...UI Components
Dark Mode
Night theme
Notifications
Push alerts
Auto Sync
Background sync
Icons, Avatars & Indicators
Card Patterns
Notifications
Enable push alerts
Location
Allow location access
Analytics
Share usage data
Haptics
Tactile feedback
Auto-update
Background updates
Full Application Layout
Monthly Activity
Core Principles
Single Light Source
All shadows must be consistent with one imaginary light source, typically positioned top-left. Dark shadow bottom-right, light shadow top-left - always.
Background Matching
The background color of the element must exactly match the page background. Any difference breaks the extrusion illusion. It's the same material throughout.
Inset for Active States
Resting elements use outset shadows (extruded). Pressed, active, or selected states use inset shadows (concave). This creates physical press feedback.
Accessibility Caution
Neumorphism inherently produces low contrast between elements and backgrounds. Use color, iconography, and contrast carefully to maintain accessibility.