Visual

Cores

Azul de confiança, amarelo de energia. O azul estrutura, o amarelo acende — e o amarelo é sempre a menor dose, porque é isso que faz ele acender. São 11 cores, nem uma a mais.

A paleta

Cada cor tem nome, token, uso e uma nota de contraste. A nota não é enfeite: é ela que diz onde a cor pode virar texto.

  • #1137A2

    Azul Alemão

    --az

    Cor-mãe. Texto de destaque, ícones, fundos sólidos, o anel do emblema.

    9.4:1 sobre branco — livre pra texto de qualquer tamanho.

  • #1B4FD0

    Azul Vivo

    --az-vivo

    Miolo dos gradientes de hero e foco de teclado (focus ring).

    6.4:1 sobre branco — ok pra texto.

  • #2E63F0

    Azul Elétrico

    --az-eletrico

    Só o ponto de luz do gradiente radial do hero. Nunca como fundo chapado nem como texto.

    4.3:1 sobre branco — reprova AA pra corpo. É cor de luz, não de texto.

  • #0B2A7E

    Azul Profundo

    --az-deep

    Rodapé, faixa de contato do topo, fim dos gradientes.

    12.6:1 sobre branco — o azul mais seguro pra texto.

  • #E9EFFC

    Lavagem Azul

    --az-soft

    Fundo de item ativo e realce leve. É superfície, nunca texto.

    Fundo. Texto em cima: use --tinta ou --az.

  • #F5C800

    Amarelo Alemão

    --am

    Ação. Botão de WhatsApp, diagonais, divisórias, filetes do emblema.

    ⚠️ 1.6:1 sobre branco — REPROVA AA. Como TEXTO, só sobre azul/escuro. Sobre claro, use --az.

  • #FFD83D

    Amarelo Claro

    --am-claro

    Só o hover do amarelo. Não é uma segunda cor da paleta.

    Mesma regra do --am: nunca como texto sobre claro.

  • #10203F

    Azul-Tinta

    --tinta

    Texto principal em fundo claro. O preto da marca — que não é preto.

    15.8:1 sobre branco.

  • #5B6880

    Cinza-Aço

    --aco

    Texto secundário, parágrafos de apoio, legendas.

    5.9:1 sobre branco — passa AA pra corpo.

  • #F3F6FB

    Gelo Azulado

    --gelo

    Fundo de seção alternada, pra dar respiro sem usar branco puro.

    Fundo. Vidro NÃO aparece em cima disto — use card sólido.

  • Linha

    --linha

    Bordas e divisórias. Tinta com opacidade, não um cinza próprio.

    Borda, não texto.

Fonte de verdade: esta lista é lida de components/site-alemao/tokens.ts, o mesmo arquivo que pinta o site. Cor nova nasce lá — nunca aqui, nunca num hex solto no meio de um componente. Onde aparecer #1F3D8E é aproximação antiga do azul: corrigir ao encostar no arquivo.

A regra do amarelo

Esta é a regra que já foi para produção errada uma vez. Amarelo é a cor da ação — e é a cor que menos aguenta virar texto.

Visão limpa, viagem segura

✕ Amarelo Alemão sobre branco — 1.6:1. Reprova AA. Se você está apertando os olhos agora, é exatamente esse o ponto.

Visão limpa, viagem segura

✓ Amarelo Alemão sobre Azul Alemão — é assim que se escreve em amarelo.

Como texto, o amarelo só existe sobre azul ou escuro. Sobre branco/gelo, o mesmo recado vira Azul Alemão (#1137A2). O amarelo continua livre como preenchimento: botão de WhatsApp, diagonal, filete, selo — ali ele é superfície, e o texto em cima dele é Azul Alemão. Mesma regra vale pro Amarelo Claro, que é só o hover.

Proporção 60 · 30 · 10

Branco e gelo respiram (60%), o azul estrutura (30%), o amarelo acende (10%). O amarelo é sempre a menor dose.

60% branco & --gelo30% --az10%

Contraste e acessibilidade

O veredito de cada cor sozinha está na amostra acima. Aqui estão as combinações que a gente usa de verdade.

CombinaçãoVeredito
Branco sobre Azul Alemão #1137A2✓ O par institucional. É o padrão de qualquer superfície azul.
Azul Alemão sobre Amarelo Alemão #F5C800✓ A única forma de escrever em cima de amarelo.
Amarelo Alemão sobre Azul Alemão / Azul Profundo✓ A única forma de escrever em amarelo.
Azul-Tinta sobre branco / --gelo✓ Corpo de texto padrão.
Branco sobre Amarelo Alemão✕ Nunca — 1.6:1, o texto some.
Amarelo Alemão sobre branco / --gelo✕ Nunca — 1.6:1. Use o azul.
Azul Elétrico #2E63F0 como texto✕ Não é cor de texto nem fundo chapado — é só o ponto de luz do gradiente.
Preto chapado✕ Não existe na marca. O escuro da marca é o Azul Profundo (--az-deep).
Vidro sobre branco / gelo✕ Vidro só sobre azul, gradiente, foto ou padrão. Em fundo claro, card sólido.

Os gradientes da marca

Não são efeito nem exceção: são o hero do site. Degradê só dentro da família do azul, sempre construído com os tokens — nunca com hex digitado na mão.

Hero — o azul com uma fonte de luz

--az-eletrico é a luz (canto superior direito) → --az-vivo no miolo → --az nas bordas. O elétrico só aparece aqui.

Blocos e CTAs — o azul que afunda

--az-vivo → --az → --az-deep. É o fundo rico que autoriza o vidro por cima.

Fica de olho

O que mantém a marca inteira — e o que a quebra.

Sempre

  • Ler a cor de tokens.ts — nunca digitar o hex à mão
  • 60/30/10 em toda peça — respiro é parte da marca
  • Amarelo só em destaque: botão, selo, diagonal, filete
  • Amarelo como TEXTO só sobre azul ou escuro
  • Sombras suaves e azuladas, nunca pretas duras
  • Degradê só dentro da família do azul
  • Vidro só sobre azul, gradiente, foto ou padrão

Nunca

  • Amarelo sobre branco ou branco sobre amarelo — 1.6:1, reprova AA
  • Azul Elétrico como fundo chapado ou como texto
  • Amarelo como fundo de página inteira digital
  • Preto chapado, neon, cores fora da paleta
  • Azul antigo #1F3D8E ou #0B2470 em peças novas
  • Vidro sobre branco ou gelo — ali é card sólido