Sistema de design inspirado no Duolingo

Category: Produtividade & SaaS Plataforma de aprendizado de idiomas. Verde coruja brilhante, sombras grossas, alegria gamificada.

1. Tema visual e atmosfera

O Duolingo é a gamificação expressa como linguagem visual. A interface é descaradamente brilhante, com o verde coruja (#58cc02) como cor primária da marca e uma sombra grossa de 4px na parte inferior de cada elemento interativo, que parece um botão 3D esperando para ser pressionado. A página é branca (#ffffff) com bordas grossas de 2–3px em cinza escuro (#e5e5e5), e o sistema inteiro lembra um aplicativo iOS de 2015 renascido com melhor hierarquia.

A tipografia usa Feather Bold (uma sans-serif arredondada personalizada) para o chrome e Mona Sans (ou Inter) para o corpo do texto. Os tamanhos de exibição são grandes e confiantes — o Duolingo nunca sussurra. Os títulos frequentemente têm o traço de sublinhado verde ou ficam sobre uma pílula verde, e o mascote Duo (uma coruja verde) aparece como um personagem de ilustração ativo, não como um logotipo estático.

A linguagem de formas é amigável: raios de 16–20px nos cartões, 12px nos botões, 9999px nos chips e barras de progresso. A iconografia é preenchida, arredondada e codificada por cor de acordo com a habilidade — cada superfície de lição tem um par de cores instantaneamente identificável.

Características principais:

• Verde coruja (#58cc02) como cor de marca dominante, usada em mais de 30% da superfície
• Sombra inferior grossa de 4px em cada botão (a affordance de “pressão tátil”)
• Bordas sólidas de 2–3px, nunca linhas finas
• Feather Bold (display arredondado) + Mona Sans (corpo)
• Texto grande e confiante — os tamanhos de exibição começam em 48px e crescem
• Mascote como personagem: a coruja Duo aparece no onboarding, erros, sequências
• Laranja de sequência (#ff9600) e rosa gema (#ce82ff) como cores de marca secundárias

2. Paleta de cores e papéis

Primário

• Verde coruja (#58cc02): Primário da marca, CTA principal, resposta correta.
• Verde coruja escuro (#58a700): Cor de pressionamento/sombra para botões verdes.
• Verde coruja claro (#89e219): Hover, preenchimentos suaves.
• Verde coruja pálido (#dbf8c5): Superfície suave, banner de sucesso.

Acentos secundários

• Laranja de sequência (#ff9600): Contador de sequência, ícone de chama, energia premium.
• Laranja de sequência escuro (#cc7a00): Laranja pressionado.
• Rosa gema (#ce82ff): Moeda gema, Super Duolingo.
• Azul enguia (#1cb0f6): Botão de dica, link de informação.
• Vermelho cardeal (#ff4b4b): Resposta errada, vida perdida.
• Amarelo abelha (#ffc800): Distintivo pro, conquista.

Superfície

• Neve (#ffffff): Fundo principal.
• Enguia (#f7f7f7): Separação de seção, superfície secundária.
• Cisne (#e5e5e5): Fundo desativado, bloco embutido.
• Lobo (#777777): Divisor escuro, texto secundário.

Tinta e texto

• Preto enguia (#3c3c3c): Texto principal.
• Lobo (#777777): Texto secundário, legendas.
• Lebre (#afafaf): Desativado, espaço reservado.

Borda

• Cisne (#e5e5e5): Borda padrão de 2px.
• Lebre (#afafaf): Borda enfatizada ao passar o cursor.

3. Regras tipográficas

Família de fontes

• Display / UI / Títulos: Feather Bold, com fallback: 'DIN Round Pro', 'Helvetica Neue', sans-serif
• Corpo / Texto longo: Mona Sans, com fallback: 'Helvetica Neue', system-ui, sans-serif
• Código (raro, escolas/admin): JetBrains Mono, com fallback: ui-monospace, Menlo, monospace

Hierarquia

Princípios

• 800 é o padrão: O Feather Bold usa peso 800 em títulos e botões. 700 parece fraco neste sistema.
• Texto grande: os tamanhos de título são 25–40% maiores do que marcas de produtos típicas — confiança como identidade.
• Formas de letras arredondadas: cada glifo tem terminações suaves; serifas afiadas quebrariam o contrato de amizade.

4. Estilização de componentes

Botões

Primário (Verde coruja)

• Fundo: #58cc02
• Texto: #ffffff
• Preenchimento: 14px 24px
• Raio: 16px
• Border-bottom: 4px solid #58a700 (a sombra grossa)
• Hover: fundo #89e219
• Ativo: translate-y 4px, border-bottom 0 (o botão “pressiona”)
• Uso: “Continuar”, “Verificar”, CTA principal.

Secundário (Branco com sombra inferior)

• Fundo: #ffffff
• Texto: #777777
• Borda: 2px solid #e5e5e5
• Border-bottom: 4px solid #e5e5e5
• Raio: 16px
• Preenchimento: 14px 24px
• Hover: texto #3c3c3c, borda #afafaf

Laranja de sequência

• Fundo: #ff9600
• Texto: #ffffff
• Border-bottom: 4px solid #cc7a00
• Uso: meta de sequência, “Iniciar sequência”

Erro (Vermelho cardeal)

• Fundo: #ff4b4b
• Texto: #ffffff
• Border-bottom: 4px solid #cc3b3b
• Uso: feedback de resposta errada.

Cartões / Blocos de lição

• Fundo: #ffffff
• Borda: 2px solid #e5e5e5
• Border-bottom: 4px solid #e5e5e5
• Raio: 16px
• Preenchimento: 16px
• Hover: elevar 2px, sombra 0 4px 0 #d7d7d7

Nó da árvore de habilidades (Bolha de lição)

• Tamanho: 80×72px
• Fundo: tonalidade da cor da habilidade (verde para ativo, cinza para bloqueado)
• Border-bottom: 6px solid variante mais escura
• Raio: 50% (circular)
• Ativo: pulsa 1.0 → 1.05 a cada 1.6s

Entradas

• Fundo: #ffffff
• Borda: 2px solid #e5e5e5
• Raio: 12px
• Preenchimento: 12px 16px
• Foco: borda #1cb0f6 (azul enguia), anel 0 0 0 3px rgba(28, 176, 246, 0.2)

Barra de progresso

• Trilha: #e5e5e5
• Preenchimento: #58cc02 (ou #ff9600 para sequência)
• Raio: 9999px
• Altura: 16px
• Preenchimento animado: 320ms ease-out ao incrementar.

5. Espaçamento e layout

• Unidade base: 4px. Escala: 4, 8, 12, 16, 24, 32, 48, 64.
• Contêiner: máx. 1080px, calha de 24px.
• Coluna da árvore de lições: 320px de largura; centralizada no desktop.

6. Movimento

• Duração: 180ms para pressionar botão; 320ms para desbloqueio de nó de habilidade; 1.6s para pulso do nó ativo.
• Easing: cubic-bezier(0.34, 1.56, 0.64, 1) (back-out, leve ultrapassagem) para desbloqueios.
• Mascote: Duo pisca a cada 4–6s, pula em marcos de sequência (480ms ease-out mola).

7. Diretrizes de uso

• Mantenha juntos o verde coruja de alta saturação, as sombras inferiores grossas e a geometria arredondada das lições; botões verdes planos sozinhos não transmitem a identidade do Duolingo.
• Reserve o texto em negrito de tamanho grande para momentos de lição, sequência e progresso onde o produto precisa de encorajamento ou feedback.
• Use movimento lúdico com moderação em torno de mudanças de estado de progresso, evitando animações genéricas de quique em cada controle.