Manual Portal UFG - Capitulo 5

5. Uso de Cores

O Portal UFG utiliza a cor azul como prioritária. A partir de variação de tonalidades da cor azul, cria-se uma variação em sua saturação que determina a unidade visual com a marca da instituição, reforçando sua identidade visual. A seguir, apresenta-se a indicação cromática e sua associação por região da interface, assim como seu código hexadecimal (tabela de cores para aplicação web) (Figuras XX e YY).

 

5.1 Cores básicas

Figura 55
Figura 55 - Esquema indicador do uso de cores na estrutura do Portal UFG

 

5.2 Acessibilidade

Figura 56
Figura 56 - Topo da interface com áreas sinalizadas de variação de cor

 

  1. Faixa da extrema esquerda, ao lado da barra de acessibilidade: #dfdfdf;
  2. Linha de topo do menu acessibilidade (limite superior do menu): #dfdfdf;
  3. Fundo do menu acessibilidade: #eeeeee;
  4. Linha de base do menu acessibilidade: #7b9ccb;

 

5.3 Topo

Figura 57
Figura 57 - Topo da interface com áreas sinalizadas de variação de cor

 

  1. Faixa da extrema esquerda, ao lado da assinatura: #f0f5f9;
  2. Fundo da assinatura: #ddedf1;
  3. Fundo padrão do site: #ffffff;
  4. Botão de Acessibilidade: #7b9ccb;
  5. Cor de fonte para texto (+ acessibilidade): #ffffff
  6. Caixa de Sistemas UFG: #eeeeee;
  7. Área de pesquisa: #cccccc;

 

5.4 Campo central

Figura 58
Figura 58 - Campo central (menu + banner)

 

  1. Linha de base do menu principal: #6c8cb4;
  2. Mouse no menu principal: #7b9ccb;
  3. Mouse over do submenu (menu secundário): #6c8cb4;
  4. Cor de fonte para texto e menu: #000000 (serve para locais onde existe texto, exceto quando se necessita de sinalização/destaque);
  5. Fundo do banner da interface inicial: #dfdfdf.

 

5.5 Rodapé

Figura 59
Figura 59 - Área de rodapé da interface com áreas sinalizadas de variação de cor

 

  • 10) Fundo total do rodapé: #4b73b3;
  • 11) Fundo de área útil do rodapé: #7b9ccb;
  • 12) Cor comum para elementos do rodapé (assinaturas, marcas, ícones, links e texto): #ffffff.

 

5.6 Campo central da interface inicial

Figura 60
Figura 60 - Campo central da interface inicial com áreas sinalizadas de variação de cor

 

  • 13) Linha de base do título da área de itens do centro: #689eca;
  • 14) Extensão da linha de base do título da área de itens do centro: #c5c5c5;
  • 15) Cor padrão de mouse over para determinado item selecionado: #f2f2f2;
  • 16) Cor padrão do link “Leia mais” do item selecionado: #689eca.

 

5.7 Campo central das interfaces internas

Figura 61
Figura 61 - Campo central da interface interna com áreas sinalizadas de variação de cor

 

  • 13) Linha de base do título da área de itens do centro: #689eca;
  • 14) Extensão da linha de base do título da área de itens do centro: #c5c5c5;
  • 17) Texto auxiliar de publicação: #939393.
List all Back