Vinheta de carregamento
Arcos entram com mola (500 ms), batem a cada 1,8 s e soltam três ondas. Some em 550 ms quando a página está pronta.
Brand book
& design system 2026
Como a SBACEM aparece no papel, na tela e no feed. Marca, cores, tipografia, Instagram, interface e movimento num só lugar, com os arquivos para baixar no final.
↓ Role para começar01 Como usar este documento
Cada regra diz de onde veio.
Este brand book junta o que já é norma da marca SBACEM com o que a equipe passou a usar em 2026 no site novo, no BI, no almoxarifado e no Instagram. Um selo ao lado de cada regra mostra a procedência.
Norma
É norma da marca
Vem do Brandbook SBACEM de outubro de 2024, dos arquivos oficiais da pasta @Logo - SBACEM e das regras aprovadas pela Comunicação em novembro de 2026. Muda só com nova aprovação.
Em uso
Já está no ar
Padrões em produção no site novo, no BI SBACEM, na Gestão Integrada, no almoxarifado e no feed @sbacem. Aqui eles ficam registrados.
Proposta
Sistematização sugerida
Regras escritas para fechar lacunas, como o tom por canal e a versão monocromática. Valem como recomendação até a aprovação.
O que mudou em 2026
Em usoRoxo SBACEM
#22164C · 2024
Azul SBACEM
#25204A · 2026
Rosa SBACEM
#EF234D · letras
Magenta SBACEM
#E72A4E · símbolo
O azul principal ficou mais escuro e mais frio: é o mesmo #25204A dos arquivos do logotipo e da base dos stories. O rosa oficial #EF234D continua nas letras em destaque. O magenta #E72A4E do símbolo vale para superfícies: botões, faixas, ícones e o pico dos gráficos.
Entram duas camadas novas: o Azul Noite #160E33 para fundos de tela, e a Aura, gradiente vivo de violeta #311468 a orquídea #AC2077, que é o fundo do BI e da Gestão Integrada.
O capítulo 07 traz a paleta completa, os contrastes medidos e onde cada cor entra.
Fontes consultadas
| Fonte | Data | O que forneceu |
|---|---|---|
| Brandbook SBACEM | out/2024 | Logotipo, símbolo, tagline, Roboto, areia |
Arquivos @Logo - SBACEM | jul/2026 | 16 versões do logotipo em SVG e PNG, fundos, ícones de contato, vinhetas |
| Site SBACEM (novo) | out/2026 | Cápsula de menu, botões, vinheta de carregamento, tom das páginas |
| BI SBACEM repaginado | 26/10/2026 | Vidro sobre aura, gráficos em cápsula, coreografia de entrada |
| Almoxarifado | out/2026 | Malha de fundo, luz de janela, dock com indicador, cascata de cartões |
| Instagram @sbacem | out/2026 | Séries do feed, fixados, destaques 3D, stories |
| Aprovação da Comunicação | 03/11/2026 | Proteção e tamanho mínimo, distribuição das cores, escala para tela e quebra de linha, regras do Instagram e do movimento, checklist de publicação |
02 Essência · desde 1946
Por quem nos inspira
Protegemos, arrecadamos e distribuímos os direitos de quem faz a música acontecer.
A SBACEM — Sociedade Brasileira de Autores, Compositores e Escritores de Música — nasceu no Rio de Janeiro em 9 de abril de 1946 do anseio por autonomia e respeito aos criadores. É uma das sete associações de música que administram o ECAD.
A tagline “Por quem nos inspira” é a assinatura da marca: a sociedade existe por causa de quem cria. Toda peça deve deixar o autor no centro.
Norma- 1946Fundação no Rio de Janeiro
Walfrido Silva, Cândido Dias da Cruz, Henrique Vogeler, J. Maia e J. Simas fundam a sociedade.
- 1947Ary Barroso na presidência
O autor de “Aquarela do Brasil” afirma o samba como arte digna de proteção.
- 1973Cofundadora do ECAD
Ajuda a desenhar o modelo de gestão coletiva de direitos autorais no Brasil.
- 202680 anos ao lado dos autores
Mais de 15 mil associados e tecnologia para acompanhar os direitos em tempo real.
Missão
Proteger e valorizar os direitos autorais das obras musicais, garantindo que os titulares recebam seu devido reconhecimento, do registro da obra ao repasse dos valores.
Visão
Ser reconhecida como a sociedade mais musical, a casa onde autores de todos os gêneros e regiões se sentem representados e ouvidos.
Valores
TransparênciaEficiênciaValorizaçãoCompromissoProteção
03 Voz e tom Proposta
Fala como quem cuida da obra.
A SBACEM explica direito autoral para quem vive de música. A voz é próxima e segura: sem juridiquês, sem euforia publicitária.
Próxima
Fala com o autor pelo nome da obra, não pelo número do protocolo.
Clara
Arrecadação, distribuição e repasse explicados em frases curtas.
Guardiã
Promete proteção e transparência, nunca valores de repasse.
Musical
A música é o assunto. Artistas, palcos e histórias aparecem de verdade.
O tom muda com o canal
Exemplos tirados do site e do feed| Canal | Ajuste | Como soa |
|---|---|---|
| Institucional site, documentos | Seguro, direto | “Sua música, protegida. Associe-se à SBACEM e tenha quem cuide dos seus direitos autorais enquanto você cuida da sua arte.” |
| Associado portal, atendimento | Prático, passo a passo | “Com uma plataforma clara, você acompanha em tempo real a arrecadação e a distribuição dos seus direitos.” |
| Instagram feed, stories | Celebra o associado | “Que momento, Felipe & Rodrigo! É uma alegria para a SBACEM acompanhar nossos associados conquistando novos palcos.” |
| Comunicado gestão coletiva, ECAD | Formal, factual | “Informamos que… O atendimento às associações e usuários permanece inalterado.” |
| Ary assistente virtual | Acolhedor, breve | “Fale com o Ary.” Responde em até três frases e oferece o próximo passo. |
Na prática
EscrevaOs valores da sua obra entram na próxima distribuição. Acompanhe pelo Portal do Associado.
EviteEm conformidade com o regulamento vigente, o crédito será efetivado oportunamente.
EscrevaMais de 10 mil pessoas e 17 músicas inéditas.
EviteUm sucesso incrível, transformador e revolucionário!!!
Palavras da casa
- Associado
- Quem é filiado à SBACEM. Não usamos “cliente”.
- Obra
- A composição: letra e melodia.
- Fonograma
- A gravação de uma obra.
- Arrecadação
- O que o ECAD recolhe de quem usa música.
- Distribuição
- A divisão dos valores entre os titulares.
- Repasse
- O pagamento que chega ao associado.
04 Símbolo e logotipo Norma
Um sinal que se propaga.
O símbolo são ondas sonoras saindo de um centro: dois arcos internos e dois externos, girados 180°. Ao lado, o nome SBACEM em letras monolineares de cantos arredondados, e a tagline em caixa-alta.
Construçãosimetria de 180°
- 1Arco externoA onda mais longa. Abre para fora, como o som que chega longe.
- 2Arco internoCurto e espesso. Os dois internos juntos desenham um S.
- 3Par giradoO outro lado repete o primeiro, girado 180° em torno do centro.
- 4RecorteOs arcos não se tocam. O espaço entre eles é parte do desenho.
- 5Centro de rotaçãoPonto 22,8 × 26,2 da prancheta do símbolo. É dele que a vinheta pulsa (capítulo 13).
Quatro assinaturas, uma hierarquia
comece pela principal01 · Principalhorizontal com tagline
02horizontal
03vertical com tagline
04símbolo
Cor da assinatura conforme o fundo
NormaFundo clarocor
Azul, noiteletra branca · marca rosa
Aurasímbolo 3D · letra branca
Magentaletra branca · marca azul
Fotobranca
Uma corazul
05 Área de proteção e tamanho mínimo Norma
Espaço para soar, tamanho para existir.
A medida-base x é a altura das letras do nome SBACEM. Ela cresce e encolhe junto com a assinatura, então vale em qualquer tamanho.
Área de proteção1 x
Nada entra na faixa tracejada: texto, outra marca, borda de foto ou de página. Em fundos de foto, a faixa também precisa ficar livre de pontos de contraste forte.
| Medida | Valor |
|---|---|
| x | altura das letras SBACEM |
| Altura do símbolo | 2,6 x |
| Área de proteção | 1 x em todos os lados |
| Proporção horizontal | 4,12 : 1 |
| Proporção vertical | 1,68 : 1 |
Tamanho mínimo
| Versão | Tela | Impresso |
|---|---|---|
| Horizontal com tagline | 160 px | 40 mm |
| Horizontal | 96 px | 25 mm |
| Vertical com tagline | 110 px | 28 mm |
| Símbolo | 16 px | 6 mm |
O símbolo em tamanho real
favicon · avatar · app06 Usos incorretos Norma
O que nunca acontece com esta marca.
A assinatura entra sempre pelo arquivo vetorial. Se uma peça pede uma dessas mudanças, o problema está na peça.
SBACEM
07 Paleta 2026 Em uso
Azul mais escuro. RGB mais vivo.
A marca é desenhada para a tela: os valores de referência são HEX e RGB. O CMYK abaixo é conversão de partida; peças impressas pedem prova de cor na gráfica. Clique numa amostra para copiar o HEX.
Principais
presentes em toda peçaDigitais vivas
luz, profundidade e gradientes de telaApoio
respiro, papel e dadosComo distribuir
Norma
AZUL + NOITE 48%
AREIA + BRANCO 26%
MAG 12%
AURA 10%
O azul segura a peça, o magenta aponta para onde olhar. Uma tela inteira em magenta perde a força do destaque.
Gradientes
Em usoAura
#311468 → #AC2077
Botão
#F04E6C → #E72A4E → #C81F42
Story
#25204A → #7F244B
Contraste medido
WCAG 2.1 · AA pede 4,5:1 em texto e 3:1 em texto grande| Texto | Fundo | Razão | Texto corrido | Título (24 px+ ou 19 px negrito) |
|---|---|---|---|---|
| Branco | Azul Noite | 18,34:1 | AAA | AAA |
| Branco | Azul SBACEM | 15,17:1 | AAA | AAA |
| Azul SBACEM | Areia Clara | 14,33:1 | AAA | AAA |
| Areia | Azul SBACEM | 9,46:1 | AAA | AAA |
| Branco | Orquídea | 6,51:1 | AA | AAA |
| Magenta Sombra | Branco | 5,63:1 | AA | AAA |
| Rosa SBACEM | Azul Noite | 4,38:1 | não | AA |
| Rosa SBACEM | Azul SBACEM | 3,63:1 | não | AA |
| Rosa SBACEM | Branco | 4,19:1 | não | AA |
| Magenta SBACEM | Branco | 4,34:1 | não | AA |
| Branco | Magenta SBACEM | 4,34:1 | não | AA |
| Magenta SBACEM | Azul SBACEM | 3,50:1 | não | AA |
Regra prática. Branco sobre magenta e magenta sobre branco só em títulos e botões de 19 px negrito para cima. O Rosa SBACEM das letras em destaque vale para títulos, palavras-chave e números grandes; em texto pequeno, use branco ou areia no escuro e Magenta Sombra no claro.
08 Tipografia
Uma família, três vozes.
Roboto é a letra da SBACEM desde 2024. Em 2026 o feed passou a usar duas irmãs dela: a Condensed para chamar as séries e a Mono para rótulos espaçados. As três são gratuitas no Google Fonts.
Roboto Norma
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
àáâãçéêíóôõú 0123456789 ( ) — R$ % &
Light 300números grandes do BI, títulos de painel
Regular 400texto corrido, legendas
Medium 500rótulos, menus, chips
Bold 700botões, intertítulos
Black 900títulos do site e do feed
Quem escreve o quê
Roboto
Por quem nos inspira.
Títulos em Black com tracking −3%. Uma palavra em Rosa SBACEM por título, no máximo.
Roboto Condensed
Direitos
autorais
Nome das séries do feed: Playlist, Direitos Autorais, Giro de Notícias. Sempre caixa-alta, Black ou ExtraBold.
Roboto Mono
Playlist
Rótulos espaçados dos posts fixados e títulos de comunicado. Light, caixa-alta, espaçamento de 0,4 a 1,4 em.
Escala para tela
Norma| Papel | Tamanho / altura | Peso | Amostra |
|---|---|---|---|
| Display | 64 / 64 px · −3% | 900 | Sua música |
| Título 1 | 44 / 46 px · −3% | 900 | Quem somos |
| Título 2 | 30 / 34 px · −2,5% | 900 | Principais diferenciais |
| Painel (BI) | 32 / 36 px · −1% | 300 | Ranking de obras |
| Intertítulo | 20 / 26 px | 700 | Proteção total das suas obras |
| Texto | 16 / 26 px | 400 | Acompanhe a distribuição em tempo real. |
| Botão | 15 / 15 px · +1% | 700 | Associe-se |
| Rótulo | 11 / 11 px · +20% | 500 mono | Distribuição · dez/25 |
No site e no BI os títulos usam text-wrap: balance. Números em tabelas e gráficos levam font-variant-numeric: tabular-nums, para os algarismos alinharem.
Quebra de linha
NormaQuebre a linha deixando o texto o mais blocado possível: linhas de comprimento parecido e nenhuma palavra sozinha na última linha.
Preposição, artigo e conjunção curta (a, o, de, da, do, em, no, na, com, por, para, que, e) nunca ficam no fim da linha. Eles descem para a linha de baixo junto com o resto da frase.
Na tela, isso se faz com espaço inseparável depois da palavra curta (de quem) e text-wrap: balance nos títulos. O script sbacem-quebra-de-linha.js, no pacote de tokens, aplica a regra sozinho no site e no BI.
ErradoProtegemos os direitos de
quem faz a música acontecer.
quem faz a música acontecer.
CertoProtegemos os direitos
de quem faz a música acontecer.
de quem faz a música acontecer.
ErradoSua música protegida por
quem entende de direito autoral.
quem entende de direito autoral.
CertoSua música protegida por quem
entende de direito autoral.
entende de direito autoral.
09 Grafismos e fundos Em uso
Aura, onda e malha.
Quatro fundos cobrem quase tudo o que a SBACEM publica. Todos nascem da ideia do símbolo: som que sai de um ponto e se espalha.
Aura com símbolo
Violeta a orquídea com o símbolo em volume à direita. Fundo do BI, da Gestão Integrada, da vinheta e desta capa. O texto fica sempre do lado vazio.
bg-escuro.jpg · bg-claro.jpgOndas concêntricas
Anéis que saem do símbolo. Fundo de carregamento, avatar ao vivo, abertura de vídeo.
Onda 3D
Camadas em relevo, do magenta ao vinho. Tela de login do BI e rodapé dos comunicados.
bg-login.jpgMotion
Onda de luz em movimento, do dourado ao violeta, sobre o azul noite. Fundo da capa e das chamadas de vídeo. Em loop, sem som, sem texto embutido.
SBACEM_Onda-de-luz.mp4Malha com luz de janela
Do almoxarifado: linhas finas a cada 24 px, linhas principais a cada 120 px, pontos nos cruzamentos e uma luz diagonal desfocada. Para sistemas internos de fundo claro.
10 Fotografia e ilustração
Fotografe quem cria.
Gente fazendo música: compondo, gravando, no palco, no estúdio. A foto ganha a luz da marca com um tratamento violeta e um brilho magenta no alto.
Buscar
- Associados e artistas reais, com crédito da foto.
- Mãos em instrumentos, cadernos de letra, estúdio, palco.
- Luz quente ou colorida de show; fundos lilás e violeta.
- Rostos em close, olhando para a câmera ou para o instrumento.
Evitar
- Banco de imagem de escritório com aperto de mão.
- Fotos com marca d’água ou de artistas sem autorização.
- Duotone e filtros que lavam a cor da foto ou deixam a pele cinza.
- Texto sobre a parte mais carregada da foto.
Ícones 3D
Em uso nos destaques
Objeto único em magenta fosco, luz de cima à esquerda, sombra suave no chão, fundo em gradiente violeta para vinho. Um objeto por ícone, sem texto dentro.
11 Instagram @sbacem Em uso
O feed é onde a marca conversa.
Cada série tem um desenho fixo, para o seguidor reconhecer o assunto antes de ler. Abaixo, os modelos refeitos em código a partir do feed de outubro de 2026, com fotos ilustrativas.
Séries do feed
1080 × 1350 px · 4:5
Playlist
conheça
nossos
associados
link na bio
Um grandeSucesso
Nome do autore “Nome da música”
PlaylistNome do artista
Direitosautoraiscom Sayera Voila
Giro deNotícias
1º de outubroDia Internacional daMúsicaA música atravessa fronteiras e conecta histórias.
História
da música
Tá escritoda música
Comunicado daGestão Coletiva
logo doparceiro
Informamos que a SBACEM acompanha o processo de reorganização estrutural que as associações de música estão conduzindo para enfrentar os novos desafios da gestão coletiva.
Durante o período de transição, as solicitações de associados e usuários seguem pelos canais habituais, com os mesmos prazos de atendimento.
O atendimento às associações e usuários permanece inalterado e em contínuo processo de evolução.
Stories e carrossel publicados
1080 × 1920 px · 9:16
Base Azul SBACEM, título em Roboto Black com as palavras-chave em rosa #EF234D, filete magenta curto sob o título, créditos em Roboto 11 pt a 60%.
Destaques
capas 1080 × 1080 · ícone 3D centralizado
Regras da linha
Norma| Item | Especificação |
|---|---|
| Feed | 1080 × 1350 px (4:5) · margem 64 px |
| Stories e reels | 1080 × 1920 px (9:16) · livre 250 px no topo e na base |
| Logotipo | Canto superior, branco, 220 a 280 px de largura. Símbolo isolado só quando o nome já aparece no post. |
| Título | Roboto Black ou Condensed Black, caixa-alta, até 3 linhas. Uma palavra em rosa #EF234D ou uma faixa em magenta. |
| Texto de apoio | Roboto Regular 28 a 32 px, até 3 linhas. |
| Foto | Tratamento violeta (capítulo 10), base escurecida onde entra texto. |
| Créditos | Roboto 18 px a 60% de opacidade, no pé, sempre que houver foto de terceiros. |
| Legenda | Primeira linha com o assunto; hashtag da marca #porquemnosinspira. |
12 Interface Em uso
Vidro sobre aura.
A linguagem nasceu na Gestão Integrada e hoje veste o BI, o site e os sistemas internos: fundo de aura, painéis de vidro com borda dupla, botão principal em gradiente magenta. Os componentes abaixo funcionam: clique, digite, troque o tema.
BI SBACEM · dados de exemplo
Distribuição 2026
Valor distribuídoR$ 4,82 mi+12% sobre 2025
Obras no ranking12.4804.112 com execução no mês
Associados ativos15.236318 novos no ano
Valores distribuídos · R$ miltoque numa coluna para destacar
Botões · site e BI
Gradiente para a ação principal da tela, uma por vez. Vidro magenta para a ação de destaque sobre foto ou vídeo. Fantasma para o resto. A argola com a seta anda 2 px no hover.
Cápsula de menu · site
Flutua no topo com 22 px de margem, em vidro azul. No computador mostra os links; no celular, as três barras. Ao abrir, o botão gira e as barras viram o símbolo; ao fechar, o símbolo volta a ser as barras. Sobre seções claras vira vidro branco. O indicador de destaques estica de 22 para 34 px no item ativo.
Dock · almoxarifado
O círculo claro desliza até o item tocado em 420 ms, curva .65, 0, .25, 1. A ação principal fica no meio, em gradiente.
Assistente · Ary
Fale com o Ary
Copiloto · online
Fale com o Ary
Copiloto · online
O Ary é o assistente da SBACEM, inspirado em Ary Barroso. Aparece em pílula branca no canto inferior direito, com o ponto verde de disponível. Fala em até três frases.
Medidas da interface
| Token | Valor | Onde |
|---|---|---|
| Raio pílula | 999 px | botões, chips, cápsula de menu, dock |
| Raio painel | 28 px | palco do BI, cartões grandes |
| Raio cartão | 20–22 px | KPIs, gráficos, cartões do site |
| Raio campo / ícone | 14 px | inputs, botões do trilho |
| Borda dupla | 8 px casca + 1 px filete | painel de vidro principal |
| Desfoque | 26 px trilho · 34 px painel · 18 px menus | backdrop-filter: blur() |
| Vidro | branco 7% · 11% · 16% | repouso · hover · ativo |
| Filete | branco 13% · 22% | bordas · bordas em destaque |
| Sombra do botão | 0 10 24 magenta 38% | botão principal |
| Altura de toque | 44 px mínimo · 48–50 px botões | tudo que é clicável |
13 Movimento e carregamento Em uso
A marca pulsa como som.
A vinheta abre o site, o BI e a Gestão Integrada. Depois que ela sai, a página entra numa ordem fixa: cartão, título, barras, números. Nos sistemas internos o movimento é curto e serve para orientar, como no almoxarifado.
Associados15.236
Cartão de vidro
O vidro chega vazio (700 ms, mola) e o conteúdo entra 220 ms depois, em cascata de 70 ms.
Ranking de obras 2026
Título digitado
Uma máscara corre da esquerda para a direita em 700 a 900 ms. Só em títulos de painel, nunca em texto corrido.
Barras em onda
Cada coluna nasce como um ponto e cresce com mola (950 ms), 55 ms depois da vizinha. O pico fica em magenta.
0
Número que conta
KPIs contam do zero até o valor em 1,4 s, desacelerando no fim. Algarismos tabulares, para o número não pular.
Ondas contínuas
Anéis a cada 1,2 s, abrindo até 7 vezes o tamanho do símbolo. Para esperas longas: envio de arquivo, geração de relatório.
Cascata do catálogo
Do almoxarifado: cartões sobem 8 px e aparecem em 500 ms, um a cada 45 ms.
Gaveta lateral
Detalhes do item entram pela direita: 24 px de deslocamento, 340 ms. Formulários sobem 8 px em 300 ms.
luz de janela
Luz ambiente
Faixas de luz desfocadas a 24°, andando devagar. Dá profundidade ao fundo claro sem disputar com o conteúdo.
Durações
| Uso | Tempo |
|---|---|
| Hover, foco, troca de cor | 200 ms |
| Botão pressionado, chips | 120–200 ms |
| Gaveta, menu suspenso | 260–340 ms |
| Indicador do dock | 420 ms |
| Saída da vinheta | 550 ms |
| Cartão de vidro | 700 ms |
| Barras do gráfico | 950 ms |
| Contagem de números | 1 400 ms |
| Batida da vinheta (loop) | 1 800 ms |
Regras
Norma- Nada entra antes da vinheta sair. Em telas internas, a vinheta reaparece na troca de tela.
- Movimento mostra de onde as coisas vêm: cartões sobem, gavetas vêm da direita, barras nascem da base.
- Mola só em entradas e no toque. Saídas são lineares e mais rápidas que as entradas.
- Loops apenas na vinheta, nas ondas de espera e em fundos de vídeo sem texto.
- Com “reduzir movimento” ligado no sistema, tudo aparece pronto, sem animação.
Curvas
cubic-bezier14 Downloads
Onde tudo mora.
Arquivos prontos para usar, sempre desta página. Versões antigas salvas no computador ficam desatualizadas: baixe de novo a cada peça importante.
Logotipos
As 16 assinaturas oficiais (horizontal, vertical, com e sem tagline, cor, branca, letra branca com marca rosa ou azul) e o símbolo isolado, em vetor e em 3D.
Fonte RobotoFamília completa em TTF, com licença. Condensed e Mono no Google Fonts.
Fundos digitaisAura escura e clara, onda 3D, gradiente e as ondas de luz e de partículas em vídeo (MP4), prontos para slide, tela e post.
Vinhetas em vídeoAbertura animada da marca, horizontal 16:9 e vertical 9:16.
Destaques do InstagramAs sete capas com ícone 3D em 1080 × 1080.
Ícones de contatoE-mail, telefone, WhatsApp, site, Instagram, Facebook e LinkedIn para assinaturas e rodapés.
Tokens e vinheta em códigoCores, tipografia, raios e curvas em CSS e JSON, mais a vinheta de carregamento pronta para colar.
Pacote completoEste brand book e todos os arquivos acima, numa pasta só.
Antes de publicar
Norma- A assinatura veio de um arquivo desta página, sem redesenho.
- A área de proteção de 1 x está livre.
- O fundo é azul, noite, aura, areia ou branco, com a versão de cor certa.
- Rosa só numa palavra do título; magenta numa faixa ou num botão.
- Texto pequeno passa no contraste AA (capítulo 07).
- A foto tem crédito e autorização do artista.
- O título tem até três linhas, em Roboto Black ou Condensed.
- No Instagram, a peça segue o modelo da série (capítulo 11).