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

---
name: brand-guidelines
description: 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)

```css
: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

```css
: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

```css
: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`*