ealmeida/claude-plugins
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

brand-guidelines: alinhar com o Open Design e tornar multi-marca

Browse Source 
A skill documentava uma paleta azul/laranja (#1a365d, #dd6b20) com Open Sans
que nao corresponde nem ao design system nem ao site real. Cada ferramenta
produzia material com uma marca diferente.

Passa a espelhar o DESIGN.md do Open Design como fonte de verdade unica:
dourado #cc8d00 sobre preto e branco, Montserrat (display) e Inter (corpo),
com precedencia explicita do DESIGN.md sobre qualquer espelho.

Reformulada para servir qualquer marca (Descomplicar e clientes), com
procedimento para criar design systems de cliente a partir de material real
via brand-extract, validacao antes de tornar normativo, e um projecto por marca.

- SKILL.md v2.0.0: espelho correcto + gestao multi-marca
- descomplicar-theme.md v2.0.0: tokens YAML derivados do DESIGN.md
- color-palettes.md removido: 47 valores derivados da paleta errada
- design-systems-multimarca.md: procedimento de gestao no Open Design

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
ealmeida
2026-07-22 20:46:03 +01:00
co-authored by Claude Opus 4.8
parent 0f894c57b7
commit d852d54bf3
4 changed files with 400 additions and 627 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design-media/skills/brand-guidelines/SKILL.md
+217 -241
View File
@@ -1,66 +1,113 @@
---
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.
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 - Identidade Visual Descomplicar®
# /brand-guidelines — Gestão de Identidade Visual Multi-Marca
Referencia normativa da marca Descomplicar®. Aplicar em todos os materiais de comunicacao,
design e desenvolvimento.
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®
**Slogan:** Crescimento Digital
**Website:** descomplicar.pt
**Tom:** Profissional mas acessivel, tecnologico sem ser frio
**Valores:** Simplicidade, transparencia, resultados mensuraveis
**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 (®) e obrigatoria na primeira ocorrencia em qualquer documento ou comunicacao.
> Nas ocorrencias seguintes, pode usar-se apenas "Descomplicar".
> 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 Principal
## Paleta de Cores
| 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 |
| 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 |
Paleta completa com variacoes de contexto: `references/color-palettes.md`
---
## CSS Variables (Web)
**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 {
/* 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;
--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;
}
```
@@ -68,254 +115,183 @@ Paleta completa com variacoes de contexto: `references/color-palettes.md`
## Tipografia
### Hierarquia
| 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 |
| 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 |
### Escala
### CSS Tipografia
| 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
: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;
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono&display=swap');
```
### 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`
## 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
### Regras de Uso
| Regra | Descricao |
| Regra | Descrição |
|-------|-----------|
| 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 |
| 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 Disponiveis
**Variantes:** principal (horizontal), compacta, monocromática escura, monocromática clara, ícone isolado (favicon, avatar).
| 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
```
**Ficheiros:** `Hub/04-Recursos/Design/brands/descomplicar/`
---
## Aplicacao por Contexto
## Aplicação por Contexto
### Apresentacoes e Slides
**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.
```
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
```
**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`.
Modelo: `/design presentation --brand descomplicar`
**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`.
### Documentos e Propostas
**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`.
```
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
```
**Redes sociais** — Fundo preto ou branco, elemento de marca em dourado, texto sem emojis.
---
## Tom de Comunicacao
## Tom de Comunicação
### Principios
**Tom:** profissional mas acessível, directo, orientado à acção, confiante sem arrogância.
| 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 |
**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.
### Vocabulario da Marca
**Headlines** — Directas e específicas: "SEO para PMEs que funciona" em vez de "Descubra como o SEO pode transformar o seu negócio".
| 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.
**CTAs correctos:** "Ver todos os guias", "Pedir auditoria gratuita", "Subscrever newsletter".
**CTAs incorrectos:** "Clique aqui!", "Saiba Mais!!!", qualquer CTA com emoji.
---
## Iconografia e Imagens
### Icones
**Ícones:** lineares, peso 1.5–2px, cantos ligeiramente arredondados. Lucide, Heroicons ou Phosphor. Tamanhos 16/20/24/32px. Cor herdada do contexto ou dourada.
- **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:** 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.
### 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);
}
```
**Ilustrações e gráficos:** flat, linhas limpas, paleta restrita à marca; destaques a dourado.
---
## 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 |
| 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 (abaixo de 18px normal ou 14px bold) requer minimo AA (4.5:1).
> Nunca usar Laranja como fundo de texto de corpo.
Texto de corpo requer no mínimo AA (4.5:1). Todos os botões precisam de estados hover, focus e disabled explícitos.
---
## Checklist Conformidade de Marca
## Anti-padrões (proibido)
- [ ] 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
- 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
---
**Versao**: 1.0.0 | **Data**: 2026-03-10 | **Autor**: Descomplicar®
*Paletas detalhadas por contexto: `references/color-palettes.md`*
## 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`*
---
@@ -324,7 +300,7 @@ Hashtags/links: #2b6cb0
Registo de erros conhecidos e como evitá-los. Lido automaticamente antes de executar.
```jsonl
{"date":"","issue":"","fix":"","source":"user|auto"}
{"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.*