Brandbook + Design System
Tudo o que faz uma peça parecer Audio Design: quem a loja é, como fala e fotografa, e as cores, tipos, componentes e modelos prontos pra produzir no padrão do template oficial.
Base: o template oficial da marca (arquivos de jan/26), as artes de abr a out/26, o site e o grupo MKT AUDIO DESIGN.

Parte I
Quem a Audio Design é antes de qualquer pixel. O que é fato vem marcado com a fonte; o que é proposta da Arte One está sinalizado para validar com a Vanessa.
01 · Essênciaplataforma de marca
“Soluções inteligentes para o seu carro” é a assinatura da faixa vermelha de todas as peças e o título do site. O resto organiza o que a loja já diz de si.
Fato · site audiodesigncuritiba.com.br e templates oficiaisSoluções inteligentesAssinatura da marca · faixa vermelha das artes e título do site
para o seu carro.
Promessa
Som, segurança, elétrica e mecânica com diagnóstico antes da troca. O site já fala em “tudo em um só lugar, com agilidade, transparência e comprometimento”.
Proposta · validar com a VanessaPara quem
Motorista de Curitiba que quer resolver som, multimídia, alarme ou manutenção sem rodar a cidade atrás de oficina. Do carro do dia a dia ao projeto de som.
Proposta · validar com a VanessaPilares de conteúdo
Um problema que o motorista sente e o que pode estar por trás. Ex.: bateria, alarme, vidro.
Som, multimídia, câmera de ré, LED, película. O antes e depois na cabine.
Alarme, rastreador, bloqueador, antifurto. Tranquilidade no dia a dia.
Promoção com produto e preço grandes, instalação inclusa.
Horário, feriado, rua, vagas, golpe. Rápido e direto.
02 · Personalidadecomo a marca se comporta
Quatro traços para decidir rápido se uma peça, uma foto ou uma legenda está no tom.
Nomeia a peça, explica a causa
Jargão de manual
Título curto, preço claro, WhatsApp
Texto longo na arte
Loja de família, atende pelo nome
Fria ou corporativa
Som bom, carro bonito, orgulho
Ostentação, “carro de rico”
03 · Voztexto na arte e na legenda
No Mês dos Pais a Vanessa pediu a descrição do produto maior e “mais visibilidade à promoção do que à data”. O pai dela pediu algo “mais povo”, um post de PROMOÇÃO com destaque. A versão aprovada usou foto inteira, preço grande e oferta em bloco vermelho.
Fato · grupo MKT AUDIO DESIGN, 03 a 05/08/2026Na arte do dia a dia
Título é o sinal que o motorista sente (“Bateria descarregando?”) e a resposta curta. Apoio em 2 ou 3 linhas, fechando com “Na Audio Design…”.
Na oferta
“Oferta especial”, nome do produto instalado, “a partir de R$” com o número em destaque e “instalação profissional”.
No contato
Nas vagas, a Vanessa trocou o e-mail pelo WhatsApp: é onde a loja fica mais focada (18/09). Telefone fixo entra na legenda.
Fato · grupo MKT, 18/09Dizemos
Evitamos
Anatomia da legenda
04 · Fotografiaestilo e direção
Quase todas as fotos das peças até aqui são imagens geradas, no estilo das artes oficiais: técnico de luva preta, oficina escura com luz vermelha, carro limpo. A única foto real da loja na pasta é a fachada que a Vanessa mandou em 24/07. Toda imagem ilustrativa nesta prancha está marcada.
Fato · pasta da cliente no Drive e grupo MKT, 24/07





Mood montado com as imagens da pasta da cliente. Todas são ilustrativas (geradas para as campanhas de jul–set/26), menos a marcada “Foto real”.
Quatro famílias de foto

Mão de luva preta trabalhando no carro. Mostra que é serviço feito, não peça de vitrine.

Equipamento grande, fundo escuro e luz vermelha. É a família da oferta.

Farol, roda, cabine. Fica por trás do véu vermelho na linha escura.

Fachada, equipe, carro do cliente pronto. Hoje só existe a fachada; é a família que mais falta.
Direção
Oficina escura com uma luz de destaque, de preferência vermelha. Na linha clara, estúdio limpo e claro.
Mão, ferramenta e peça no mesmo quadro. O círculo corta o resto, então o assunto fica no centro.
Técnico de uniforme escuro e luva preta, concentrado no serviço. Sem pose olhando pra câmera.
Carro limpo e bonito, mas que o cliente da loja reconhece. Misturar com carros do dia a dia, não só importado de luxo.
PropostaLogo de montadora fora de foco ou de lado. Marca de parceiro (Pioneer, JBL…) só em peça combinada.
PropostaA imagem entra limpa: sem texto, preço ou marca gerados pela IA. Todo texto é aplicado por cima, no template.
Tratamento na linha escura



Texto direto sobre a foto
Uma foto, três usos



Guia rápido para a loja fotografar

Fachada enviada pela Vanessa em 24/07, no pedido do comunicado da rua em obra. Foi usada no aviso de agosto.
Evitar
Imagem ilustrativa não é registro de serviço feito. Não legendar como “feito aqui”.
Letra, placa ou marca inventada na foto. Gerar sempre a imagem limpa.
Na linha escura o texto só entra na caixa preta.
Sem autorização, cortar ou borrar.
05 · Aplicaçõesa marca fora do post
Os pontos de contato que o cliente vê antes de chamar a loja.
Perfil do Instagram




Parte II
As peças da marca, com nome, medida e regra de uso, prontas para virar arte, template ou código. Medidas em pixels no canvas de 1080 de largura, lidas dos templates oficiais.
06 · Corescalas e papéis
Duas linhas visuais que se alternam no feed: clara (mármore, grafite, diagonal vermelha) e escura (foto sob véu vermelho, caixa preta). Quatro escalas de dez passos geradas em OKLab a partir das cores reais; o passo com contorno é a cor da marca.
#121212 · caixa preta e fundo do site| bg.canvas | #F3F3F3 |
| text.primary | #4D4D4D |
| text.muted | #5C5C5C |
| brand | #D00301 |
| bar | #D00301 |
| cta.bg | #D00301 |
| cta.text | #FFFFFF |
| bg.canvas | #2A0606 |
| overlay | #D00301 |
| surface.box | #121212 |
| text.primary | #FFFFFF |
| text.muted | #C5C5C5 |
| accent | #D00301 |
| cta.text | #FFFFFF |
Proporção numa peça clara: 58 mármore · 24 vermelho · 14 grafite · 4 carbono. Vermelho #D00301 e grafite #4D4D4D lidos dos templates nativos em PDF; mármore e vinho amostrados das artes de set/26; carbono amostrado do site.
07 · Tipografiauma família
Os templates oficiais usam Montserrat Regular, Bold e Black; o site também é em Montserrat. O letreiro “AUDIO DESIGN” da logo é desenho próprio: nunca redigitar, sempre usar o arquivo.
Fato · fontes embutidas nos PDFs dos templates e CSS do siteABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
Montserrat Black 900 · Bold 700
Título da linha escura em caixa alta; título da linha clara em Bold, frase normal; preço.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
Montserrat Regular 400
Apoio, faixa do topo, contato, site. O trecho de destaque no apoio vai em Bold.
Valores no canvas de 1080 px, lidos dos arquivos nativos (feed). Amostras ao lado em escala reduzida.
08 · Logosímbolo AD + letreiro prata
Símbolo AD vermelho com faixas de velocidade e letreiro “AUDIO DESIGN” em prata. Funciona no claro e no escuro sem trocar de versão. Sobre foto, vai numa etiqueta branca (como no Mês dos Pais aprovado).

Sobre branco

Sobre mármore · linha clara

Sobre carbono · linha escura

Etiqueta branca sobre foto · oferta

Área de proteção = altura do “DESIGN” (X) em volta de toda a logo.
Proposta
Feed · 231 pxno canvas de 1080 (template)
Avatar e figurinhasó o símbolo
Símbolo pratamarca d’água do site




862 × 250 · siteA logo da pasta da cliente e dos templates tem 300 × 86 px e perde nitidez em peça grande. O site publica a mesma logo em 862 × 250, com fundo transparente: é a que está nesta prancha e no pacote. O vetor original ainda não está na pasta.
09 · Grid e formatosonde cada bloco mora
Todo template oficial repete o mesmo esqueleto: logo à esquerda e faixa vermelha encostada na borda direita no topo; título com barra vermelha (clara) ou caixa preta (escura); contato embaixo. Margem lateral de 54 px.
No story, os templates oficiais põem o contato a partir de y 1695, dentro dos 250 px de baixo. Antes de publicar, conferir na prévia se a caixa de resposta não cobre o telefone. Proposta · subir o contato para acima de y 1670 nos próximos stories
10 · Componentesblocos que montam as peças
Cada bloco tem nome, tamanho e fundo certo. Montar uma arte é escolher blocos, não desenhar do zero.
SOLUÇÕES INTELIGENTES PARA O SEU CARROTrocar a bateria sem verificar o sistema de carga pode fazer o problema voltar.
Pastilhas, discos e fluido precisam ser avaliados em conjunto.



11 · Peçasmodelos montados com os componentes
Montados em HTML na medida real e reduzidos para caber na tela. Texto entre colchetes é para trocar; o resto segue o template oficial.


Feed · Sinal do carro · linha claraPergunta e resposta, dupla de círculos, diagonal vermelha. Base: posts de jul/26 (bateria, alarme, sensor).

Story · linha escuraFoto sob véu vermelho, caixa preta, contato no centro. Topo e base respeitam os 250 px livres.

Feed · OfertaFoto inteira, preço gigante, bloco vermelho. Base: Mês dos Pais, aprovado pela Vanessa em 05/08.

Story · A loja avisa · linha claraAviso direto com a fachada real. Base: alerta de 10/09 sobre mensagem falsa de mudança de endereço.



Carrossel · Sinal do carro · 3 slidesCapa clara com a pergunta, lista na caixa preta, fechamento vermelho com horário e WhatsApp. Base: post “Seu carro precisa pegar de primeira” (jul/26).
Peças reais de referência
Template oficial · abr/26Películas · linha clara
Template oficial · mai/26Multimídia · linha escura
Linha regular · jul/26Bateria · pergunta e resposta
Linha regular · jul/26Farol · caixa preta
Aprovada · 05/08Mês dos Pais · oferta
Aviso · ago/26Rua liberada · foto real
Revisada pelo Paulo · 17/09Sensor · destaque em negrito
Aprovada · 29/09Primavera · story claro
Aprovada · 29/09Semana do Trânsito · story escuro
Enviada · 18/09Vagas · contato por WhatsApp
Em aprovação interna · 09/10Dia das Crianças · story
Entregue · 17/09Figurinhas de WhatsApp12 · Legibilidademedida, não estimada
Contraste calculado pela fórmula WCAG 2.2 com os hex reais. A peça é vista num celular de cerca de 390 px de largura, então todo tamanho do canvas de 1080 cai a 36%.
| Amostra | Contraste | Nível | Uso |
|---|---|---|---|
| Glow 00 | 7.62:1 | AAA | Título e apoio na linha clara |
| Glow 00 | 6.03:1 | AA | Texto secundário na linha clara |
| Glow 00 | 5.68:1 | AA | Faixa do topo, rodapé e selo de preço |
| Glow 00 | 18.73:1 | AAA | Caixa preta da linha escura |
| Glow 00 | 18.63:1 | AAA | Contato sobre o véu vinho |
| Glow 00 | 5.12:1 | AA | Palavra em vermelho na linha clara |
| Glow 00 | 3.30:1 | AA só título | Palavra em vermelho no escuro (só título grande) |
| Glow 00 | 2.77:1 | Reprova | Cinza claro como texto (evitar) |
Tamanho mínimo
| Site no rodapé | 23 px → 8,3 no celular |
| Apoio da linha escura | 32 px → 11,5 |
| Telefone | 34 px → 12,2 |
| Título | 54 px → 19,4 |
Regras
13 · Tokenspara template e código
Use no motor de artes, no site ou no Figma. Nomes iguais aos desta prancha.
{
"color": {
"vermelho": {
"50": "#FFF1EB",
"100": "#FFD2C9",
"200": "#FFB4A8",
"300": "#F39486",
"400": "#E67464",
"500": "#DA4F40",
"600": "#D00301",
"700": "#9C0000",
"800": "#6B0000",
"900": "#3C0000"
},
"grafite": {
"50": "#FAFAFA",
"100": "#DFDFDF",
"200": "#C5C5C5",
"300": "#ACACAC",
"400": "#939393",
"500": "#7B7B7B",
"600": "#636363",
"700": "#4D4D4D",
"800": "#2E2C29",
"900": "#110F09"
},
"marmore": {
"50": "#FAFAFA",
"100": "#F3F3F3",
"200": "#D3D2D1",
"300": "#B3B3B1",
"400": "#959491",
"500": "#787673",
"600": "#5C5A56",
"700": "#413F3A",
"800": "#282621",
"900": "#110F09"
},
"vinho": {
"50": "#FFF7F6",
"100": "#E7D9D8",
"200": "#CDBCBA",
"300": "#B49F9D",
"400": "#9B8381",
"500": "#836966",
"600": "#6C4F4C",
"700": "#553633",
"800": "#3F1E1C",
"900": "#2A0606"
}
},
"semantic": {
"clara": {
"bg.canvas": "#F3F3F3",
"text.primary": "#4D4D4D",
"text.muted": "#5C5C5C",
"brand": "#D00301",
"bar": "#D00301",
"cta.bg": "#D00301",
"cta.text": "#FFFFFF"
},
"escura": {
"bg.canvas": "#2A0606",
"overlay": "#D00301",
"surface.box": "#121212",
"text.primary": "#FFFFFF",
"text.muted": "#C5C5C5",
"accent": "#D00301",
"cta.text": "#FFFFFF"
}
},
"type": {
"family.sans": "Montserrat",
"title.clara": "58/1.1 sans 700",
"title.escura": "54/1.02 sans 900 caps",
"body.clara": "37/1.2 sans 400",
"body.escura": "32/1.2 sans 400",
"tagline": "29/1 sans 400+700 caps",
"cta": "34/1.1 sans 400+700 caps",
"phone": "38/1 sans 700",
"url": "23/1 sans 400+700",
"price": "96/1 sans 900"
},
"layout": {
"canvas.width": 1080,
"margin.side": 54,
"logo.width": 231,
"logo.top.feed": 110,
"tagline.height": 54,
"bar.width": 24,
"box.dark.top.feed": 260,
"photo.ring": 10,
"radius.box": 28,
"radius.pill": 99,
"logo.min": 180
}
}
Baixar tokens.json
Parte III
O que a equipe precisa saber da cliente antes de produzir. Uso interno da Arte One.
14 · Na ponta da línguaatualizado em 09/10/2026
Loja de som, segurança, elétrica e mecânica com mais de 20 anos em Curitiba. Quem aprova é a Vanessa; o contato é sempre pelo WhatsApp.Foco atual · calendário de set–out e anúncios semanais no Meta
Quem decide
Vanessa Esteves aprova no grupo “MKT AUDIO DESIGN - ArteOne”. No Mês dos Pais, levou a arte pro pai antes de aprovar (04/08).
Como ela trabalha
Aprova rápido quando vê. Se a mensagem passar batido, ela mesma pediu um toque por ligação (18/09).
Horário da loja
Seg a sex, 9h às 18h · sáb, 8h30 às 12h · fixo (41) 3013-7921
15 · Pessoas e canais
Aprova arte e pede peça no grupo MKT.
Opina nas promoções (“algo mais povo”, 04/08).
Mãe da Vanessa. Recebe e paga o Pix semanal dos anúncios.
Posta os stories da loja todo dia (20/08).
Aprovação interna das artes e revisão de texto.
Campanhas, verba e acompanhamento da conta.
Cards rápidos de aviso (feriado, alerta de golpe).
(41) 9 9552-8484 · fixo (41) 3013-7921
@audiodesigncuritiba · 792 seguidores (11/09)
Links
Acessos e credenciais ficam só no dossiê interno do Drive: “DOSSIE - Audio Design.md”.
16 · Pendênciasdono e próxima ação
Paulo · aprovação interna no Trello desde 09/10. Depois segue para a Vanessa no grupo.
Vanessa · versão com WhatsApp enviada em 18/09. Confirmar se as vagas seguem abertas antes de publicar.
Vanessa · quantas das 6 conversas de setembro viraram serviço. É o número que decide se vale aumentar a verba.
Mara · Pix enviado em 09/10. Com o pagamento, o conjunto roda até 16/10; o próximo Pix sai na quinta, 15/10.
Junior + Paulo · o ciclo atual vai até 11/10. Montar as pautas de 12/10 em diante e passar pela aprovação interna.
Paulo · localizar o arquivo original da logo (.ai/.eps) para não depender de PNG.
17 · Histórico
Arquivos originais do template de feed e stories (pasta “Originais Paulo”); base das linhas clara e escura.
Posts mensais no template: películas, multimídia, LED, bateria, alarme, sensor.
Vanessa pede que o Pix dos anúncios também vá para a Mara, “que vai mais rápido”.
Rua da loja em obra: Vanessa manda a foto da fachada e o comunicado sai no mesmo dia.
Aniversário da Audio Design.
Campanha do Mês dos Pais aprovada, na versão mais promocional, com foto inteira.
Junior assume as campanhas de Meta Ads da loja.
Combinado: verba do Meta paga por semana, Pix direto para a Mara.
Aviso de feriado (loja fechada 7 e 8/09) aprovado.
Clientes recebem mensagem falsa de mudança de endereço; post de alerta sai no mesmo dia.
Calendário de 12/09 a 11/10 (12 feeds e 30 stories) no Trello.
26 figurinhas de WhatsApp entregues; cards ajustados conforme a revisão do Paulo.
Arte das vagas ajustada: contato pelo WhatsApp em vez de e-mail.
Anúncios no ar: 6 conversas no WhatsApp a R$ 17,60 cada.
Vanessa aprova os stories da primavera e da Semana do Trânsito.
Relatório de setembro enviado no grupo.
Story do Dia das Crianças em aprovação interna; Pix da semana enviado; brandbook e design system (v1.0).
Fontes conferidas em 09/10: grupo MKT AUDIO DESIGN (Evolution), Trello, ClickUp, templates nativos em PDF, site da loja, memória da frente Arte One e pasta da cliente no Drive.