ealmeidaandClaude Opus 4.8
d852d54bf3
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>
307 lines
13 KiB
Markdown
307 lines
13 KiB
Markdown
---
|
||
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.*
|