Guia visual · DQ Digital

Cores

Use sempre o token, nunca o código hexadecimal. As amostras de superfície, texto e estado mudam com o tema; as de marca são fixas.

Marca

Azul institucional--brand-navy · #1d3c69

Azul profundo--brand-navy-deep · #0b1f3b

Azul de link--brand-blue · #274e88

Azul-claro--brand-sky · #a7c4d2

Petróleo claro--brand-teal · #549db3

Gelo--brand-ice · #d9e2e9

Superfícies e texto

Fundo da página--bg

Superfície--surface

Superfície 2--surface-2

Borda--border

Títulos--heading

Texto--text

Texto secundário--text-muted

Link--link

Destaque--accent

Estados

Sucesso--success

Atenção--warning

Erro--danger

Informação--info

Categorias do Mapa Digital

Sala de aula--loc-sala-aula

Sala de professor--loc-sala-prof

Lab. de ensino--loc-lab-ensino

Lab. de pesquisa--loc-lab-pesquisa

Serviço--loc-servico

Banheiro--loc-banheiro

Outros--loc-outros

Tipografia

Fonte Roboto variável, servida pelo próprio site. Os títulos crescem com a tela (clamp()); o texto fica em 16px para não forçar zoom no celular.

Título de página (h1)--fs-3xl · 30–44px · 800

Título de seção (h2)

--fs-2xl · 24–32px · 700

Subtítulo (h3)

--fs-lg · 20px · 700

Texto de destaque (.lead) para a abertura das páginas.

--fs-md · 18px · 400

Texto corrido. O Departamento de Química fica no Centro Politécnico da UFPR.

--fs-base · 16px · 400 · altura de linha 1,6

Nota, legenda ou rodapé.

--fs-sm · 14px

Sobretítulo (.eyebrow)

--fs-sm · 700 · maiúsculas

Espaços e raios

Espaços em múltiplos de 4px. Margem lateral (--gutter): 16px no celular, 24px a partir de 640px.

--space-1 · 4px

--space-2 · 8px

--space-3 · 12px

--space-4 · 16px

--space-5 · 24px

--space-6 · 32px

--space-7 · 48px

--space-8 · 64px

Raios

sm · 6px

md · 10px

lg · 16px

pill

Botões

Altura mínima de 44px (área de toque). Um único botão principal por bloco. No celular, botões dentro de .btn-group ocupam a largura toda.

Principal Secundário Discreto

Pequeno Médio Grande com ícone

Ação principal Ação secundária

Cartões

Grade de 1 coluna no celular, 2 no tablet e 3 no desktop (.grid.grid--3). Em .card--link o cartão inteiro é clicável.

Cartão com imagem

Novo

Imagem na proporção 940×280, título, selo e texto.

Cartão com ícone

Sem imagem: um ícone de 44px abre o cartão.

Cartão inativo

Em breve

Serviço ainda indisponível: sem link e com fundo apagado.

Selos e etiquetas de local

Padrão Novo Externo Em breve Inativo

Sala de aula Sala de professor Lab. de ensino Lab. de pesquisa Serviço Banheiro Outros

Avisos

Informação. O mapa foi atualizado em outubro.

Pronto. Sua mensagem foi enviada.

Manutenção programada. Alguns serviços podem ficar fora do ar.

Erro. Não foi possível carregar os dados.

Formulários

Rótulo visível acima do campo, fonte de 16px nos campos (evita o zoom do iOS) e autocomplete sempre que possível.

Ícones

Sprite em /img/icons/sprite.svg: traço de 2px, grade 24×24, cor herdada do texto.

Ícone	Nome	Uso
	`map`	Mapa Digital
	`pin`	Local, endereço
	`flask`	Laboratórios
	`building`	Prédio, serviços
	`mail`	Contato
	`arrow-right`	Seguir para outra página
	`external`	Link para outro site
	`info`	Aviso informativo
	`check`	Sucesso, lista de itens
	`alert`	Erro, atenção
	`clock`	Horários, manutenção
	`sun · moon · contrast`	Tema claro, escuro, sistema
	`menu · close`	Abrir e fechar o menu
	`expand · shrink`	Ampliar e reduzir uma área (ex.: o mapa)