Estilo Wise
Inspirado na WiseVerde-floresta com um limão elétrico: títulos enormes em caixa alta, tudo em pílula e nenhuma sombra.
A Wise fala alto e com confiança. Um verde-floresta quase preto carrega o texto, a navegação e as seções escuras, e um verde-limão elétrico aparece só onde há uma ação a fazer: o botão principal, a aba ativa, um destaque. Os títulos são blocos de letra pesadíssima, apertada, que anunciam cada seção. O resto fica calmo, num fundo branco com cinzas levemente esverdeados. Botões, abas e etiquetas são pílulas; os cartões têm cantos suaves. Não há gradiente: o ritmo vem de alternar o branco e o verde-floresta, com o limão invertendo junto.
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
- Limão elétrico
#9fe870O fundo do botão principal e da aba ativa; nunca como cor de texto no branco - Floresta
#163300Os textos fortes, a navegação, os ícones e o contorno do botão secundário - Abeto
#054d28Os cartões dentro das seções escuras - Carvão
#454745O texto corrido, no lugar do preto puro - Seixo
#868685Os textos de apoio e o fio dos campos
Tipografia
A Wise usa a Wise Sans nos títulos, que é dela e não pode ser distribuída. Aqui e no arquivo vai a Inter no peso 900, com as letras bem juntas; no resto, a Inter mesmo, como no site deles.
- Título giganteInter · 900SEM SUSTO NO CÂMBIO
- Título de seçãoInter · 700Mande para 40 países
- SubtítuloInter · 600A taxa de verdade, na hora.
- CorpoInter · 400Você vê quanto chega do outro lado antes de enviar.
- LegendaInter · 500Chega em até 1 dia útil.
Componentes
Os botões, o campo e um cartão, desenhados no estilo da marca.
Regras
- Faça
- Títulos grandes em caixa alta, pesadíssimos e com as letras bem juntas.
- O limão só no botão principal e na aba ativa: um por seção basta.
- Botões, abas e etiquetas em pílula; cartões e campos com cantos suaves.
- Verde-floresta no lugar do preto, nos textos fortes e nas seções escuras.
- Alterne seções brancas e verde-floresta para dar ritmo à página.
- Ao lado do botão cheio, a segunda ação vira um link sublinhado.
- Evite
- Nada de gradiente, brilho ou sombra forte: o desenho é chapado.
- Nunca o limão como cor de texto sobre o branco: não dá para ler.
- Nada de cantos retos em botões e etiquetas.
- Nada de dois botões cheios lado a lado.
- Nada de preto puro no texto corrido: use o carvão.
Movimento
- Transições curtas e firmes, sem quicar.
- A aba ativa desliza o limão de uma opção para a outra.