Design for AIStil Neumorphism: UI-Design-Prompt
Palette, Schriftregeln und ein einfügbarer Prompt für neumorphism. Auch bekannt als Soft UI, Neomorphism, extrudiertes UI, Soft-Shadow-UI. 2019-2021 (Dribbble-Konzept von Alexander Plyuto, Ende 2019).
Merkmale
- Elemente teilen exakt die Hintergrundfarbe und werden nur durch zwei Schatten geformt
- ein heller Schatten oben links, ein dunkler unten rechts, gleicher Abstand
- erhabener Zustand für Karten und Buttons, eingesenkter Zustand für Eingabefelder und gedrückte Buttons
- insgesamt niedriger Kontrast; die ganze Seite ist ein einziges weiches Grau oder ein blasser Ton
- Radius 16-24px, klobige Elemente, kaum Ränder
- Akzentfarbe sparsam auf Icons, Toggles und Fortschrittsanzeigen
- fast keine Textur; die Oberfläche wirkt wie mattes Plastik
Palette
#e0e5ec Basis, #ffffff heller Schatten, #a3b1c6 dunkler Schatten, #4a5568 Text, #6c63ff Akzent, #48bb78 Erfolg
Schrift
Nunito oder Poppins (rund, freundlich); Überschriften 700 bei 28-36px, Fließtext 500 bei 16px; Textfarbe mindestens #4a5568 für den Kontrast
Do
- halte jede Fläche in der Farbe der Seite; Tiefe entsteht nur aus dem Schattenpaar
- nutze inset-Schatten für alles, worin getippt wird oder was gedrückt wurde
- mach einen Kontrastcheck auf Text; der Stil fällt bei Barrierefreiheit durch, wenn du nachlässig bist
Don't
- füge keine Ränder oder schwarzen Drop-Shadows hinzu; dann ist es nicht mehr neumorph
- nutze es nicht auf weißen oder schwarzen Hintergründen; der helle Schatten verschwindet
- stapele nicht viele erhabene Elemente dicht nebeneinander; die Schatten kämpfen gegeneinander
Bekannt dafür: Dribbble-Konzept-Shots 2020, Tesla-App-Redesign-Konzepte, Skeuomorph-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
Baue die Seite im Neumorphism-Stil (Soft UI). Seite und jedes Element teilen den Hintergrund #e0e5ec. Erhabene Elemente (Karten, Buttons, Nav) nutzen box-shadow 9px 9px 16px #a3b1c6, -9px -9px 16px #ffffff; Eingabefelder und gedrückte Zustände nutzen inset 6px 6px 12px #a3b1c6, inset -6px -6px 12px #ffffff. Nirgends Ränder. Border-radius 20px auf Karten, 14px auf Buttons, 999px auf Toggles und Avataren. Text #4a5568, Überschriften #2d3748, Akzent #6c63ff für Icons, aktive Zustände und Fortschrittsbalken. Schrift Nunito: Überschriften 700 bei 36/28/22px, Fließtext 500 bei 16px, line-height 1.6. Großzügige Abstände: 32px zwischen erhabenen Elementen, damit Schatten sich nie überlappen, Kartenpadding 28px. Hover auf Buttons: Schattenabstand schrumpft über 150ms von 9px auf 5px; aktiv kippt auf inset. Prüfe, dass jede Textfarbe WCAG AA auf #e0e5ec besteht.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite im Neumorphism-Stil (Soft UI). Seite und jedes Element teilen den Hintergrund #e0e5ec. Erhabene Elemente (Karten, Buttons, Nav) nutzen box-shadow 9px 9px 16px #a3b1c6, -9px -9px 16px #ffffff; Eingabefelder und gedrückte Zustände nutzen inset 6px 6px 12px #a3b1c6, inset -6px -6px 12px #ffffff. Nirgends Ränder. Border-radius 20px auf Karten, 14px auf Buttons, 999px auf Toggles und Avataren. Text #4a5568, Überschriften #2d3748, Akzent #6c63ff für Icons, aktive Zustände und Fortschrittsbalken. Schrift Nunito: Überschriften 700 bei 36/28/22px, Fließtext 500 bei 16px, line-height 1.6. Großzügige Abstände: 32px zwischen erhabenen Elementen, damit Schatten sich nie überlappen, Kartenpadding 28px. Hover auf Buttons: Schattenabstand schrumpft über 150ms von 9px auf 5px; aktiv kippt auf inset. Prüfe, dass jede Textfarbe WCAG AA auf #e0e5ec besteht.
## 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 }
Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.