Paleta de cores e linguagem visual
Reconstrucao da paleta visual do portal legado do CCB a partir da publicacao atual, do CSS compartilhado da documentacao e da leitura comparada de capturas do portal publico e de telas internas.
Escopo desta leitura
- O legado nao publica uma pagina propria de identidade visual nem uma tabela central de tokens de cor.
- A documentacao atual registra parte da cor dominante no tema da documentacao e em descricoes da camada publica, mas nao fecha sozinha a paleta completa do portal.
- Por isso, esta pagina consolida as cores estruturais, os neutros, os textos, as bordas e os acentos visuais recorrentes observados no portal.
- Quando o valor vem de CSS documentado, ele aparece como
valor confirmado.
- Quando o valor foi inferido visualmente de telas publicadas, ele aparece como
valor observado.
Leitura geral da identidade visual
- A base do portal e institucional e fria: azul, branco e cinzas claros sustentam header, menu, rodape, formularios e o corpo principal das paginas.
- Sobre essa base, o legado usa acentos fortes e muitas vezes promocionais: amarelo, dourado, laranja, verde, magenta e roxo.
- A linguagem visual nao e minimalista nem tokenizada como um sistema moderno. Ela combina uma casca estrutural estavel com banners, cards e campanhas que mudam de cor conforme o assunto.
- O azul organiza o portal. Os acentos quentes chamam atencao para conversao, campanha, ranking, premio, selo e urgencia.
Cores estruturais confirmadas
| Papel |
Valor |
Origem |
Uso recorrente |
| azul institucional principal |
#5281B1 |
valor confirmado |
topo, barra principal, rodape e identidade geral |
| azul institucional claro |
#6F9BC4 |
valor confirmado |
variacao leve do azul principal em estados e derivacoes |
| azul institucional escuro |
#3F6891 |
valor confirmado |
profundidade, contraste e derivacoes do azul principal |
| hover do menu na documentacao |
rgba(82, 129, 177, 0.1) |
valor confirmado |
realce suave de item ativo e hover do menu documentado |
Cores estruturais observadas no portal legado
| Papel |
Valor |
Tipo |
Uso recorrente |
| azul estrutural percebido |
#5080B0 |
valor observado |
menu principal, header moderno e rodape do portal |
| azul de navegacao secundaria |
#005898 |
valor observado |
dropdowns e areas de menu mais densas |
| branco base |
#FFFFFF |
valor observado |
header superior, caixas, formularios e superficies principais |
| cinza base do portal |
#E4E4E4 |
valor confirmado pela descricao da camada publica |
fundo externo e moldura geral da pagina |
| cinza claro de superficie |
#F8F8F8 |
valor observado |
miolos de bloco, areas internas e telas de conteudo |
| cinza claro secundario |
#F0F0F0 |
valor observado |
cards, fundos de apoio e blocos internos |
| cinza neutro de divisao |
#E0E0E0 |
valor observado |
separacao entre caixas, areas laterais e corpos de tela |
| faixa escura de apoio |
#404040 |
valor observado |
letreiro, barras de contraste e alguns fundos escuros |
Texto, links e contraste
| Papel |
Valor |
Tipo |
Uso recorrente |
| texto principal escuro |
#303030 a #404040 |
valor observado |
corpo de texto, titulos, avisos e conteudo corrido |
| texto secundario |
#606060 a #808080 |
valor observado |
apoio, observacoes e hierarquia secundaria |
| texto invertido |
#FFFFFF |
valor observado |
menu principal, rodape, botoes e faixas escuras |
| link azul forte |
#0066FF a #1070FF |
valor observado |
titulos clicaveis, links internos e listas |
| vermelho de alerta |
#D00000 a #E02020 |
valor observado |
breadcrumb, avisos e chamadas de urgencia |
| verde de destaque positivo |
#1E9E57 a #00B048 |
valor observado |
resultados, status e elementos de atendimento |
Fundo, borda e separacao
| Papel |
Valor |
Tipo |
Uso recorrente |
| fundo externo |
#E4E4E4 |
valor confirmado/observado |
area fora do container central |
| fundo interno principal |
#FFFFFF |
valor observado |
corpo de conteudo e formularios |
| superficie neutra |
#F8F8F8 |
valor observado |
modulos internos, caixas e paineis |
| borda leve |
#D0D0D0 a #E0E0E0 |
valor observado |
inputs, cartoes, caixas e areas agrupadas |
| contorno de input |
#A8A8A8 a #C0C0C0 |
valor observado |
busca, formularios e campos de servico |
| separador discreto |
#E8E8E8 |
valor observado |
linhas de divisao e respiro interno |
Amarelos e dourados recorrentes
| Papel |
Valor |
Tipo |
Uso recorrente |
| amarelo vibrante de faixa |
#FFF75A |
valor observado |
chamadas horizontais, categorias e faixas de destaque |
| amarelo claro promocional |
#FFF8A8 |
valor observado |
banners, areas de promocao e chamadas de associacao |
| amarelo vivo de destaque |
#FFF000 a #FFE800 |
valor observado |
radio gospel, numeros em destaque e chamadas visuais |
| dourado de selo |
#F0D080 a #F8D890 |
valor observado |
trofeus, selos, medalhas e emblemas |
| creme de CTA secundario |
#FFF2BF a #FBE7A6 |
valor observado |
botoes leves e areas de conclusao em paginas internas |
Acentos secundarios recorrentes
| Papel |
Valor |
Tipo |
Uso recorrente |
| verde WhatsApp |
#00B048 |
valor observado |
icones de atendimento e contato |
| laranja de acao |
#F28C1B |
valor observado |
pequenos icones circulares de play e acionadores |
| laranja avermelhado |
#C03820 |
valor observado |
banners de registro, promocoes e chamadas mais intensas |
| magenta forte |
#F000C8 a #FF2AD4 |
valor observado |
blocos da Radio Online e pecas promocionais |
| roxo e lilas promocional |
#805070 a #B090F0 |
valor observado |
artes de ISRC, festival e cards com visual de campanha |
| preto de alto contraste |
#000000 |
valor observado |
titulos de banner, chamadas principais e contrastes promocionais |
Distribuicao funcional da paleta
Estrutura fixa do portal
- Header superior: branco com texto e detalhes em azul.
- Barra principal de navegacao: azul institucional.
- Rodape: azul institucional com texto branco.
- Fundo externo da pagina: cinza claro.
- Corpo principal: branco ou cinza muito claro.
Conteudo e interacao
- Links de navegacao interna e titulos clicaveis: azul saturado.
- Inputs e busca: branco com contorno cinza.
- Textos corridos: preto suave ou cinza escuro.
- Divisoes entre blocos: cinza claro.
Conversao, campanha e editorial
- Associacao, promocao e faixas de destaque: amarelo e dourado.
- Atendimento e sinais de contato: verde.
- Registro e banners urgentes: laranja ou vermelho quente.
- Radio, ranking e pecas artisticas: magenta, azul vivo e amarelo.
- Festival e cards visuais: roxo, lilas, azul e dourado.
O que esta paleta diz sobre o legado
- O portal nao trabalha com um unico sistema cromatico uniforme do inicio ao fim.
- Existe uma casca visual coerente, formada por azul institucional, branco e cinzas claros.
- O conteudo promocional e modular quebra essa sobriedade com cores quentes e saturadas.
- O amarelo nao e um acidente visual isolado. Ele reaparece em varias trilhas como sinal de chamada, premio, campanha ou destaque.
- O azul continua sendo a ancora principal de marca e navegacao.
Paleta consolidada para referencia rapida
Base estrutural
#5281B1#6F9BC4#3F6891#005898#FFFFFF#E4E4E4#F8F8F8#F0F0F0#404040
Texto e navegacao
#303030#606060#0066FF#1070FF#D00000#00B048
Acentos visuais do legado
#FFF75A#FFF8A8#FFF000#F0D080#F28C1B#C03820#F000C8#B090F0#000000
Referencias cruzadas
- Estrutura visual geral em Visao Geral.
- Familias de tela em Familias Visuais e Componentes Recorrentes do Nucleo.
- Header e menu em Header, Menu e Login.
- Home publica em Home e Portas de Entrada.
- CSS e JS em Assets CSS e JS de Interface.