# Soft UI pastel

También llamado: diseño pastel, UI pastel suave, UI caramelo, UI de ensueño, estética soft, kawaii ligero  
Época: 2019 en adelante (Dribbble, portadas de Notion, apps de bienestar y estilo de vida)  
Página: https://designforai.dev/es/style/pastel-soft-ui

## Rasgos

- tintes claros desaturados: lila, menta, melocotón, azul bebé, amarillo mantequilla sobre una base casi blanca
- radio suave (16-24px), sombras pálidas en el color del tinte, sin negro en ningún sitio
- texto en un púrpura apagado profundo o pizarra en vez de negro
- sans redondeada y amigable; a veces una serif suave para los títulos
- gradientes suaves entre dos pasteles, manchas desenfocadas en el fondo
- iconos redondeados con trazos de 2px, pequeñas pegatinas y destellos como acentos
- movimiento tranquilo: flotaciones lentas, fundidos suaves

Paleta: #fbf8ff base, #e9dcff lila, #d8f3ec menta, #ffe1d6 melocotón, #d9ecff azul bebé, #fff3c4 mantequilla, #4a3f6b texto

Tipografía: Quicksand, Nunito, Poppins o DM Sans para todo; opcionalmente Lora o Playfair para títulos; títulos 700 a 36-48px, cuerpo 400-500 a 16-17px

## Haz

- mantén cada color al 15-35% de saturación y por encima del 85% de luminosidad, salvo el texto
- usa sombras tintadas (acento al 25% de alfa, blur de 20-30px) para que las tarjetas parezcan flotar sobre algodón
- comprueba el contraste del texto; el púrpura profundo #4a3f6b sobre pasteles pasa, los grises medios no

## Evita

- no añadas un acento saturado para dar "chispa"; rompe la calma
- no uses modo oscuro; los pasteles no lo sobreviven
- no uses esquinas afiladas ni bordes finos

Conocido por: Tiendas de plantillas de Notion, Headspace (parcial), app Finch, apps de bienestar cercanas a Calm, marketing de Sanrio

## Semilla CSS

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

Construye el sitio en estilo soft UI pastel. Fondo #fbf8ff con dos manchas desenfocadas detrás del hero (#e9dcff y #d8f3ec, filter blur(90px), opacity 0.8). Texto #4a3f6b, secundario #7d739c, sin negro puro. Pasteles: lila #e9dcff, menta #d8f3ec, melocotón #ffe1d6, azul bebé #d9ecff, mantequilla #fff3c4. Fuente Quicksand: títulos 700 a 44/32/22px, cuerpo 500 a 17px con line-height 1.65. Tarjetas: blancas, border-radius 20px, box-shadow 0 12px 30px rgba(169,143,224,0.25), padding 28px; cada tarjeta recibe una banda de cabecera pastel o una insignia de icono en un tinte distinto. Botón primario: linear-gradient(135deg, #c9b3ff, #a98fe0), texto blanco, radio 999px, 48px de alto, sombra en el mismo púrpura al 30%. Inputs: relleno #f4f0fb, sin borde, radio 14px, anillo de foco 3px #c9b3ff. Iconos de 24px, trazo de 2px, uniones redondeadas, en #7d739c. Añade pequeños SVG de destellos cerca del titular. Movimiento: las manchas se desplazan 20px durante 12s, las tarjetas se elevan 4px en hover durante 250ms ease.