Fiocruz · Linha do Tempo

Sistema Visual

Referência das tipografias, escala de tamanhos e paleta de cores em uso no site. Use este documento para validar consistência e para apoiar a criação de novas peças.

01

Tipografia

A família Inter estrutura toda a tipografia do site — do corpo do texto aos títulos e elementos de interface.

Inter
Texto · Títulos · UI

Fonte única do site — usada em títulos, parágrafos, datas, números, botões, paginações e demais elementos de interface. Neutra e clara, com boa legibilidade em qualquer tamanho.

300 · Light
Linha do Tempo Fiocruz
400 · Regular
Linha do Tempo Fiocruz
500 · Medium
Linha do Tempo Fiocruz
600 · SemiBold
Linha do Tempo Fiocruz
700 · Bold
Linha do Tempo Fiocruz
02

Escala de tamanhos

Tamanhos reais observados no site. Em telas pequenas (≤ 1444px) os valores acima de 24px geralmente reduzem proporcionalmente.

80px
Display · Banner Home
Linha do Tempo
50px
Title hero · Página interna
100 anos da Fiocruz
36px
H2 · Modal título
Título do conteúdo
24px
H3 · Cards principais
Cabeçalho de seção
20px
H4 · Subtítulo
Subtítulo do bloco
18px
Lead · Texto destaque
Parágrafo de destaque, abre uma seção.
16px
Body · Corpo padrão (1rem)
Texto corrido — leitura padrão do site.
15px
Body S · Auxiliar
Texto secundário em cards.
14px
Caption · Datas, metadados
12 de março de 1900
12px
Micro · Tags, badges
Categoria do timeline
03

Pesos em uso

Quatro pesos principais cobrem 95% dos textos. Mantenha essa simplicidade — pesos fora dessa lista soam ruído.

400
Aa
Regular
500
Aa
Medium
600
Aa
SemiBold
700
Aa
Bold
04

Paleta de cores

Todas as cores em uso no site, organizadas por papel funcional. Use este painel para validar contraste, hierarquia visual e para criar peças coerentes com a marca.

Marca · Azuis principais
Azul Escuro
#163E66
Cor primária. Links, botões, títulos e elementos de identidade.
Azul Médio
#426980
Pontos e conectores da timeline antiga.
Azul Royal
#3F738C
Destaques da nova linha do tempo.
Azul Profundo
#03053D
Títulos de modais — máximo contraste.
Azul Ativo
#005EB8
Estado «ligado» de toggles e filtros.
Texto · Cinzas neutros
Texto Principal
#202020
Corpo de texto e títulos no contraste máximo.
Cinza 700
#424242
Texto secundário, descrições.
Cinza Médio
#656565
Datas em modais, metadados.
Cinza Texto
#747474
Textos auxiliares em cards de galeria.
Cinza Desligado
#B0B0B0
Estado «off» de toggles.
Cinza 300
#BDBDBD
Bordas suaves, ícones desativados.
Cinza 200
#E0E0E0
Divisores, bordas de campos.
Fundos · Apoio
Branco
#FFFFFF
Fundo padrão de páginas e cards.
Verde Azulado Claro
#EBF2F2
Banner da galeria, área de controles.
Cinza Azulado
#DAE5E6
Fundo de banners e divisores.
Azul Pedra
#C7D6D9
Fundo do single galeria e cards.
Cinza Frio
#E5E9EC
Track de barras de rolagem customizadas.
Cinza 100
#F5F5F5
Fundo neutro alternativo.
Categorias da Timeline · Pastéis

Usados como fundo de tags para diferenciar visualmente as categorias dos eventos da linha do tempo.

Azul Pastel
#EBF9FF
Categoria — variação azul.
Vermelho Pastel
#FFEBEB
Categoria — variação vermelha.
Verde Pastel
#DEFFDD
Categoria — variação verde.
Amarelo Pastel
#FFFADD
Categoria — variação amarela.
Acentos · Vermelhos
Vermelho
#950000
Estados de erro ou cancelamento.
Vermelho Busca
#AE3D48
Destaque do termo buscado nos resultados.
05

Notas para o uso da paleta

Boas práticas
  • Hierarquia: use Azul Escuro (#163E66) para a maior parte dos elementos azuis. As variações (#426980, #3F738C, #03053D) existem para contextos específicos — não troque entre elas livremente.
  • Texto sobre azul: sempre use branco. Cinzas claros não passam no contraste AA.
  • Pastéis: reservados às tags de categoria da linha do tempo. Evite usar como fundo de seção — perdem o significado.
  • Tipografia: Inter em toda a tipografia do site — corpo, títulos, datas, números e elementos de interface.
  • Pesos: 400 para leitura, 500 para meta-informação, 600 para botões e títulos, 700 só em casos de muita ênfase.