ICN Brasil · design system · 4 de 4

Identidade e idioma

Onde a marca pode aparecer, como as igrejas e as pessoas são representadas, e como a tela fala quatro línguas.

A marca no produto

Vermelho nunca lava o fundo de um container. Estas são as exceções, e são todas.

Aprovações Botão primário 3
Certo Identidade em bloco entra por filete de 3px na lateral esquerda.
Errado Fundo de cartão lavado de vermelho. Some do produto.
--marca#C92041 · pílula do item ativo, botão primário, marca do topo, disco do seletor, contador do sino, preenchimento de barra
--marca-h#910C2C · hover do primário
--marca-soft8% · quadrado do ícone do KPI, chip, item escolhido em menu, avatar de iniciais
tom 14%#F4DDE2 · nó concluído da jornada, opaco de propósito
filete3px à esquerda em bloco, 2px a 70% no submenu do trilho
destrutivo#E11D48 · nunca a marca
a cor da marca é variável de tema: o painel deriva hover, tom 8% e tom 14% a partir dela, então trocar a cor de um cliente não deixa resíduo vermelho.

Logos das igrejas

Marca geométrica em tile neutro, até subirem os arquivos reais.

+21 Empilhamento: sobreposição de 8px, anel branco de 2px, contagem do resto em 11px.
tile36px com raio 12 na lista · 30px com raio 10 no empilhamento · 56px com raio 18 no catálogo
fundo#F5F5F4 neutro, sempre; a cor da igreja não entra aqui
marca#57534E, traço 1.8, caixa 24
com arquivo reala logo enviada substitui a marca dentro do mesmo tile, com respiro de 6px e object-fit contain
o tile é neutro de propósito: se cada igreja pintasse o seu, a lista competiria com os chips de status, que são os únicos elementos coloridos com significado.

Rostos dos líderes

Retrato ilustrado no lugar da foto, com as mesmas medidas do arquivo final.

RM
construçãofundo, ombros, cabeça, cabelo · quatro formas num viewBox 40
pele#E8C4A0 · #F1D2B6 · #C68863 · #8D5524
cabelo#2B2B2B · #1A1A1A · #4A3728 · #6B4423 · três recortes diferentes
roupa#44403C · #57534E · #78716C · a marca só no perfil de quem está logado
tamanhos22 no detalhe · 36 na lista e na barra · 64 no catálogo
sem fotoiniciais em 700 sobre a marca a 8%, é o fallback do MRM
o retrato ilustrado não é decoração: ele ocupa exatamente o círculo que a foto vai ocupar, então subir os arquivos é troca direta, sem mexer no layout.

Idiomas

Quatro línguas, bandeiras desenhadas como vetor, sem imagem externa.

PT EN ES FR Cada bandeira é uma lista de caminhos vetoriais, não markup solto: no formato do protótipo, HTML dentro de um valor sairia escrito na tela.
controlepílula de 44px com bandeira de 36 e a sigla em 13/700; no celular só a bandeira
menubandeira de 24, nome da língua no próprio idioma, escolhido em marca a 8% com check
coberturamenu, KPIs, jornada, abas, chips, fila, avisos, estados e rodapé
númerolocale do idioma: pt-BR, en-US, es-ES, fr-FR
decimalvírgula em pt, es e fr; ponto em en
mêsabreviação própria por idioma, não tradução do rótulo pronto
moedaR$ em todos: a receita é da rede brasileira, não do leitor
frase montadamodelo com marcador, nunca concatenação, para a ordem das palavras sobreviver
a régua de tradução é simples: se o texto aparece na tela, ele mora no dicionário. Rótulo de região é nome próprio e fica como está.