sistema-de-marca

Sistema de Marca

Um referencial visual e editorial completo, pronto para uso: cores, tipografia, gradiente, componentes, regras de logotipo, tom de voz externo e estrutura de entregáveis. Aplica-se a qualquer saída destinada a um cliente, prospecto ou audiência externa.

Estes valores são valores padrão. Quando um projeto possui sua própria identidade visual, lê-la primeiro e substituir os tokens (paleta, fontes, logotipo): as regras de composição, o tom e a estrutura dos entregáveis permanecem válidos.

Espírito geral: economia de meios, espaço branco generoso, tipografia de alta legibilidade, estética suíça e Bauhaus.

Arquivos de referência:

• references/tokens.css e references/tokens.json: os tokens abaixo, prontos para importação.
• references/charte.png (e .svg): a paleta, a tipografia e os componentes em uma prancha.

---

1. Paleta

Função	Hex	Notas
Cor do logotipo	#295FEC	Apenas logotipo
Primária (CTA, links, destaques)	#3D65E8	Interface, textos de destaque, botões
Fundo global claro	#EBEFF7	Fundo de slides de conteúdo, faixas
Fundo off-white (base do gradiente)	#F8F9FB	Base dos slides e páginas com gradiente
Superfície, cartão	#FFFFFF	Cartões, blocos, boxes
Bloco superfície leve	#F0F2F7	Cartões em grades
Texto principal	#111827	Corpo, títulos escuros
Texto discreto	#6B7280	Rótulos, legendas, metadados
Verde de status	#22C55E	Indicadores positivos

Apenas um nível de cor de destaque por suporte: a cor primária.

2. Gradiente de Fundo

Um gradiente radial suave, aplicado em superfícies claras e slides. Permanece sutil: invisível à primeira vista.

background: radial-gradient(
  ellipse at 85% 10%,
  rgba(180, 215, 245, 0.55) 0%,
  rgba(200, 230, 252, 0.25) 35%,
  transparent 65%
), #F8F9FB;

/* Variante em dois cantos opostos */
background:
  radial-gradient(ellipse at 90% 5%, rgba(165, 210, 245, 0.45) 0%, transparent 50%),
  radial-gradient(ellipse at 5% 95%, rgba(165, 210, 245, 0.25) 0%, transparent 45%),
  #F8F9FB;

Em PPTX: fundo de slide #F8F9FB, preenchimento gradiente radial no canto superior direito, cor inicial #B4D7F5 com opacidade de 55%, para transparente.

3. Componentes

Botões

• Ação primária: formato de pílula (raio 999 px), fundo primário, texto branco, ícone de seta à direita.
• Ação secundária: pílula, fundo branco, borda leve, texto escuro, ícone de seta à direita.

Cartões

• Fundo branco ou superfície leve, raio 16 px, sombra suave, sem borda marcada.
• Metadados: o ano em texto discreto, depois um separador de ponto (exemplo: "2024 · Nome do Projeto").
• Título em semi-negrito, corpo em regular, link na parte inferior em texto discreto.

4. Tipografia

Uso	Fonte	Peso
Títulos principais	Inter	Black 900 ou ExtraBold 800
Subtítulos, rótulos	Inter	SemiBold 600
Corpo de texto	Inter	Regular 400
Metadados, legendas	Inter	Regular 400, texto discreto

Fonte de fallback prioritária: Public Sans. Fallbacks do sistema: Geist, SF Pro, Helvetica Neue. Nenhuma fonte serifada ou decorativa.

5. Ícones

Ícones Phosphor ou Lucide, peso Regular ou Light dependendo do contexto. Nenhum emoji nos entregáveis.

6. Logotipo

O logotipo do projeto é fornecido com o projeto: nenhum arquivo de logotipo acompanha esta skill. Regras de uso válidas para qualquer logotipo:

• Slides, capa sobre fundo colorido: logotipo no canto superior esquerdo, versão branca se existir, altura do símbolo 36 a 40 px.
• Slides de conteúdo, fundo claro: símbolo sozinho ou logotipo completo no rodapé, altura 20 a 24 px, texto discreto, alinhado no canto inferior esquerdo.
• Documentos Word: logotipo no cabeçalho da primeira página, alinhado à esquerda, altura 28 a 32 px, sem distorção.
• Artefatos web: símbolo SVG inline, 32 px, com um link para o site.
• Margem de proteção: pelo menos 1 vez a altura do símbolo de cada lado, sem texto ou elemento gráfico nesta área.
• A evitar: distorcer ou esticar o logotipo, recolorí-lo fora de sua cor ou do branco, usar uma versão borrada ou de baixa resolução, posicioná-lo sobre um fundo de contraste insuficiente.

7. Tom de Voz Externo

• De par para par, nunca condescendente, nunca comercial.
• Preciso e fundamentado: casos reais, métricas, mecanismos observáveis.
• Acessível sem banalizar. A expertise se lê na precisão, não nos superlativos.
• Aplicar sober-writing em paralelo para a postura redacional, e portugues-perfeito para um texto em português.

A banir em todos os documentos externos: "apaixonado por", "orientado a resultados", "criador de valor", biografias autopromocionais em terceira pessoa, listas de habilidades sem contexto ou evidência, tom de agência que promete muito e explica pouco.

8. Estrutura dos Entregáveis

Proposta Comercial, One-pager

1. O contexto e o desafio do cliente, sem introdução sobre si.
2. O ângulo de intervenção e seu mecanismo.
3. Os entregáveis e os marcos.
4. O preço e as modalidades.
5. As referências pertinentes (casos similares).

Estudo de Caso

1. A situação inicial: métricas, restrições, organização.
2. As decisões tomadas, e por quê.
3. Os resultados mensuráveis.
4. O que poderia ter sido feito de outra forma.

Biografia Profissional (80 a 100 palavras)

• Abrir com o papel e o ângulo que diferencia.
• Duas ou três evidências concretas: clientes, resultados, contextos.
• Fechar com a disponibilidade ou especialização atual.

E-mail de Prospecção: assunto específico para o destinatário; corpo de 80 a 120 palavras, com uma observação sobre sua situação, uma proposta direta e uma chamada para ação clara.

Documento Word: logotipo no cabeçalho, rodapé com as informações de contato do projeto, corpo em Inter ou Public Sans, títulos em semi-negrito, um único destaque de cor, sem floreios decorativos.

9. Combinar com slides e pptx

Três skills, três papéis:

Skill	Papel
brand-system (esta)	A identidade: paleta, tipografia, gradiente, componentes, logotipo, tom
slides	O layout: quinze layouts, estrutura narrativa, títulos
pptx (skill da Anthropic, instalar separadamente)	A geração técnica do arquivo .pptx

Passo a passo para produzir uma apresentação:

1. Ler brand-system para definir os tokens (ou substituí-los pelos do projeto).
2. Ler slides para escolher a estrutura do deck e os layouts, reutilizando esses tokens.
3. Ler pptx para gerar o arquivo, aplicando os valores dos dois primeiros.
4. Controlar o resultado slide por slide (exportar como imagens) com a verificação de slides.

10. Verificação Antes de Qualquer Entrega

1. O posicionamento se baseia em evidências, não em adjetivos qualificativos.
2. O tom é de par para par, não comercial.
3. O logotipo respeita suas regras de uso e margens.
4. Cor do logotipo e cor de destaque da interface distintas: #295FEC para um, #3D65E8 para o outro.
5. Tipografia Inter ou Public Sans apenas.
6. Nenhum emoji, nenhum travessão, nenhuma palavra vazia da moda.
7. sober-writing aplicada, e portugues-perfeito para um texto em português.