claude-plugins/design-media/skills/brand-guidelines/SKILL.md

name, description, layer

name	description	layer
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.	wiki

/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