Design for AI

Pastel soft UI: UI design prompt

Palette, type rules and a pasteable prompt for pastel soft ui. Also called pastel design, soft pastel UI, candy UI, dreamy UI, soft aesthetic, kawaii-lite. 2019 onward (Dribbble, Notion covers, wellness and lifestyle apps).

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
: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.
For design.md, .cursorrules or AGENTS.md
## Design direction
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.

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

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