Design for AI

Estilo Soft UI pastel: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para soft ui pastel. También llamado diseño pastel, UI pastel suave, UI caramelo, UI de ensueño, estética soft, kawaii ligero. 2019 en adelante (Dribbble, portadas de Notion, apps de bienestar y estilo de vida).

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
: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.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
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.

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

Mantén estados hover y focus-visible en cada elemento interactivo. No añadas un framework CSS.