Neumorphism (Soft UI)

Neumorphism (Soft UI)

"Elements extruded from the background material itself, shaped by a singular, persistent light source."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Unified Surface Color: The background and the elements MUST share the exact same base color.
2. Dual Shadows: Elements are shaped by two shadows: a light shadow (highlight) on the side facing the light source, and a dark shadow on the opposite side.
3. No Borders: The shape is entirely defined by the shadows.

Visual DNA

• Colors: Works best with mid-tone neutrals. Desert Mirage, Earth-Grounded Elegance, or Sophisticated Neutral are perfect. Avoid pure white or pure black (shadows/highlights won't show).
• Typography: Soft, rounded sans-serifs (e.g., Nunito, Quicksand).
• Shapes: Pill shapes, rounded rectangles. Sharp corners break the illusion of extruded material.

Web Implementation

• The magic is entirely in box-shadow manipulating light and dark variants of the base color.
• CSS Example:

:root {
  --base-color: #E6E2DD; /* From Sophisticated Neutral */
  --highlight: #ffffff;
  --shadow: #c4c0bc;
}

body {
  background-color: var(--base-color);
}

.neu-element {
  background-color: var(--base-color);
  border-radius: 20px;
  /* Top-left highlight, Bottom-right shadow */
  box-shadow:  9px 9px 18px var(--shadow),
              -9px -9px 18px var(--highlight);
  padding: 32px;
}