Brandbook + Design System
Como a Compomoldes fala, que cara tem o produto na imagem, como usar a logo e as cores, e o que já existe de site, peças e vídeo.
Referência de marca. O foco aqui é voz, texto, site e regras de logo e cor. As peças de arte aparecem como registro do que já existe, não como modelo novo de produção.
Parte I
Quem a Compomoldes é antes de qualquer pixel. O que é fato vem com a fonte; o que é proposta da Arte One está sinalizado para validar com o Fernando.
01 · Essênciaplataforma de marca
Os valores vêm do próprio site da Compomoldes. A promessa organiza o que os posts aprovados e o site novo já vêm dizendo.
Excelência, ética e transparência.Valores declarados no site atual · página Quem somos (compomoldes.com.br)
Quem é
Começou em 2010 importando componentes para moldes e matrizes da Europa, Ásia e Estados Unidos. Hoje tem unidades em Curitiba, Joinville e São Paulo.
Fato · site atual, Quem somosPromessa
Mix técnico, dado conferido e consultoria pra validar medida, aplicação e equivalência.
Proposta · validar com o FernandoPara quem
Ferramentarias e indústrias de injeção plástica que precisam repor ou especificar um componente sem parar a produção.
Proposta · validar com o FernandoPilares de conteúdo
Um componente por post: nome, função e um dado técnico conferido.
A aplicação no molde: gaveta, extração, câmara quente, alinhamento.
Conjuntos montados pela Compomoldes, como o Hot Half e os controladores.
Unidades, estoque, fachada, 15 anos. Mostra que tem gente e peça de verdade.
Datas do setor e do cliente, como o Dia do Representante Comercial.
02 · Personalidadecomo a marca se comporta
Quatro traços para decidir rápido se um texto, uma tela do site ou uma legenda está no tom.
Nome certo da peça, norma, dureza, medida
Genérica, “solução completa” sem dizer o quê
Frase curta, verbo de ação, contato no fim
Rodeio, adjetivo empilhado
Produto real, dado que o Fernando confere
Prazo ou número que ninguém confirmou
“Consulte”, “fale com a equipe técnica”
Empurrar venda, urgência falsa
03 · Voztexto na arte, na legenda e no site
Cada texto nomeia a peça, explica pra que ela serve e chama para a consultoria. Quem confere o termo técnico é o Fernando: em 15/09 ele corrigiu a legenda da bucha extratora porque “guiamento vale para bucha guia”.
Fato · grupo MKT Compomoldes, 15/09/2026Na arte
O título é a peça; a linha de baixo diz o que ela entrega. O site fica no rodapé.
HOT HALF 16 BICOS · Placas e câmara quente em um conjunto completo
Na legenda
Três parágrafos curtos, o bloco de contato e cinco hashtags. Sem gíria e sem exclamação.
Consulte medidas e disponibilidade.
No WhatsApp
No atendimento a marca relaxa. As figurinhas de 17/09 falam a língua do dia a dia.
Verificando disponibilidade · Orçamento enviado · Pra ontem
Dizemos
Evitamos
Anatomia da legenda
Termos que já foram conferidos
Metade do molde completa, com placas e câmara quente. O cliente produz a outra metade. Fonte: áudio do Paulo, 14/09.
A extratora extrai a peça; quem guia é a bucha guia. Fonte: Fernando, 15/09.
Antes de publicar, confirma com o Fernando no grupo. Uma pergunta custa menos que uma legenda refeita.
Proposta04 · Imagemproduto e foto
Duas lições já registradas: em 17/09 o Fernando achou que uma peça “parece que tá velha”; em 06/10 uma versão com fundo gerado por IA mudou o formato do produto e foi trocada pela foto real recortada. A regra que fica: fundo pode ser gerado, produto não.
Fato · grupo MKT 17/09 e diário de bordo 06/10/2026
Fotos reais do Hot Half enviadas no grupo MKT (09/09). Imagens técnicas do material do Fernando (22/09). Fachada tirada do Google Maps para o site, até existir filmagem própria.
Três famílias de imagem
A peça fotografada pela Compomoldes. É a prova de que existe e a base de tudo o que vem depois.
Render e desenho do catálogo, fundo branco. Mora no site, na ficha do produto e no download.
A foto real recortada sobre fundo grafite. É o padrão das peças de Instagram citado pelo Paulo em 14/09.
Direção
Contagem, furos, bicos e parafusos iguais à peça real. Se for o Hot Half de 16 bicos, os 16 têm que dar pra contar.
Peça limpa, sem ferrugem e sem graxa. O metal brilha como sai da usinagem.
Lateral e suave, com reflexo de metal sem estourar. Nada de flash direto.
Três quartos mostra volume; de frente mostra contagem e furação.
Liso e neutro na foto real; grafite com bloco laranja no estúdio das peças.
Quando der, uma mão ou uma régua na cena para dar o tamanho da peça.
Tratamento de cor
Uma foto, três recortes
Guia rápido para fotografar uma peça
As duas fotos reais que viraram o carrossel frente e verso do Hot Half em 18/09, a pedido do Fernando (“o ideal é colocar as 2 fotos”, 17/09).
Evitar
IA que muda furo, bico ou parafuso. Foi o caso de 06/10.
Ferrugem, risco e mancha. Pedido do Fernando em 17/09.
Em 06/10 ele pediu “foto com nossos produtos” no fundo.
O molde 3D da logo, solto na cena, parece logo flutuando.
05 · Aplicaçõesa marca fora do post
Onde a identidade aparece antes de alguém pedir um orçamento.
Perfil do Instagram
Personagens e vídeos da pasta
Aprovado · 11/06Molas de compressão animadas. O Fernando aprovou o vídeo das molas com “ficou ótimo”.
Arquivo · mar/26Molde com rosto, vídeo animado em duas versões (V1 e V2).
Arquivo · jul/26Vídeo 02: controlador de temperatura com olhos, em sete cenas.Imagens ilustrativas geradas por IA. O status do vídeo das molas vem do grupo MKT (11/06); os outros dois estão na pasta da cliente, sem registro de aprovação nas fontes consultadas.
Parte II
Cor, tipo, logo e blocos do site e do texto, com nome e medida, prontos pra virar código ou template. Nas peças, medidas em pixels no canvas de 1080 de largura.
06 · Corescalas e papéis
Laranja e grafite foram amostrados da logo oficial e batem com o site novo. Aço é o fundo e a linha do site. Brasa é o laranja mais vermelho que as peças de Instagram usam. Cada cor vira uma escala de dez passos em OKLab; o passo com contorno é a cor de origem.
| bg.page | #F9FAFB |
| bg.surface | #FFFFFF |
| line | #E2E8EC |
| text.primary | #0F0F15 |
| text.muted | #687584 |
| brand | #F68B34 |
| header.bg | #4B4B4D |
| cta.bg | #F68B34 |
| cta.text | #0F0F15 |
| bg.canvas | #2B2B30 |
| text.primary | #FFFFFF |
| accent | #E8590C |
| label | #F68B34 |
| pill.bg | #FFFFFF |
| pill.text | #E8590C |
Proporção aproximada numa tela do site novo: 58 aço · 14 branco · 18 grafite · 10 laranja.
#F68B34 é o da logo e do site. As peças de Instagram de set–out/26 usam um laranja mais vermelho, perto de #E8590C. Funciona, mas vale decidir se fica assim ou se as peças passam a usar o da logo.
Para decidir · Arte One07 · Tipografiaduas famílias
O site novo é escrito em Segoe UI. As peças recentes usam uma sans geométrica pesada; Montserrat é a aproximação gratuita mais próxima dela e do Brandon Text, a fonte paga do site atual. O nome “COMPOMOLDES” da logo é desenho: use sempre o arquivo, nunca redigite.
Aproximação · os arquivos não informam a família exata das peçasABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
Montserrat · 600, 700, 800, itálico
Título e rótulo das peças.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
Segoe UI · 400, 600, 700
Todo o site. Nesta prancha, quem não tem Windows vê Open Sans no lugar.
Tamanhos do site lidos no código (src/styles.css). Os das peças foram medidos nas artes de set–out/26, no canvas de 1080 px; amostras ao lado em escala reduzida.
08 · Logosímbolo de molde + nome com sombra
A pasta Logo do Drive tem a horizontal e a vertical, cada uma em versão para fundo claro (letras grafite) e para fundo escuro (letras brancas). A sombra laranja embaixo das letras faz parte da logo. O site usa a horizontal branca com ®.
Fato · pasta Logo no Drive da clienteHorizontal sobre branco
Horizontal sobre aço · site e documentos
Horizontal branca sobre grafite · topo do site
Vertical sobre branco · avatar e fachada
Vertical branca sobre grafite · peças
Sobre foto: branca, com fundo escuro atrás
Área de proteção = altura do “O” de COMPOMOLDES em volta de toda a logo.
PropostaPeça · mín. 220 pxno canvas de 1080Avatarvertical, centradaNa sede, o letreiro é vermelho com letras e símbolo azuis. No digital vale a logo oficial em grafite e laranja; o site novo foi feito assim de propósito, sem o azul do site antigo.
Fato · fachada (Google Maps) e ClickUp do site, jul/2609 · Formatoso que está em uso
As peças da pasta usam feed 4:5, story 9:16 e quadrado 1:1. No story, 250 px no topo e na base ficam livres para a interface do Instagram (recomendação da Meta: 14%). O site trabalha com largura máxima de 1460 px e margem de 28.
10 · Componentesblocos de texto e de site
O que aparece igual em toda legenda e em toda tela do site. Escrever e montar é escolher bloco, não começar do zero.
Contato, hashtags e títulos de peça copiados de posts reais de set/26. Blocos do site lidos no código do site novo. “Observado” = já aparece nas peças, não é regra nova.
11 · Peçaso que já existe
Registro do que já foi feito, com o status conferido nas fontes. Serve de referência de tom e de produto, não de modelo pra copiar.
Feed
Aprovada · 15/09Hot Half 16 bicos · “Perfeito”Concluída · 18/09Hot Half frente · carrosselConcluída · 18/09Hot Half verso · carrossel
Aprovação interna · 08/10Trava Z5130 · acabamento novoEntregues · 17/0912 figurinhas de atendimentoStory
Concluída · 18/09Hot Half frente
Aguarda a data · 06/1015 anos · produto realAprovação interna · 09/10Dia das CriançasVídeo 02 · controlador de temperatura
Storyboard em sete cenas, do problema na indústria ao fechamento com o produto e o convite. Arquivos de jul/26 na pasta “Video 02”.
12 · 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 | 18.28:1 | AAA | Texto do site sobre o fundo claro |
| Glow 00 | 8.70:1 | AAA | Logo e títulos sobre branco |
| Glow 00 | 4.50:1 | AA só título | Texto de apoio do site |
| Glow 00 | 14.08:1 | AAA | Texto branco no fundo grafite |
| Glow 00 | 5.81:1 | AA | Rótulo laranja no fundo grafite |
| Glow 00 | 7.88:1 | AAA | Texto escuro no botão laranja |
| Glow 00 | 3.58:1 | AA só título | Branco no bloco brasa (só título) |
| Glow 00 | 2.42:1 | Reprova | Branco no laranja da logo (evitar) |
| Glow 00 | 2.42:1 | Reprova | Laranja como texto no branco (evitar) |
Tamanho mínimo
| Texto do site | 16 px |
| Selo do site na peça | 22 px → 8 no celular |
| Linha de apoio da peça | 26 px → 9,4 |
| Título da peça | 64 px → 23 |
Regras
13 · Tokenspara template e código
Use no site, no gerador de posts ou no Figma. Nomes iguais aos desta prancha.
{
"color": {
"laranja": {
"50": "#FFF6E8",
"100": "#FFDDC3",
"200": "#FEC39C",
"300": "#F8A972",
"400": "#F68B34",
"500": "#CB6A08",
"600": "#A24A00",
"700": "#7A2B00",
"800": "#540900",
"900": "#300000"
},
"brasa": {
"50": "#FFF3E8",
"100": "#FFD7C5",
"200": "#FFBBA1",
"300": "#F69E7C",
"400": "#EE7F53",
"500": "#E8590C",
"600": "#B93800",
"700": "#8C1200",
"800": "#600000",
"900": "#370000"
},
"grafite": {
"50": "#FAFAFA",
"100": "#DFDFE0",
"200": "#C4C4C5",
"300": "#ABABAC",
"400": "#919193",
"500": "#79797B",
"600": "#626263",
"700": "#4B4B4D",
"800": "#2B2B30",
"900": "#0F0F15"
},
"aco": {
"50": "#F9FAFB",
"100": "#E2E8EC",
"200": "#C3C9CE",
"300": "#A4ABB0",
"400": "#878E94",
"500": "#6A7378",
"600": "#4F585D",
"700": "#363E44",
"800": "#1E262C",
"900": "#081116"
}
},
"semantic": {
"site": {
"bg.page": "#F9FAFB",
"bg.surface": "#FFFFFF",
"line": "#E2E8EC",
"text.primary": "#0F0F15",
"text.muted": "#687584",
"brand": "#F68B34",
"header.bg": "#4B4B4D",
"cta.bg": "#F68B34",
"cta.text": "#0F0F15"
},
"pecas": {
"bg.canvas": "#2B2B30",
"text.primary": "#FFFFFF",
"accent": "#E8590C",
"label": "#F68B34",
"pill.bg": "#FFFFFF",
"pill.text": "#E8590C"
}
},
"type": {
"family.display": "Montserrat",
"family.sans": "Segoe UI",
"site.h1": "clamp(32px,3.4vw,58px)/1.02 sans 650",
"site.h2": "clamp(26px,2.5vw,43px)/1.03 sans 620",
"site.eyebrow": "12.5/1 sans 750 caps",
"site.body": "16/1.6 sans 400",
"site.cta": "16/1 sans 650",
"peca.title": "64/1.0 display 800 italic caps",
"peca.label": "26/1.2 display 600 +0.3em caps",
"peca.legal": "22/1.3 sans 400"
},
"layout": {
"site.max": 1460,
"site.gutter": 28,
"site.radius": 0,
"canvas.width": 1080,
"story.safe": 250,
"logo.min.peca": 220,
"logo.min.site": 180
}
}
Baixar tokens.json
Parte III
O que a equipe precisa saber da cliente antes de escrever ou mexer no site. Uso interno da Arte One.
14 · Na ponta da línguaatualizado em 09/10/2026
Componentes para moldes de injeção desde 2010. A Arte One cuida dos posts, do Google Ads e do site novo; o Fernando aprova e manda o material técnico.Foco agora · site novo em revisão e qualidade dos contatos do Google Ads
Quem decide
Fernando Machado. Aprova no grupo “MKT COMPOMOLDES | ArteOne” e corrige termo técnico.
Como ele mede
Por pedido de orçamento. Em 07/10 contou que os contatos de setembro eram de quem queria vender pra Compomoldes. Relatório separa contato de orçamento.
Onde fica
Rua Napoleão Laureano, 300 · Boqueirão · Curitiba/PR. Unidades em Joinville e São Paulo. Seg a sex, 9h às 18h.
15 · Pessoas e canais
Compomoldes. Aprova posts, manda desenhos, catálogo e 3D.
Conduz as reuniões e passa os pedidos de peça.
Revisa arte, fala com o Fernando e libera a recarga do Google Ads.
41 3085-4649 (telefone e WhatsApp) · vendas@compomoldes.com.br
Instagram @compomoldes · LinkedIn “compomoldes-componentes-para-moldes”
Google Ads, campanha de Pesquisa gerida pela Arte One. Recarga nos dias 10 e 25.
Links
Acessos e credenciais ficam só no dossiê interno do Drive: “DOSSIE - Compomoldes.md”.
16 · Pendênciasdono e próxima ação
Paulo e Vilson · material do Fernando já está no endereço de teste. Depois do ok, mostrar ao Fernando e combinar a troca de domínio.
Junior · pedir ao Fernando dois exemplos de contato, sem dados pessoais, pra cruzar com as buscas e ajustar a campanha.
Vilson com o Fernando · em 06/10 ele citou 01/11 e depois a data do cadastro. Confirmar antes de publicar o story.
Vilson (arte) e Junior (texto) · pedido de 08/10 com a ideia “seu projeto pronto em apenas 3 dias”. Confirmar o prazo com o Fernando antes de publicar.
Vilson · dias 10 e 25. A próxima é 10/10; o Pix é gerado pela Arte One.
Paulo e Vilson · arte em avaliação interna antes de seguir ao cliente.
17 · Histórico
A Compomoldes começa importando componentes para moldes e matrizes.
Vídeo das molas de compressão ajustado e aprovado pelo Fernando.
Reunião: Fernando aprova o layout do site novo; a troca espera desenhos e tabelas de medidas.
Reunião: modelos 3D por produto e download no site.
Google Ads: 47 palavras negativas e a ampla genérica pausada.
Hot Half 16 bicos aprovado (“Perfeito”); correção da bucha extratora.
Medição de contato do Google Ads instalada no site atual.
12 figurinhas de WhatsApp entregues no grupo.
Hot Half vira carrossel frente e verso, a pedido do Fernando.
Fernando manda desenhos técnicos, catálogo e modelos 3D.
Site novo com 12 produtos e página de downloads; enviado para revisão interna.
Story dos 15 anos: Fernando pede foto dos produtos no fundo; nova versão com produto real.
Relatório de setembro: 222 visitas e 6 contatos. Fernando conta que eram de quem queria vender pra Compomoldes.
Pedido do encarte dos bicos unitários; Trava Z5130 com acabamento novo.
Story do Dia das Crianças; brandbook e design system v1.0.
Fontes conferidas em 09/10: grupo MKT Compomoldes (Evolution), ClickUp, diário de bordo, memória da frente Arte One, reuniões gravadas (Fathom), site atual, site novo e pasta da cliente no Drive.