Brand book &
design system
Diretrizes claras e atualizadas da marca para colaboradores e parceiros — reduzindo a ambiguidade em cada aplicação.
01 — Como usar
Um documento com procedência declarada.
Este brand book existe para eliminar decisões de improviso. Toda aplicação da marca M360 — de um post a uma fachada — deveria encontrar aqui a resposta antes de precisar de uma reunião. O arquivo é auto-contido: vetores, fotografia, artes e tipografia estão dentro dele, então abre igual em qualquer máquina, com ou sem internet.
Nem tudo o que está aqui tem o mesmo peso. Parte é norma fechada, parte já foi aprovada como sistematização e parte ainda é recomendação técnica esperando validação. Cada bloco declara em qual dessas categorias se encaixa.
Não misture as três. Um selo laranja não é uma decisão tomada — é uma pergunta esperando resposta.
É norma da marca
Vetores, cores, tipografia e artes fechadas conferidos contra os arquivos oficiais de
Identidade Visual, e o conteúdo verbal como a Comunicação o redigiu.
Nada aqui foi reconstituído de memória. Use sem consultar ninguém.
Sistematização sugerida
Regras derivadas da geometria e do comportamento da marca — escala de espaço, tokens de interface, curvas de movimento — que ainda não passaram por validação. Trate como recomendação técnica.
A música nunca fica parada. Ela nasce de uma ideia, ganha forma, encontra uma voz e começa a percorrer o mundo. Move pessoas, culturas, histórias e negócios. E, quando uma música continua em movimento, seu potencial também continua.
Na M360, acreditamos que cuidar da música é cuidar de tudo o que ela pode se tornar. Por isso, unimos conhecimento, tecnologia e inteligência para acompanhar cada movimento da criação, da obra ao patrimônio, do talento à carreira, do Brasil para o mundo.
O mercado muda, a tecnologia evolui e os formatos se transformam. A música também encontra novos caminhos. É por isso que estamos sempre em movimento.
03 — Fundamentos da marca Fonte
Fundamentos
da marca
Missão
Impulsionar o potencial da música, oferecendo tecnologia, inteligência e gestão para transformar criações em oportunidades, patrimônio e carreiras sustentáveis.
Visão
Ser a principal referência brasileira em desenvolvimento e gestão musical, reconhecida por unir tecnologia, transparência e inteligência para levar a música brasileira cada vez mais longe.
Valor
Transformar o potencial da música em movimento, criando valor para quem faz, desenvolve e vive dela.
Missão, visão e valor no singular. O valor é a proposta de valor da marca — o que ela entrega — e não uma lista de princípios de conduta. Esta é a redação oficial.
04 — Tom de voz Fonte · texto de marca
Inteligente, direto e próximo.
A M360 fala como quem entende de música e de negócio, mas não precisa provar que entende. É uma marca que traduz complexidade, compartilha conhecimento e mostra possibilidades. Não fala de cima para baixo e não usa termos técnicos para parecer sofisticada.
Claro
Falamos para ser entendidos.
Explicamos assuntos complexos de maneira simples, sem perder profundidade.
✕“Potencializamos ecossistemas de monetização através de soluções integradas.”
✓“Transformamos oportunidades em valor para sua música.”
Seguro
Temos opinião e conhecimento.
A M360 não é hesitante. Quando tem conhecimento, posiciona-se com clareza.
✓“A música mudou. A forma de desenvolver seu valor também.”
Humano
Falamos com pessoas, não com contratos.
Artistas, compositores e parceiros devem sentir que existe alguém do outro lado.
✓“Sua música tem uma história. Nosso trabalho é ajudar essa história a continuar.”
Contemporâneo
Olhamos para frente sem abandonar nossa experiência.
A M360 entende tradição, mas não fica presa a ela.
✓“O mercado está em movimento. A gestão da sua música também precisa estar.”
Inspirador
Mostramos possibilidades.
Não prometemos sucesso. Mostramos caminhos para que a música alcance mais potencial.
✓“Uma obra pode começar com uma ideia. O que ela pode se tornar depende de até onde conseguimos levá-la.”
05 — Personalidade Fonte · texto de marca
Se a M360 fosse uma pessoa.
Seria aquele profissional que conhece profundamente o mercado musical, acompanha tecnologia e tendências, entende de negócio, mas consegue conversar com um artista no estúdio sem transformar a conversa em uma reunião corporativa.
01
Inteligente
Sabe o que está falando.
02
Curiosa
Está sempre olhando para o que vem depois.
03
Transparente
Não esconde informação atrás de burocracia.
04
Estratégica
Enxerga além do próximo lançamento.
05
Brasileira
Conhece a diversidade e a complexidade da nossa música.
06
Global
Não pensa pequeno.
07
Inquieta
Não aceita que “sempre foi assim” seja uma justificativa.
A especialista que entende onde a música está e enxerga para onde ela pode ir.
06 — Arquétipo Fonte · texto de marca
O Sábio
+ o Explorador
A M360 não cabe em um arquétipo puro. Funciona melhor como combinação: um sabe como avançar, o outro quer descobrir até onde é possível chegar.
Arquétipo A
O Sábio
- Conhecimento
- Inteligência
- Transparência
- Autoridade
- Confiança
Sustenta a autoridade: dados, didática, posicionamento em pauta de mercado e de direitos autorais.
Arquétipo B
O Explorador
- Movimento
- Descoberta
- Novas possibilidades
- Independência
- Futuro
Sustenta a energia: lançamentos, tecnologia, internacionalização, campanhas e presença em redes.
O Sábio sabe como avançar.
O Explorador quer descobrir até onde é possível chegar.
A assinatura da marca é a junção dos dois arquétipos numa frase. Quando uma peça parecer fora de tom, verifique qual dos dois sumiu: falta de Sábio vira publicidade vazia, falta de Explorador vira comunicado de cartório.
07 — Como a M360 fala Fonte · texto de marca
O tom é um só. O ajuste muda com a situação.
Consulte antes de escrever. Se a peça não se encaixar em nenhuma linha, ela provavelmente está misturando dois contextos que deveriam estar separados.
| Situação | Ajuste do tom | Como isso aparece na prática |
|---|---|---|
| Institucional | Segura e objetiva | Frase afirmativa, dado antes de adjetivo, nenhuma promessa que dependa de terceiros. |
| Artistas | Próxima e estimulante | Segunda pessoa, verbo de possibilidade, foco na obra e na carreira — não no contrato. |
| Mercado | Inteligente e provocadora | Pode abrir com uma tese. Cabe pergunta retórica, desde que a resposta venha em seguida. |
| Tecnologia | Clara, nunca tecnicista | Explique o que a ferramenta resolve, não como ela funciona por dentro. Sigla só com tradução. |
| Direitos autorais | Didática e transparente | Um conceito por peça. Termo técnico sempre seguido de explicação em linguagem corrente. |
| Redes sociais | Mais leve, sem perder autoridade | Frase curta, ritmo mais solto. Leveza está no ritmo, não em gíria nem em meme. |
| Conquistas | Orgulhosa, sem arrogância | Diga o número e a quem ele beneficia. Nunca superlativo sem fonte. |
| Problemas | Direta, responsável e resolutiva | O que aconteceu, o que já foi feito, qual o próximo passo e quando. Nesta ordem. |
Aprovado A coluna “Situação” e o “Ajuste do tom” vêm do texto de marca. A terceira coluna é desdobramento editorial para tornar a matriz operável na redação, aprovado junto com ela.
08 — O que a M360 não é Fonte · texto de marca
Seis coisas que a marca nunca faz.
Esta lista é mais útil que a de atributos. Atributo é aspiração; isto aqui é critério de corte.
Não é burocrática
Evita linguagem jurídica desnecessária.
Não é arrogante
Conhecimento não precisa ser demonstrado o tempo todo.
Não é excessivamente informal
Não tenta falar como artista para parecer próxima.
Não é futurista demais
Tecnologia é ferramenta, não personalidade.
Não é publicitária demais
Não transforma toda comunicação em slogan.
Não promete o que não pode entregar
Credibilidade vem antes de entusiasmo.
Como usar na revisão. Antes de aprovar qualquer texto, passe por estes seis. Um único “sim” já é motivo para reescrever — não para negociar exceção.
A música nunca fica parada.
09 — A marca Fonte
Símbolo e logotipo
Elemento conceitual da marca
O M, elemento central do símbolo, representa o movimento e a força da música que inspira o DNA da marca. Sua presença se expande e reverbera, traduzindo a capacidade da música de alcançar novos espaços, públicos e possibilidades.
Representação gráfica e personalizada do nome
Já a construção tipográfica do M360, com traços mais leves e precisos, cria contraste e movimento, reforçando a ideia de fluxo e continuidade. Juntos, símbolo e tipografia traduzem o propósito da M360: manter a música em constante evolução.
O logotipo é lettering exclusivo, desenhado a partir do movimento de um cabo de áudio. Não existe fonte que o reproduza. Ver capítulo 14.
Geometria
Proporções de referência
| Elemento | Largura | Altura | Razão |
|---|---|---|---|
| Símbolo | 249,15 | 239,34 | 1,041 : 1 |
| Logotipo | 458,51 | 164,92 | 2,780 : 1 |
| Assinatura verbal | 462,45 | 27,23 | 16,98 : 1 |
| Lockup completo | 770,07 | 239,74 | 3,212 : 1 |
Unidades arbitrárias do arquivo vetorial. O que importa é a razão entre elas — nunca reconstrua o lockup medindo em pixels de uma exportação. Use o SVG.
10 — Assinaturas Fonte
Quatro versões. Uma hierarquia.
Comece sempre pela assinatura principal. Só desça na hierarquia quando o espaço ou o contexto impedirem a anterior.
A1 — Principal
Assinatura completa
Símbolo + logotipo + assinatura verbal. Padrão para capas, apresentações institucionais, papelaria, fachadas e qualquer primeiro contato com a marca.
Arquivo: M360_assinatura-slogan-cor.svg
A2 — Reduzida
Assinatura horizontal
Símbolo + logotipo, sem a assinatura verbal. Use quando a altura disponível for curta ou quando a frase já apareça em outro ponto da peça. Evita repetição.
Arquivo: M360_assinatura-cor.svg
A3 — Logotipo isolado
Somente o nome
Quando o símbolo já está presente na peça — favicon, selo de canto, marca-d’água — repetir os dois é ruído. Use o logotipo sozinho.
Arquivo: M360_logotipo-cor.svg
A4 — Símbolo isolado
Somente o símbolo
Avatar de rede social, app icon, selo de patrocínio, elemento de vinheta. Só use quando o nome M360 aparecer legível em outro lugar do mesmo campo visual.
Arquivo: M360_simbolo-cor.svg
Aplicação sobre fundo
Versões monocromáticas
A versão colorida exige fundo branco, areia ou uma foto muito escura e limpa. Em qualquer outro caso, use monocromático. Nunca aplique a versão vinho sobre laranja nem vice-versa.
11 — Proteção e redução Aprovado
Espaço para respirar, tamanho para existir.
As duas regras derivam da própria geometria do símbolo. Foram aprovadas e valem como norma.
Área de proteção
A unidade de medida é ×, igual a um quarto da altura do símbolo. Nenhum outro elemento — texto, imagem, borda, outra marca — pode entrar nessa faixa.
Em peças com pouco espaço, aumentar a área de proteção resolve melhor do que aumentar a marca. A marca não precisa ser grande, precisa estar sozinha.
Redução mínima
Abaixo destes limites o halftone do símbolo colapsa em uma mancha e a leitura se perde. O limite existe por causa dos pontos, não do contorno.
Digital
| Assinatura completa | 240 px |
| Assinatura horizontal | 180 px |
| Logotipo isolado | 110 px |
| Símbolo isolado | 24 px |
Larguras. Abaixo de 32 px o símbolo precisa de uma versão simplificada com menos pontos — ainda não existe e deve ser desenhada.
Impresso
| Assinatura completa | 60 mm |
| Assinatura horizontal | 45 mm |
| Logotipo isolado | 28 mm |
| Símbolo isolado | 8 mm |
Larguras. Em serigrafia, bordado e gravação a laser, some 30 % a todos os valores — esses processos engordam o traço e fecham os vãos entre os pontos.
12 — Usos incorretos Aprovado
O que nunca acontece com esta marca.
13 — Cor Fonte
Paleta
Os valores CMYK mandam no impresso; os HEX, no digital. Onde os dois divergirem, quem decide é o meio. Clique em qualquer amostra para copiar.
Proporção
Como distribuir
O laranja é acento, não superfície — exceto em peças de abertura, onde ocupa a página inteira. Se tudo é laranja, nada é.
Aprovado Proporção aprovada para peças de comunicação corrente. Peças de campanha podem inverter.
Acessibilidade
Contraste medido
Razões calculadas pela fórmula WCAG 2.1. Texto corrente exige 4,5:1. Texto grande (24px ou 19px em peso demi) exige 3:1.
| Texto | Fundo | Razão | Corrente | Grande | Veredito |
|---|---|---|---|---|---|
| Preto | Branco | 19,93 : 1 | Passa | Passa | Combinação padrão de leitura |
| Preto | Areia | 16,80 : 1 | Passa | Passa | Combinação padrão de leitura |
| Areia | Preto | 16,80 : 1 | Passa | Passa | Combinação padrão de leitura |
| Vinho | Branco | 6,91 : 1 | Passa | Passa | Livre para títulos e corpo |
| Vinho | Areia | 5,83 : 1 | Passa | Passa | Livre para títulos e corpo |
| Preto | Laranja | 6,80 : 1 | Passa | Passa | Único texto legível sobre laranja |
| Branco | Laranja | 2,93 : 1 | Reprova | Reprova | Só como grafismo, nunca como texto |
| Areia | Laranja | 2,47 : 1 | Reprova | Reprova | Só como grafismo, nunca como texto |
| Laranja | Branco | 2,93 : 1 | Reprova | Reprova | Não use laranja em texto sobre claro |
Areia sobre laranja aparece na assinatura verbal de algumas peças. Em corpo grande e como elemento de marca isso é uma decisão gráfica defensável e não precisa mudar. O que não pode acontecer é essa combinação migrar para texto funcional — botão, legenda, formulário, corpo de texto. Sobre laranja, texto é preto. Regra aprovada e obrigatória em produto digital.
14 — Tipografia Fonte
Duas escritas, dois papéis.
A M360 não tem uma tipografia — tem duas escritas com funções separadas. O nome é lettering exclusivo, desenhado à mão a partir do movimento de um cabo. Todo o resto é ITC Avant Garde Gothic Pro. Confundir as duas é o erro tipográfico mais grave que se pode cometer com esta marca.
T1 — exclusivo, não é fonte
O lettering M360
O nome nasceu de um cabo de áudio deitado sobre a mesa: uma linha só, de espessura constante, que sobe, dobra, cruza e volta sem nunca ser interrompida. O M é o vai-e-vem do cabo; o 3 é a alça que ele forma ao se dobrar; o 6 e o o são o cabo enrolado. Por isso as junções são todas curvas e nenhuma letra tem ponta viva: cabo não faz canto.
Esse desenho não existe como fonte e não pode ser redigitado. Só se aplica a partir dos vetores oficiais do capítulo 24 — e só para a palavra M360, nunca para outra palavra, sigla ou nome de produto.
Verificação técnica: nos arquivos oficiais o logotipo está como caminho vetorial, sem nenhuma fonte associada. A assinatura verbal e os textos, esses sim, estão como texto vivo em Avant Garde.
T2 — tipografia de apoio
ITC Avant Garde Gothic Std
Usada na assinatura verbal e em todo o resto: títulos, corpo de texto, tabelas, legendas, interface. Foi escolhida por conversar com o lettering sem imitá-lo — também é geométrica, circular e de contraste quase nulo, mas tem esqueleto de fonte, não de traço contínuo. Ela acompanha o nome; não o substitui.
Aa
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 á é í ó ú â ê ô ã õ ç & @ # % ( ) — “ ”
XLight · 200
Display com tracking largo
Movimento
Book · 400
Corpo de texto
A música em movimento
Medium · 500
Labels e eyebrows
A música em movimento
Demi · 600
Títulos e assinatura verbal
A música em movimento
Divisão de papéis
Quem escreve o quê
| Elemento | Escrita | Como se aplica |
|---|---|---|
| Nome M360 | Lettering exclusivo | Só pelo vetor oficial. Nunca redigitado |
| Assinatura verbal | Avant Garde Demi | Vetor oficial em peça de marca; texto vivo é aceitável em web |
| Títulos | Avant Garde Demi | Texto vivo |
| Divisórias e display | Avant Garde XLight | Caixa alta, tracking 0,34 em |
| Corpo de texto | Avant Garde Book | Texto vivo, mínimo 16 px |
| Labels e legendas | Avant Garde Medium | Caixa alta, tracking 0,20 em |
| Nome de produto ou submarca | Avant Garde Demi | Nunca no lettering do M360 |
| Ênfase dentro de um parágrafo | Avant Garde Oblíqua | Arquivo próprio — nunca inclinar a vertical por software |
| Largura restrita | Avant Garde Condensada | Rótulo, coluna estreita, legenda. Nunca em corpo de texto |
Escala Aprovado
Razão 1,25 sobre base 16 px
Quarta maior. Dá degraus suficientes para hierarquia densa sem exigir tamanhos intermediários
improvisados. Todos os títulos usam clamp() — o valor da tabela é o teto.
| Token | rem | px | Peso | Uso |
|---|---|---|---|---|
6xl | 4,768 | 76 | 200 | Display de abertura |
5xl | 3,815 | 61 | 200 | Divisória de capítulo |
4xl | 3,052 | 49 | 600 | Título de capítulo |
3xl | 2,441 | 39 | 600 | Título de seção |
2xl | 1,953 | 31 | 600 | Título de bloco |
xl | 1,563 | 25 | 400 | Subtítulo, lead |
lg | 1,25 | 20 | 400 | Corpo destacado |
base | 1 | 16 | 400 | Corpo |
sm | 0,875 | 14 | 400 | Apoio, tabela |
xs | 0,75 | 12 | 500 | Label, eyebrow |
2xs | 0,694 | 11 | 500 | Legenda técnica |
Regra 1
Não escreva “M360” em Avant Garde nem em nenhuma outra fonte. Use o vetor.
Regra 2
Não estenda o lettering a outras palavras. Ele desenha um nome, não um alfabeto.
Regra 3
Tracking largo só em caixa alta e a partir de 24 px. Em corpo de texto destrói a leitura.
Regra 4
Itálico só com o arquivo oblíquo. Inclinar a vertical por software distorce o desenho.
Regra 5
Sem Avant Garde, use Century Gothic. Nunca Futura, Poppins ou Montserrat.
Regra 6
A condensada não é a largura da marca. Use só quando a largura for restrição real.
A família de apoio é a ITC Avant Garde Gothic Std, com quatro pesos verticais e quatro
oblíquas. Para web, os arquivos estão convertidos em WOFF2 em assets/fonts/ e
declarados em assets/m360-fontes.css — carregue essa folha antes dos tokens.
Para desktop, instale os .otf da pasta de fontes no Drive. A licença é comercial:
não redistribua os arquivos fora da equipe. O lettering do nome não depende de licença nenhuma,
porque é vetor.
15 — Elemento gráfico Proposta
O ponto que cresce é amplitude.
O halftone não é textura decorativa. É a mesma ideia do símbolo aplicada em campo aberto: o ponto cresce onde o som nasce e diminui conforme reverbera. Toda malha deve ter uma origem identificável e uma direção.
Origem em um ponto. Para peças com um centro claro — um retrato, um símbolo, um número.
Gradiente de uma borda à outra. Para transições entre blocos de cor e rodapés.
Senoide propagando. Para peças sobre movimento, catálogo e abertura de vídeo.
Parâmetros
Reproduzível em qualquer ferramenta. Em Illustrator, use Efeito → Pixelizar → Meia-tonalidade de cor sobre um degradê e depois vetorize; os valores abaixo são o alvo.
| Parâmetro | Valor | Observação |
|---|---|---|
| Passo da malha | 18 px | Distância entre centros |
| Raio mínimo | 0,06 × passo | Nunca chegue a zero — o ritmo se perde |
| Raio máximo | 0,46 × passo | Acima de 0,5 os pontos se tocam |
| Ângulo da malha | 0° | Ortogonal, como no símbolo |
| Cor | Uma só | Nunca dois tons de ponto na mesma malha |
| Opacidade | 100 % | Module o raio, nunca a transparência |
O ponto que cresce é amplitude.
16 — Iconografia Fonte
Um disco cheio, um glifo vazado.
O ícone M360 não é um contorno solto: é um disco sólido com o desenho recortado por dentro. A mesma lógica do símbolo, onde o M aparece pelo que foi removido do squircle.
Site
Telefone
A produzir
Construção
Todo ícone nasce num quadro de 152,95 × 152,95 com um disco de raio 76,48 — ou seja, o disco encosta nas quatro bordas. O glifo vive numa área segura de 60 % do diâmetro, o que garante que nada seja cortado quando o ícone virar avatar circular ou selo de canto.
Traço e contraforma seguem a mesma lógica do lettering: linha de espessura constante, junções curvas, nenhuma ponta viva. Cabo não faz canto — ícone da M360 também não.
| Quadro | 152,95 × 152,95 |
| Disco | raio 76,48 — sangra no quadro |
| Área segura do glifo | 60 % do diâmetro |
| Espessura mínima do traço | 6 unidades |
| Cores do disco | Laranja, vinho, preto ou areia |
| Cor do glifo | Sempre o contraste do disco |
| Tamanho mínimo | 24 px |
Variações de cor
Quatro discos, um glifo
Nunca colora o glifo. O que muda é o disco; o glifo é sempre o contraste — branco sobre laranja, vinho e preto, preto sobre areia.
Laranja
Vinho
Preto
Areia
Regra 1
Uma cor de disco por peça
Uma fileira de contatos usa discos todos da mesma cor. Ícone multicolorido vira semáforo.
Regra 2
Ícone não substitui rótulo
Em papelaria e assinatura de e-mail, o ícone acompanha o dado. Sozinho, só nas redes.
Regra 3
Nunca sobre o símbolo
Disco de ícone e squircle do símbolo lado a lado se confundem. Separe por pelo menos um diâmetro.
@Links/Icons.
Além dos sete ícones acima, a pasta contém cerca de noventa arquivos com prefixo Art_ —
uma biblioteca de estoque genérica, com itens como palhaço, máquina de costura, gravata-borboleta e
pistola de cola. Ela não foi desenhada para a M360: não segue a construção em disco, e boa parte do
repertório contradiz o capítulo 08.
A recomendação é não adotar o pacote inteiro. Selecione de dez a quinze temas realmente recorrentes na comunicação — obra, fonograma, repasse, catálogo, palco, streaming, contrato, evento — e redesenhe-os na construção em disco. Um conjunto pequeno e coerente vale mais que noventa ícones que ninguém consegue usar sem quebrar a marca.
17 — Imagem Aprovado
A foto nunca entra inteira.
Fotografia na M360 é sempre revelada por dentro de uma forma da marca — nunca colocada num retângulo. A máscara é o que transforma uma imagem de banco em uma peça da marca. Quatro técnicas, em ordem de força.
T1 — a mais forte
Máscara halftone
A foto aparece através de uma malha de pontos que crescem. É a técnica da página de manifesto da marca e a mais próxima do símbolo. Use no máximo uma vez por peça.
A direção importa: os pontos devem crescer na origem visual da imagem e diminuir em direção ao texto, abrindo espaço de leitura sem precisar de caixa nem de sombra.
T2 — para movimento
Máscara de faixas
Colunas verticais de alturas diferentes recortam a imagem, como as barras de um equalizador congelado. Cada faixa tem as pontas arredondadas no mesmo raio proporcional do símbolo — é isso que amarra a técnica à marca e a distingue de um recorte genérico.
| Número de faixas | 5 a 9, sempre ímpar |
| Largura | Igual entre todas |
| Vão entre faixas | 1/4 da largura da faixa |
| Altura | Variável, sem repetir o padrão |
| Raio das pontas | Metade da largura da faixa |
T3 — para unificar repertório
Duotone
Quando a peça reúne fotos de origens diferentes, o duotone iguala todas ao mesmo repertório cromático. Duas combinações apenas — não invente uma terceira.
T4 — para avatar e selo
Recorte no símbolo
A foto preenche a silhueta do símbolo. Reservado para avatar, selo de canto, capa de playlist e vinheta — nunca para peça institucional, porque destrói a legibilidade do M.
Use a silhueta cheia do squircle, sem os pontos. O halftone só funciona como recorte quando a imagem por trás tem massa de cor grande e pouco detalhe.
Avatar
Combine com duotone fogo. A silhueta sozinha já identifica a marca no tamanho de um avatar.
Composição
Como as peças se montam
Duas estruturas de cartaz derivadas das técnicas acima. Ambas reservam um terço limpo para texto e usam uma única ênfase visual.
Regra 1
Uma máscara por peça
Halftone e faixas na mesma composição competem entre si e anulam as duas.
Regra 2
Texto fora da imagem
O texto ocupa a área que a máscara liberou. Nunca por cima da foto com sombra ou tarja.
Regra 3
Duotone é opcional
Foto com luz de palco quente já está no repertório. Duotone só quando precisar igualar origens diferentes.
18 — Grid e composição Aprovado
Doze colunas, base de quatro.
Doze colunas dividem em 2, 3, 4 e 6 — cobre praticamente toda composição editorial sem precisar de exceção. A base de espaço é 4 px; todo valor de margem, padding e gap é múltiplo dela.
A composição da marca é assimétrica por natureza: o campo halftone ocupa dois terços e a assinatura fica no terço restante. Mantenha essa tensão — evite centralizar tudo.
| Colunas | 12 |
| Gap | 24 px |
| Margem | 32 px · 5 vw em telas grandes |
| Largura máxima | 1312 px |
| Medida de leitura | 64 ch |
| Pontos de quebra | 620 · 900 · 1180 px |
1 / 4
Alinhe à esquerda
Texto centralizado só em peças de uma linha. A marca lê da esquerda, como a partitura.
2 / 4
Deixe um vazio grande
Toda composição precisa de uma área sem nada, com pelo menos um quarto da peça. Silêncio é ritmo.
3 / 4
Uma ênfase por peça
Ou o halftone, ou a foto, ou o tipo grande. Nunca os três disputando a mesma atenção.
4 / 4
Sangre de propósito
O halftone sangra na borda para sugerir que continua fora da página. Elementos de conteúdo, não.
19 — Fotografia Proposta
Fotografe o movimento, não a pose.
Movimento aqui não é só palco. É a mão que corre o fader, a caneta que assina o contrato, o aperto de mão que fecha o acordo, o abraço depois que deu certo. A M360 trabalha entre a criação e o negócio — a fotografia precisa mostrar os dois.
Eixo 1
O ofício
Mesa de áudio, estúdio, ensaio, cabine. O que interessa é a mão em ação sobre o equipamento — dedo no fader, ganho sendo ajustado, fone meio torto. Enquadre curto, profundidade rasa, luz do próprio equipamento no quadro.
Eixo 2
O acordo
Assinatura de contrato, reunião, entrega de documento. Fotografe a caneta no papel e as mãos sobre a mesa, nunca o rosto de quem assina posando para a lente. O contrato é consequência, não troféu.
Eixo 3
A relação
Aperto de mão, abraço, conversa de perto. É o eixo que sustenta o atributo humano do capítulo 04. Registre o gesto acontecendo, não o momento em que os dois se viram para a câmera.
Buscar
- Mãos em primeiro plano. Fader, teclado, caneta, aperto. A mão é o sujeito da foto com mais frequência que o rosto.
- Gesto em curso. O movimento no meio do caminho, não o instante posado depois dele.
- Luz da própria cena. LED da mesa, luminária do estúdio, janela da sala de reunião, contraluz de palco.
- Temperatura quente. Âmbar e magenta convivem com o laranja e o vinho da marca sem briga.
- Espaço negativo. Um terço do quadro reservado para a marca ou o texto entrar depois.
- Gente real. Diversidade de idade, cor e função — do produtor ao jurídico.
Evitar
- Aperto de mão de banco de imagens. Duas mãos flutuando em fundo branco. Precisa haver uma mesa, uma sala, um contexto.
- Sorriso para a lente. Se todo mundo olha para a câmera, virou foto de confraternização.
- Equipamento sem ninguém. Mesa de som vazia é catálogo de loja, não é a M360.
- Filtro colorido chapado. A cor vem da luz da cena, não de uma camada por cima.
- Alto-contraste preto e branco. Rompe com o calor que define o repertório.
- Quadro cheio. Sem área livre não há onde a marca entrar, e ela acaba jogada sobre o rosto.
Recorte halftone
O tratamento da página de manifesto — a foto sangrando por trás de círculos que crescem — é o recurso de composição mais forte da marca. Use com parcimônia: uma vez por peça, e sempre com a máscara indo do denso ao rarefeito na direção da leitura.
Fotos de acordo e de estúdio pedem enquadramento mais fechado que as de palco. Ao aplicar a máscara, confira se o gesto principal não caiu justamente na área que ela apagou.
| Parâmetro | Valor |
|---|---|
| Direção da máscara | Da foto para o texto |
| Cobertura do halftone | 35 % a 55 % do quadro |
| Cor da máscara | Branco, areia ou preto — nunca laranja |
| Sobreposição de texto | Só na área totalmente coberta |
| Escurecimento da foto | Máx. 25 %, e só se o texto exigir |
| Proporção entre eixos | Ofício 40 % · acordo 30 % · relação 30 % |
20 — Papelaria Fonte
A marca no papel e no rodapé do e-mail.
As artes oficiais, fechadas. Não recrie nenhuma delas do zero: baixe da pasta
Papelaria e substitua apenas os dados variáveis.
P1
Cartão de visita
O cartão tem faca especial: é recortado na silhueta do próprio símbolo. Não é um retângulo com cantos arredondados — é o squircle da marca, com as quatro curvas assimétricas do original.
A frente é o símbolo em escala cheia: o laranja sangra até a faca e o M em halftone ocupa o miolo. O verso é branco, com logotipo, assinatura verbal e dados centralizados.
| Faca | Silhueta do símbolo · 1,041 : 1 |
| Formato final | 88 × 84 mm |
| Sangria | 3 mm além da faca |
| Margem interna | 8 mm da linha de corte |
| Papel | Supremo 350 g/m² |
| Acabamento | Laminação fosca nas duas faces |
| Arquivo de faca | Traço 100 % magenta, camada própria |
Peça a prova de corte antes da tiragem. Faca curva com esse raio pode deslocar até 1 mm, e o halftone da frente denuncia qualquer desalinhamento.
Frente e verso · faca na silhueta do símbolo
P2
Papel timbrado
Duas versões. A primeira usa arcos halftone nos cantos e leva a assinatura horizontal; a segunda é mais silenciosa, com o logotipo isolado no topo e o M em halftone no rodapé. Escolha pelo peso do documento: quanto mais formal, mais silenciosa.
P3
Assinatura de e-mail
Duas versões, clara e escura, com a mesma estrutura: campo halftone à esquerda, assinatura completa no centro, dados pessoais à direita e barra de contato no rodapé. Escolha pela cor do tema de quem recebe, não pela preferência de quem envia.
| Proporção | 3 : 1 |
| Largura de envio | 600 px |
| Exportação | PNG a 2× · 1200 px |
| Peso máximo | 50 KB |
| Ícones | Disco laranja · glifo vazado |
| Texto alternativo | “M360 — Nome Sobrenome” |
A assinatura é imagem: quem bloqueia imagem não lê nada. Repita nome, cargo e telefone em texto puro logo abaixo, sem formatação.
21 — Redes sociais Fonte
O perfil é onde a marca respira.
As peças abaixo são as artes fechadas da pasta Rede Social. Elas não são exemplo
hipotético: são o padrão. Use-as como base e mantenha as famílias — mudar de família a cada post
é o que desmancha a linha.
Foto de perfil
Símbolo em disco vinho com o M em halftone claro, ampliado até quase encostar na borda. Em 110 px é o que garante leitura.
Destaques
Capa preta, ícone em laranja ou vinho, um por vez. Rótulo de uma palavra em caixa alta. Nunca dois ícones na mesma capa.
Abertura da grade
A primeira linha é um tríptico: uma imagem única cortada em três posts. Reservada para campanha e lançamento — não use como rotina.
Famílias de post
Seis modelos, um sistema
Todo post tem o logotipo em branco centralizado no rodapé e o selo de carrossel no canto superior direito quando houver mais de uma peça. O que muda é a família.
Campo de cor entrando por um canto em pontos crescentes. Para foto de ofício e bastidor.
Sem grafismo. Só a foto e o logotipo. Para imagem forte que não precisa de ajuda.
Campo subindo do rodapé para assentar o logotipo. Para plateia, palco e multidão.
Numeral em vinho, palavra-chave em destaque, complemento em branco. Para conteúdo de série.
Fotos em faixas de pontas arredondadas sobre campo de cor. Para podcast e convidados.
Player em vidro sobre fundo desfocado da capa. Para novo lançamento e destaque de catálogo.
Biblioteca
As doze peças aprovadas
No feed
Como a sequência é lida
Regras da linha
A marca aparece por repetição, não por carimbo: o logotipo no rodapé de todo post é o que sustenta o reconhecimento. Por isso ele nunca muda de posição, de cor ou de tamanho relativo.
- Logotipo branco, centralizado no rodapé, sempre
- Uma família de grafismo por post
- Não repetir a mesma família em posts vizinhos
- Foto limpa a cada três posts, no mínimo
- Tríptico só em campanha e lançamento
- Texto sobre laranja é preto ou vinho, nunca branco
| Item | Especificação |
|---|---|
| Feed retrato | 1080 × 1473 |
| Feed quadrado | 1080 × 1080 |
| Stories e Reels | 1080 × 1920 |
| Foto de perfil | 320 × 320 · exportar a 2× |
| Capa de destaque | 1080 × 1920 |
| Capa LinkedIn | 1584 × 396 |
| Logotipo no rodapé | 22 % da largura da peça |
| Margem inferior do logotipo | 5 % da altura |
| Selo de carrossel | Canto superior direito · 9 % da largura |
| Área segura vertical | 250 px topo · 320 px base |
| Arquivos editáveis | Rede Social › PSD |
| Exportação | Rede Social › PNG |
Da obra ao patrimônio, do talento à carreira.
22 — Componentes Aprovado
Da identidade para a interface.
A tradução da marca para produto digital, derivada dos tokens dos capítulos 13 e 14. Aprovada como biblioteca de referência.
Botões
Quatro níveis, três tamanhos. O ícone final nunca fica solto: mora dentro do próprio círculo, encostado na margem interna direita.
Hierarquia
Tamanhos
Sobre fundo escuro
| Nível | Quando usar | Por peça |
|---|---|---|
| Primário | A ação que a peça existe para provocar | 1 |
| Secundário | Ação alternativa de mesmo peso | 0 a 1 |
| Terciário | Saída lateral, “ver mais”, navegação | livre |
| Texto | Cancelar, voltar, dispensar | livre |
| Raio | pill |
| Altura mínima | 36 · 44 · 54 px |
| Texto sobre laranja | #08090A — nunca branco |
| Rótulo | Verbo no infinitivo, sem ponto final |
| Estado ativo | scale(.985) — o botão afunda |
O rótulo não muda entre a ação e a confirmação: se o botão diz “Publicar”, o aviso diz “Publicado”.
Campos
Informe um CPF ou CNPJ válido.
O erro descreve o que corrigir. Nunca “campo inválido” sozinho.
Etiquetas de estado
Estado nunca depende só da cor. O texto sempre diz o que a cor diz — daltonismo e impressão em preto e branco continuam funcionando.
Cartão
Título da obra
Autor · Editora · 2026
Casca externa com fundo sutil e núcleo com raio menor. Os dois raios são concêntricos: o interno é o externo menos o padding.
Dado ilustrativo. O ISRC do exemplo é fictício e serve apenas para demonstrar a densidade de informação do componente.
23 — Movimento Proposta
O movimento tem massa.
A assinatura da marca é uma promessa de comportamento. Nada nesta identidade aparece ou some instantaneamente — tudo entra, desacelera e assenta.
Durações
| Token | Valor | Aplicação |
|---|---|---|
rapida | 160 ms | Hover, foco, troca de estado |
media | 340 ms | Painel, aba, acordeão |
lenta | 700 ms | Entrada em viewport |
cinema | 1200 ms | Abertura, onda halftone |
Curvas
| Token | cubic-bezier | Aplicação |
|---|---|---|
padrao | .32, .72, 0, 1 | Uso geral |
entrada | .16, 1, .3, 1 | Elemento entrando |
saida | .7, 0, .84, 0 | Elemento saindo |
onda | .37, 0, .63, 1 | Ciclo do halftone |
Princípio 1
Nada é linear
A curva linear é a única que não existe na natureza. Use sempre uma das quatro acima.
Princípio 2
Anime só transform e opacity
Largura, altura, top e left forçam recálculo de layout e derrubam o desempenho no celular.
Princípio 3
Respeite quem pediu para parar
Com prefers-reduced-motion ativo, toda animação vira corte seco. Não é opcional.
Interação Proposta
Como um botão se comporta
O mesmo comportamento vale em todo ambiente de marca: site, produto, apresentação e peça interativa. Passe o ponteiro sobre os botões do capítulo 24 para ver rodando.
| Estado | O que acontece | Duração | Curva |
|---|---|---|---|
| Repouso | Borda de 1 px na cor da linha, fundo de painel. Nenhuma sombra | — | — |
| Hover | Sobe 3 px, a borda assume o acento e um halo radial acende sob o ponteiro | 340 ms | padrao |
| Ponteiro em movimento | O halo acompanha a posição do cursor dentro da peça | contínuo | — |
| Ícone no hover | Cresce 7 % e gira −3°, como se ganhasse folga | 340 ms | padrao |
| Seta no hover | Desloca 3 px na diagonal e o disco inverte para cor cheia | 340 ms | padrao |
| Ativo | Afunda para 0,99 e volta a 1 px de altura. O clique tem peso | 160 ms | padrao |
| Foco por teclado | Mesmo tratamento do hover, mais o anel de foco de 2 px | 160 ms | padrao |
Princípio 4
O botão sobe, não pisca
Mudança de cor sozinha não comunica que é clicável. O deslocamento vertical comunica.
Princípio 5
A luz vem do ponteiro
O halo nasce onde o cursor está. É o que faz a peça parecer material, e não uma imagem.
Princípio 6
Sem toque, sem halo
Em tela sensível ao toque não existe hover. O estado ativo carrega sozinho o retorno.
O escalonamento entre elementos irmãos é de 80 ms. Acima de 120 ms a sequência começa a parecer lenta; abaixo de 50 ms, parece um bloco só.
24 — Arquivos
Onde tudo mora
Cada botão abre a pasta no Drive. Baixe sempre da origem — arquivo reencaminhado por e-mail ou printado de apresentação não serve.
.ai, .svg e .png
Ícones
Contato e rede social na construção em disco. Ver capítulo 16 antes de usar
Formas halftone
Malhas, arcos e campos prontos para máscara e composição
Banco de imagens
Fotografia licenciada. Direção de uso no capítulo 19
Papelaria
Cartão com faca, timbrado, envelope e assinatura de e-mail
Rede social
Doze peças em PNG e os editáveis em PSD
A pasta old — Não usar existe no Drive e o nome já diz o que fazer com ela.
Nenhum arquivo de lá entra em peça nova.
Antes de publicar
- O texto passa pelos seis critérios do capítulo 08?
- A marca está numa das quatro versões oficiais?
- A área de proteção está livre?
- Está acima da redução mínima?
- O texto sobre laranja é preto?
- O logotipo veio do vetor, e não de fonte redigitada?
- O halftone varia raio, não opacidade?
- A foto está dentro de uma máscara, e não num retângulo?
Aprovado
- Terceira coluna da matriz de tom — capítulo 07
- Área de proteção e redução — capítulo 11
- Lista de usos incorretos — capítulo 12
- Regra de texto sobre laranja — capítulo 13
- Escala tipográfica e de espaço — capítulos 14 e 18
- Técnicas de máscara de imagem — capítulo 17
- Biblioteca de componentes — capítulo 22
A produzir
- Símbolo simplificado para uso abaixo de 32 px
- CMYK do cinza de apoio
- Favicon e ícones de aplicativo em todos os tamanhos
- Versão da marca para bordado e serigrafia
- Conjunto de ícones temáticos na construção em disco
- Biblioteca no Figma espelhando os tokens
Brand Book & Design System · versão 3.3
Dúvidas de aplicação: Comunicação, Marketing e Design