para que TODOS sejam um
Manual de identidade visual da campanha modoPAZ, da SIGNIS Brasil Jovem. Clique em qualquer token para copiar.
de cor
na marca
de logo
O que é a modoPAZ
A modoPAZ é uma campanha da SIGNIS Brasil Jovem em prol da paz. A SIGNIS é uma associação de profissionais católicos de comunicação, com atuação de tom ecumênico — e é nesse espírito que a campanha foi concebida.
Este documento reúne os fundamentos visuais e conceituais da campanha. Cada decisão de design tem uma razão, e essa razão está registrada aqui para que toda a equipe trabalhe com o mesmo entendimento.
Nunca houve uma guerra boa, nem uma paz ruim.
Benjamin FranklinO símbolo
A silhueta funciona nas duas leituras ao mesmo tempo. Quem vê de longe reconhece a pomba — um símbolo tão antigo que já não precisa de legenda. Quem olha com atenção percebe a mão aberta, no gesto de quem aguarda o aperto.
Essa sobreposição carrega o argumento visual da campanha: a paz tem um gesto concreto, feito por uma pessoa, dirigido a outra.
O nome
A palavra "modo" carrega a ideia de uma postura que se escolhe, e não de um estado que se aguarda. A separação entre modo em minúsculo e PAZ em maiúsculo veio da observação de que o grande costume de acontecer dentro do pequeno.
modo é escrito em Monley. PAZ em Morela. As duas fontes são exclusivas da marca — nunca aparecem em textos da campanha.
para que TODOS sejam um
A frase vem de João 17,21. Jesus ora ao Pai pela unidade dos seus — e o modelo que ele usa é a própria relação entre eles: distintos, e ao mesmo tempo um só. Não é unidade por semelhança. É unidade que existe através da diferença.
O TODOS em caixa alta preserva esse peso. A palavra não tem exceção na frase original, e não tem aqui também.
A comunidade que a frase evoca já nasceu aberta. A modoPAZ entende comunidade como o espaço onde pessoas diferentes decidem permanecer em relação. A frase funciona para quem conhece a referência bíblica e para quem nunca a leu.
Logo
A logo existe em duas versões: horizontal e vertical. A versão horizontal é a principal. A vertical entra em formatos quadrados, perfis de redes sociais e aplicações compactas.
Horizontal — fundo claro
Horizontal — fundo escuro
Vertical — fundo claro
Vertical — fundo escuro
Downloads
Variantes de cor
O azul é a versão padrão. As demais entram conforme o contexto do material. Dentro de um mesmo material, uma cor só.
Azul — padrãoTurquesaVerdeAmareloCoralLilásPara recolorir a logo, use os arquivos SVG originais no Illustrator. Nunca aplique filtros CSS em produção — os exemplos acima são apenas ilustrativos.
Cores
Oito famílias, cada uma com três tons. O pastel é o registro principal. O tom médio entra em grafismos e elementos de destaque. O escuro serve para texto sobre fundo claro e hierarquia.
Clique em qualquer swatch para copiar o hexadecimal.
Os valores Pantone são os mais próximos dentro do catálogo Pantone Coated (C). Confirme fisicamente com um guia Pantone antes de levar para gráfica.
Tipografia
Três fontes na identidade da campanha. Monley e Morela são exclusivas da logo — nunca usadas em textos. A Sentient é a fonte de todos os textos da campanha, em qualquer mídia.
modo em Monley · PAZ em Morela · usar sempre o arquivo SVG original
A paz tem um gesto concreto, feito por uma pessoa, dirigido a outra.
Variante itálica para ênfase e citações.
Imagens
As fotografias da campanha são sempre em preto e branco. Sobre elas, aparecem os grafismos em cor — o azul âncora como padrão, com as demais cores da paleta disponíveis conforme o contexto.
O preto e branco retira da fotografia as marcações de tempo e lugar. Uma imagem dessaturada não pertence a um conflito específico — ela fala de algo mais amplo. A cor pertence à marca. É onde a campanha fala — e só aí.
Fotografia em preto e branco com grafismos da marca em cor sobre a imagem.
Fotografias coloridas. As cores da imagem competem com as cores da marca e quebram o sistema visual.
Grafismos e doodles
Os grafismos são derivados do contorno da pomba-mão. Aparecem sobre as fotografias e em fundos como elementos de textura e movimento. Podem usar qualquer cor da paleta pastel conforme o contexto do material.
O traço é sempre orgânico, de espessura variável, sem ângulos retos. É o mesmo caráter artesanal da logo estendido para os elementos de suporte.
Carregando doodles...
Voz e tom
A campanha fala de paz com quem está na vida real. A voz é humana, direta, sem retórica de campanha. Nada de frases telegráficas com travessão dramático ou paralelismos que soam profundos mas são vazios.
Use assim
Evite assim
Regras de uso
Logo
Usar sempre os arquivos SVG originais. Manter proporções. Respeitar área de respiro ao redor da logo.
Reescrever a marca com outras fontes. Distorcer, recolorir fora da paleta ou adicionar efeitos.
Cores
Uma cor por material ou série de peças. Azul âncora em comunicações institucionais.
Misturar variantes de cor numa mesma peça. Usar cores fora da paleta definida.
Tipografia
Sentient para todos os textos em qualquer mídia. Monley e Morela exclusivamente na logo.
Usar Monley ou Morela fora da logo. Substituir a Sentient por fontes do sistema.
Changelog
Camada de desenvolvimento
Tokens CSS, componentes e diretrizes técnicas. Clique em qualquer token para copiar.
de cor
espaço
sombra
Cores CSS
Clique em qualquer linha para copiar o token CSS.
| Token | Valor | Uso | |
|---|---|---|---|
| --azul-claro | #daeaf5 | Fundos, hero, superfícies suaves | |
| --azul | #7fb3cc | Cor âncora, botão primário, ícones | |
| --azul-escuro | #2e6f96 | Texto sobre fundo azul, links ativos | |
| --turquesa | #72c4b8 | Badges, destaques secundários | |
| --verde | #88bb88 | Sucesso, confirmação, vida | |
| --amarelo | #f0c060 | Aviso, atenção, presença | |
| --coral | #e89080 | Erro suave, humanidade | |
| --rosa | #e8a0b8 | Acolhimento, contextos de cuidado | |
| --lilas | #c0a8d8 | Espiritualidade, contextos litúrgicos | |
| --dark | #2d2a25 | Texto principal, fundos escuros | |
| --mid | #5a5650 | Texto secundário | |
| --muted | #8a8680 | Labels, hints, captions | |
| --light | #f7f5f2 | Fundo de página, superfícies neutras |
Espaçamento
Escala em múltiplos de 4. Clique para copiar o token.
--sp-1--sp-2--sp-3--sp-4--sp-5--sp-6--sp-7--sp-8Border radius
--radius-sm--radius-md--radius-btn--radius-card--radius-lg--radius-pillSombras
--shadow-xs--shadow-sm--shadow-md--shadow-lg--shadow-xl--shadow-azulTipografia
| Token | Valor | Uso |
|---|---|---|
| --font-body | 'Sentient', Georgia, serif | Todos os textos da campanha |
| --font-display | 'Caveat', cursive | Títulos de seção no design system |
| --font-mono | 'SFMono-Regular', Consolas, monospace | Código, tokens, valores técnicos |
/* Google Fonts — adicionar no <head> */ @import url('https://fonts.googleapis.com/css2?family=Sentient:ital,wght@0,400;0,700;1,400&display=swap'); /* Uso */ body { font-family: var(--font-body); font-size: 1rem; line-height: 1.8; }
Botões
<!-- Primário --> <button class="btn btn-primary">Saiba mais</button> <!-- Outline --> <button class="btn btn-outline">Baixar assets</button> <!-- Ghost --> <button class="btn btn-ghost">Cancelar</button> <!-- Tamanhos: btn-sm · btn-lg --> <!-- Estados: disabled · btn-loading -->
Badges
<span class="badge badge-azul">Campanha</span> <!-- Variantes: badge-azul · badge-verde · badge-amarelo --> <!-- badge-coral · badge-lilas · badge-neutral -->
Cards
Encontro pela paz
Descrição curta do card com até duas linhas de texto.
ConfirmadoKit de comunicação
Arquivos para download e uso nos materiais da campanha.
DownloadFormulários
Alertas
Iconografia
Phosphor Icons — outline, nunca fill. Tamanho padrão: 16px inline · 20px em botão · 24px destaque. Cor sempre via currentColor.
| Atributo | Valor |
|---|---|
| Biblioteca | Phosphor Icons (outline) |
| Tamanho inline | 16px |
| Tamanho em botão | 20px |
| Tamanho destaque | 24px |
| Stroke width | 1.5px padrão · 2px ênfase |
| Cor | currentColor — herda do contexto |
| Fill | Nunca — somente outline |
Playground — Botão
<button class="btn btn-primary">Saiba mais</button>