# Pastel soft UI

Also called: pastel design, soft pastel UI, candy UI, dreamy UI, soft aesthetic, kawaii-lite  
Era: 2019 onward (Dribbble, Notion covers, wellness and lifestyle apps)  
Page: https://designforai.dev/style/pastel-soft-ui

## Traits

- desaturated light tints: lilac, mint, peach, baby blue, butter yellow on a near-white base
- soft radius (16-24px), pale shadows in the tint colour, no black anywhere
- text in a deep muted purple or slate rather than black
- rounded, friendly sans; sometimes a soft serif for headings
- gentle gradients between two pastels, blurred blobs in the background
- rounded icons with 2px strokes, small stickers and sparkles as accents
- calm motion: slow floats, soft fades

Palette: #fbf8ff base, #e9dcff lilac, #d8f3ec mint, #ffe1d6 peach, #d9ecff baby blue, #fff3c4 butter, #4a3f6b text

Type: Quicksand, Nunito, Poppins or DM Sans for everything; optionally Lora or Playfair for headings; headings 700 at 36-48px, body 400-500 at 16-17px

## Do

- keep every colour at 15-35% saturation and above 85% lightness, except text
- use tinted shadows (accent at 25% alpha, 20-30px blur) so cards feel like they float on cotton
- check text contrast; deep purple #4a3f6b on pastels passes, mid greys do not

## Don't

- do not add a saturated accent for "pop"; it breaks the calm
- do not use dark mode; pastels do not survive it
- do not use sharp corners or thin borders

Known for it: Notion template shops, Headspace (partial), Finch app, Calm-adjacent 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

Build the site in pastel soft UI style. Background #fbf8ff with two blurred blobs behind the hero (#e9dcff and #d8f3ec, filter blur(90px), opacity 0.8). Text #4a3f6b, secondary #7d739c, no pure black. Pastels: lilac #e9dcff, mint #d8f3ec, peach #ffe1d6, baby blue #d9ecff, butter #fff3c4. Font Quicksand: headings 700 at 44/32/22px, body 500 at 17px line-height 1.65. Cards: white, border-radius 20px, box-shadow 0 12px 30px rgba(169,143,224,0.25), 28px padding; each card gets a pastel header band or icon badge in a different tint. Primary button: linear-gradient(135deg, #c9b3ff, #a98fe0), white text, radius 999px, 48px tall, shadow in the same purple at 30%. Inputs: #f4f0fb fill, no border, radius 14px, focus ring 3px #c9b3ff. Icons 24px, 2px stroke, rounded joins, in #7d739c. Add small sparkle SVGs near the headline. Motion: blobs drift 20px over 12s, cards lift 4px on hover over 250ms ease.