Neumorphism

新拟物派 / Design System

NEUMORPHISM

Elements extruded from or pressed into the background. A dual shadow system that mimics a single top-left light source — no borders, no fills, only light.

box-shadow

8px 8px 16px #b8bcc2,
-8px -8px 16px #ffffff

Convex

Concave

Light source: top-left

Light Source Physics

Every neumorphic element shares a single light source at the top-left. Dark shadow anchors bottom-right. Bright shadow lifts top-left. Invert both to press an element into the surface.

ConvexRaised / Clickable

FlatNo depth / Neutral

ConcavePressed / Activated

Raised / Clickable

box-shadow

8px 8px 16px #b8bcc2,
-8px -8px 16px #ffffff

Top-Left

Bright shadow

-8px -8px 16px #ffffff

Light Source

Single point

Always top-left

Bottom-Right

Dark shadow

+8px +8px 16px #b8bcc2

Components Showcase

Interactive components — all shadows, no borders. Try clicking the button, dragging the knob, and toggling the switches.

Button

Convex at rest. Concave on press. No translate — elements grow from surface.

Toggle Switch

Outer track always concave. Thumb convex when off, remains convex but shifts position when on.

Notifications

Dark Mode

Auto-save

Input Field

Concave inset — the container is pressed into the surface, ready to receive content.

Progress Bar

Track is concave. Filled region uses accent color at 70-85% opacity. Click buttons to adjust.

Completion62%

Storage

Warnings

Circular Knob

Fully convex dial. Drag up/down to rotate. The indicator pip is an accent dot.

Volume

Bass

Treble

Global Toggle

A larger demo toggle. State changes shadow type. The track never lifts.

System Inactive

Color System

The base is always #e0e5ec — elements and background share the same hue. Accents appear only in text or as a border-l-4 stripe.

Surface Foundation

Base

#e0e5ec

All elements + background

Dark Shadow

#b8bcc2

Bottom-right: +X/+Y

Bright Shadow

#ffffff

Top-left: -X/-Y

Secondary

#d1d9e6

Slightly deeper surface

Violet

#6d5dfc

Primary interaction color. Buttons, active states, focus rings.

Coral

#ff6b6b

Alerts, danger states, destructive actions.

Teal

#4ecdc4

Success, confirmations, positive feedback.

Amber

#ffe66d

Warnings, pending states, highlights.

Card Examples

Three real-world neumorphic cards. Each uses extruded outer shell with concave inner elements for metrics, controls, and data.

Alex Chen

UI Designer

Projects

182

Following

3.2k

Followers

Soft Light

The Neumorphic Sessions

1:083:47

Monthly Revenue

$8,241

vs last month+12.4%

Design Rules

Neumorphism is unforgiving — break one rule and the illusion collapses. The DO panel is convex (clickable). The DON'T panel is concave (content area).

Do — Convex Panel

+Use bg-[#e0e5ec] on ALL elements — same hue as background
+Double shadow: dark bottom-right + bright top-left on every convex element
+Inset shadows for concave (pressed/active) elements
+rounded-xl minimum — neumorphism never has sharp corners
+Reduce shadow on hover — hand casts shadow, element dims
+Use accent only for text or border-l-4 stripe, not background fill
+duration-300 ease-in-out on all shadow transitions
+Convex for clickable, concave for activated / content areas

Don't — Concave Panel

-Never translate/lift elements on active — they grow from background
-Never use pure white or black backgrounds — only #e0e5ec gray
-Never use gradient backgrounds — kills the monochromatic illusion
-Never use drop-shadow filter — use box-shadow only
-Never use border (except accent border-l-4) — shadows do the work
-Never use a single shadow — always the dual light+dark pair
-Never place elements on a contrasting background color
-Never use saturated filled backgrounds on buttons or cards

Shadow Quick Reference

Convex

8px 8px 16px #b8bcc2,
-8px -8px 16px #ffffff

Convex Hover

4px 4px 8px #b8bcc2,
-4px -4px 8px #ffffff

Concave Active

inset 4px 4px 8px #b8bcc2,
inset -4px -4px 8px #ffffff

Deep Concave

inset 8px 8px 16px #b8bcc2,
inset -8px -8px 16px #ffffff

Neumorphism

StyleKit

新拟物派 / Design System

NEUMORPHISM

Elements extruded from or pressed into the background. A dual shadow system that mimics a single top-left light source — no borders, no fills, only light.

box-shadow

8px 8px 16px #b8bcc2,
-8px -8px 16px #ffffff

Convex

Concave

Light source: top-left

Light Source Physics

Every neumorphic element shares a single light source at the top-left. Dark shadow anchors bottom-right. Bright shadow lifts top-left. Invert both to press an element into the surface.

ConvexRaised / Clickable

FlatNo depth / Neutral

ConcavePressed / Activated

Raised / Clickable

box-shadow

8px 8px 16px #b8bcc2,
-8px -8px 16px #ffffff

Top-Left

Bright shadow

-8px -8px 16px #ffffff

Light Source

Single point

Always top-left

Bottom-Right

Dark shadow

+8px +8px 16px #b8bcc2

Components Showcase

Interactive components — all shadows, no borders. Try clicking the button, dragging the knob, and toggling the switches.

Button

Convex at rest. Concave on press. No translate — elements grow from surface.

Toggle Switch

Outer track always concave. Thumb convex when off, remains convex but shifts position when on.

Notifications

Dark Mode

Auto-save

Input Field

Concave inset — the container is pressed into the surface, ready to receive content.

Progress Bar

Track is concave. Filled region uses accent color at 70-85% opacity. Click buttons to adjust.

Completion62%

Storage

Warnings

Circular Knob

Fully convex dial. Drag up/down to rotate. The indicator pip is an accent dot.

Volume

Bass

Treble

Global Toggle

A larger demo toggle. State changes shadow type. The track never lifts.

System Inactive

Color System

The base is always #e0e5ec — elements and background share the same hue. Accents appear only in text or as a border-l-4 stripe.

Surface Foundation

Base

#e0e5ec

All elements + background

Dark Shadow

#b8bcc2

Bottom-right: +X/+Y

Bright Shadow

#ffffff

Top-left: -X/-Y

Secondary

#d1d9e6

Slightly deeper surface

Violet

#6d5dfc

Primary interaction color. Buttons, active states, focus rings.

Coral

#ff6b6b

Alerts, danger states, destructive actions.

Teal

#4ecdc4

Success, confirmations, positive feedback.

Amber

#ffe66d

Warnings, pending states, highlights.

Card Examples

Three real-world neumorphic cards. Each uses extruded outer shell with concave inner elements for metrics, controls, and data.

Alex Chen

UI Designer

Projects

182

Following

3.2k

Followers

Soft Light

The Neumorphic Sessions

1:083:47

Monthly Revenue

$8,241

vs last month+12.4%

Design Rules

Neumorphism is unforgiving — break one rule and the illusion collapses. The DO panel is convex (clickable). The DON'T panel is concave (content area).

Do — Convex Panel

+Use bg-[#e0e5ec] on ALL elements — same hue as background
+Double shadow: dark bottom-right + bright top-left on every convex element
+Inset shadows for concave (pressed/active) elements
+rounded-xl minimum — neumorphism never has sharp corners
+Reduce shadow on hover — hand casts shadow, element dims
+Use accent only for text or border-l-4 stripe, not background fill
+duration-300 ease-in-out on all shadow transitions
+Convex for clickable, concave for activated / content areas

Don't — Concave Panel

-Never translate/lift elements on active — they grow from background
-Never use pure white or black backgrounds — only #e0e5ec gray
-Never use gradient backgrounds — kills the monochromatic illusion
-Never use drop-shadow filter — use box-shadow only
-Never use border (except accent border-l-4) — shadows do the work
-Never use a single shadow — always the dual light+dark pair
-Never place elements on a contrasting background color
-Never use saturated filled backgrounds on buttons or cards

Shadow Quick Reference

Convex

8px 8px 16px #b8bcc2,
-8px -8px 16px #ffffff

Convex Hover

4px 4px 8px #b8bcc2,
-4px -4px 8px #ffffff

Concave Active

inset 4px 4px 8px #b8bcc2,
inset -4px -4px 8px #ffffff

Deep Concave

inset 8px 8px 16px #b8bcc2,
inset -8px -8px 16px #ffffff