Design for AI

Stil Pastell Soft UI: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für pastell soft ui. Auch bekannt als Pastelldesign, weiches Pastell-UI, Candy UI, Dreamy UI, Soft Aesthetic, Kawaii-lite. ab 2019 (Dribbble, Notion-Cover, Wellness- und Lifestyle-Apps).

Merkmale

  • entsättigte helle Töne: Flieder, Mint, Pfirsich, Babyblau, Buttergelb auf einer fast weißen Basis
  • weicher Radius (16-24px), blasse Schatten in der Tonfarbe, nirgends Schwarz
  • Text in einem tiefen gedämpften Lila oder Schiefer statt Schwarz
  • runde, freundliche Sans; manchmal eine weiche Serif für Überschriften
  • sanfte Verläufe zwischen zwei Pastelltönen, unscharfe Kleckse im Hintergrund
  • runde Icons mit 2px Strichen, kleine Sticker und Funkeln als Akzente
  • ruhige Motion: langsames Schweben, weiche Fades

Palette

#fbf8ff Basis, #e9dcff Flieder, #d8f3ec Mint, #ffe1d6 Pfirsich, #d9ecff Babyblau, #fff3c4 Butter, #4a3f6b Text

Schrift

Quicksand, Nunito, Poppins oder DM Sans für alles; optional Lora oder Playfair für Überschriften; Überschriften 700 bei 36-48px, Fließtext 400-500 bei 16-17px

Do

  • halte jede Farbe bei 15-35 % Sättigung und über 85 % Helligkeit, außer Text
  • nutze getönte Schatten (Akzent bei 25 % Alpha, 20-30px Blur), damit Karten wie auf Watte schweben
  • prüfe den Textkontrast; tiefes Lila #4a3f6b auf Pastell besteht, mittlere Grautöne nicht

Don't

  • füge keinen gesättigten Akzent für "Pop" hinzu; das bricht die Ruhe
  • nutze keinen Dark Mode; Pastell überlebt ihn nicht
  • nutze keine scharfen Ecken oder dünnen Ränder

Bekannt dafür: Notion-Template-Shops, Headspace (teilweise), Finch-App, Calm-nahe Wellness-Apps, Sanrio-Marketing

CSS-Seed
:root {
  --bg: #fbf8ff;
   --fg: #4a3f6b;
   --accent: #e9dcff;
   --accent2: #d8f3ec;
   --accent3: #ffe1d6;
   --radius: 20px;
   --shadow: 0 12px 30px rgba(169,143,224,0.25);
   --font: 'Quicksand',sans-serif
}
Prompt

Baue die Seite im Pastell-Soft-UI-Stil. Hintergrund #fbf8ff mit zwei unscharfen Klecksen hinter dem Hero (#e9dcff und #d8f3ec, filter blur(90px), opacity 0.8). Text #4a3f6b, Sekundär #7d739c, kein reines Schwarz. Pastelltöne: Flieder #e9dcff, Mint #d8f3ec, Pfirsich #ffe1d6, Babyblau #d9ecff, Butter #fff3c4. Schrift Quicksand: Überschriften 700 bei 44/32/22px, Fließtext 500 bei 17px line-height 1.65. Karten: weiß, border-radius 20px, box-shadow 0 12px 30px rgba(169,143,224,0.25), 28px Padding; jede Karte bekommt ein pastellfarbenes Kopfband oder Icon-Badge in einem anderen Ton. Primärbutton: linear-gradient(135deg, #c9b3ff, #a98fe0), weißer Text, Radius 999px, 48px hoch, Schatten im selben Lila bei 30 %. Eingabefelder: #f4f0fb Füllung, kein Rand, Radius 14px, Fokusring 3px #c9b3ff. Icons 24px, 2px Strich, runde Verbindungen, in #7d739c. Ergänze kleine Funkel-SVGs neben der Headline. Motion: Kleckse driften 20px über 12s, Karten heben sich bei Hover 4px über 250ms ease.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite im Pastell-Soft-UI-Stil. Hintergrund #fbf8ff mit zwei unscharfen Klecksen hinter dem Hero (#e9dcff und #d8f3ec, filter blur(90px), opacity 0.8). Text #4a3f6b, Sekundär #7d739c, kein reines Schwarz. Pastelltöne: Flieder #e9dcff, Mint #d8f3ec, Pfirsich #ffe1d6, Babyblau #d9ecff, Butter #fff3c4. Schrift Quicksand: Überschriften 700 bei 44/32/22px, Fließtext 500 bei 17px line-height 1.65. Karten: weiß, border-radius 20px, box-shadow 0 12px 30px rgba(169,143,224,0.25), 28px Padding; jede Karte bekommt ein pastellfarbenes Kopfband oder Icon-Badge in einem anderen Ton. Primärbutton: linear-gradient(135deg, #c9b3ff, #a98fe0), weißer Text, Radius 999px, 48px hoch, Schatten im selben Lila bei 30 %. Eingabefelder: #f4f0fb Füllung, kein Rand, Radius 14px, Fokusring 3px #c9b3ff. Icons 24px, 2px Strich, runde Verbindungen, in #7d739c. Ergänze kleine Funkel-SVGs neben der Headline. Motion: Kleckse driften 20px über 12s, Karten heben sich bei Hover 4px über 250ms ease.

## Tokens
:root { --bg:#fbf8ff; --fg:#4a3f6b; --accent:#e9dcff; --accent2:#d8f3ec; --accent3:#ffe1d6; --radius:20px; --shadow:0 12px 30px rgba(169,143,224,0.25); --font:'Quicksand',sans-serif }

Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.