Duolingo
Mascote lúdico da turma em papel branco
A interface do Duolingo foi projetada como um livro ilustrado infantil: uma tela de papel branco, fonte arredondada e robusta e uma única cor verde vibrante que evoca imediatamente a "resposta correta". O texto principal apresenta tons suaves de cinza médio, permitindo que o verde e seu azul de destaque façam todo o trabalho emocional — verde para o progresso e títulos, azul para links clicáveis e ações adicionais. Os componentes têm o formato de pílulas ou cantos arredondados e robustos com bordas grossas pretas ou coloridas, fazendo com que cada botão pareça mais um adesivo colado na página do que um controle de interface plano.
As seções ocupam toda a largura da página e são organizadas verticalmente em uma única coluna, cada uma com aproximadamente 800 pixels de altura. A largura máxima do conteúdo é de aproximadamente 1 pixel centralizado. O texto à esquerda e as ilustrações à direita se alternam, proporcionando amplo espaço vertical (80 pixels entre as seções). Não há cartões de grade nem layouts com várias colunas — cada seção é um único bloco de texto acompanhado de uma única ilustração. A navegação é feita por uma barra superior minimalista com um logotipo e um seletor de idioma, que aparece como uma barra fixa entre as seções. O rodapé é uma faixa verde que se estende por toda a largura da página. O ritmo é editorial: título, parágrafo, chamada para ação, ilustração, repetição.
A linguagem ilustrativa do livro apresenta mascotes planos e bidimensionais (Duet, a coruja, e várias figuras humanas) com formas geométricas arredondadas, contornos pretos marcantes e uma paleta de cores complementares em rosa, roxo, amarelo, laranja e azul que nunca aparece na própria interface. As ilustrações são posicionadas ao lado do texto, à direita de cada seção, sobre um fundo branco puro, sem contêineres ou fundos. Não há fotografias — os personagens servem como conteúdo visual. A iconografia utiliza contornos grossos, consistentes com o estilo dos mascotes. A densidade de imagens é moderada: cada seção apresenta uma grande ilustração do personagem, com o restante da página dedicado à tipografia e ao espaço em branco.
Paleta
Marca
- Eager Green
#58cc02— A cor verde é usada para destacar links, tags e frases curtas. Não deve ser usada como cor principal para chamadas à ação. - Storybook Green
#d7ffb8— Destaques suaves em superfícies claras, tons de fundo sutis atrás dos rótulos de navegação no rodapé.
Neutro
- Spark Blue
#1cb0f6— O azul é usado para destacar links, tags e frases curtas. Não deve ser usado como cor principal para chamadas à ação. - Fresh Leaf
#a5ed6e— A cor verde é usada para destacar links, tags e frases curtas. Não deve ser usada como cor principal para chamadas à ação. - Night Ink
#000437— Links, tags e frases curtas em destaque aparecem na cor roxa. - Paper White
#ffffff— Página em tela, superfícies de papelão, texto em botão sobre fundo verde/escuro. - Charcoal
#4b4b4b— Títulos e corpo de texto em destaque - Texto escuro universal que permite que títulos coloridos se destaquem. - Pencil Gray
#777777— Os parágrafos principais do texto são destacados com letras discretas, e o texto descritivo secundário recua para o fundo, de modo que os elementos coloridos venham à tona.
Tipografia
de 13 a 64px · 7 etapas
- feather — substituição: Inter · esboços 700 · Os títulos das seções, como "Grátis. Divertido. Eficaz." e "Teste de Inglês Duolingo", são exibidos usando uma fonte arredondada personalizada, conferindo à marca um estilo divertido, amigável e semelhante a um mascote. Substitua por "Feather Bold" ou "Nunito Black" na espessura apropriada. Espaçamento entre letras: -0,0200em
- duolingo-sans — substituição: Inter · esboços 500 · Parágrafos principais e links de navegação em 17px/500 — uma fonte geométrica sem serifa que permanece legível, permitindo que a espessura de linha de 700 destaque os pontos importantes. Substitua por 'DIN Next', 'Inter' ou 'Nunito Sans'.
- duolingo-sans — substituição: Inter · esboços 700 · Todos os valores de peso 700 são usados: letras maiúsculas nos rótulos de navegação têm 15px (espaçamento entre letras de 0,0530em), subtítulos têm 19px e 32px, e a ênfase do link tem 13px. A mesma fonte do texto principal — a diferença visual está na espessura, não na mudança de fonte. Espaçamento entre letras: 0,0530em para letras maiúsculas nos rótulos de navegação.
Intervalos e forma
| Propósito | Significado |
|---|---|
| Densidade | denso |
| Passo básico | 12px |
| Raio do botão | 12px |
| Raio do cartão | 12px |
| Sombras | não - bordas em vez de sombras |
| Entre seções | 80-120px |
| Largura da página | 1200px |
A IA criará seu site no estilo Duolingo e o preencherá.
- Compartilhe produtos e publicações através dos links - Instagram, TikTok, Facebook.
- Transfira o conteúdo do seu site antigo — basta especificar o endereço.
- Design moderno na melhor engine: React ( Next.js) com renderização no servidor e otimização de SEO integradas.
- Otimização de SEO totalmente automatizada para resultados de pesquisa e recomendações de redes neurais.
Estilos semelhantes
- Family — Uma ilustração de um conto de fadas em pergaminho creme.
- Say Briefly — Caderno de esboços de agência criativa em papel creme
- Flying Papers — Confissão em um desenho animado de sábado de manhã
- Portrait — Uma parede de memórias, capturadas em Polaroids sobre papel creme. Um álbum de recortes claro, cor creme, onde a tinta azul escura serve como único texto, única linha de estrutura e única cor de moldura — com um único arco-íris desenhado à mão que aparece uma única vez, no botão "Registrar" e na palavra "para sempre" em itálico, e nunca mais.
- Karl — Um diorama em estilo livro pop-up 3D em um dia ensolarado.
- Navigate — Um grande conjunto de adesivos colados em um quadro: fonte grotesca grande, tudo em formato de tabletes, e cinco ícones multicoloridos, que se repetem como um logotipo.
- Monte — Manhã na costa com um tom ferrugem.
- MotherDuck — Terminal codificado com lápis de cor em papel creme.
- Wise Design — Uma barraca de mercado com iluminação neon em uma rua global — uma placa verde brilhante que se destaca no mercado lotado, enquanto, atrás dela, uma interface de usuário de produto refinada aparece discretamente.
- Hatch — Um design desenhado à mão, no estilo samizdat, misturado com tigelas de doces em tons pastel. Uma tela de papel cremoso adornada com detalhes em verde menta, confetes e chamadas à ação em formato de pílula, onde uma fonte serifada grande e ousada sugere diversão, e um mascote azul pisca no canto.
- Superr — Um caderno escolar quentinho sob a suave luz da tarde. Uma página cor creme, um marcador laranja sem tampa e uma pilha de etiquetas adesivas plastificadas com nomes, prontas para serem destacadas.
- Mews — Um centro de controle de hospitalidade ao amanhecer, banhado em tons de rosa. Um espaço de trabalho com paredes brancas e luz solar, onde letras pretas em negrito, cartões em tons creme e um único botão de ação rosa-choque definem cada tela — uma confiança lúdica em vez da sobriedade corporativa.