Manual de Identidade Visual · v1.0

Nossa identidade
em um só lugar

Tudo que você precisa para comunicar a BSB com consistência — cores, tipografia, tom de voz, logo e muito mais.

02 · Cores

Nossa paleta

As cores da BSB foram escolhidas para transmitir saúde, confiança e esperança. O verde é nossa cor primária — presente em todas as comunicações.

Cores primárias

Verde BSB
HEX #1A6B4A
RGB 26 · 107 · 74
CMYK 76 · 0 · 31 · 58
Cor principal. Botões, headers, destaques.
Verde Claro
HEX #2D9B6A
RGB 45 · 155 · 106
CMYK 71 · 0 · 32 · 39
Hover, gradientes e acentos secundários.
Preto BSB
HEX #1C1C19
RGB 28 · 28 · 25
CMYK 0 · 0 · 11 · 89
Fundos escuros, textos em destaque.
Branco BSB
HEX #FAFAF8
RGB 250 · 250 · 248
CMYK 0 · 0 · 1 · 2
Fundo padrão de páginas e cards.

Cores de apoio

Verde Menta
HEX #E8F5EE
Fundos suaves, destaques sutis.
Cinza Suave
HEX #F2F2EF
Fundos de seções alternadas.
Cinza Texto
HEX #4A4A45
Texto corrido e descrições.

Cores por categoria de conteúdo

Saúde
HEX #0F3460
Posts e badges de Saúde.
Esporte
HEX #2A5E1A
Posts e badges de Esporte.
Educação
HEX #5B2D8A
Posts e badges de Educação.
Cultura
HEX #0B6E6E
Posts e badges de Cultura.
Institucional
HEX #C8692A
Posts e badges Institucionais.
03 · Tipografia

Nossas fontes

A BSB usa duas famílias tipográficas que se complementam: Fraunces para títulos e expressão, Inter para texto e leitura. Ambas gratuitas via Google Fonts.

Fraunces — Títulos e destaques
Transformando vidas
Cuidar · Unir · Transformar
Saúde para quem mais precisa
construindo futuros
Uso: H1, H2, H3, citações, destaques e subtítulos em itálico
Inter — Corpo e interface
NOSSOS PROJETOS · SEÇÃO
O BSB — Beneficência Saúde Brasil é uma organização sem fins lucrativos comprometida com a transformação social por meio da saúde, do esporte e da educação. Nossa missão é construir um Brasil mais justo.
Texto secundário, legendas, metadados e descrições complementares de menor hierarquia visual.
Uso: corpo de texto, botões, navegação, labels, metadados, UI em geral
Hierarquia de tamanhos recomendada
Elemento Fonte Tamanho Peso
Hero H1Fraunces2.8–5.5rem700
Título seção H2Fraunces1.8–2.8rem700
Subtítulo H3Fraunces1.2–1.5rem600
Eyebrow / LabelInter0.72–0.75rem700 + uppercase
Corpo de textoInter1–1.05rem400
BotõesInter0.88–0.95rem600
Legenda / MetaInter0.72–0.82rem400
04 · Tom de Voz

Como a BSB fala

A comunicação da BSB é humana, direta e esperançosa. Falamos de igual para igual — sem jargões técnicos, sem exageros, sem distância.

💚 A BSB é...
  • Humana e próxima — fala com o coração
  • Direta — vai direto ao ponto
  • Esperançosa — acredita na transformação
  • Responsável — presta contas com transparência
  • Inclusiva — acolhe a todos
  • Técnica quando precisa — mas nunca fria
🚫 A BSB não é...
  • Burocrática ou distante
  • Alarmista ou dramática
  • Corporativa ou fria
  • Condescendente com quem atende
  • Vaga ou genérica
  • Excessivamente formal
✅ Exemplo de tom correto
"Em 2025, realizamos mais de 12.000 atendimentos médicos para famílias que não teriam acesso de outra forma. Cada número representa uma história real de cuidado e esperança."
🚫 Evite esse tom
"A Beneficência Saúde Brasil, no âmbito de suas atribuições estatutárias, promoveu a realização de procedimentos médico-assistenciais em conformidade com as diretrizes do SUS."
✅ Chamada para ação correta
"Cada doação, por menor que seja, garante que mais famílias recebam o cuidado que merecem. Doe agora."
🚫 Chamada para ação fria
"Contribua financeiramente para a manutenção das atividades desta instituição sem fins lucrativos."
Palavras e expressões da BSB

✅ Usamos

cuidado transformação comunidade dignidade esperança família saúde acesso impacto juntos

🚫 Evitamos

caridade pobres necessitados miserável vítima infelizmente
05 · Redes Sociais

Formatos e proporções

Cada formato tem suas especificidades. Use sempre as dimensões corretas para garantir qualidade visual em todos os dispositivos.

Post Feed
📸 Feed Quadrado
1080 × 1080 px
Formato padrão para posts no feed do Instagram. Proporção 1:1.
Stories
📱 Stories / Reels
1080 × 1920 px
Formato vertical para Stories e Reels. Proporção 9:16.
Carrossel
🎠 Carrossel
1080 × 1080 px
Até 10 slides. Ideal para conteúdo educativo (BSB Educa).
YouTube
▶️ YouTube / Vídeo
1920 × 1080 px
Thumb e vídeos em 16:9. Sempre com logo no canto superior.
Capa Facebook
📘 Capa Facebook
820 × 312 px
Imagem de capa da página no Facebook.
Capa LinkedIn
💼 Capa LinkedIn
1584 × 396 px
Imagem de capa da página institucional no LinkedIn.
Boas práticas para redes sociais
→
Sempre incluir o logo BSB no canto superior esquerdo ou inferior direito
→
Usar fundo verde (#1A6B4A) como padrão ou branco (#FAFAF8) como alternativa
→
Títulos em Fraunces, textos em Inter — mesmo padrão do site
→
Incluir sempre o perfil @beneficenciabrasil nas publicações
→
Posts de saúde em azul escuro (#0F3460), esporte em verde escuro (#2A5E1A)
→
Sempre usar imagens de alta resolução — mínimo 72dpi para digital
→
Deixar margem de segurança de 80px em Stories (área do username e botões)
06 · Elementos UI

Componentes visuais

Os elementos visuais da BSB formam um sistema coerente. Use sempre os padrões estabelecidos para manter a consistência em qualquer aplicação.

Botões
Quero doar 💚 Saiba mais

Primário — verde BSB, texto branco. Ações principais.
Secundário — contorno verde, texto verde. Ações secundárias.
Ghost — contorno branco translúcido. Apenas sobre fundos escuros.

Eyebrow — Label de seção
Acontece na BSB
Gestão transparente
Nossos projetos

Inter 700 · 0.72–0.75rem · uppercase · letter-spacing 0.14em · verde BSB · linha de 24px antes

Badges de categoria
🏛️ Institucional 🏥 Saúde 🎓 Educação 📚 BSB Educa ⚽ Esporte 🎭 Cultura 🤲 Assistência Social Em destaque Em preparação
Card de notícia
📚 BSB Educa 🌿
Como fortalecer a imunidade de forma saudável
Jul 2026 Ler →

Border-radius 14px · borda 1.5px rgba(26,107,74,0.08) · hover: eleva 4px + sombra verde

Blockquote / Citação
"Cada atendimento é uma família que retorna para casa com dignidade e esperança."

Fraunces 300 itálico · fundo verde-menta · borda esquerda 3px verde BSB

07 · O que não fazer

Erros a evitar

A consistência visual é fruto de boas práticas e também de evitar os erros mais comuns. Revise sempre antes de publicar.

🎨 Cores
Usar tons de verde diferentes dos definidos na paleta
Criar gradientes não aprovados
Usar cores de categorias fora do contexto (ex: azul saúde em post de esporte)
Baixo contraste entre texto e fundo
✏️ Tipografia
Usar outras fontes além de Fraunces e Inter
Usar Fraunces no corpo de texto longo
Texto em caixa alta no corpo
Misturar pesos demais no mesmo layout
🔷 Logo
Distorcer, esticar ou rotacionar o logo
Usar sobre fundos sem contraste suficiente
Adicionar sombras ou efeitos ao logo
Recriar o logo à mão — sempre usar o arquivo original
💬 Tom de voz
Linguagem burocrática ou extremamente formal
Usar termos que diminuem os beneficiários
Exagerar resultados ou fazer promessas não comprovadas
Textos longos e sem pausa nos posts de redes sociais
08 · Checklist

Antes de publicar

Use esta lista antes de publicar qualquer material — post, documento, apresentação ou página — para garantir que está dentro da identidade BSB.

✓
Estou usando apenas as cores da paleta aprovada?
✓
Os títulos estão em Fraunces e o corpo em Inter?
✓
O logo está em uma das versões aprovadas com área de proteção respeitada?
✓
O tom de voz está humano, direto e esperançoso?
✓
Evitei termos que diminuem os beneficiários?
✓
As imagens têm boa resolução e qualidade?
✓
O contraste entre texto e fundo está adequado?
✓
Incluí o perfil @beneficenciabrasil (em posts de redes sociais)?
✓
O formato/dimensão está correto para o canal de publicação?
✓
Revisei ortografia e gramática?
✓
O material tem uma única chamada para ação clara?
✓
O conteúdo está alinhado com os valores e missão da BSB?
Dúvidas sobre a identidade visual?

Entre em contato com a equipe de comunicação da BSB.

Fale conosco →

Institucional

Saúde

Programas

© 2005–2026 BSB — Beneficência Saúde Brasil. CNPJ 05.411.105/0001-57 OS Federal
Privacidade Transparência Contato