Design for AI

Neumorphism: UI design prompt

Palette, type rules and a pasteable prompt for neumorphism. Also called soft UI, neomorphism, extruded UI, soft shadow UI. 2019-2021 (Dribbble concept by Alexander Plyuto, late 2019).

Traits

  • elements share the exact background colour and are shaped only by two shadows
  • one light shadow top-left, one dark shadow bottom-right, equal distance
  • raised state for cards and buttons, inset state for inputs and pressed buttons
  • low contrast overall; the whole page is a single soft grey or pale tint
  • radius 16-24px, chunky elements, few borders
  • accent colour used sparingly on icons, toggles and progress
  • almost no texture; the surface reads as matte plastic

Palette

#e0e5ec base, #ffffff light shadow, #a3b1c6 dark shadow, #4a5568 text, #6c63ff accent, #48bb78 success

Type

Nunito or Poppins (rounded, friendly); headings 700 at 28-36px, body 500 at 16px; text colour must be at least #4a5568 for contrast

Do

  • keep every surface the same colour as the page; depth comes only from the shadow pair
  • use inset shadows for anything the user types into or has pressed
  • run a contrast check on text; the style fails accessibility if you are careless

Don't

  • do not add borders or drop shadows in black; it stops being neumorphic
  • do not use it on white or black backgrounds; the light shadow disappears
  • do not stack many raised elements close together; the shadows fight

Known for it: Dribbble concept shots 2020, Tesla app redesign concepts, Skeuomorphic-lite fintech mockups

CSS seed
:root {
  --bg: #e0e5ec;
   --fg: #4a5568;
   --accent: #6c63ff;
   --light: #ffffff;
   --dark: #a3b1c6;
   --radius: 20px;
   --shadow: 9px 9px 16px #a3b1c6,-9px -9px 16px #ffffff;
   --font: 'Nunito',sans-serif
}
Prompt

Build the site in neumorphism (soft UI) style. Page and every element share background #e0e5ec. Raised elements (cards, buttons, nav) use box-shadow 9px 9px 16px #a3b1c6, -9px -9px 16px #ffffff; inputs and pressed states use inset 6px 6px 12px #a3b1c6, inset -6px -6px 12px #ffffff. No borders anywhere. Border-radius 20px on cards, 14px on buttons, 999px on toggles and avatars. Text #4a5568, headings #2d3748, accent #6c63ff for icons, active states and progress bars. Font Nunito: headings 700 at 36/28/22px, body 500 at 16px, line-height 1.6. Spacing generous: 32px between raised elements so shadows never overlap, card padding 28px. Hover on buttons: shadow distance shrinks from 9px to 5px over 150ms; active flips to inset. Verify every text colour passes WCAG AA on #e0e5ec.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site in neumorphism (soft UI) style. Page and every element share background #e0e5ec. Raised elements (cards, buttons, nav) use box-shadow 9px 9px 16px #a3b1c6, -9px -9px 16px #ffffff; inputs and pressed states use inset 6px 6px 12px #a3b1c6, inset -6px -6px 12px #ffffff. No borders anywhere. Border-radius 20px on cards, 14px on buttons, 999px on toggles and avatars. Text #4a5568, headings #2d3748, accent #6c63ff for icons, active states and progress bars. Font Nunito: headings 700 at 36/28/22px, body 500 at 16px, line-height 1.6. Spacing generous: 32px between raised elements so shadows never overlap, card padding 28px. Hover on buttons: shadow distance shrinks from 9px to 5px over 150ms; active flips to inset. Verify every text colour passes WCAG AA on #e0e5ec.

## Tokens
:root { --bg:#e0e5ec; --fg:#4a5568; --accent:#6c63ff; --light:#ffffff; --dark:#a3b1c6; --radius:20px; --shadow:9px 9px 16px #a3b1c6,-9px -9px 16px #ffffff; --font:'Nunito',sans-serif }

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.

Snippets in this style

All neumorphic buttons