Estilo Duolingo
Inspirado no DuolingoO livro de histórias: papel branco, títulos redondos em verde e botões que parecem adesivos colados na página.
O Duolingo trata a página como um livro infantil: fundo branco, títulos gordinhos e arredondados e um verde saturado que lê como "resposta certa" assim que aparece. O texto corrido fica num cinza calmo, para o verde e o azul fazerem todo o trabalho de emoção: o verde nos títulos e no progresso, o azul nos links e nas ações de apoio. Os botões e as etiquetas têm cantos bem redondos e contorno grosso de 2 px, como adesivos, sem sombra, sem gradiente e sem vidro. O rodapé é uma faixa verde que fecha a página.
A ProfitizeBuild não tem relação com as marcas citadas. Os nomes e os logos só identificam a inspiração.
Fundos
Cada seção do site num destes, com o texto e o acento que vão sobre ele.
Acentos e detalhes
- Verde ansioso
#58cc02Os títulos grandes, o botão principal e a faixa do rodapé: é "vai" e "progresso" - Azul faísca
#1cb0f6Os links e o texto dos botões de contorno, o companheiro curioso do verde - Folha nova
#a5ed6eOs links do rodapé, sobre a faixa verde - Cinza lápis
#777777O texto corrido, que recua para as cores falarem - Contorno
#afafafO contorno de 2 px dos botões e das etiquetas
Tipografia
O Duolingo usa a Feather nos títulos e a Duolingo Sans no resto, que são dele e não podem ser distribuídas. Aqui e no arquivo vai a Nunito nas duas: a 800 arredondada nos títulos, a 500 e a 700 no texto.
- Título de seçãoNunito · 800grátis. divertido. todo dia.
- Título de aberturaNunito · 700O jeito divertido de aprender a tocar violão.
- SubtítuloNunito · 700Cinco minutos por dia, uma música por semana.
- CorpoNunito · 500Lições curtas que parecem um jogo, com acordes, ritmo e as músicas que você gosta.
- RótuloNunito · 700COMEÇAR AGORA
Componentes
Os botões, o campo e um cartão, desenhados no estilo da marca.
Regras
- Faça
- Títulos grandes em verde, redondos e gordinhos, com as letras um pouco mais juntas.
- Texto corrido em cinza médio, para o verde e o azul se destacarem.
- Botões e etiquetas com cantos de 12 px e contorno grosso de 2 px, como adesivos.
- O azul só nos links e nos botões de contorno; o verde no botão principal.
- Seções brancas com uma ilustração colorida ao lado do texto, sem caixa em volta.
- Caixa alta com letras espaçadas só nos rótulos e nos botões.
- Evite
- Nada de sombra, gradiente ou efeito de vidro: tudo é cor chapada.
- Nada de texto colorido no meio dos parágrafos.
- Nenhum canto reto, nem nas etiquetas pequenas.
- A fonte redonda dos títulos nunca em tamanho pequeno.
- As cores das ilustrações (rosa, roxo, amarelo) nunca nos botões e menus.
Movimento
- Os botões afundam um pouco no clique, como um adesivo apertado.
- Conquistas entram com um pulinho de mola, rápido e alegre.
- As ilustrações balançam de leve, sem distrair do texto.