ealmeida/claude-plugins
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
claude-plugins/design-media/skills/brand-guidelines/SKILL.md
Emanuel Almeida 6b3a6f2698 feat: refactor 30+ skills to Anthropic progressive disclosure pattern 
- All SKILL.md files now <500 lines (avg reduction 69%)
- Detailed content extracted to references/ subdirectories
- Frontmatter standardised: only name + description (Anthropic standard)
- New skills: brand-guidelines, spec-coauthor, report-templates, skill-creator
- Design skills: anti-slop guidelines, premium-proposals reference
- Removed non-standard frontmatter fields (triggers, version, author, category)

Plugins affected: infraestrutura, marketing, dev-tools, crm-ops, gestao,
core-tools, negocio, perfex-dev, wordpress, design-media

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-12 15:05:03 +00:00

9.7 KiB
Raw Permalink Blame History

name, description
name description
brand-guidelines Guia de identidade visual Descomplicar® — cores, tipografia, logotipo, tom de comunicacao e aplicacao por contexto (slides, docs, web, emails). Usar quando "brand descomplicar", "marca descomplicar", "cores descomplicar", "identidade visual", "branding", "paleta de cores", "guia de marca", ou qualquer material que necessite conformidade visual com a marca.

/brand-guidelines - Identidade Visual Descomplicar®

Referencia normativa da marca Descomplicar®. Aplicar em todos os materiais de comunicacao, design e desenvolvimento.

Identidade da Marca

Nome oficial: Descomplicar® Slogan: Crescimento Digital Website: descomplicar.pt Tom: Profissional mas acessivel, tecnologico sem ser frio Valores: Simplicidade, transparencia, resultados mensuraveis

A marca registada (®) e obrigatoria na primeira ocorrencia em qualquer documento ou comunicacao. Nas ocorrencias seguintes, pode usar-se apenas "Descomplicar".

Paleta de Cores Principal

Nome Hex RGB Uso
Azul Escuro #1a365d 26, 54, 93 Texto principal, fundos escuros, cabecalhos
Azul Medio #2b6cb0 43, 108, 176 Links, acentos, botoes secundarios
Laranja #dd6b20 221, 107, 32 CTA, destaques, elementos de accao
Branco #ffffff 255, 255, 255 Fundos claros, texto sobre escuro
Cinza Claro #f7fafc 247, 250, 252 Fundos secundarios, secoes alternadas
Cinza Texto #4a5568 74, 85, 104 Texto de corpo, descricoes

Paleta completa com variacoes de contexto: references/color-palettes.md

CSS Variables (Web)

:root {
  /* Cores principais */
  --color-primary:      #1a365d;
  --color-secondary:    #2b6cb0;
  --color-accent:       #dd6b20;

  /* Neutros */
  --color-white:        #ffffff;
  --color-bg-light:     #f7fafc;
  --color-text-body:    #4a5568;
  --color-text-heading: #1a365d;

  /* Estados */
  --color-primary-hover:   #2a4a7f;
  --color-secondary-hover: #2c5282;
  --color-accent-hover:    #c05621;

  /* Bordas e divisores */
  --color-border:       #e2e8f0;
  --color-border-light: #edf2f7;
}

Tipografia

Hierarquia

Elemento Familia Peso Tamanho base
H1 / Titulo principal Montserrat Extra Bold (800) 48px / 3rem
H2 / Titulo secao Montserrat Bold (700) 36px / 2.25rem
H3 / Subtitulo Montserrat Semi Bold (600) 24px / 1.5rem
H4 / Label Montserrat Semi Bold (600) 18px / 1.125rem
Corpo / Paragrafo Open Sans Regular (400) 16px / 1rem
Destaque / Lead Open Sans Semi Bold (600) 18px / 1.125rem
Legenda / Caption Open Sans Regular (400) 14px / 0.875rem
Codigo JetBrains Mono Regular (400) 14px / 0.875rem

CSS Tipografia

:root {
  --font-heading: 'Montserrat', 'Arial Black', sans-serif;
  --font-body:    'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-code:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  --line-height-heading: 1.2;
  --line-height-body:    1.6;
  --letter-spacing-heading: -0.025em;
}

Fallbacks de Sistema

  • Montserrat indisponivel: 'Arial Black', 'Impact', sans-serif
  • Open Sans indisponivel: 'Helvetica Neue', Arial, sans-serif
  • JetBrains Mono indisponivel: 'Fira Code', 'Courier New', monospace

Logótipo

Regras de Uso

Regra Descricao
Espaco minimo Margem de pelo menos 2x a altura da letra "D" em todos os lados
Tamanho minimo 120px de largura em digital; 30mm em impressao
Fundo permitido Branco #ffffff, Azul Escuro #1a365d, Cinza Claro #f7fafc
Fundo proibido Qualquer fundo com baixo contraste, fotografias sem overlay
Distorcao Nunca esticar, rodar ou alterar proporcoes
Cores proibidas Nunca alterar as cores do logótipo original
Texto junto Nunca sobrepor texto ao logótipo

Variantes Disponiveis

Variante Quando usar
Principal (horizontal) Uso geral, cabecalhos, documentos
Compacta (icone + nome vertical) Espacos reduzidos, avatares
Monocromatica escura Documentos a preto e branco, impressao simples
Monocromatica clara Sobre fundos escuros, rodapes
Icone isolado Favicon, app icon, redes sociais (foto de perfil)

Ficheiros Logótipo

Hub/04-Recursos/Design/brands/descomplicar/
  logo-principal.svg
  logo-compacto.svg
  logo-mono-escuro.svg
  logo-mono-claro.svg
  favicon.png
  favicon.svg

Aplicacao por Contexto

Apresentacoes e Slides

Fundo slides: #1a365d (escuro) ou #ffffff (claro)
Titulo slide: Montserrat Extra Bold, #ffffff (sobre escuro) / #1a365d (sobre claro)
Corpo texto: Open Sans Regular, #ffffff ou #4a5568
Destaques/CTA: #dd6b20
Divisores: #2b6cb0
Slide titulo (capa): fundo #1a365d, logótipo variante clara

Modelo: /design presentation --brand descomplicar

Documentos e Propostas

Cabecalho: fundo #1a365d, logótipo clara, texto branco
Corpo: fundo #ffffff, texto #4a5568
Titulos secao: Montserrat Bold, #1a365d
Destaques/callouts: fundo #f7fafc, borda esquerda #dd6b20
Links: #2b6cb0, sublinhado no hover
Rodape: fundo #f7fafc, texto #4a5568, borda topo #e2e8f0

Web e Landing Pages

Hero section: fundo #1a365d ou gradiente #1a365d -> #2b6cb0
Botao primario (CTA): fundo #dd6b20, texto #ffffff, hover #c05621
Botao secundario: borda #2b6cb0, texto #2b6cb0, hover fundo #2b6cb0 branco
Seccao alternada: fundo #f7fafc
Cards: fundo #ffffff, sombra suave, borda-topo #2b6cb0 (destaque)
Cards destaque: borda-topo ou borda-esquerda #dd6b20

Emails e Newsletter

Pre-header: fundo #1a365d, texto #ffffff
Corpo email: fundo #ffffff, texto #4a5568
Cabecalhos: Montserrat Bold, #1a365d
CTA button: fundo #dd6b20, texto #ffffff, border-radius 4px
Rodape email: fundo #f7fafc, texto #4a5568 (tamanho reduzido)
Links: #2b6cb0

Redes Sociais

Fundo posts: #1a365d (principal) ou #ffffff
Texto sobre escuro: #ffffff (titulo), #f7fafc (corpo)
Texto sobre claro: #1a365d (titulo), #4a5568 (corpo)
Elemento de marca (cantos, bandas): #dd6b20 ou #2b6cb0
Hashtags/links: #2b6cb0

Tom de Comunicacao

Principios

Principio Descricao
Claro e directo Frases curtas, vocabulario acessivel, sem jargao desnecessario
Confiante mas humilde Mostramos resultados, nao promessas vazias
Tecnico sem ser frio Tecnologia ao servico das pessoas, nao o contrario
Orientado a resultados Sempre ligar accoes a beneficios mensuravelis
Em portugues correcto PT-PT sempre, sem brasileirismos, sem calao

Vocabulario da Marca

Usar Evitar
crescimento digital growth hacking
resultados mensuraveis metricas (sem contexto)
simplicidade user-friendly (em textos publicos)
parceiros / clientes users / leads (em comunicacao externa)
solucoes produtos (quando sao servicos)
equipa time (brasileirismo)

Voz por Canal

  • Website / Propostas: Formal-acessivel. Nos apresentamos, o cliente decide.
  • Redes Sociais: Mais conversacional, com pergunta ou convite a interaccao.
  • Emails: Directo e pessoal, nome do destinatario sempre que possivel.
  • Documentacao tecnica: Preciso e estruturado, sem ambiguidade.

Iconografia e Imagens

Icones

  • Estilo: Linear, peso medio (1.5-2px), cantos ligeiramente arredondados
  • Bibliotecas recomendadas: Lucide Icons, Heroicons, Phosphor Icons
  • Tamanhos: 16px, 20px, 24px, 32px (escala 4px)
  • Cor: Herdar da cor de texto do contexto ou usar cor de acento

Fotografia

  • Estilo: Profissional, luminosa, pessoas reais em contexto de trabalho
  • Tratamento: Sem filtros excessivos; overlay azul escuro (#1a365d, 20-40% opacidade) para texto
  • Evitar: Stock photos genericas, imagens de baixa qualidade, estilos vintage/retro

Ilustracoes e Graficos

  • Estilo: Flat design com linhas limpas, paleta restrita as cores da marca
  • Graficos de dados: Usar sempre cores da paleta principal, legenda clara
  • Infograficos: Fundo branco ou cinza claro, acentos em laranja para destaques

Espacamento e Grid

:root {
  /* Espacamento base: multiplos de 4px */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(26, 54, 93, 0.1);
  --shadow-md: 0 4px 12px rgba(26, 54, 93, 0.15);
  --shadow-lg: 0 8px 24px rgba(26, 54, 93, 0.2);
}

Acessibilidade

Par de cores Racio contraste Nivel WCAG
Branco sobre Azul Escuro 12.6:1 AAA
Branco sobre Azul Medio 5.1:1 AA
Branco sobre Laranja 3.1:1 AA (texto grande)
Cinza Texto sobre Branco 7.0:1 AAA
Azul Escuro sobre Cinza Claro 11.9:1 AAA

Texto de corpo (abaixo de 18px normal ou 14px bold) requer minimo AA (4.5:1). Nunca usar Laranja como fundo de texto de corpo.

Checklist Conformidade de Marca

  • Logótipo com espaco de respiro correcto
  • Apenas cores da paleta oficial
  • Tipografia Montserrat (headings) e Open Sans (corpo)
  • Tom de comunicacao adequado ao canal
  • Marca registada (®) na primeira ocorrencia
  • Contraste WCAG AA minimo em texto
  • Slogan "Crescimento Digital" presente (quando relevante)
  • Sem brasileirismos no texto
  • Espacamento em multiplos de 4px

Versao: 1.0.0 | Data: 2026-03-10 | Autor: Descomplicar® Paletas detalhadas por contexto: references/color-palettes.md

Reference in New Issue View Git Blame Copy Permalink