Um jeito único de mostrar o que é público.

A identidade serve à confiança.

Mostramos dados do governo para que qualquer pessoa entenda e confira. Por isso o visual precisa passar duas coisas ao mesmo tempo: seriedade, para merecer confiança, e clareza, para ser entendido por todos.

Símbolo e nome, sempre juntos ou sozinhos.

O logo é formado por um símbolo e pelo nome escrito em Fraunces SemiBold. O símbolo pode aparecer sozinho em lugares pequenos, como o ícone da aba do navegador ou a foto de perfil.

Código Público Brasil Versão principal · fundo claro

Código Público Brasil Versão principal · fundo escuro

O símbolo

Versões

Colorida (padrão)

Uma cor · escura (impressão e fundos claros)

Uma cor · clara (fundos escuros ou coloridos)

Código Público Brasil Tamanho mínimo: símbolo com 24 px de altura

Símbolos dos projetos

Cada projeto usa a mesma moldura (quadrado arredondado e colchetes abertos) com um único símbolo no centro e uma cor de base própria, sempre da paleta. Assim, os projetos são reconhecidos como da mesma família e distintos entre si.

Código Público BrasilOrganização · ponto

Dado Público BrasilDados · linhas de dado

No CargoCargos · pessoa

Quem DecidiuDecisões · símbolo provisório

• Moldura fixa: quadrado de 32 unidades com cantos de 7, dois colchetes com traço de 2,4 e pontas arredondadas, sempre na mesma posição.
• Miolo: um símbolo simples, de uma só cor, que se entenda em 16 px e caiba na área central (10 × 13 unidades).
• Base: verde (organização), verde-noite (dados), azul (No Cargo) e amarelo (Quem Decidiu). Sobre amarelo, colchetes e miolo ficam em tinta escura, para manter o contraste.
• Nome ao lado: nome do projeto em Fraunces SemiBold e, abaixo, “um projeto do Código Público Brasil” em fonte técnica pequena.
• Projeto novo: mesma moldura, miolo novo e uma base da paleta. Proponha o símbolo em uma issue antes de adotar.

Espaço de respiro e tamanho

Deixe ao redor do logo um espaço livre igual a metade da altura do símbolo. Nenhum texto, borda ou imagem entra nessa área. Em tela, o símbolo não deve ter menos de 24 px; em impressão, não menos de 8 mm.

Código Público Brasil

O que não fazer

Esticar ou achatar

Trocar as cores

Girar

Aplicar sombra ou brilho

• Não colocar o logo sobre fundos de baixo contraste ou sobre fotos poluídas.
• Não usar o logo de forma que sugira apoio de governo, órgão público ou partido, nem ao lado de símbolos oficiais.
• Não criar versões novas do símbolo. Use os arquivos em Recursos.

Poucas cores, com função clara.

Fundos neutros e quentes fazem o dado aparecer. As três cores da marca aparecem em pequenas doses, como acento. Todas estão em tokens.css e devem ser usadas pelo nome da variável, nunca copiadas.

Cores da marca

Neutras, tema claro

Neutras e ajustes, tema escuro

Contraste (WCAG)

O mínimo é 4,5 : 1 para texto comum e 3 : 1 para texto grande e elementos gráficos. Todas as combinações abaixo foram calculadas e passam.

Regras de uso

• Cerca de 90% da tela é neutra. As cores da marca são acento, nunca preenchimento de grandes áreas.
• Cor não carrega sentido sozinha. Todo estado (conferido, sem dado, em construção) tem também texto ou ícone.
• Vermelho e verde não indicam bom ou ruim. Nunca usamos cor para avaliar uma pessoa, partido ou resultado.
• Em gráficos de grupos (como a composição de partidos), as cores servem só para distinguir os grupos, e a legenda deve existir em texto.

Três fontes, cada uma com um papel.

A serifa traz a gravidade de um documento. A sem serifa garante leitura confortável. A fonte técnica sinaliza dado, fonte e código.

Escala

Importante: as fontes vêm do Google Fonts hoje. Nas aplicações, prefira hospedar as fontes junto do site, para não enviar o IP de quem visita a terceiros.

Se não dá para ler, não é transparente.

Dado público só serve se todas as pessoas conseguem ler e usar. Estas regras são o mínimo para qualquer tela do projeto.

• Texto corrido com no mínimo 16 px. Rótulos técnicos pequenos (11–13 px) só em letras maiúsculas e com contraste alto.
• Entrelinha de 1,5 a 1,7 em parágrafos, e no máximo 68 caracteres por linha.
• Contraste mínimo de 4,5 : 1 no texto e 3 : 1 em ícones, bordas de campos e gráficos.
• Funciona só com o teclado. O foco é sempre visível (contorno amarelo de 3 px) e a ordem de leitura segue a ordem visual.
• Alvos de toque de pelo menos 44 px de altura em celular.
• Mobile primeiro. Tudo precisa funcionar em 360 px de largura, sem rolagem horizontal, exceto tabelas largas, que rolam dentro do próprio quadro.
• Tema claro e escuro: automático, conforme o sistema de quem visita, com um botão para trocar. O contraste é verificado nos dois.
• Respeita quem reduz movimento. Animações são mínimas e somem com prefers-reduced-motion.
• Idioma declarado (lang="pt-BR"), títulos em ordem (h1, h2, h3) e imagens com texto alternativo.
• Gráficos têm equivalente em texto: uma tabela, uma legenda ou uma frase com os mesmos números.
• Leve: páginas que carregam rápido em conexões modestas. Sem bibliotecas pesadas, sem rastreadores.

Como o design protege o dado.

Estes princípios traduzem as regras do projeto em decisões visuais. Em dúvida, escolha a opção que deixa o dado mais claro e menos opinativo.

Peças que se repetem em todo o projeto.

Estas peças já estão no site da organização e devem ser reproduzidas do mesmo jeito nas aplicações.

Claro para todos, preciso para quem confere.

O texto segue a mesma lógica do visual: simples, neutro e verificável. Escreva como se explicasse para qualquer pessoa, sem perder o rigor.

• Português do Brasil, com “você” só quando necessário e sem gírias.
• Datas no formato 26/10/2026 no texto e 2026-10-26 em dados e fichas.
• Nada de recomendação de voto, de ranking ou de “melhor” e “pior”.
• Mesma estrutura de texto para todas as pessoas e partidos.

Como uma aplicação do projeto deve ser feita.

Toda aplicação nova, como No Cargo e Quem Decidiu, segue esta lista. Ela existe para que o usuário reconheça o projeto e confie igualmente em qualquer tela.

Identidade

• Importa o tokens.css e usa as variáveis (var(--green) etc.). Não copia valores de cor ou fonte.
• Cabeçalho com o símbolo e o nome da aplicação (por exemplo, “No Cargo”), mais um link discreto para o site da organização e o botão de tema claro/escuro (copie o theme.js do site).
• Rodapé com “Um projeto do Código Público Brasil”, licença do código e dos dados, link do repositório e link da fonte dos dados.
• Usa o símbolo do próprio projeto (veja Símbolos dos projetos) como ícone da aba (favicon) e como imagem de compartilhamento.

Dados

• Cada dado mostra fonte oficial, endereço e data de captura, no mesmo bloco, com a linha de fonte.
• Dado ausente aparece como “Sem dado”, nunca zero.
• Lê somente o contrato publicado pela plataforma de dados (esquema marts), nunca o código dela.
• Conteúdo de IA tem o selo “Gerado por IA”, com modelo e versão, e fica separado do dado oficial.

Neutralidade

• Sem ranking, nota ou lista ordenada por qualquer medida avaliativa.
• Sem recomendação de voto e sem adjetivos nos textos.
• Mesmo modelo de página para todos os partidos e pessoas.
• Sem páginas sobre pessoas privadas. Só agentes públicos, e só dado público.

Técnica

• Mobile primeiro, tema claro e escuro, teclado e contraste conforme a seção Legibilidade.
• Leve e sem rastreadores. Fontes hospedadas junto do site, sempre que possível.
• Código aberto (AGPL-3.0) e dados curados abertos (CC BY 4.0), conforme o projeto.
• Antes de publicar, rodar a verificação de contraste e testar em 375 px de largura.

Como importar

<link rel="stylesheet" href="https://codigopublicobrasil.com.br/tokens.css">
<style>
  body { background: var(--bg); color: var(--ink); font-family: var(--sans); }
  h1, h2 { font-family: var(--serif); }
  a { color: var(--green-ink); }
</style>

Se a aplicação precisar funcionar sem depender do site da organização, copie o arquivo tokens.css para o repositório dela e atualize quando houver mudança aqui.

Arquivos para usar.

Todos livres para uso nas aplicações e nos materiais do projeto, respeitando as regras deste guia.

Dúvida, sugestão ou uso fora do previsto? Abra uma issue no GitHub.