Duolingo
Mascota divertida de la clase en papel blanco
La interfaz de Duolingo está diseñada como un libro ilustrado infantil: un lienzo blanco, una tipografía redondeada y un único color verde intenso que evoca inmediatamente la "respuesta correcta". El texto principal presenta tonos grises suaves, lo que permite que el verde y su azul de acento transmitan toda la emoción: verde para el progreso y los títulos, azul para los enlaces clicables y las acciones adicionales. Los componentes tienen forma de píldora o esquinas redondeadas y gruesas, con bordes negros o de colores, lo que hace que cada botón parezca más una pegatina adherida a la página que un control de interfaz plano.
Las secciones ocupan todo el ancho de la página y se organizan verticalmente en una sola columna, cada una de aproximadamente 800 píxeles de alto. El ancho máximo del contenido es de aproximadamente 1 píxel centrado. El texto a la izquierda y las ilustraciones a la derecha se alternan, proporcionando un amplio espacio vertical (80 píxeles entre secciones). No hay tarjetas de cuadrícula ni diseños de varias columnas: cada sección es un único bloque de texto acompañado de una sola ilustración. La navegación es una barra superior minimalista con un logotipo y un selector de idioma, que aparece como una barra fija entre secciones. El pie de página es una franja verde que abarca todo el ancho de la página. El ritmo es editorial: título, párrafo, llamada a la acción, ilustración, repetición.
El lenguaje ilustrativo del libro presenta personajes mascota planos y bidimensionales (Duet, el búho, y varias figuras humanas) con formas geométricas redondeadas, contornos negros marcados y una paleta de colores complementarios de rosa, morado, amarillo, naranja y azul que nunca aparece en la interfaz. Las ilustraciones se ubican junto al texto en el lado derecho de cada sección, sobre un fondo blanco puro, sin contenedores ni fondos. No hay fotografías; los personajes constituyen el contenido visual. La iconografía utiliza contornos gruesos, en consonancia con el estilo de las mascotas. La densidad de imágenes es moderada: cada sección presenta una ilustración grande del personaje, y el resto de la página se dedica a la tipografía y al espacio en blanco.
Paleta
Marca
- Eager Green
#58cc02— El verde se utiliza para resaltar enlaces, etiquetas y frases cortas. No debe utilizarse como color principal para las llamadas a la acción. - Storybook Green
#d7ffb8— Suaves reflejos en superficies claras, sutiles tonos de fondo detrás de las etiquetas de navegación en el pie de página.
Neutral
- Spark Blue
#1cb0f6— El azul se utiliza para resaltar enlaces, etiquetas y frases cortas. No debe usarse como color principal para las llamadas a la acción. - Fresh Leaf
#a5ed6e— El verde se utiliza para resaltar enlaces, etiquetas y frases cortas. No debe utilizarse como color principal para las llamadas a la acción. - Night Ink
#000437— Los enlaces, las etiquetas y las frases cortas resaltadas aparecen en color púrpura. - Paper White
#ffffff— Lienzo de página, superficies de cartón, texto de botón sobre fondo verde/oscuro. - Charcoal
#4b4b4b— Encabezados y texto principal: texto oscuro universal que permite que los titulares de color destaquen. - Pencil Gray
#777777— Los párrafos principales del texto se resaltan con letras discretas, y el texto descriptivo secundario queda en segundo plano, de modo que los elementos de color pasan a primer plano.
Tipografía
De 13 a 64 píxeles · 7 pasos
- feather — reemplazo: Inter · esquemas 700 · Los encabezados de sección, como "Gratis. Divertido. Efectivo" y "Examen de inglés de Duolingo", se muestran con una fuente redondeada personalizada, lo que le da a la marca un estilo lúdico, amigable y con un toque de mascota. Reemplácelo con "Feather Bold" o "Nunito Black" en el grosor adecuado. Espaciado entre letras: -0.0200em
- duolingo-sans — reemplazo: Inter · esquemas 500 · Los párrafos principales y los enlaces de navegación tienen un tamaño de 17 px/500, con una fuente geométrica sans-serif que mantiene la legibilidad, permitiendo que el grosor de línea de 700 resalte los puntos importantes. Reemplazar con 'DIN Next', 'Inter' o 'Nunito Sans'.
- duolingo-sans — reemplazo: Inter · esquemas 700 · Se utilizan todos los valores de peso 700: las letras mayúsculas en las etiquetas de navegación tienen un grosor de 15 px (0,0530 em), los subtítulos de 19 px y 32 px, y el énfasis de los enlaces es de 13 px. Se utiliza la misma fuente que el texto principal; la diferencia visual radica en el grosor, no en el tipo de letra. El espaciado entre letras es de 0,0530 em para las mayúsculas en las etiquetas de navegación.
Intervalos y forma
| Objetivo | Significado |
|---|---|
| Densidad | denso |
| Paso básico | 12px |
| Radio del botón | 12px |
| Radio de la tarjeta | 12px |
| Oscuridad | no - bordes en lugar de sombras |
| Entre secciones | 80-120px |
| Ancho de página | 1200px |
La IA construirá tu sitio web al estilo de Duolingo y lo rellenará.
- Rellena con productos y publicaciones a través del enlace - Instagram, TikTok, Facebook.
- Transfiere el contenido de tu antiguo sitio web; solo tienes que especificar la dirección.
- Diseño moderno sobre el mejor motor: React ( Next.js) con renderizado del lado del servidor y optimización SEO integrada.
- Optimización SEO totalmente automatizada para resultados de búsqueda y recomendaciones mediante redes neuronales.
Estilos similares
- Family — Una página impresa en papel pergamino color crema, con un fragmento de un cuento de hadas.
- Say Briefly — Cuaderno de bocetos de agencia creativa en papel color crema.
- Flying Papers — Confesión en una caricatura de sábado por la mañana
- Portrait — Un muro de recuerdos, capturados en Polaroids sobre papel color crema. Un álbum de recortes brillante, color crema, donde la tinta azul oscuro sirve como único texto, las únicas líneas de estructura y el único color de marco, con un único arcoíris dibujado a mano que aparece una sola vez, en el botón "Registrarse" y en la palabra "para siempre" en cursiva, y nunca más.
- Karl — Un diorama en 3D estilo libro desplegable en un día soleado.
- Navigate — Un gran conjunto de pegatinas adheridas a un tablero: una fuente grande y grotesca, todo en forma de tabletas y cinco iconos multicolores que se repiten como un logotipo.
- Monte — Mañana en la costa con un tono rojizo.
- MotherDuck — Terminal codificado con lápices de colores sobre papel color crema.
- Wise Design — Un puesto de mercado de neón en una calle global: un letrero verde brillante que destaca entre la multitud del mercado, mientras que detrás, una interfaz de usuario de producto pulida aparece discretamente.
- Hatch — Un diseño dibujado a mano, al estilo samizdat, mezclado con cuencos de caramelos en tonos pastel. Un lienzo de papel cremoso adornado con detalles en menta, puntos de confeti y llamadas a la acción en forma de píldora, donde una fuente serif grande y llamativa insinúa diversión, y una mascota azul guiña un ojo en la esquina.
- Superr — Un cuaderno escolar cálido bajo la suave luz de la tarde. Una página color crema, un rotulador naranja sin tapa y una pila de pegatinas plastificadas con nombres, listas para ser despegadas.
- Mews — Un centro de control de hostelería al amanecer, bañado en rosa. Un espacio de trabajo de paredes blancas, bañado por el sol, donde la tipografía negra en negrita, las tarjetas de color crema cálido y un único botón de acción rosa fucsia definen cada pantalla: una confianza desenfadada en lugar de la sobriedad corporativa.