MÓDULO 2.2

🏷️ brand-guidelines

Aplica as cores e tipografia oficiais da Anthropic — Dark #141413, Light #faf9f5, Orange #d97757, fontes Poppins e Lora — a qualquer artifact que se beneficie de padrão visual de marca.

6
Tópicos
~20
Minutos
Interm.
Nível
Marca
Categoria
Anthropic Brand System CORES · TIPOGRAFIA · APLICAÇÃO Dark #141413 Light #faf9f5 Orange #d97757 Blue #6a9bcc Green #788c5d Mid Lite Tipografia Poppins → Headings (24pt+) Lora → Body text Artifact de saída Slides · HTML · PPTX PDF · Docs python-pptx · RGBColor · system fonts
1

🧩 O que é / o que faz

O skill brand-guidelines aplica as cores e tipografia oficiais da Anthropic a qualquer artifact que se beneficie de ter o look-and-feel da marca — slides, páginas HTML, PDFs, documentos.

Conceito Principal

brand-guidelines é um pós-processador de identidade visual. Não cria conteúdo — pega um artifact já gerado e aplica sistematicamente as cores e fontes oficiais da Anthropic, garantindo consistência da marca em todos os outputs.

A distinção fundamental: enquanto outros skills criam visuais, brand-guidelines os uniformiza segundo um padrão corporativo único e não-negociável.

🎨 Paleta oficial Anthropic (do SKILL.md)
Cores Principais
Dark
#141413 — texto e fundos escuros
Light
#faf9f5 — fundos claros e texto sobre escuro
Mid Gray
#b0aea5 — elementos secundários
Light Gray
#e8e6dc — fundos sutis
Cores de Acento
Orange
#d97757 — acento primário
Blue
#6a9bcc — acento secundário
Green
#788c5d — acento terciário
✏️ Tipografia oficial Anthropic
Headings (24pt+)
Fonte: Poppins
Fallback: Arial, sans-serif
Aplicado automaticamente em todos os títulos ≥24pt
Body text
Fonte: Lora
Fallback: Georgia, serif
Aplicado em textos de corpo, parágrafos e legendas
Conceitos-chave
🎨
Paleta oficial
5 cores fixas
✏️
Poppins + Lora
tipografia dupla
🔄
Pós-processamento
aplica em artifacts
🏢
Marca concreta
Anthropic, não genérico
2

🎣 Quando dispara

O Claude aciona brand-guidelines quando detecta pedidos relacionados a brand colors, style guidelines, visual formatting ou company design standards.

Gatilhos da description (do SKILL.md)
1
Brand colors ou style guidelines

Pedidos explícitos: "aplique as cores da Anthropic", "use as brand guidelines", "estilo corporativo da Anthropic".

2
Visual formatting / company design standards

Contextos de formatação visual corporativa: "deixe no padrão da empresa", "formatação visual oficial", "design standards aplicados".

3
Artifacts que "se beneficiam" do look-and-feel

Quando o artefato (slides, HTML, PDF, documento) claramente poderia ter identidade visual de marca — mesmo sem o usuário citar explicitamente "brand guidelines".

4
Keywords explícitas no pedido

Palavras-chave: branding, corporate identity, visual identity, post-processing, styling, brand colors, typography, Anthropic brand, visual formatting, visual design.

💡
Tip: brand-guidelines é sobre UMA marca concreta

O skill ativa quando há intenção de aplicar o padrão Anthropic especificamente. Para criar temas visuais genéricos (qualquer marca, qualquer cor), o skill correto é theme-factory.

✓ ACIONAR brand-guidelines quando
  • Slides ou PPTX precisam da identidade Anthropic
  • Docs HTML internos com marca corporativa
  • Usuário menciona "cores da Anthropic" ou "brand guidelines"
  • Artifact de apresentação para contexto Anthropic
✗ NÃO ACIONAR quando
  • Usuário quer tema personalizado (use theme-factory)
  • Não há artifact visual para estilizar
  • Pedido é sobre outra empresa/marca específica
  • Contexto é puramente textual sem componente visual
Conceitos-chave
🔑
Gatilho explícito
brand/style/visual
🎯
Marca única
só Anthropic
📎
Artifact presente
algo para estilizar
Pós-processo
aplica em saída
3

🚀 Como melhora seus artifacts

O valor concreto: qualquer saída gerada pelo Claude passa a ter coerência visual de marca, sem o usuário precisar especificar cada cor ou fonte manualmente.

📊 Impacto por tipo de artifact
Slides / PPTX
Todas as formas não-texto recebem acento ciclado: orange → blue → green. Headings viram Poppins, corpo vira Lora.
HTML / Web
Paleta CSS mapeada para as 5 cores oficiais. Gradientes e fundos com Dark/Light Anthropic. Tipografia via Google Fonts.
Documentos
Hierarquia visual preservada. Seleção de cor inteligente baseada no fundo (claro/escuro). Fallback automático se fontes ausentes.
Antes × Depois
⬜ Sem brand-guidelines
  • • Cores arbitrárias sem padrão de marca
  • • Fonte padrão do sistema (Arial, Helvetica)
  • • Cada output parece feito por pessoas diferentes
  • • Revisão manual de identidade necessária
🏷️ Com brand-guidelines
  • Paleta Anthropic aplicada automaticamente
  • Poppins em headings, Lora em corpo
  • Consistência visual em todos os outputs
  • Pronto para uso profissional imediato
💡
Smart Color Selection

O skill seleciona cor de texto automaticamente com base no fundo: texto claro (#faf9f5) sobre fundos escuros (#141413), texto escuro sobre fundos claros. Nenhuma decisão manual necessária.

Conceitos-chave
🎨
Consistência
mesmo padrão sempre
⚙️
Automático
zero decisão manual
🏢
Profissional
pronto para uso
🔄
Accent cycling
orange/blue/green
4

⚙️ Como funciona por dentro

Stack técnico real: python-pptx para manipulação de apresentações, RGBColor para precisão de cores, e fontes do sistema com fallback automático.

⚙️ Módulo de Cores
  • Usa python-pptx RGBColor para precisão exata
  • Cores aplicadas via valores RGB (não hex strings)
  • Fidelidade de cor preservada em diferentes sistemas
  • Accent cycling: formas não-texto recebem orange/blue/green em ciclo
⚠️ Limitações técnicas
  • Poppins e Lora precisam estar pré-instaladas no sistema
  • Fallback Arial/Georgia se fontes ausentes
  • Não instala fontes automaticamente
  • Resultado depende do ambiente de execução
🔤 Font Management (do SKILL.md)
1
Sistema primeiro: usa Poppins e Lora instaladas no sistema quando disponíveis.
2
Fallback automático: Arial para headings, Georgia para body — garante legibilidade sempre.
3
Smart font application: aplica Poppins apenas em headings ≥24pt, Lora em todo texto de corpo.
4
Hierarquia preservada: formatação de texto (bold, italic, size) é mantida — só a família muda.
⚠️
Atenção: dependência de fontes do sistema

Para resultados com Poppins e Lora reais, instale as fontes antes de usar o skill. Em ambientes sem essas fontes, o output usa Arial/Georgia — funcionalmente correto, mas visualmente não-idêntico ao padrão Anthropic.

Conceitos-chave
🐍
python-pptx
engine principal
🎨
RGBColor
precisão de cor
🔤
Poppins/Lora
sistema local
🔁
Fallback
Arial/Georgia
5

💬 Exemplo prático + PROMPT pronto

Cenário real: criar uma página HTML de apresentação de produto com identidade Anthropic aplicada, pronta para uso corporativo.

Cenário

Você precisa de uma página HTML de produto (landing, one-pager, apresentação interna) com a identidade visual oficial da Anthropic — sem precisar pesquisar hexcodes, decidir fontes ou montar uma paleta manualmente.

Prompt pronto para colar no Claude Code
Crie uma página HTML de apresentação do produto "Claude API"
para uso interno na Anthropic.

Aplique as brand guidelines oficiais da Anthropic:
- Paleta de cores: Dark #141413, Light #faf9f5,
  Orange accent #d97757, Blue accent #6a9bcc, Green accent #788c5d
- Tipografia: Poppins para headings (24pt+), Lora para body text
- Formas e shapes com accent cycling: orange → blue → green

A página deve ter: hero section, 3 feature cards,
CTA e footer. Use o look-and-feel corporativo Anthropic.
Variante: aplicar em apresentação existente
Tenho um arquivo presentation.pptx de relatório trimestral.
Aplique as brand guidelines da Anthropic:
- Cores oficiais via python-pptx RGBColor
- Headings em Poppins (fallback Arial)
- Body text em Lora (fallback Georgia)
- Shapes não-texto em accent cycling: orange (#d97757),
  blue (#6a9bcc), green (#788c5d)
Preserve toda a hierarquia e formatação existente.
💡
Pré-instale Poppins e Lora para resultado ideal

No macOS: brew install --cask font-poppins font-lora. No Linux: baixe do Google Fonts e copie para ~/.fonts/. O skill funciona sem elas (fallback), mas o resultado será Arial/Georgia em vez de Poppins/Lora.

Conceitos-chave
📝
Prompt direto
cite as cores
🔢
Hex explícito
sem ambiguidade
🖼️
Artifact alvo
HTML ou PPTX
🏷️
Contexto marca
Anthropic, corporativo
6

🧬 Combina com / limites

Posição no ecossistema da Trilha 2 — Identidade — e quando brand-guidelines não é a escolha certa.

brand-guidelines × theme-factory — a diferença fundamental
🏷️ brand-guidelines
  • • UMA marca concreta: Anthropic
  • • Paleta fixa e imutável (#141413, #faf9f5, #d97757…)
  • • Fontes corporativas: Poppins / Lora
  • • Pós-processamento de artifacts existentes
  • • Resultado previsível e padronizado
🎨 theme-factory (módulo 2.1)
  • • Qualquer marca ou identidade visual
  • • Paleta gerada/customizada conforme pedido
  • • Fontes flexíveis, sem padrão fixo
  • • Cria temas novos do zero
  • • Resultado variável por contexto

Use brand-guidelines quando o resultado precisa seguir o padrão oficial da Anthropic. Use theme-factory para criar sistemas de design para qualquer outro caso.

🖼️ Relação com canvas-design (próximo: Módulo 2.3)

canvas-design opera em um nível diferente: cria composições visuais em Canvas/SVG com liberdade criativa. brand-guidelines e canvas-design se complementam:

Fluxo combinado

canvas-design cria a composição visual → brand-guidelines aplica a paleta Anthropic sobre ela. Resultado: arte criativa com identidade corporativa.

Quando NÃO combinar

Se a composição do canvas-design usa cores intencionalmente não-Anthropic (arte abstrata, ilustração com identidade própria), brand-guidelines vai distorcer a intenção criativa.

Com quais skills compõe bem
⚛️
frontend-design (T1.1)
Cria a estrutura HTML → brand-guidelines aplica a identidade Anthropic sobre ela. Fluxo clássico para páginas internas.
🧱
web-artifacts-builder (T1.3)
Gera artifacts web completos → brand-guidelines é o pós-processo que garante que os artifacts saiam na identidade Anthropic.
🖼️
canvas-design (T2.3)
Composição visual criativa que pode receber brand-guidelines como camada de padronização corporativa.
🌀
algorithmic-art (T2.4)
Arte generativa pode ser "brandificada" — mas com cuidado: a estética do algorithmic-art frequentemente conflita com a sobriedad da paleta Anthropic.
✓ USE brand-guidelines para
  • Apresentações internas Anthropic
  • Docs e relatórios com identidade corporativa
  • Páginas de produto no padrão visual Anthropic
  • Uniformizar outputs de múltiplos autores
✗ NÃO USE brand-guidelines para
  • Criar temas para outros projetos/marcas
  • Pedidos de "tema escuro" genérico (use theme-factory)
  • Artifacts sem componente visual (texto puro)
  • Arte criativa com identidade própria intencional
Conceitos-chave
≠ theme-factory
marca específica
+
+ canvas-design
criativo + marca
🔄
Pós-processo
final do pipeline
🚫
Escopo fixo
só Anthropic

📋 Resumo do Módulo 2.2

brand-guidelines aplica as cores e fontes oficiais da Anthropic — Dark #141413, Light #faf9f5, accents orange/blue/green, Poppins e Lora

Ativa quando o pedido menciona brand colors, style guidelines, visual formatting ou company design standards da Anthropic

Usa python-pptx com RGBColor para precisão; fontes do sistema (Poppins/Lora) com fallback Arial/Georgia

Diferente de theme-factory (temas genéricos) — brand-guidelines é sobre UMA marca concreta com paleta fixa

Accent cycling em formas não-texto: orange → blue → green, mantendo interesse visual com coerência de marca

Compõe bem com frontend-design, web-artifacts-builder e canvas-design como etapa de pós-processamento da pipeline

Próximo módulo:
🖼️
Módulo 2.3 — canvas-design
Composições visuais em Canvas e SVG — criação de arte generativa e layouts visuais com liberdade criativa total.