Neumorphism
新拟态
Aliases:软浮雕风格凹凸按钮柔和双阴影soft UI
What is it
A soft relief style that uses paired light and dark shadows on similarly colored surfaces. Controls appear pressed into or raised from a shared material. It works best with a small number of elements. Shadows alone cannot communicate interactivity, selection or disabled states; retain labels, visible focus and sufficient contrast.
Design spec
Typography
Clear sans-serif type; avoid overly light weights.
Color
Light blue-grey surfaces, dark text and blue accents.
Border
Medium to large radii with a visible focus outline.
Shadow
Paired outer shadows for elevation; inset shadows for pressing.
Spacing
Space controls so shadows do not collide.
Motion
150–200ms raised-to-inset shadow transitions
States
Hover deepens and raises the shadow; focus must keep a visible 2px outline; active switches to an inset press; disabled lowers contrast; error uses a red inset shadow
Style in action
The same page, ready to useExplore Mellow and Get started open focus tools. Start/pause/reset the timer; Focus, Tasks, Stats and Settings reveal matching tools. Cycle focus tips; login explains local demo identity only.
Full-page preview · interact directly
What to look for
- 01Use Mellow’s original navigation and primary CTAs; inspect content and return paths, not just click notices.
- 02Complete the Mellow task, then change inputs or undo and inspect the matching result/state.
- 03Check reflow, focus and validation with keyboard and 390px / 320px viewports; distinguish toolbar reload from in-page clearing and inspect reset-on-reload boundaries.
✓ When to use
- Music controls, lightweight utilities and product demonstrations.
- Sparse interfaces that benefit from a soft material feel.
✕ When not to use
- Dense tables and complex interfaces requiring strong boundaries.
- Never make shadow direction the only state signal.
Variants
Raised
凸起表面
Paired outer shadows suggest raised controls.
Inset
凹陷表面
Inset shadows suggest pressed controls or tracks.
Implementation
box-shadowinsetborder-radius:focus-visibleDerive shadows from the shared surface; use positive and negative offsets for raised controls and inset for pressed states. Reinforce focus and selection with labels or icons. Avoid large animated shadows and support reduced motion.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Build a complete Mellow page in this style, extending the original hero into content, concrete operations and return paths rather than isolated controls or a partial demo. Preserve brand, hero copy, assets, composition, tokens and all variants. Keep preview.brand aligned with shared REFERENCE_BRANDS; ReferenceStyleScene defines the hero structure, actual navigation and assets. Keep Mellow’s same-material pale greys, #f4f5f6→#eeeff0, Georgia brand/display and grey sans copy, with the original copy/weather/tilted soft clock/tool-column composition. Preserve outer paired shadows and the separate circular inset clock face, dark-gradient CTA and raised login button rather than replacing them with generic blue sans cards. Below 600px return positioned elements to a single content flow and pair the tools; reuse existing dark/high-contrast styles and never make shadows the only state signal. Full-page operations: Explore Mellow and Get started open focus tools. Start/pause/reset the timer; Focus, Tasks, Stats and Settings reveal matching tools. Cycle focus tips; login explains local demo identity only. Share one renderer between static covers, the detail experience and /style-scenes/neumorphism/ (English /en/style-scenes/neumorphism/). Static covers contain no nested live buttons; the detail experience enables the same page’s semantic controls and brand continuation in an independent document. Original navigation and CTAs reach actual content or workflows, not placeholder links, color-only changes or one-line toasts. Interaction state lives only in this page’s memory. Reload, toolbar reset and mode changes restore initial state; do not use localStorage or sessionStorage. In-page clear/reset undoes this visit’s operations without implying cross-page or persistent saves. Provide return, cancel or clear/reset paths and disclose the page-memory state boundary; never fake real payments, email, login, AI or cloud sync. Reflow desktop, 390px and 320px layouts with readable text and usable targets rather than shrinking the desktop page. Give controls accessible names, keyboard access and visible focus; overlays close and return focus, validation/results are announced; respect prefers-reduced-motion. Add no dependencies. Check both languages, original navigation/CTAs, concrete results, return/reset and narrow reflow; report checks actually run and pending items, never requirements as passed results. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
A visual language that borrows real-world materials and physical forms for digital controls: leather stitching, wood grain, brushed metal, glass gloss. Buttons look pressable, switches look like levers — highlights, shadows and bevels make "what it looks like" teach "how it works".
StylesSimilarA visual language that molds controls from soft clay: generous radii on pastel grounds, with a double shadow — an inner concave plus an outer inflated drop — so elements feel like air-puffed clay: round, plump, squishable. A tactile middle ground between neumorphism and 3D cartoon.
StylesSimilar
A visual language built on "less is more": generous whitespace, a restrained monochrome palette and very few type scales let the content speak. All decoration is stripped away; hierarchy is created purely by space, weight and rhythm. Quiet, restrained, content-first.
StylesSimilarA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsAffects