Design for AI

Estilo Redondeado juguetón: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para redondeado juguetón. También llamado estilo Duolingo, UI juguetona y robusta, UI de botones 3D, UI gamificada, diseño redondeado amigable. 2019 en adelante (rediseño de Duolingo en 2019, Headspace, mascotas de Notion).

Rasgos

  • formas completamente redondeadas: botones píldora, radio de tarjeta de 16-24px, avatares e insignias circulares
  • botones robustos "pulsables" con un canto inferior sólido (border-bottom 4px en un tono más oscuro) que se aplasta al pulsar
  • paleta brillante, saturada y alegre: verde, azul, amarillo, rojo, púrpura sobre blanco
  • sans redondeada y contundente en pesos pesados; titulares grandes y amigables
  • mascotas y personajes ilustrados planos con caras expresivas
  • barras de progreso, rachas, XP, insignias: mecánicas de juego como UI
  • movimiento saltarín: easings elásticos, meneos, confeti al acertar

Paleta

#ffffff página, #4b4b4b texto, #58cc02 verde, #1cb0f6 azul, #ffc800 amarillo, #ff4b4b rojo, #ce82ff púrpura, #e5e5e5 línea

Tipografía

Nunito (800-900 para títulos, 700 para botones), Fredoka, Baloo 2 o Varela Round; títulos 800 a 32-56px, cuerpo 500 a 17px, botones 700 en mayúsculas a 15px con tracking 0.05em

Haz

  • construye los botones con un color sólido, border-bottom 4px en un tono un 20% más oscuro, radio 16px; en active quita el borde inferior y aplica translateY(4px)
  • dale a cada estado un color y un icono: correcto es verde, incorrecto es rojo, bloqueado es gris
  • usa una mascota en tres poses (reposo, contenta, triste) y reutilízala con coherencia

Evita

  • no uses fuentes finas ni texto gris por debajo de #777; el estilo es de alta energía
  • no uses sombras proyectadas para la profundidad; usa el canto inferior 3D
  • no metas esquinas afiladas en ningún sitio, inputs e imágenes incluidos

Conocido por: Duolingo, Headspace (parcial), Khan Academy Kids, Kahoot

Semilla CSS
:root {
  --bg: #ffffff;
   --fg: #4b4b4b;
   --accent: #58cc02;
   --accent-dark: #58a700;
   --accent2: #1cb0f6;
   --accent3: #ffc800;
   --line: #e5e5e5;
   --radius: 16px;
   --font: 'Nunito',sans-serif
}
Prompt

Construye el sitio en estilo redondeado juguetón tipo Duolingo. Fondo #ffffff, texto #4b4b4b, apagado #afafaf, líneas #e5e5e5. Colores: verde #58cc02 (oscuro #58a700), azul #1cb0f6 (oscuro #1899d6), amarillo #ffc800 (oscuro #e5a800), rojo #ff4b4b, púrpura #ce82ff. Fuente Nunito: títulos 800 a 52/36/26px, cuerpo 500 a 17px con line-height 1.5, botones 700 en mayúsculas 15px con tracking 0.05em. Botones: relleno sólido, texto blanco, border-radius 16px, 50px de alto, border-bottom 4px solid en el tono más oscuro; en active border-bottom 0 y translateY(4px), 80ms. Botones secundarios: blancos con borde 2px #e5e5e5 y canto inferior de 4px. Tarjetas: borde 2px #e5e5e5, radio 16px, padding 24px, sin sombra. Barra de progreso: píldora de 16px de alto, pista #e5e5e5, relleno #58cc02 con una franja de realce más clara de 4px encima. Las insignias son círculos de 64px con iconos planos. Añade una ilustración de mascota amigable (plana, redondeada, ojos grandes) junto al titular del hero. Movimiento: spring (cubic-bezier(0.34,1.56,0.64,1)) a 300ms al aparecer; la mascota se menea 3deg en hover; explosión de confeti al enviar el formulario con éxito.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en estilo redondeado juguetón tipo Duolingo. Fondo #ffffff, texto #4b4b4b, apagado #afafaf, líneas #e5e5e5. Colores: verde #58cc02 (oscuro #58a700), azul #1cb0f6 (oscuro #1899d6), amarillo #ffc800 (oscuro #e5a800), rojo #ff4b4b, púrpura #ce82ff. Fuente Nunito: títulos 800 a 52/36/26px, cuerpo 500 a 17px con line-height 1.5, botones 700 en mayúsculas 15px con tracking 0.05em. Botones: relleno sólido, texto blanco, border-radius 16px, 50px de alto, border-bottom 4px solid en el tono más oscuro; en active border-bottom 0 y translateY(4px), 80ms. Botones secundarios: blancos con borde 2px #e5e5e5 y canto inferior de 4px. Tarjetas: borde 2px #e5e5e5, radio 16px, padding 24px, sin sombra. Barra de progreso: píldora de 16px de alto, pista #e5e5e5, relleno #58cc02 con una franja de realce más clara de 4px encima. Las insignias son círculos de 64px con iconos planos. Añade una ilustración de mascota amigable (plana, redondeada, ojos grandes) junto al titular del hero. Movimiento: spring (cubic-bezier(0.34,1.56,0.64,1)) a 300ms al aparecer; la mascota se menea 3deg en hover; explosión de confeti al enviar el formulario con éxito.

## Tokens
:root { --bg:#ffffff; --fg:#4b4b4b; --accent:#58cc02; --accent-dark:#58a700; --accent2:#1cb0f6; --accent3:#ffc800; --line:#e5e5e5; --radius:16px; --font:'Nunito',sans-serif }

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