# Pastell Soft UI

Auch bekannt als: Pastelldesign, weiches Pastell-UI, Candy UI, Dreamy UI, Soft Aesthetic, Kawaii-lite  
Ära: ab 2019 (Dribbble, Notion-Cover, Wellness- und Lifestyle-Apps)  
Seite: https://designforai.dev/de/style/pastel-soft-ui

## 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

```css
: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.