Cores

Cores Principais

As cores principais servem para identificar a marca pelo site.

vermelho-base

Vermelho

#B20000

azul-base

Azul

#005C6D

azul-destaque-base

Destaque

#00C1CF

vermelho-escuro-10

Vermelho-escuro-10

#7E0000

primario-titulos-hover

Primario-titulos-hover

#004854

secundario-hover

Secundario-hover

#00D8E8


Cores Auxiliares

Servem para dar significado ou ênfase em conteúdos que necessitarem de representação fora das cores institucionais.

verde-base

#A0C340

blueberry-base

#4C7EFF

crayola-base

#FFC24C

violeta-base

#8A29E6

coral-base

#FF4C4D

pink-base

#FF4CA2


Cores Neutras

São utilizadas para compor fundos e áreas neutras dentro das páginas.

cinza-texto-base

Cinza texto

#666666

cinza-claro

Cinza claro

#DADADA

cinza-hover

Cinza hover

#E6E6E6

prata-base

Prata base

#F8F8F8

white

White

#FFFFFF


Cores de Feedback

Utilizadas para oferecer um retorno visual sobre o progresso de algum conteúdo.

cancelado

#D32719

andamento

#B78718

concluido

#3ACF1F

cancelado-outline

#F95B4D

andamento-outline

#DFB77B

concluido-outline

#80E96D

cancelado-light

#FDD5D1

andamento-light

#FFF5EA

concluido-light

#E8FBE4


Contrastes

O correto uso de contraste entre as cores é essencial para uma boa legibilidade nos conteúdos do site. Atente-se aos exemplos a seguir.

Prefira

Texto Texto Texto Prefira fundos neutros que favoreçam o contraste com as cores primárias.

Evite

Texto Texto Texto Evite sobrepor cores primárias ou de destaque.