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

name, description

name

description

brand-guidelines

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.

: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.

@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.

{"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.