ICN Brasil · design system · 2 de 4

Componentes

Cada peça com os estados que ela realmente tem em produção.

Trilho

Dois níveis, contraste por preenchimento.

Eventos
Financeiro
Aprovações 8
Associados
Igrejas Pastores Credenciais
repouso · hover · ativo em pílula cheia com badge · aberto. O nível 2 não tem fundo: só cor da marca, peso 600 e caixa normal, dentro do filete de 2px.

Barra superior

Mesma cor do fundo, sem borda. Tudo com 44px de altura.

ICN Brasil · Toda a rede PT 3 Ridley
seletor de contexto elástico à esquerda, idioma, sino e avatar à direita. O sino é o único elemento preto do produto. Todo controle branco que boia leva sombra rasa mais anel de 1px, nunca borda.

Cartão de KPI

Rótulo, quadrado do ícone, número, variação com a base, sparkline no rodapé.

Igrejas associadas 215 +19 em 12 meses
Anuidade vencida 13 -11 em 12 meses
Faturamento R$ 354.900 +67,8% na 2ª metade
Sem base - Sem base de comparação
alta · queda que é boa (seta verde para baixo em "vencida") · dinheiro · sem dado. Valor não medido é hífen, nunca zero, e sem série o sparkline some em vez de virar linha reta.

Linha de lista

Igreja usa marca em tile, pessoa usa rosto em círculo.

Igreja Videira Sorocaba Nova filiação · Sudeste 3 dias
Pr. Márcio Lemos Credencial pastoral · Sul 8 dias
Igreja Semear Curitiba Isenção de anuidade · Sul 14 dias
Protocolo ISE-2026-0044
Aprovar Pedir ajuste
repouso · hover · selecionada com filete de 3px e aberta no lugar, sem modal. Separação sempre por linha de 1px, nunca zebra. O filete transparente fica reservado para a linha não pular ao ser escolhida.

Controles

Pílula é a forma padrão. Campo é mais escuro que o cartão.

Nova filiação Exportar + Nova Excluir Aprovar
Faturamento Filiações Renovações
12 meses 6 meses Trimestre
Região * Selecione uma região O campo é mais escuro que o cartão em que vive.
Sudeste Foco: borda vira a marca mais anel de 2px a 20%.
primária, secundária, tonal, destrutiva e desabilitada a 50%. Abas sobre trilho cinza com o ativo em tinta; segmentado que boia sobre o fundo usa a mesma forma com sombra rasa.

Estados

Vazio diz o próximo passo. Carregando é spinner, nunca esqueleto.

Nada na fila Nenhum pedido esperando aprovação neste recorte. Abra o seletor no topo para ver a rede inteira. Ver toda a rede
Carregando painel
Não foi possível carregar as anuidades A conexão caiu no meio da leitura. Os números na tela são do último carregamento. Tentar de novo
o erro mostra a causa e o caminho de volta, e nunca apaga o número anterior da tela. Recarregar em segundo plano mantém o valor antigo em vez de piscar vazio.