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
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
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
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
O correto uso de contraste entre as cores é essencial para uma boa legibilidade nos conteúdos do site. Atente-se aos exemplos a seguir.
Texto Texto Texto
EviteTexto Texto Texto