# 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

| Papel | Fonte | Tamanho | Peso | Altura de linha | Espaçamento | Notas |
|------|------|------|--------|-------------|----------------|-------|
| Display | Feather Bold | 56px (3.5rem) | 800 | 1.05 | -0.01em | Herói de onboarding |
| H1 | Feather Bold | 32px (2rem) | 800 | 1.15 | -0.005em | Título da página |
| H2 | Feather Bold | 24px (1.5rem) | 800 | 1.2 | normal | Cabeçalho de seção |
| H3 | Feather Bold | 18px (1.125rem) | 700 | 1.25 | normal | Título do cartão, linha de lição |
| Corpo grande | Mona Sans | 17px (1.0625rem) | 500 | 1.5 | normal | Prompt de lição, instrução |
| Corpo | Mona Sans | 15px (0.9375rem) | 400 | 1.5 | normal | Prosa padrão |
| Legenda | Mona Sans | 13px (0.8125rem) | 600 | 1.4 | 0.01em | Contador de XP, metadados |
| Botão | Feather Bold | 16px (1rem) | 800 | 1.2 | 0.02em | Rótulo padrão de botão |
| Sequência | Feather Bold | 14px (0.875rem) | 800 | 1.2 | normal | Número de sequência, na chama |

### 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.