Neumorphism

Also called: Soft UI, New Skeuomorphism, Neomorphism

Everything is moulded from one soft grey-blue sheet: raised with a light and a dark shadow, pressed in with inset shadows.

“Soft extrude”Soft & DimensionalEra: 2019–2021CalmDreamyFriendly

Open full screen ↗

neumorphism / landingEN

neumorphism / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm12pxRadius md16pxRadius lg26pxRadius xl34pxDensity×1.15Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

same-colour surfacesdual light and dark shadowextruded buttonspressed inset statesoft grey-blue baseno borderstop-left light sourceone calm accent

Neumorphism treats the screen as a single soft plastic surface. Cards, buttons and inputs are the same colour as the background and only exist through two blurred shadows — white towards the top-left light source, grey-blue towards the bottom-right. Raised means "tap me", inset means "pressed / selected / type here". Colour is limited to one calm accent, borders disappear, corners are generously rounded and the mood is quiet, tactile and calm.

Best for

Meditation, sleep and wellness apps
Smart-home and device controls (dials, toggles)
Music players and calculators
Small dashboards with few, large controls

Avoid for

Accessibility-critical products (low edge contrast)
Dense data tables and enterprise tools
Text-heavy reading pages
Brands that need strong colour

✓ Do

Use one background colour (#E0E5EC) for page, cards and controls
Pair a white top-left shadow with a #A3B1C6 bottom-right shadow of equal blur
Show pressed / selected / input states with the same shadows inset
Keep one accent colour for the primary action and active icons

✕ Don't

Don’t add borders or contrasting card fills — that is Soft UI Evolution
Don’t mix light directions or use black shadows
Don’t rely on the shadow alone for critical states; add accent text or an icon
Don’t nest more than two depth levels

Not to be confused with

Soft UI Evolution →Soft UI Evolution keeps the depth but adds white cards, real borders and solid colour buttons for contrast; Neumorphism is one colour with shadows only.Claymorphism →Claymorphism uses many pastel fills and puffy inner highlights with a coloured drop shadow; Neumorphism is monochrome and the shadows match the background.Skeuomorphism →Skeuomorphism imitates real materials (leather, metal, gloss); Neumorphism is one abstract matte plastic with no textures.

On mobile

Neumorphism is at home on phones: big raised circular controls, an inset search well and a floating raised tab bar whose active icon sinks in. Keep shadow blur ≤ 16px on lists for scroll performance and always pair the inset state with accent-coloured text.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinNunito · 600/700/800

The quick brown fox

Heading · ThaiNiramit · 500/600/700

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinNunito Sans · 400/600/700

Clear words make shared decisions.

Body · ThaiNiramit · 400/500/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Niramit is a gentle, loopless Thai with soft terminals that echo Nunito’s rounded ends without becoming cartoonish.

Colour palette

Light

Dark

Design tokens

Radius	`sm 12px · md 16px · lg 26px · xl 34px · pill 999px`
Border	`0px`
Shadow	`-7px -7px 16px var(--nm-hi), 7px 7px 16px var(--nm-lo)`
Display	`clamp(2.6rem, 5.6vw, 4.4rem)`
Motion	`220ms cubic-bezier(.3,.7,.3,1)`
Density	`×1.15`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Neumorphism (neumorphism) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800&family=Nunito+Sans:wght@400;600;700&family=Niramit:wght@400;500;600;700&display=swap
 */
:root {
  --radius: 26px;
  --background: #E0E5EC;
  --foreground: #2D3748;
  --card: #E0E5EC;
  --card-foreground: #2D3748;
  --popover: #E0E5EC;
  --popover-foreground: #2D3748;
  --primary: #4453C4;
  --primary-foreground: #FFFFFF;
  --secondary: #2B7470;
  --secondary-foreground: #FFFFFF;
  --muted: #D3DAE4;
  --muted-foreground: #4E5869;
  --accent: #D3DAE4;
  --accent-foreground: #2D3748;
  --destructive: #B83B33;
  --border: #C4CCD8;
  --input: #C4CCD8;
  --ring: #4453C4;
  --chart-1: #4453C4;
  --chart-2: #8794E6;
  --chart-3: #2B7470;
  --chart-4: #D9786A;
  --chart-5: #9AA5B8;
  --sidebar: #E0E5EC;
  --sidebar-foreground: #2D3748;
  --sidebar-primary: #4453C4;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #D3DAE4;
  --sidebar-accent-foreground: #2D3748;
  --sidebar-border: #C4CCD8;
  --sidebar-ring: #4453C4;
}

.dark {
  --background: #2A2F38;
  --foreground: #E6EAF1;
  --card: #2A2F38;
  --card-foreground: #E6EAF1;
  --popover: #2A2F38;
  --popover-foreground: #E6EAF1;
  --primary: #93A0FF;
  --primary-foreground: #151A3A;
  --secondary: #6CCFC6;
  --secondary-foreground: #0E2422;
  --muted: #242830;
  --muted-foreground: #AEB6C4;
  --accent: #242830;
  --accent-foreground: #E6EAF1;
  --destructive: #F08A80;
  --border: #3A414C;
  --input: #3A414C;
  --ring: #93A0FF;
  --chart-1: #93A0FF;
  --chart-2: #5B6AD8;
  --chart-3: #6CCFC6;
  --chart-4: #F2A394;
  --chart-5: #7E8899;
  --sidebar: #2A2F38;
  --sidebar-foreground: #E6EAF1;
  --sidebar-primary: #93A0FF;
  --sidebar-primary-foreground: #151A3A;
  --sidebar-accent: #242830;
  --sidebar-accent-foreground: #E6EAF1;
  --sidebar-border: #3A414C;
  --sidebar-ring: #93A0FF;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Neumorphism (neumorphism) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800&family=Nunito+Sans:wght@400;600;700&family=Niramit:wght@400;500;600;700&display=swap
 */
@theme {
  --color-bg: #E0E5EC;
  --color-surface: #E0E5EC;
  --color-surface-2: #D3DAE4;
  --color-text: #2D3748;
  --color-text-muted: #4E5869;
  --color-primary: #4453C4;
  --color-on-primary: #FFFFFF;
  --color-secondary: #2B7470;
  --color-on-secondary: #FFFFFF;
  --color-accent: #D9786A;
  --color-border: #C4CCD8;
  --color-success: #2A7A4F;
  --color-warning: #9A6114;
  --color-danger: #B83B33;
  --color-chart-1: #4453C4;
  --color-chart-2: #8794E6;
  --color-chart-3: #2B7470;
  --color-chart-4: #D9786A;
  --color-chart-5: #9AA5B8;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --radius-pill: 999px;
  --font-heading: "Nunito", "Niramit", system-ui, sans-serif;
  --font-body: "Nunito Sans", "Niramit", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Niramit", monospace;
}

.dark {
  --color-bg: #2A2F38;
  --color-surface: #2A2F38;
  --color-surface-2: #242830;
  --color-text: #E6EAF1;
  --color-text-muted: #AEB6C4;
  --color-primary: #93A0FF;
  --color-on-primary: #151A3A;
  --color-secondary: #6CCFC6;
  --color-on-secondary: #0E2422;
  --color-accent: #F2A394;
  --color-border: #3A414C;
  --color-success: #6FD39A;
  --color-warning: #E8B460;
  --color-danger: #F08A80;
  --color-chart-1: #93A0FF;
  --color-chart-2: #5B6AD8;
  --color-chart-3: #6CCFC6;
  --color-chart-4: #F2A394;
  --color-chart-5: #7E8899;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Neumorphism (neumorphism). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800&family=Nunito+Sans:wght@400;600;700&family=Niramit:wght@400;500;600;700&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8784,
            0.898,
            0.9255
          ],
          "hex": "#e0e5ec"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8784,
            0.898,
            0.9255
          ],
          "hex": "#e0e5ec"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8275,
            0.8549,
            0.8941
          ],
          "hex": "#d3dae4"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1765,
            0.2157,
            0.2824
          ],
          "hex": "#2d3748"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3059,
            0.3451,
            0.4118
          ],
          "hex": "#4e5869"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2667,
            0.3255,
            0.7686
          ],
          "hex": "#4453c4"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0.4549,
            0.4392
          ],
          "hex": "#2b7470"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.851,
            0.4706,
            0.4157
          ],
          "hex": "#d9786a"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7686,
            0.8,
            0.8471
          ],
          "hex": "#c4ccd8"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.4784,
            0.3098
          ],
          "hex": "#2a7a4f"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6039,
            0.3804,
            0.0784
          ],
          "hex": "#9a6114"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7216,
            0.2314,
            0.2
          ],
          "hex": "#b83b33"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2667,
            0.3255,
            0.7686
          ],
          "hex": "#4453c4"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5294,
            0.5804,
            0.902
          ],
          "hex": "#8794e6"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0.4549,
            0.4392
          ],
          "hex": "#2b7470"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.851,
            0.4706,
            0.4157
          ],
          "hex": "#d9786a"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6039,
            0.6471,
            0.7216
          ],
          "hex": "#9aa5b8"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.1843,
            0.2196
          ],
          "hex": "#2a2f38"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.1843,
            0.2196
          ],
          "hex": "#2a2f38"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1412,
            0.1569,
            0.1882
          ],
          "hex": "#242830"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.902,
            0.9176,
            0.9451
          ],
          "hex": "#e6eaf1"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6824,
            0.7137,
            0.7686
          ],
          "hex": "#aeb6c4"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5765,
            0.6275,
            1
          ],
          "hex": "#93a0ff"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0824,
            0.102,
            0.2275
          ],
          "hex": "#151a3a"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4235,
            0.8118,
            0.7765
          ],
          "hex": "#6ccfc6"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0549,
            0.1412,
            0.1333
          ],
          "hex": "#0e2422"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.6392,
            0.5804
          ],
          "hex": "#f2a394"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2275,
            0.2549,
            0.298
          ],
          "hex": "#3a414c"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4353,
            0.8275,
            0.6039
          ],
          "hex": "#6fd39a"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9098,
            0.7059,
            0.3765
          ],
          "hex": "#e8b460"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9412,
            0.5412,
            0.502
          ],
          "hex": "#f08a80"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5765,
            0.6275,
            1
          ],
          "hex": "#93a0ff"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3569,
            0.4157,
            0.8471
          ],
          "hex": "#5b6ad8"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4235,
            0.8118,
            0.7765
          ],
          "hex": "#6ccfc6"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.6392,
            0.5804
          ],
          "hex": "#f2a394"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4941,
            0.5333,
            0.6
          ],
          "hex": "#7e8899"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 12,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 26,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 34,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 0,
      "unit": "px"
    }
  },
  "shadow": {},
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Nunito",
        "Niramit",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Nunito Sans",
        "Niramit",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Niramit",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 700
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 220,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.3,
      0.7,
      0.3,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.15
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 1
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!