Pular para conteúdo

Paleta recomendada

Direcionamento cromático recomendado para a evolução visual do portal do CCB, preservando a identidade percebida da base atual do site sem repetir excesso visual.

1. Diagnóstico

Intenção da paleta

  1. Manter o azul como base institucional, de confiança e estrutura.
  2. Preservar o amarelo e o dourado como assinatura visual importante do universo CCB.
  3. Reduzir a dispersão de cores promocionais e tornar o sistema mais coerente.
  4. Construir uma interface que pareça institucional, musical e viva, sem ficar corporativa demais nem visualmente caótica.

2. Oportunidades de Melhoria

Leitura visual recomendada

  1. O site deve parecer institucional, confiável e musical.
  2. O azul continua organizando a estrutura.
  3. O amarelo e o dourado preservam a personalidade histórica do CCB.
  4. Os neutros quentes evitam uma experiência fria ou genérica.
  5. O verde deve aparecer apenas em contexto de suporte, orientação e confirmação.
  6. O laranja deve ser usado com controle, como apoio, não como cor dominante.

3. Proposta de Redesign

Paleta final recomendada

Base institucional

Papel Valor Uso principal
azul principal #5281B1 menu principal, rodapé, blocos institucionais, áreas de confiança
azul de profundidade #3F6891 estados ativos, hover, contraste e botões secundários escuros
azul suave #6F9BC4 apoio visual, fundos leves de destaque e detalhes complementares

Neutros

Papel Valor Uso principal
fundo principal #F7F7F5 fundo geral do site
fundo secundário #ECE9E2 seções alternadas, blocos de apoio e áreas de transição
superfície branca #FFFFFF cards, formulários, containers principais e painéis
borda suave #D9D4CA divisórias, contornos e separadores discretos

Texto

Papel Valor Uso principal
texto principal #2E3135 títulos, texto corrido e conteúdo institucional
texto secundário #5F6770 descrições, apoio, microinformações e detalhes
texto invertido #FFFFFF blocos escuros, menu e botões com fundo institucional

Acentos

Papel Valor Uso principal
amarelo de assinatura #F4D35E destaques estratégicos, benefícios, selos e pontos de atenção
dourado de apoio #D6A63C detalhes premium, números importantes e reforços visuais
verde de suporte #17A05D ajuda, atendimento, estados positivos e confirmações
laranja de ação secundária #E58A2B ícones de ação, chamadas secundárias e elementos editoriais

Papel de cada cor na interface

Estrutura do portal

  1. #5281B1 deve sustentar menu, rodapé e blocos institucionais.
  2. #3F6891 deve aparecer em estados ativos, hover e pontos de contraste mais forte.
  3. #6F9BC4 deve entrar como respiro visual, apoio de composição e superfícies complementares.

Fundo e superfícies

  1. #F7F7F5 deve ser o fundo principal da experiência.
  2. #ECE9E2 deve separar seções, criar ritmo e evitar um layout inteiramente branco.
  3. #FFFFFF deve ser usado nos componentes mais importantes, como cards, formulários e áreas de leitura.
  4. #D9D4CA deve resolver bordas e divisórias de modo sutil, sem endurecer a interface.

Texto e legibilidade

  1. #2E3135 deve ser o texto dominante.
  2. #5F6770 deve entrar em descrições e informações de menor peso.
  3. #FFFFFF deve ser reservado para contraste sobre azul e blocos escuros.

Acentos e personalidade

  1. #F4D35E deve ser a principal cor de assinatura do novo site.
  2. #D6A63C pode reforçar sensação de valor, prêmio e benefício.
  3. #17A05D deve ficar restrito a suporte, ajuda e sinais positivos.
  4. #E58A2B deve ser pontual, sem competir com o amarelo principal.

4. Recomendações de Conversão

Briefing sintético para criação visual

Use uma interface com base institucional azul inspirada na base atual do CCB, mantendo identidade reconhecível sem repetir excesso visual. A estrutura principal deve usar azul #5281B1, azul escuro #3F6891, branco #FFFFFF, fundo claro quente #F7F7F5 e cinza-bege #ECE9E2. O texto principal deve usar #2E3135 e o secundário #5F6770. A cor de assinatura deve ser amarelo dourado #F4D35E, com apoio em #D6A63C, para destaques, selos, benefícios e pontos estratégicos. Atendimento e suporte podem usar verde #17A05D. Bordas e divisórias devem ser suaves, em #D9D4CA. A interface deve parecer elegante, clara e organizada, com contraste limpo, sem aparência genérica de SaaS e sem exagero de cores promocionais.

Referências cruzadas

  1. Leitura da base cromática atual em Interface e Navegacao > Paleta de Cores e Linguagem Visual.
  2. Direcionamento da home em Home Reformulada.