Organização transforma solidariedade em impacto real.
Este manual reúne tudo o que a Família Pão com Ovo precisa para comunicar com a mesma cara em qualquer lugar: site, relatórios para doadores, apresentações para empresas, redes sociais e impressos. Ele parte do logotipo, das cores e das fontes que já usamos e organiza as regras para que qualquer voluntário consiga criar uma peça bonita, acessível e fiel à marca.
A amiga que reúne a galera, com um plano na manga
O arquétipo do Cuidador Entusiasta pede um visual que acolhe sem infantilizar e que mostra método sem ficar frio. Por isso o sistema combina formas arredondadas e uma tipografia amigável (Amaranth) com grids rigorosos, números claros e muito espaço em branco.
O calor do pão quentinho e do chocolate na noite fria, entregue por uma equipe que sabe exatamente o que está fazendo. O azul dá a segurança e a organização; o amarelo traz o afeto e a alegria. Toda peça deve ter os dois.
- Comboio: linhas de rota, pontos em sequência, "o pessoal do comboio".
- Luz na noite: fundo marinho com pontos amarelos, faróis, lanternas.
- Calor do chocolate: caneca, vapor, amarelo sobre creme.
- Mão na massa: mãos preparando, montando, embalando.
- Rede (R.E.D.E.): pontos conectados, etapas numeradas.
- Mão estendida pedindo, prato vazio, papelão, chão da rua.
- Capa, escudo de herói, "resgate", boia salva-vidas.
- Escuridão ameaçadora, sombras, becos, sirenes.
- Cruz, pomba, auréola ou qualquer símbolo religioso.
- Punho erguido, estrela, bandeiras ou cores de partidos.
Um pão, um coração no lugar do ovo
O símbolo é o próprio pão com ovo, simplificado em duas metades azuis. No recheio, um coração amarelo: o ovo virou afeto. A assinatura tem letras redondas e o "com" num selo amarelo levemente inclinado, que traz o movimento e a alegria. O desenho é mantido exatamente como está; este manual só organiza versões e regras.
Área de proteção
xxx = altura da letra "o" de "ovo" (cerca de 29% da altura do logo). Nenhum texto, borda ou imagem entra nesse espaço, em todos os lados.
Tamanho mínimo
Abaixo de 120 px o "com" perde a leitura: use o símbolo isolado. Em bordado, mínimo de 60 mm para a horizontal.
Aplicação sobre fundos
Usos proibidos
Também não: contorno, degradê dentro do logo, redesenhar as letras, usar em baixa resolução ou sobre fotos movimentadas.
Co-branding com parceiros
- Hierarquia: em peças do Pão com Ovo, nosso logo vem primeiro (à esquerda ou acima) e é o maior. Parceiros ficam com até 70% da altura do nosso logo.
- Separação: fio vertical de 2 px em neutro-300 e espaço de 1x de cada lado.
- Alinhamento: todos centralizados na mesma linha de base óptica; em listas longas, grade com caixas de mesma altura.
- Cor: sobre fundos da marca, parceiros em versão monocromática (branco ou marinho) para não competir.
- Em peças do parceiro: seguimos o manual dele, mas nunca alteramos nosso logo nem aceitamos área menor que o mínimo.
Sub-marcas e selos
Arquitetura endossada: o símbolo e o nome "Pão com Ovo" aparecem sempre, e o nome do evento vem em Amaranth. Cada sub-marca muda a cor dominante, nunca o logo.
Azul que organiza, amarelo que aquece
As cinco cores atuais foram mantidas. Azul e marinho são a base: transmitem segurança e credibilidade, o que doadores e empresas esperam. Os amarelos e o creme são o afeto: o ovo, o pão, a luz na noite. O amarelo é acento, nunca cor de texto sobre branco.
CMYK por conversão direta e Pantone por aproximação visual: peça prova de cor à gráfica antes de rodar tiragem grande. [a confirmar]
Proporção de uso · 60 / 30 / 10
Em relatórios e apresentações para empresas, aumente o branco (70/25/5). Em redes sociais e sub-marcas, o amarelo pode subir até 30% como fundo, com texto marinho.
Escalas tonais 50 a 900
★ marca a cor original da marca dentro de cada escala. Amarelo claro = amarelo-300, creme = amarelo-100, marinho = azul-700.
Cores semânticas
texto #146236 · fundo #EAF6EF · ícone #1F8A4C
texto #7A5400 · fundo #FFF9EE · borda #FFDB66
texto #9E2A21 · fundo #FDEEEC · ícone #D13A2E
texto #003D6B · fundo #EEF4FB · ícone #0055A5
O vermelho de erro é usado só em estados de sistema, nunca como cor de marca ou fundo grande (evita associação partidária e sensação de perigo). Semântica nunca depende só da cor: sempre ícone + texto.
Tabela de contraste WCAG 2.2 AA
Calculada automaticamente. AA exige 4,5:1 para texto normal e 3:1 para texto grande (24 px ou 19 px em negrito) e ícones.
Degradês oficiais
Usar: fundos de capa, hero do site, stories e peças das ações noturnas (Noite) e do Pão com Ovo Dia (Manhã). Nunca: dentro do logo, em botões, atrás de texto corrido, em gráficos, ou misturando azul e amarelo no mesmo degradê (vira verde sujo).
Modo escuro
Fundo azul-900 #001F38, superfície #0A3358, texto branco e azul-100, acento amarelo-500. O azul-500 sai como cor de texto no escuro (contraste insuficiente) e passa a ser só de superfície.
Amaranth para o afeto, Montserrat para a leitura
As duas fontes já em uso foram mantidas. Ambas são gratuitas no Google Fonts e estão disponíveis no Canva. Amaranth tem terminais redondos, parecidos com as letras do logo, e dá personalidade aos títulos. Montserrat tem altura-x generosa e aberturas amplas, boa para as voluntárias 40+ lerem sem esforço.
Amaranth, "Trebuchet MS", sans-serifMontserrat, "Segoe UI", Arial, sans-serifTraço firme, cantos redondos
Biblioteca base: Phosphor Icons (gratuita, MIT), estilo Bold. Tem pontas arredondadas que conversam com o logo e seis pesos, o que facilita adaptar para impresso. Na interface, ícone em linha; para destaque, versão Fill em amarelo sobre azul, ou em um círculo creme.
24 × 24 px, área viva 20 px, 2 px de respiro
2 px a 24 px (Phosphor Bold), pontas e junções redondas
2 px nos cantos internos
16 · 20 · 24 · 32 · 48 · 64 px
Proprietários: os marcados como "desenhar" não têm equivalente fiel no Phosphor (ovo frito, pão com ovo, cobertor dobrado, kit de higiene, marmita). Devem ser desenhados no mesmo grid de 24 px e traço 2 px, e adicionados à biblioteca da marca em SVG.
Azul-500 em fundos claros, branco ou amarelo-500 em fundos escuros. Um único peso por peça. Ícone ao lado de texto tem a mesma cor do texto.
Misturar bibliotecas, ícones com emoji, degradês em ícones, ícone sozinho como único rótulo de botão sem texto ou aria-label.
Formas chapadas, gente de verdade
Ilustração vetorial chapada, formas orgânicas com cantos arredondados (como o pão do logo), sem contorno preto, no máximo 4 cores da paleta por cena. Pessoas com proporções realistas, rostos simplificados (olhos e sorriso em traço), sem exagero de traços físicos.
- Para representar pessoas atendidas, sempre. Nunca foto.
- Explicar a metodologia R.E.D.E. e as etapas de voluntariado.
- Estados vazios, erros e confirmações no site.
- Infográficos de relatório.
- Tons de pele variados, idades de crianças a idosos, corpos diversos.
- Pessoas atendidas bem vestidas, em pé, em interação de igual para igual.
- Nada de roupas rasgadas, sujeira, olhar triste, mão estendida, papelão.
- Voluntário não fica "acima" ou maior que quem recebe.
A câmera fica do lado de quem faz
Fotografe voluntários, mãos, alimentos, preparo, montagem, o comboio e o clima do grupo. A pessoa atendida é protegida: sua dignidade vale mais que qualquer foto.
- Close de mãos com luvas passando manteiga em pães enfileirados na cozinha.
- Voluntários rindo em volta da mesa de montagem dos kits.
- Fila de carros do comboio com faróis acesos, vista de trás.
- Caneca de chocolate quente fumegando sob a luz do poste.
- Entrega fotografada por trás do voluntário, pessoa atendida fora de foco ou fora do quadro.
- Rosto de pessoa atendida, mesmo com autorização verbal.
- Pessoa dormindo, deitada no chão ou em papelão.
- Voluntário posando entregando o lanche, estilo "foto de caridade".
- "Antes e depois" de qualquer pessoa ou local.
- Tatuagens, placas, pertences ou locais que identifiquem alguém.
Voluntários assinam termo de uso de imagem no cadastro. Menores: autorização do responsável. Pessoas atendidas: nunca identificáveis, com ou sem termo.
Recorte, desfoque forte (não pixelado) ou silhueta em contraluz. Remova metadados de GPS antes de publicar.
Altura dos olhos ou mais baixo, nunca de cima para baixo. Mãos e objetos em primeiro plano.
Temperatura levemente quente (+300 K), sombras abertas, saturação natural. Noite: preserve a luz quente de postes e faróis, ruído aceitável.
Preto e branco dramático, vinheta pesada, dessaturação, filtros "tristes" ou frios, HDR exagerado.
Peças que saem do próprio logo
Destaque de números
Base 8, com meio-passo de 4
Múltiplos de 8 dão ritmo previsível e são fáceis de replicar no Canva. O passo de 4 existe só para ajustes finos em ícones e textos.
space-{{ s.k }}{{ s.v }} pxPeças do site e das landing pages
Todos os alvos de toque têm no mínimo 48 × 48 px. O foco é sempre um anel marinho de 3 px com 3 px de afastamento, visível sobre qualquer fundo claro.
Botões
A primeira coluna de cada linha é interativa: passe o mouse, clique ou use Tab.
Formulário de voluntário
Meta de arrecadação
Números de impacto
Cards
Próximas ações
Datas ilustrativas.O que precisamos este mês
Badges e tags
Alertas
Modal
Depoimentos
Voluntário da entrega
Navegação e rodapé
Os 20% sérios da marca
Relatórios são lidos por doadores e empresas que precisam confiar. Aqui o tom sobe: Montserrat em quase tudo, Amaranth só no título e no número principal, fundo branco, sem ilustração decorativa.
- Ordem das cores em séries: azul-500, amarelo-500, azul-700, amarelo-300, neutro-400. Máximo 5 séries por gráfico.
- Números: Montserrat com algarismos tabulares, alinhados à direita. Moeda sempre "R$ 5.500", sem centavos em resumos.
- Rótulo direto na barra ou na linha, em vez de legenda separada. Eixos em neutro-500, grade em neutro-100.
- Evite: pizza com mais de 3 fatias, 3D, degradê, eixo que não começa no zero.
Ágil como o comboio, suave como o chocolate
Movimento só onde ajuda a entender ou a celebrar. Entradas rápidas e decididas, e um único "quique" de alegria reservado para doações e confirmações. Tudo respeita a preferência de movimento reduzido do sistema.
Fala como amiga, age como equipe
80% informal, 70% emocional, 75% entusiasmo. Na prática: "a gente", frases curtas, verbo no começo do botão e sempre um próximo passo claro.
Estruturas prontas para repetir
As três prioridades (site, relatório e apresentação) estão esboçadas abaixo. Os demais formatos têm medidas e hierarquia na lista.
Todo mundo lê, todo mundo participa
A mesma fonte de verdade, em três formatos
Nomenclatura: categoria-grupo-variante-nível. Tokens de marca (color-brand-azul-500) alimentam tokens semânticos (color-text-default), que são os usados no dia a dia.
{{ code }}
Quem cuida do sistema
PaoComOvo_Marca/ ├─ 01_Logo/ │ ├─ SVG/ PNG/ PDF/ EPS/ │ └─ pco_logo-horizontal_cor.svg ├─ 02_Cores/ pco_paleta_v1.0.ase ├─ 03_Fontes/ Amaranth, Montserrat (OFL) ├─ 04_Icones/ pco_icone_ovo_24.svg ├─ 05_Ilustracoes/ ├─ 06_Fotos/ AAAA-MM_acao-rota/ ├─ 07_Templates/ Canva, PPTX, DOCX ├─ 08_Tokens/ tokens.json, tokens.css └─ 99_Arquivo/ versões antigas
pco_[tipo]_[nome]_[variante]_[tamanho].[ext]Ex.:
pco_post_voluntarios_feed_1080x1350.pngLogo: SVG (web), PNG 2x/3x com fundo transparente, PDF vetorial e EPS (gráfica, CMYK). Ícones: SVG 24 px. Fotos: JPG 2048 px, sRGB, 80%. Impressos: PDF/X-1a, 300 dpi, sangria 3 mm.
Uma pessoa guardiã da marca no marketing aprova peças novas; peças para empresas e relatórios passam também pela coordenação. [nomes a confirmar]
Semântico: v1.1 para novos componentes ou templates, v2.0 para mudanças de cor, fonte ou logo. Registro de mudanças no início deste manual.
Cheat sheet
60 branco/creme · 30 azul · 10 amarelo
- Toda peça tem azul (organização) e amarelo (afeto).
- Nunca mostre o rosto de pessoas atendidas. Na dúvida, ilustração.
- Nada de pena, heroísmo, religião ou política, nem nas imagens, nem nas palavras.
- Amarelo nunca é cor de texto sobre fundo claro.
- Corpo de texto a partir de 18 px; botões com pelo menos 48 px.
- Número grande em Amaranth, explicação em Montserrat.
- Fale como amiga ("a gente"), com um próximo passo claro.