Galeria de Padrões
A base visual do iPolitics, para conferência antes de qualquer componente nascer sobre ela. Confira nos dois temas e no celular.
A marca
O logotipo oficial, e as duas cores que dele saem. A interface inteira se apoia nelas desde 28/08/2026 — antes disso as cores eram uma suposição, e a marca real as desmentiu.
#76aadb
#96b135
A interface se apoia nestas cores desde 28/08/2026. Nenhuma das duas entra crua no tema claro: o azul da marca dá 2,46:1 como texto sobre branco, e o verde 2,43:1 — os dois reprovam os 4,5:1 da 5.1. Por isso cada uma é o degrau de uma escala, e o tema claro apoia-se em degraus mais escuros. No tema escuro a primária é literalmente o #76aadb do logotipo, porque ali ele passa com folga. O logotipo em si não reprova nada: a 1.4.3 isenta texto que faça parte de marca.
As escalas
Toda cor do sistema sai daqui. Nenhum hexadecimal existe fora de tokens.ts — é regra de build, não recomendação.
Azul — a cor da marca
Verde — o destaque da marca
Slate — base neutra
Tipografia
Família única: Inter. Raio base 0.5rem.
Cadastro de Pessoa
Painel de Atendimento
Demandas em andamento
Texto corrido, no tamanho que a maior parte do sistema usa. A liderança lê isto no celular, muitas vezes sob sol forte.
Texto secundário — apoio, legenda e descrição de campo.
Ícones
67 nomes semânticos. Nenhuma tela importa de lucide-react: trocar o ícone de um conceito é trocar uma linha, e portal e aplicativo acompanham juntos.
Contraste
Calculado agora, com o mesmo código que o CI usa a cada push. O memorial 5.1 exige WCAG 2.1 AA; cinco pares reprovavam antes de 28/08 e foram corrigidos.
Tema claro
- Texto sobre o fundo20,17:1mín. 4,5:1Aprovado
- Texto sobre o cartão20,17:1mín. 4,5:1Aprovado
- Texto sobre a cor primária5,41:1mín. 4,5:1Aprovado
- Texto secundário sobre painel6,92:1mín. 4,5:1Aprovado
- Texto sobre o destaque verde6,49:1mín. 4,5:1Aprovado
- Texto sobre a cor de exclusão4,83:1mín. 4,5:1Aprovado
- Anel de foco sobre o fundo3,93:1mín. 3:1Aprovado
- Borda do campo sobre o fundo4,76:1mín. 3:1Aprovado
Tema escuro
- Texto sobre o fundo19,28:1mín. 4,5:1Aprovado
- Texto sobre o cartão19,28:1mín. 4,5:1Aprovado
- Texto sobre a cor primária6,41:1mín. 4,5:1Aprovado
- Texto secundário sobre painel6,96:1mín. 4,5:1Aprovado
- Texto sobre o destaque verde5,16:1mín. 4,5:1Aprovado
- Texto sobre a cor de exclusão4,83:1mín. 4,5:1Aprovado
- Anel de foco sobre o fundo8,21:1mín. 3:1Aprovado
- Borda do campo sobre o fundo4,24:1mín. 3:1Aprovado
O verde dá 2,43:1 como texto sobre branco — reprova os 4,5:1 do critério. Por isso ele é cor de destaque, e o sistema não gera utilitário de texto a partir dele. Sobre a primária da marca, dá 4,02:1 e é permitido.
Formato brasileiro
Data, hora, número e moeda saem de um formatador único, em pt-BR e fuso America/Sao_Paulo. Nenhuma tela formata à mão.
- Data
- 28/08/2026
- Data e hora
- 28/08/2026 às 14:30
- Moeda
- R$ 1.234,56
- Número
- 1.234.567,89
- Percentual
- 80%
Vocabulário
O catálogo grava em português sem acento e exibe com acento. A mesma fonte alimenta etiqueta, filtro e relatório — nenhuma tela remonta a lista.
situacaoDemanda
situacaoTarefa
Situação desconhecida vinda do banco exibe Não informado — nunca o valor cru. Passe o ponteiro sobre uma etiqueta para ver o que vai gravado.
Botões
Quatro aparências e três tamanhos. Altura mínima de 44px nos tamanhos médio e grande — a liderança toca nisto no celular, muitas vezes em movimento.
Enquanto carrega, o botão recusa o segundo clique — duplicar um cadastro de pessoa é erro caro (3.2.2, critério 6.5.1). Percorra com Tab: o anel de foco é condição da navegação por teclado que a 5.1 exige.
Campos
Rótulo, controle, ajuda e erro num conjunto só — separá-los é como se perde a associação que o leitor de tela precisa.
Digite só os números — a pontuação entra sozinha.
E-mail inválido.
Gerado pelo sistema.
Fornecedor e doador pessoa jurídica (3.7.5).
Vira celular só quando o 11º dígito chega.
Autopreenche o endereço na Fase 1 (memorial 2.1.7).
Decide o desenho pela quantidade de dígitos.
O campo em erro recebe aria-invalid, então o estado é anunciado sem depender de cor. A mensagem vem do catálogo, nunca escrita na tela.
A máscara é roupa, não é o dado. O que a tela mostra é 123.456.789-09; o que vai ao banco é 12345678909. É essa igualdade que faz a busca (3.2.1) e a checagem de duplicidade (3.2.2) encontrarem o mesmo CPF escrito de duas formas. Corrija um dígito no meio do campo: o cursor fica onde você o deixou.
Cartões
A superfície sobre a qual quase todo conteúdo se apoia. Lê os slots de cartão, não os de fundo — é isso que deixa a identidade por organização (4.1.1) separar painel de tela.
Demandas em aberto
Últimos 30 dias
128
14 vencendo esta semana.
Cartão sem cabeçalho, para conteúdo que se explica sozinho.
Etiquetas de situação
A ponte entre o valor gravado e o que você lê. A etiqueta recebe a categoria e o valor — nunca o texto pronto —, e busca o rótulo no catálogo.
situacaoDemanda
valor desconhecido, vindo do banco
Não informadoExibe Não informado — nunca o valor cru, que seria vazar detalhe de banco na tela.
Alertas
Os cinco níveis da escala 5.4.3. O nome do nível vem escrito, não só pintado: pela 5.1, informação nunca depende só de cor.
Repare que nenhum deles impede prosseguir, nem o crítico. A 5.4.5 é categórica: avisos de LGPD e legislação eleitoral nunca obstruem a operação — a avaliação de risco é sua, mediante o aviso exibido e registrado. O componente sequer oferece como bloquear, e um teste derruba o build se alguém acrescentar essa possibilidade.
Estados de bloco
Vazio, sem resultados, carregando, erro e sem permissão — exigidos em toda tela pela Definição de Pronto.
Nada por aqui ainda
Nenhuma pessoa cadastrada.
Nada por aqui ainda
Nenhum evento cadastrado.
Carregando…
Buscando os registros.
Não foi possível carregar
Houve uma falha ao buscar os dados. Tente novamente em instantes.
Nenhum resultado
Nenhum registro corresponde à busca ou aos filtros aplicados.
Acesso não autorizado
Seu perfil não tem permissão para ver este conteúdo.
Os dois primeiros saem do mesmo componente: "Nenhuma pessoa cadastrada" e "Nenhum evento cadastrado". É por isso que o glossário guarda o gênero de cada entidade — em português, o estado vazio genérico não fecha sem ele.