Design Pastel Suave

"Calmo, arejado e gentil. Uma interface de baixo estresse construída com tons alegres e desbotados."

Quando Usar

Use este subestilo quando o pedido do usuário corresponder à estética descrita acima. Esta é uma referência filha da habilidade design-it e não deve ser acionada diretamente.

Princípios Fundamentais

1. Cores Dessaturadas e de Alto Brilho: Cada cor é misturada com uma grande quantidade de branco.
2. Bordas Suaves e Arredondadas: Raios de borda são grandes e amigáveis.
3. Espaçamento Arejado: Espaço em branco generoso evita que as cores suaves pareçam turvas ou lotadas.

DNA Visual

• Cores: Verde menta, azul bebê, rosa blush, lavanda e amarelo manteiga. Use um fundo branco quente e ligeiramente fora do branco (por exemplo, #FFFBF7) em vez de um branco clínico #FFFFFF.
• Tipografia: Fontes sem serifa suaves e arredondadas (Quicksand, Nunito) ou fontes serifadas elegantes e de baixo contraste. Evite fontes agressivas e ultra-negrito.
• Sombras: Sombras muito suaves e de grande dispersão, muitas vezes tingidas com a cor pastel em vez de preto.

Implementação Web

• Exemplo de CSS:

: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;
  /* Tinted, very soft shadow */
  box-shadow: 0 20px 40px rgba(174, 198, 207, 0.15); 
}

.pastel-pill {
  background-color: var(--pastel-pink);
  color: #a05a6c; /* Darker version of the pink for contrast */
  border-radius: 50px;
  padding: 8px 24px;
  font-weight: 700;
  display: inline-block;
}

.pastel-btn {
  background-color: var(--pastel-blue);
  color: #2b5563; /* Darker text */
  border: none;
  border-radius: 12px;
  padding: 16px 32px;
  transition: transform 0.2s;
}
.pastel-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(174, 198, 207, 0.4);
}

Implementação de Aplicativo

SwiftUI

struct SoftPastelView: View {
    // Pastel Palette
    let bg = Color(hex: "FFFBF7")
    let pink = Color(hex: "FFD1DC")
    let blue = Color(hex: "AEC6CF")
    let textDark = Color(hex: "4A4A4A")
    
    var body: some View {
        ScrollView {
            VStack(spacing: 32) {
                // Pastel Card
                VStack(alignment: .leading, spacing: 16) {
                    Text("Calm & Airy")
                        .font(.custom("Nunito-Bold", size: 28))
                        .foregroundColor(textDark)
                    
                    Text("Generous whitespace and soft corners prevent the desaturated colors from feeling muddy.")
                        .font(.custom("Nunito-Regular", size: 16))
                        .foregroundColor(textDark.opacity(0.8))
                        .lineSpacing(6)
                }
                .padding(40)
                .frame(maxWidth: .infinity, alignment: .leading)
                .background(Color.white)
                .cornerRadius(32) // Soft, large radius
                // Tinted pastel shadow instead of black/gray
                .shadow(color: blue.opacity(0.2), radius: 30, y: 15)
                
                // Pastel Button
                Button(action: {}) {
                    Text("Gentle Action")
                        .font(.custom("Nunito-Bold", size: 18))
                        .foregroundColor(Color(hex: "2B5563")) // Darker contrast of the blue
                        .frame(maxWidth: .infinity)
                        .padding(.vertical, 20)
                        .background(blue)
                        .cornerRadius(20)
                }
            }
            .padding(24)
        }
        .background(bg.ignoresSafeArea())
    }
}

• Uma fonte personalizada como Nunito ou Quicksand é praticamente obrigatória. Fontes do sistema são frequentemente muito rígidas.
• O shadow(color:) deve ser tingido com uma das cores da sua paleta pastel, nunca preto ou cinza.
• Raios de canto devem ser muito grandes (20-32).

Flutter

class SoftPastelScreen extends StatelessWidget {
  final Color bg = const Color(0xFFFFFBF7);
  final Color pink = const Color(0xFFFFD1DC);
  final Color blue = const Color(0xFFAEC6CF);
  final Color textDark = const Color(0xFF4A4A4A);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: bg,
      body: SingleChildScrollView(

…