Brandbook + Design System
O que faz uma peça parecer Cesari: quem a marca é, como fala, como fotografa o carro, e as cores, fontes, componentes e modelos prontos pra produzir sem errar.
Referência de marca. Hoje existem a logo vetorial, o Instagram e o site em preview. Os modelos de post desta prancha são proposta, para usar quando a produção de conteúdo entrar no escopo.
Parte I
Quem a Cesari é antes de qualquer pixel. O que é fato vem marcado com a fonte; o que é proposta da Arte One está sinalizado para validar com o Paulo.
01 · Essênciaplataforma de marca
A frase e o público vêm do próprio Instagram. O resto organiza o que o feed e o site já mostram.
Dirija seus sonhos.Assinatura dos posts · Instagram @cesaricarconsulting, lido em 07/09/2026
Promessa
Uma pessoa de confiança do lado, da busca à chave na mão, sem pátio cheio e sem pressão.
Proposta · validar com o PauloPara quem
Para quem “não tem tempo ou conhecimento suficientes para lidar com o seu carro”.
Fato · bio do Instagram, 07/09/2026Pilares de conteúdo
Modelo, ano e ficha curta. É o que o feed já faz hoje.
Revisão, histórico, laudo. O que torna o carro confiável.
Chave na mão do cliente, com autorização dele.
Como a Cesari busca, avalia e negocia por quem não tem tempo.
Documento, manutenção, troca. Conteúdo útil, sem vender.
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.
Poucos carros, atendimento pessoal
Esnobe ou distante
Ano, versão, km, o que foi revisado
“Carrão top” sem dado
Preto, prata, um toque de ouro
Brilho, neon, ostentação
Foto real, procedência, contato direto
Urgência falsa, letra miúda
03 · Voztexto na arte e na legenda
A ficha faz a venda. O tom é de consultor, não de feirão: dado certo, frase curta, convite pro WhatsApp.
Na arte
Marca em ouro, modelo grande, no máximo três dados (câmbio, motor, km). Nada de parágrafo na peça.
Na legenda
Abre com o modelo, lista o que importa, fecha com uma frase humana e o convite. Valor sempre “sob consulta” até o Paulo decidir outra coisa.
No WhatsApp
Responde pelo nome, confirma o carro de interesse e manda fotos extras. Condição e valor por escrito.
Dizemos
Evitamos
Anatomia da legenda
04 · Fotografiaestilo e direção
O feed tem 12 carros em fotos postadas pela própria Cesari: de dia, em pátio ou condomínio, com a placa coberta ou apagada. É a prova de que o estoque existe. O site usa essas fotos na vitrine e imagens geradas por IA só na capa e no “Sobre”.
Fato · Instagram e site em preview, 07/09/2026
Mood montado só com fotos reais dos posts do Instagram @cesaricarconsulting (os mesmos 12 carros que estão no site).
Três famílias de foto
O carro à venda, foto real dos posts. É a família que mais vende e a única que prova o estoque. Carro inteiro, fundo limpo.
Imagem ilustrativaCarro no escuro com luz de recorte. É a capa do site. Como é gerada por IA, só entra em peça institucional e sempre com o aviso.
Imagem ilustrativaA chave passando de mão. Hoje é imagem gerada; a meta é trocar por foto real de entrega, com autorização do cliente.
Direção
Dia nublado, sombra aberta ou fim de tarde. Sol forte de meio-dia estoura a lataria e escurece o interior.
Três quartos de frente, câmera na altura do farol, carro inteiro no quadro com folga nas pontas.
Parede lisa, pátio vazio ou garagem limpa. Sem outro carro, gente ou lixo atrás.
Coberta ou apagada, como já é feito nos posts.
Lavado, pneu escurecido, rodas limpas, interior sem objeto solto.
Frente 3/4, traseira 3/4, lateral, painel, bancos, porta-malas, roda, motor e hodômetro.
Tratamento de cor
Uma foto, três recortes
Guia rápido para fotografar o carro
CARRO INTEIRO3/4 DE FRENTECapa do Equinox no site: carro inteiro, três quartos de frente e fundo sem distração. É a referência para as próximas fotos.
Evitar
Confunde qual carro está à venda.
Expõe o dono atual. Cobrir sempre.
Muda a cor da lataria e tira a confiança.
Toda imagem gerada leva “Imagem ilustrativa”. Carro à venda nunca é gerado.
05 · Aplicaçõesa marca fora do post
Os pontos de contato que o cliente vê antes de chamar. O site em preview é a aplicação mais completa da marca até agora.
Perfil do Instagram
Bio atual (07/09): “atender aos anseios de quem não tem tempo ou conhecimento suficientes para lidar com o seu carro”.
A primeira mensagem já vem escrita pelo botão do site. A resposta ao lado é sugestão de abertura.
Proposta de respostaParte 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.
06 · Corescalas e papéis
Quatro escalas de dez passos geradas em OKLab a partir dos degradês da logo vetorial e das cores do site. O passo com contorno é a cor da marca; os outros servem para fundo, borda e sombra sem inventar cor nova.
Os dois degradês são os da logo vetorial (arquivo SVG da pasta da Cesari). Em peça, o degradê ouro aparece só no botão e em uma palavra de destaque.
| bg.canvas | #000000 |
| bg.section | #0D0D0D |
| text.title | #FFFFFF |
| text.body | #E9E7E2 |
| text.muted | #9A9891 |
| accent | #B48546 |
| cta.from | #F2D9B1 |
| cta.to | #B48546 |
| cta.text | #1A1305 |
| line | #262624 |
| surface.card | #1A1A19 |
| border | #232322 |
| label.brand | #B48546 |
| text.model | #FFFFFF |
| text.meta | #9A9891 |
| link | #F2D9B1 |
| divider | #2B2B29 |
Proporção numa peça: 74 preto · 16 prata (texto e logo) · 7 ouro · 3 champanhe. Leitura do site em preview; serve de régua, não de lei.
07 · Tipografiaduas famílias
Michroma tem o mesmo desenho largo e quadrado do CESARI da logo e já é a fonte de títulos do site. Manrope cuida de tudo que precisa ser lido rápido. O wordmark da logo é desenhado; Michroma é a aproximação mais próxima no Google Fonts.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
Michroma · 400
Títulos, modelo do carro na arte, rótulo espaçado. Um peso só: o tamanho faz a hierarquia.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
Manrope · 300, 400, 500
Texto corrido, ficha técnica, botão, aviso.
Valores no canvas de 1080 px; amostras em escala reduzida. Michroma não tem itálico nem negrito: não simular.
08 · Logosímbolo C + CESARI
Os dois arquivos vetoriais da pasta são para fundo escuro: um transparente e um com fundo #111. Prata e ouro em degradê imitam metal, e somem no branco. Não existe hoje uma versão para fundo claro.
Fato · Logo cesari vetor (SVG, AI, PDF), Drive, 11/05/2026Sobre preto · padrão
Sobre grafite · card e rodapé
Sobre foto escura, com véu preto
Área de proteção = altura das letras de CESARI (X) em volta de toda a logo.
Feed · mín. 180 pxno canvas de 1080Avatar e faviconsó o símbolo
Print salvo na pasta da Cesari em 11/05/2026: CESARI em letra metálica escovada sobre fundo escuro. A logo vetorial segue esse acabamento. Para papelaria ou documento em fundo branco, precisa de uma versão monocromática aprovada pelo Paulo (ver Pendências).
09 · Grid e formatosmargens e zona segura
Margem lateral de 80 px e grid de 6 colunas em todos os formatos. No story, 250 px no topo e na base ficam livres para a interface do Instagram (recomendação da Meta: 14%).
10 · Componentesblocos que montam as peças
Cada bloco já existe no site em preview. Montar uma arte é escolher blocos, não desenhar do zero.
Você conta o que precisa. Uma mensagem já resolve.
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 a regra. Dados dos carros tirados dos posts.
Proposta · modelos novos, montados a partir do feed e do site
Feed · Carro da vezFoto real em cima, ficha embaixo, um botão. Base: post do Hummer e card do site.
Story · Chegou na seleçãoFoto no meio, livre em cima e embaixo. Ideal com a foto feita em pé.
Feed · InstitucionalAssinatura da marca com o carro de estúdio do site. Imagem gerada: leva o aviso.
Story · EntregaA foto certa aqui é a entrega real. Até ter, usa a ilustrativa com aviso.
Carrossel · Ficha do carro · 3 slidesCapa com a foto real, ficha em grade, fechamento com convite. Dados do post do Equinox (ano, km, 262 cv, pneus novos).
Peças reais de referência · site em preview
Preview · 07/09Capa do site
Preview · 07/09Página por carro (12 carros)
Preview · 07/09Capa no celularLink enviado ao Paulo em 16/09. Ajustes dele chegam na próxima rodada.
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 |
|---|---|---|---|
| Cesari 01 | 19.44:1 | AAA | Título sobre preto |
| Cesari 01 | 15.73:1 | AAA | Texto corrido sobre preto |
| Cesari 01 | 6.73:1 | AA | Texto de apoio sobre preto |
| Cesari 01 | 5.91:1 | AA | Rótulo e marca do carro em ouro |
| Cesari 01 | 14.19:1 | AAA | Link e destaque em champanhe |
| Cesari 01 | 13.46:1 | AAA | Texto do botão (início do degradê) |
| Cesari 01 | 5.60:1 | AA | Texto do botão (fim do degradê) |
| Cesari 01 | 4.46:1 | AA só título | Prata como texto (só título grande) |
| Cesari 01 | 3.29:1 | AA só título | Ouro sobre branco (evitar) |
Tamanho mínimo
| Aviso legal | 22 px → 7,9 no celular |
| Ficha (ano, km, câmbio) | 32 px → 11,5 |
| Rótulo em Michroma | 24 px → 8,6 |
| Modelo do carro | 60 px → 21,6 |
Regras
13 · Tokenspara template e código
Use no gerador de posts, no site ou no Figma. Nomes iguais aos desta prancha.
{
"color": {
"preto": {
"50": "#FAFAFA",
"100": "#DCDCDC",
"200": "#BEBEBE",
"300": "#A1A1A1",
"400": "#858585",
"500": "#6B6B6B",
"600": "#515151",
"700": "#383838",
"800": "#222222",
"900": "#0D0D0D"
},
"prata": {
"50": "#FAFAFA",
"100": "#DFDFDE",
"200": "#C4C4C3",
"300": "#ABABA9",
"400": "#919190",
"500": "#797977",
"600": "#5C5C58",
"700": "#41413C",
"800": "#272721",
"900": "#101009"
},
"ouro": {
"50": "#FFF9ED",
"100": "#F1E1CE",
"200": "#E1CAAE",
"300": "#D1B38F",
"400": "#C19C6E",
"500": "#B48546",
"600": "#8C6226",
"700": "#674100",
"800": "#432200",
"900": "#220600"
},
"champanhe": {
"50": "#FEF9F2",
"100": "#F2D9B1",
"200": "#D4BC95",
"300": "#B69F7B",
"400": "#9A8461",
"500": "#7E6948",
"600": "#635030",
"700": "#4A3818",
"800": "#312102",
"900": "#1B0C00"
}
},
"semantic": {
"escuro": {
"bg.canvas": "#000000",
"bg.section": "#0D0D0D",
"text.title": "#FFFFFF",
"text.body": "#E9E7E2",
"text.muted": "#9A9891",
"accent": "#B48546",
"cta.from": "#F2D9B1",
"cta.to": "#B48546",
"cta.text": "#1A1305",
"line": "#262624"
},
"vitrine": {
"surface.card": "#1A1A19",
"border": "#232322",
"label.brand": "#B48546",
"text.model": "#FFFFFF",
"text.meta": "#9A9891",
"link": "#F2D9B1",
"divider": "#2B2B29"
}
},
"type": {
"family.display": "Michroma",
"family.sans": "Manrope",
"display": "84/1.08 display 400 +0.02em",
"title": "60/1.2 display 400",
"kicker": "24/1.2 display 400 +0.22em",
"model": "56/1.15 sans 500",
"spec": "32/1.4 sans 400",
"info": "34/1.55 sans 300",
"cta": "32/1 sans 500",
"legal": "22/1.3 sans 400"
},
"layout": {
"canvas.width": 1080,
"margin.side": 80,
"margin.feed.vertical": 96,
"story.safe": 250,
"columns": 6,
"radius.card": 0,
"radius.button": 2,
"radius.chip": 999,
"logo.min": 180,
"line.accent": "36x1 ouro"
}
}
Baixar tokens.json
Parte III
O que a equipe precisa saber da Cesari antes de produzir. Uso interno da Arte One.
14 · Na ponta da línguaatualizado em 09/10/2026
Consultoria de carros do Paulo Cesari. Site premium em preview, esperando a lista de ajustes dele.Foco atual · site · cesari-site.vercel.app
Quem decide
Paulo Cesari, dono da Cesari e sócio da Arte One. A conversa é no WhatsApp direto com ele; não há grupo da Cesari.
O que vende
Carros selecionados, com valor sob consulta. O feed tem 12 carros, do Hummer H2 ao Yaris, todos com foto real nos posts.
Onde atende
A confirmar com o Paulo. O WhatsApp é DDD 51; o site não cita cidade por enquanto.
15 · Pessoas e canais
Dono e decisor. Aprova site e conteúdo.
Site da Cesari: preview, páginas por carro, ajustes.
(51) 9 8269-4100 · bio do Instagram e botão do site
@cesaricarconsulting · 665 seguidores em 07/09
cesaricarconsulting.com.br · não responde (09/10)
WhatsApp direto Paulo ↔ Junior
Links
Arquivos de logo: pasta “Cesari” no Drive da Volna (SVG, AI, PDF). Acessos e detalhes técnicos ficam só no dossiê interno do Drive: “DOSSIE - Cesari Car Consulting.md”.
16 · Pendênciasdono e próxima ação
Paulo · combinou de mandar as alterações (18/09). Assim que chegarem, o Junior aplica junto com o menu do celular.
Paulo · serviços e as quatro etapas, frase do “Sobre”, cidade de atendimento, carros ainda à venda, e-mail, CNPJ e horário.
Paulo · se tiver foto de entrega ou de carro em estúdio, entra no lugar da ilustrativa.
Paulo · confirmar se cesaricarconsulting.com.br é dele e onde está registrado, para o site sair do preview.
Paulo · aprovar uma versão monocromática se for usar em papelaria ou documento branco.
Paulo + Junior · combinar pela Arte One o que entra: site, estoque, posts.
17 · Histórico
Logo vetorial (SVG, AI, PDF) e print do letreiro metálico salvos na pasta da Cesari.
Site premium montado e publicado em preview: 12 carros do Instagram, página por carro, botão de WhatsApp.
Paulo pergunta como ficou o site.
Link do preview enviado ao Paulo, já com as páginas novas.
Paulo avisa que vai passar as alterações do site.
Brandbook, design system e dossiê (v1.0).
Fontes conferidas em 09/10: WhatsApp direto com o Paulo (Evolution), ClickUp, repositório e preview do site, pasta da Cesari no Drive e memória da frente Arte One.