---
name: brand-guidelines
description: Gestão de identidade visual multi-marca (Descomplicar® e clientes) — design systems no Open Design, cores, tipografia, logótipo, tom e aplicação por contexto. O DESIGN.md de cada marca no Open Design é a fonte de verdade. Usar quando "brand", "marca", "identidade visual", "branding", "paleta de cores", "guia de marca", "design system cliente", "criar marca", ou qualquer material que necessite conformidade visual.
---

# /brand-guidelines — Gestão de Identidade Visual Multi-Marca

Esta skill serve **qualquer marca** — a Descomplicar® e cada cliente. A Descomplicar é apenas
a marca por omissão quando nenhuma outra é indicada.

## Fonte de verdade: o Open Design

Cada marca tem o seu design system no Open Design, um por pasta:

```
~/workspace/open-design/design-systems/<marca>/DESIGN.md
```

- `descomplicar/` — a nossa marca (espelhada em detalhe abaixo)
- `<slug-do-cliente>/` — uma pasta por cliente

O `DESIGN.md` da marca activa é **normativo**.

**Regras de precedência:**
- Em caso de divergência entre qualquer documento e o `DESIGN.md` da marca, **o `DESIGN.md` ganha sempre**.
- Nunca inventar cores, fontes ou tokens de nenhuma marca. Ler o `DESIGN.md` antes de produzir.
- Alterações à identidade fazem-se no `DESIGN.md` e só depois se propagam.

> Versões anteriores desta skill documentavam uma paleta azul/laranja (`#1a365d`, `#dd6b20`) com Open Sans
> para a Descomplicar. Estava **errada** — não corresponde ao site nem ao design system. Corrigida em 22-07-2026.

---

## Trabalhar com a marca de um cliente

**1. Verificar se já existe** — procurar a pasta do cliente em `design-systems/`. Se existir, ler o
`DESIGN.md` e usá-lo. Nunca criar um segundo design system para a mesma marca.

**2. Criar quando não existe** — extrair a identidade a partir de material real do cliente
(site, manual de marca, ficheiros fornecidos) com as skills do Open Design `brand-extract`
e `theme-factory`. O resultado é revisto com o cliente antes de se tornar normativo.
Nunca inventar a identidade de um cliente a partir do nada.

**3. Aplicar num projecto** — indicar a marca ao criar o projecto no Open Design
(`create_project` com `designSystem: "<slug>"`) para que todos os artefactos herdem
cor, tipografia e componentes sem deriva.

**4. Manter separado** — um projecto do Open Design serve uma marca só. Ecossistemas do
mesmo cliente (landing, dashboard, app) vivem no mesmo projecto para herdarem o mesmo
`DESIGN.md`; marcas diferentes nunca partilham projecto.

**Estrutura mínima de um `DESIGN.md`** (o da Descomplicar serve de modelo):
tema e atmosfera, cor, tipografia, espaçamento e grelha, layout e composição,
componentes, movimento, voz e tom, anti-padrões.

---

## Marca por omissão: Descomplicar®

O resto deste documento espelha o `DESIGN.md` da Descomplicar, para leitura rápida fora do
Open Design. Para clientes, ler sempre o `DESIGN.md` respectivo — os valores abaixo **não se
aplicam** a marcas de clientes.

---

## Identidade da Marca

**Nome oficial:** Descomplicar®
**Website:** descomplicar.pt
**Categoria:** agência de aceleração digital portuguesa — artigos, podcast semanal e automações de IA
**Atmosfera:** editorial profissional com acentos dourados; confiança técnica sem arrogância, clareza imediata sem frieza corporativa
**Acabamento:** plano e limpo, sem gradientes decorativos — a hierarquia faz o trabalho visual

> A marca registada (®) é obrigatória na primeira ocorrência em qualquer documento ou comunicação.
> Nas ocorrências seguintes, pode usar-se apenas "Descomplicar".

---

## Paleta de Cores

| Token | Hex | Uso |
|-------|-----|-----|
| Primary (Dourado) | `#cc8d00` | CTAs, faixas de destaque, ícones, bordas activas, badges |
| Primary Light | `#f2d9a2` | Fundos secundários, hover suave, tags — **nunca para texto** |
| Surface | `#ffffff` | Fundo de página, cards, modais |
| Text | `#000000` | Headlines, corpo principal, labels importantes |
| Text Muted | `#6e6e6e` | Subtítulos, metadados, placeholders |
| Border | `#e5e5e5` | Divisórias, bordas de card, separadores |
| Surface Alt | `#f8f8f8` | Secções alternadas, blocos de código |
| Danger | `#dc2626` | Erros, alertas críticos |
| Success | `#16a34a` | Confirmações, estados de sucesso |

**Regras de uso:**
- O dourado (`#cc8d00`) é o **único acento cromático** — usar com parcimónia e intenção.
- Nunca mais de 3 cores simultâneas no mesmo visual.
- Fundos grandes sempre em Surface (`#ffffff`) ou Surface Alt (`#f8f8f8`).
- CTA principal: fundo dourado com texto preto.
- A secção de maior destaque usa fundo preto, texto branco e acento dourado.

```css
:root {
  --color-primary:       #cc8d00;
  --color-primary-light: #f2d9a2;
  --color-surface:       #ffffff;
  --color-surface-alt:   #f8f8f8;
  --color-text:          #000000;
  --color-text-muted:    #6e6e6e;
  --color-border:        #e5e5e5;
  --color-danger:        #dc2626;
  --color-success:       #16a34a;
}
```

---

## Tipografia

| Papel | Família | Pesos |
|-------|---------|-------|
| Display | Montserrat, Poppins, system-ui, sans-serif | 700, 800 |
| Corpo | Inter, Open Sans, system-ui, sans-serif | 400, 500, 600 |
| Mono | JetBrains Mono, IBM Plex Mono, monospace | 400 |

### Escala

| Token | Tamanho | Peso | Line-height | Uso |
|-------|---------|------|-------------|-----|
| `text-5xl` | 48px | 800 | 1.1 | Hero headline |
| `text-4xl` | 36px | 700 | 1.15 | Título de página (H1) |
| `text-3xl` | 30px | 700 | 1.2 | Título de secção (H2) |
| `text-2xl` | 24px | 700 | 1.3 | Subsecção (H3) |
| `text-xl` | 20px | 600 | 1.4 | Título de card, H4 |
| `text-lg` | 18px | 500 | 1.5 | Parágrafo de entrada |
| `text-base` | 16px | 400 | 1.6 | Corpo |
| `text-sm` | 14px | 400 | 1.5 | Legendas, labels, UI |
| `text-xs` | 12px | 500 | 1.4 | Tags, badges, micro-copy |

**Regras:**
- Montserrat exclusivamente para títulos — nunca em parágrafos longos.
- Inter para tudo o que é lido em detalhe.
- `letter-spacing: 0.02em` em labels e badges em maiúsculas.
- Sem itálico decorativo — usar peso e tamanho para hierarquia.

```css
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono&display=swap');
```

---

## Espaçamento, Grelha e Raios

Escala base 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.

**Grelha:** 12 colunas, gutter 24px, conteúdo centrado com max-width 1280px (960px em artigos, 760px em texto corrido com line-height 1.7).
**Breakpoints:** mobile ≤768px, tablet 769–1024px, desktop >1024px.
**Padding lateral:** 16px mobile, 32px tablet, 48px desktop.
**Raios:** `sm` 4px (inputs, badges), `md` 8px (cards, botões), `lg` 12px (modais), `full` 9999px (pills, avatares).

---

## Componentes

**Botão** — Primary: fundo `#cc8d00`, texto `#000000`, Montserrat SemiBold, raio 8px. Secondary: transparente, borda 2px dourada, texto dourado. Ghost: transparente, texto preto, sublinhado no hover. Alturas: sm 32px, md 40px, lg 48px.

**Badge** — Default: fundo `#f8f8f8`, texto `#6e6e6e`, maiúsculas, 12px, tracking alargado. Primary: fundo `#f2d9a2`, texto `#7a5500`.

**Card** — Fundo branco, borda 1px `#e5e5e5`, raio 8px, padding 24px, imagem 16:9 no topo. Sombra no hover: `0 4px 16px rgba(0,0,0,0.1)`.

**Input** — Borda 1px `#e5e5e5`, raio 8px, padding 12px 16px. Focus: borda 2px dourada, sem outline. Erro: borda 2px `#dc2626` com mensagem abaixo. Label em Inter SemiBold 14px maiúsculas.

**Navbar** — Fundo preto, logótipo à esquerda, links brancos, CTA dourado à direita, sticky com `backdrop-filter: blur(8px)`.

**Rodapé** — Fundo preto, texto branco/cinza, links com hover dourado, 3 colunas (marca, navegação, contacto) e copyright em `text-xs`.

---

## Movimento

O movimento **confirma acções, nunca decora**.

- 150ms em micro-interacções (hover, focus); 250ms em transições de estado.
- `ease-out` nas entradas, `ease-in-out` nas transições bidireccionais.
- Cards no hover: `translateY(-2px)` mais sombra, 200ms.
- Transições de página: fade simples 200ms.
- Estados de carregamento: skeleton em `#f8f8f8` com shimmer subtil.
- Sem parallax, sem animações de entrada elaboradas, sem auto-play.

---

## Logótipo

| Regra | Descrição |
|-------|-----------|
| Espaço mínimo | Margem de pelo menos 2x a altura da letra "D" em todos os lados |
| Tamanho mínimo | 120px de largura em digital; 30mm em impressão |
| Fundos permitidos | Branco `#ffffff`, preto `#000000`, cinza claro `#f8f8f8` |
| Fundos proibidos | Baixo contraste, fotografias sem overlay |
| Proibido | Esticar, rodar, alterar proporções, alterar cores, sobrepor texto |

**Variantes:** principal (horizontal), compacta, monocromática escura, monocromática clara, ícone isolado (favicon, avatar).

**Ficheiros:** `Hub/04-Recursos/Design/brands/descomplicar/`

---

## Aplicação por Contexto

**Apresentações e slides** — Capa e secções de destaque com fundo preto, título Montserrat ExtraBold branco, acento dourado. Slides de conteúdo com fundo branco ou `#f8f8f8`, corpo em Inter `#000000`, destaques e números em dourado.

**Documentos e propostas** — Cabeçalho preto com logótipo claro; corpo branco com texto preto; títulos de secção em Montserrat; callouts com fundo `#f8f8f8` e borda esquerda dourada; rodapé `#f8f8f8` com borda superior `#e5e5e5`.

**Web e landing pages** — Hero claro ou escuro conforme a variante escolhida; CTA primário dourado com texto preto; secções alternadas em `#f8f8f8`; cards brancos com borda `#e5e5e5`.

**Emails e newsletter** — Pré-header preto, corpo branco com texto preto, cabeçalhos Montserrat, botão CTA dourado com texto preto e raio 8px, rodapé `#f8f8f8`.

**Redes sociais** — Fundo preto ou branco, elemento de marca em dourado, texto sem emojis.

---

## Tom de Comunicação

**Tom:** profissional mas acessível, directo, orientado à acção, confiante sem arrogância.

**Princípios de copy:**
- PT-PT estrito — "utilizador" não "usuário", "transferir" não "baixar", "ecrã" não "tela", "equipa" não "time".
- Frases curtas, verbo no início nos CTAs: "Saber mais", "Ver guia", "Falar connosco".
- Títulos assertivos, sem interrogações desnecessárias.
- Dados concretos: "400+ artigos", não "muitos artigos".
- Sem emojis e sem exclamações excessivas em qualquer contexto de marca.

**Headlines** — Directas e específicas: "SEO para PMEs que funciona" em vez de "Descubra como o SEO pode transformar o seu negócio".

**CTAs correctos:** "Ver todos os guias", "Pedir auditoria gratuita", "Subscrever newsletter".
**CTAs incorrectos:** "Clique aqui!", "Saiba Mais!!!", qualquer CTA com emoji.

---

## Iconografia e Imagens

**Ícones:** lineares, peso 1.5–2px, cantos ligeiramente arredondados. Lucide, Heroicons ou Phosphor. Tamanhos 16/20/24/32px. Cor herdada do contexto ou dourada.

**Fotografia:** profissional e luminosa, pessoas reais em contexto. Overlay preto (20–40%) quando houver texto por cima. **Proibidas** stock photos genéricas — pessoas a sorrir para portáteis, apertos de mão corporativos.

**Ilustrações e gráficos:** flat, linhas limpas, paleta restrita à marca; destaques a dourado.

---

## Acessibilidade

| Par de cores | Rácio | Nível |
|--------------|-------|-------|
| Preto sobre branco | 21:1 | AAA |
| Preto sobre dourado `#cc8d00` | ~7.4:1 | AAA |
| Dourado `#cc8d00` sobre preto | ~7.4:1 | AAA |
| Text Muted `#6e6e6e` sobre branco | ~5.1:1 | AA |
| **Branco sobre dourado** | **~2.9:1** | **falha — proibido** |

Texto de corpo requer no mínimo AA (4.5:1). Todos os botões precisam de estados hover, focus e disabled explícitos.

---

## Anti-padrões (proibido)

- Gradientes multicolor ou agressivos em elementos de marca
- Mais de 3 cores simultâneas num visual
- Stock photos genéricas
- Emojis em qualquer contexto de marca
- Tipografia decorativa além de Montserrat e Inter
- Sombras pesadas ou neumorfismo
- Animações que distraem (rotações, bounces, pulse contínuo)
- Texto branco sobre dourado — contraste insuficiente
- Primary Light (`#f2d9a2`) como cor de texto
- Layouts com mais de 4 colunas de conteúdo editorial
- Botões sem estados hover, focus e disabled
- Português do Brasil — sempre PT-PT com acentuação completa

---

## Checklist de Conformidade

- [ ] `DESIGN.md` do Open Design consultado antes de produzir
- [ ] Apenas cores da paleta oficial; dourado como único acento
- [ ] Montserrat nos títulos, Inter no corpo
- [ ] Logótipo com espaço de respiro e fundo permitido
- [ ] Marca registada (®) na primeira ocorrência
- [ ] Contraste mínimo AA; nunca branco sobre dourado
- [ ] Espaçamento em múltiplos de 4px
- [ ] PT-PT sem brasileirismos e sem emojis
- [ ] Nenhum anti-padrão presente

---

**Versão**: 2.0.0 | **Data**: 22-07-2026 | **Autor**: Descomplicar®
*Fonte normativa: `~/workspace/open-design/design-systems/descomplicar/DESIGN.md`*

---

## Healing Log

Registo de erros conhecidos e como evitá-los. Lido automaticamente antes de executar.

```jsonl
{"date":"2026-07-22","issue":"Skill documentava paleta azul/laranja (#1a365d, #dd6b20) e Open Sans, divergente do design system e do site real","fix":"Reescrita para espelhar o DESIGN.md do Open Design (dourado #cc8d00 sobre preto/branco, Montserrat + Inter) e declarar precedencia da fonte de verdade","source":"user"}
```

*Adicionar nova linha após cada erro corrigido.*