ICN Brasil · design system · 3 de 4

Dados

Gráfico, medidor, progresso, jornada e as regras que valem para qualquer número na tela.

Anatomia do gráfico

Série única em área, comparação do ano anterior em tracejado, um eixo só.

48 36 24 12 out jan abr jul set eixo sem linha e sem tique, rótulo 11px #94A3B8 grade só horizontal, tracejada 3 3, rgba(15,23,42,.06) ponto do ano anterior, raio 3.5 linha 2.5px ano anterior área .28 a .02
TotalR$ 354.900
Média por mêsR$ 29.575
Melhor mêsset · R$ 47.700
a escala do eixo contém as duas séries, senão a comparação mente. Contagem usa piso próprio e não ancora no zero; dinheiro ancora no zero e só aí ganha área preenchida.

Medidor de tiques

Arco de 280 graus, tiques acesos até o valor.

71% em dia
Em dia 71% 153
A vencer 23% 49
Vencida 6% 13
tique de 3px com ponta arredondada, do raio 70 ao 84, apagado em #E5E7EB. As três fatias sempre somam o total e os percentuais fecham em 100 por repartição de resto maior.

Jornada

Traço atrás dos nós, com folga branca. Nó concluído tem fundo opaco.

24Interesse
11Documentos
8Análise
6Aprovada
tiques44 no painel; a ilustração aqui usa menos, para caber
traço3px, #E9E9ED, z-index 0
preenchidogradiente da marca a 45%, até a etapa atual
28px · concluído no tom opaco 14% · atual cheio · futuro #F1F1F3
folgaanel branco de 6px, mais 9px da marca a 16% no atual
o nó nunca pode ser translúcido: o traço aparece por dentro do ícone e vira sinal de proibido.

Barra, sparkline e tooltip

As três peças pequenas que carregam número no painel.

Sudeste 42% 90
Nordeste 21% 45
sparkline 28px
traço 2px a 50%
jul/2026
Este anoR$ 34.200
Ano anteriorR$ 23.400
+46,2% sobre o ano anterior
barra de 10px com as duas pontas em pílula, rótulo à esquerda com largura fixa, percentual e valor à direita. Tooltip sem seta, com a leitura derivada depois de uma divisória.

Regras

Valem para qualquer número que apareça na tela.

um eixonunca dois eixos y; medidas de escala diferente viram dois gráficos
um tommarca e suas opacidades; comparação em #A8A29E; terceira série #44403C
azulnão entra em série de gráfico
legendasérie única dispensa; a partir de duas é obrigatória
rótulo diretoaté 4 séries; nunca número em cima de todo ponto
statusnunca vira série; e nunca aparece só como cor
base zeroobrigatória em barra; opcional em linha, e aí sem área
ausênciahífen, nunca 0 e nunca vazio
sem comparaçãovira texto "Sem base de comparação", não 0%
tabulartodo número em posição de comparação
formatolocale do idioma escolhido, com separador de milhar
alvo44px por ponto no toque, faixas encostadas sem buraco
arredondamentorepartição por resto maior, para as partes fecharem o total
a regra do arredondamento é a que mais quebra na prática: arredondar cada fatia isolada faz três linhas somarem 23 num total de 24, e os percentuais fecharem em 101.