Duolingo
Mascota xoguetona da clase en papel branco
A interface de Duolingo está deseñada como un libro infantil ilustrado: un lenzo de papel branco, unha fonte grosa e redondeada e unha única cor verde rica que evoca inmediatamente a "resposta correcta". O texto principal é dun ton gris medio suave, o que permite que o verde e o seu azul de acento fagan todo o traballo emocional: o verde para o progreso e os títulos, o azul para as ligazóns clicables e as accións adicionais. Os compoñentes teñen forma de pílulas ou esquinas grosas e redondeadas con bordos grosos negros ou de cores, o que fai que cada botón pareza máis unha pegatina pegada á páxina que un control de interface de usuario plano.
As seccións ocupan todo o ancho da páxina e están dispostas verticalmente nunha soa columna, cada unha de aproximadamente 800 píxeles de alto. O ancho máximo do contido é de aproximadamente 1 píxel centrado. O texto da esquerda e as ilustracións da dereita altérnanse, proporcionando un amplo espazo vertical (80 píxeles entre seccións). Non hai tarxetas de cuadrícula nin deseños de varias columnas: cada sección é un único bloque de texto emparellado cunha única ilustración. A navegación é unha barra superior minimalista cun logotipo e un selector de idioma, que aparece como unha barra fixa entre as seccións. O pé de páxina é unha franxa verde que abrangue todo o ancho da páxina. O ritmo é editorial: título, parágrafo, chamada á acción, ilustración, repetición.
A linguaxe ilustrativa do libro presenta personaxes de mascota planos e bidimensionais (Dueto a curuxa e varias figuras humanas) con formas xeométricas redondeadas, contornos negros atrevidos e unha paleta de cores complementarias de rosa, morado, amarelo, laranxa e azul que nunca aparece na propia interface. As ilustracións están situadas xunto ao texto no lado dereito de cada sección, sobre un fondo branco puro, sen contedores nin fondos. Non hai fotografías: os personaxes serven como contido visual. A iconografía usa contornos grosos, coherentes co estilo das mascotas. A densidade da imaxe é moderada: cada sección presenta unha gran ilustración do personaxe, mentres que o resto da páxina está dedicada á tipografía e ao espazo en branco.
Paleta
Marca
- Eager Green
#58cc02— O verde úsase para destacar ligazóns, etiquetas e frases curtas. Non se debe usar como cor principal para as chamadas á acción. - Storybook Green
#d7ffb8— Destacados suaves sobre superficies claras, tons de fondo sutís detrás das etiquetas de navegación no pé de páxina.
Neutro
- Spark Blue
#1cb0f6— O azul úsase para destacar ligazóns, etiquetas e frases curtas. Non se debe usar como cor principal para as chamadas á acción. - Fresh Leaf
#a5ed6e— O verde úsase para destacar ligazóns, etiquetas e frases curtas. Non se debe usar como cor principal para as chamadas á acción. - Night Ink
#000437— As ligazóns, as etiquetas e as frases curtas destacadas están resaltadas en cor púrpura. - Paper White
#ffffff— Lenzo da páxina, superficies de cartón, texto de botóns sobre fondo verde/escuro. - Charcoal
#4b4b4b— Cabeceiras e corpo do texto principais: texto escuro universal que permite que os titulares de cores destaquen. - Pencil Gray
#777777— Os parágrafos principais do texto están resaltados con letras pouco visibles e o texto descritivo secundario retrocede ao fondo, de xeito que os elementos coloreados pasan a primeiro plano.
Tipografía
de 13 a 64 px · 7 pasos
- feather — substitución: Inter · contornos 700 · Os títulos das seccións, como "Gratis. Divertido. Eficaz" e "Exame de inglés de Duolingo", móstranse cunha fonte redondeada personalizada, o que lle dá á marca o seu estilo lúdico, amigable e de mascota. Substitúeos por "Feather Bold" ou "Nunito Black" co grosor axeitado. Espazado entre letras: -0,0200 em
- duolingo-sans — substitución: Inter · contornos 500 · Parágrafos principais e ligazóns de navegación a 17px/500: unha fonte sans-serif xeométrica lexible, que permite que o grosor de liña de 700 destaque os puntos importantes. Substitúa por «DIN Next», «Inter» ou «Nunito Sans».
- duolingo-sans — substitución: Inter · contornos 700 · Úsanse todos os valores de peso 700: as maiúsculas nas etiquetas de navegación son de 15 px (ls 0,0530em), os subtítulos son de 19 px e 32 px e a énfase das ligazóns é de 13 px. A mesma fonte que o texto principal; a diferenza visual reside no grosor, non no cambio de fonte. Espazado entre letras: 0,0530em para as maiúsculas nas etiquetas de navegación.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | denso |
| Paso básico | 12px |
| Radio do botón | 12px |
| Radio da tarxeta | 12px |
| Sombras | sen bordos en vez de sombras |
| Entre seccións | 80-120px |
| Largura da páxina | 1200px |
A IA creará o teu sitio web ao estilo de Duolingo e o encherá
- Enche con produtos e publicacións a través da ligazón: Instagram, TikTok, Facebook.
- Transfire contido do teu sitio antigo: só tes que especificar o enderezo.
- Deseño moderno no mellor motor: React ( Next.js) con renderización de servidor e optimización SEO listas para usar.
- Optimización SEO totalmente automatizada para resultados de busca e recomendacións de redes neuronais.
Estilos semellantes
- Family — Unha tirada dun conto de fadas en pergamiño crema
- Say Briefly — Caderno de bosquexos de axencia creativa en papel crema
- Flying Papers — Confesión nun debuxo animado do sábado pola mañá
- Portrait — Un muro de recordos, capturados en Polaroids en papel cor crema. Un álbum de recortes brillante e cor crema onde a tinta azul escura serve como único texto, as únicas liñas de estrutura e a única cor do marco, cun único arco da vella debuxado a man que aparece unha vez, no botón "Rexistrarse" e na palabra en cursiva "para sempre", e nunca máis.
- Karl — Un diorama en 3D ao estilo dun libro emerxente nun día soleado
- Navigate — Un gran conxunto de adhesivos pegados a un taboleiro: unha gran fonte grotesca, todo en forma de tabletas e cinco iconas multicolores, que se repiten como un logotipo
- Monte — Mañá na costa cun ton oxidado
- MotherDuck — Terminal codificado con lapis de cores sobre papel crema
- Wise Design — Un posto de mercado de neón nunha rúa global: un letreiro verde brillante que berra a través do mercado ateigado, mentres que detrás del aparece discretamente unha interface de usuario de produto pulida.
- Hatch — Un deseño debuxado a man, de estilo samizdat, mesturado con cuncas de doces en tons pastel. Un lenzo de papel cremoso adornado con detalles en cor menta, puntos de confeti e chamadas á acción en forma de pílula, onde unha fonte serif grande e en negriña alude á diversión e unha mascota azul fai un guiño nun recuncho.
- Superr — Un caderno escolar cálido á suave luz da tarde. Unha páxina de cor crema, un rotulador laranxa sen tapa e unha pila de adhesivos plastificados cos nomes á espera de ser despegados.
- Mews — Un centro de control de hostalería ao amencer, empapado de rosa. Un espazo de traballo de paredes brancas e iluminado polo sol onde a tipografía negra en negriña, as tarxetas cor crema cálida e un único botón de acción rosa intenso definen cada pantalla: unha confianza lúdica en lugar de moderación corporativa.