Soft Pastel Design

Soft Pastel Design

"Calm, airy, and gentle. A low-stress interface built on washed-out, cheerful hues."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Desaturated, High-Lightness Colors: Every color is mixed with a heavy amount of white.
2. Soft, Rounded Edges: Border radii are large and friendly.
3. Airy Spacing: Generous whitespace prevents the soft colors from feeling muddy or crowded.

Visual DNA

• Colors: Mint green, baby blue, blush pink, lavender, and buttercream yellow. Use a warm, slightly off-white background (e.g., #FFFBF7) rather than clinical #FFFFFF.
• Typography: Soft, rounded sans-serifs (Quicksand, Nunito) or elegant, low-contrast serifs. Avoid aggressive, ultra-bold fonts.
• Shadows: Very soft, large-spread shadows, often tinted with the pastel color rather than black.

Web Implementation

• CSS Example:

:root {
  --pastel-bg: #FFFBF7;
  --pastel-pink: #FFD1DC;
  --pastel-blue: #AEC6CF;
  --pastel-green: #B7E4C7;
  --pastel-text: #4A4A4A; /* Soft dark grey, NOT pure black */
}

body {
  background-color: var(--pastel-bg);
  color: var(--pastel-text);
  font-family: 'Nunito', sans-serif;
  line-height: 1.6;
}

.pastel-card {
  background-color: #ffffff;
  border-radius: 24px;
  padding: 40px;