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/references/color-palettes.md
-227
View File
@@ -1,227 +0,0 @@
# Paletas de Cores Descomplicar® — Referencia Detalhada
Extensao de `brand-guidelines/SKILL.md`. Paletas completas com variacoes de contexto,
estados de interaccao e combinacoes aprovadas.
---
## Paleta Principal
| Token | Hex | RGB | HSL |
|-------|-----|-----|-----|
| `--color-primary` | `#1a365d` | 26, 54, 93 | 213°, 56%, 23% |
| `--color-secondary` | `#2b6cb0` | 43, 108, 176 | 211°, 61%, 43% |
| `--color-accent` | `#dd6b20` | 221, 107, 32 | 27°, 74%, 50% |
| `--color-white` | `#ffffff` | 255, 255, 255 | — |
| `--color-bg-light` | `#f7fafc` | 247, 250, 252 | 204°, 33%, 98% |
| `--color-text-body` | `#4a5568` | 74, 85, 104 | 220°, 17%, 35% |
---
## Escala Azul Escuro (Primary)
| Variacao | Hex | Uso |
|----------|-----|-----|
| 50 (mais claro) | `#ebf4ff` | Fundos hover muito suaves |
| 100 | `#dbeafe` | Fundos informativos |
| 200 | `#bfdbfe` | Bordas suaves |
| 300 | `#93c5fd` | Icones em fundo claro |
| 400 | `#60a5fa` | Interaccao hover em elementos claros |
| 500 | `#2b6cb0` | Azul medio (secondary) |
| 600 | `#1d4ed8` | Links hover |
| 700 | `#1e40af` | Botoes primarios hover |
| 800 | `#1e3a8a` | Variacao escura |
| **900 (base)** | `#1a365d` | **Cor primaria — uso principal** |
---
## Escala Laranja (Accent)
| Variacao | Hex | Uso |
|----------|-----|-----|
| 50 | `#fff7ed` | Fundo callout de atencao |
| 100 | `#ffedd5` | Destaque suave |
| 200 | `#fed7aa` | Borda callout |
| 300 | `#fdba74` | Icones de alerta em fundo claro |
| 400 | `#fb923c` | Hover em elementos de acento |
| **500 (base)** | `#dd6b20` | **Cor de acento — CTA principal** |
| 600 | `#c05621` | Hover botao CTA |
| 700 | `#9c4221` | Pressed state / active |
| 800 | `#7c2d12` | Texto sobre fundo laranja claro |
---
## Escala de Neutros
| Token | Hex | Uso |
|-------|-----|-----|
| Branco | `#ffffff` | Fundos principais, texto sobre escuro |
| Gray 50 | `#f7fafc` | Fundos secundarios, seccoes alternadas |
| Gray 100 | `#edf2f7` | Hover em items de lista |
| Gray 200 | `#e2e8f0` | Bordas, divisores |
| Gray 300 | `#cbd5e0` | Bordas de formularios desactivados |
| Gray 400 | `#a0aec0` | Placeholder text, icones inactivos |
| Gray 500 | `#718096` | Texto auxiliar, labels |
| **Gray 600** | `#4a5568` | **Texto de corpo principal** |
| Gray 700 | `#2d3748` | Texto secundario escuro |
| Gray 800 | `#1a202c` | Texto titulo alternativo |
| Gray 900 | `#171923` | Fundo ultra-escuro (raro) |
---
## Combinacoes de Cor Aprovadas
### Combinacoes de Alta Prioridade (CTA e Heroi)
| Fundo | Texto / Elemento | Racio | Nota |
|-------|-----------------|-------|------|
| `#1a365d` | `#ffffff` | 12.6:1 | Preferencial — hero, capa, footer |
| `#2b6cb0` | `#ffffff` | 5.1:1 | Botoes, badges, chips |
| `#dd6b20` | `#ffffff` | 3.1:1 | CTA (apenas texto grande >=18px ou bold >=14px) |
| `#ffffff` | `#1a365d` | 12.6:1 | Documentos, corpo pagina |
| `#f7fafc` | `#1a365d` | 11.9:1 | Cards, seccoes alternadas |
### Combinacoes de Texto (Corpo)
| Fundo | Texto | Racio | Nivel WCAG |
|-------|-------|-------|-----------|
| `#ffffff` | `#4a5568` | 7.0:1 | AAA |
| `#f7fafc` | `#4a5568` | 6.6:1 | AAA |
| `#ffffff` | `#2d3748` | 10.7:1 | AAA |
| `#1a365d` | `#f7fafc` | 12.0:1 | AAA |
### Combinacoes Proibidas
| Fundo | Texto | Motivo |
|-------|-------|--------|
| `#dd6b20` | `#ffffff` | Contraste insuficiente para texto pequeno (3.1:1) |
| `#2b6cb0` | `#1a365d` | Contraste insuficiente entre tons de azul (2.2:1) |
| `#4a5568` | `#2b6cb0` | Baixo contraste em textos de corpo (2.8:1) |
| Qualquer cor | `#a0aec0` | Gray 400 nunca como texto (max 2.9:1 sobre branco) |
---
## Paleta por Contexto de Produto
### Dashboard / Aplicacao Web
```
Sidebar: fundo #1a365d, icones #f7fafc (inactivo), #dd6b20 (activo)
Top bar: fundo #ffffff, borda inferior #e2e8f0
Conteudo: fundo #f7fafc
Cards: fundo #ffffff, sombra --shadow-sm
Tabelas: linhas alternas #f7fafc / #ffffff
Botao primario: #dd6b20 (fundo), #ffffff (texto)
Botao secundario: #2b6cb0 (borda e texto), transparente (fundo)
Botao ghost: #4a5568 (texto), hover #f7fafc (fundo)
Links inline: #2b6cb0, hover #1a365d
```
### Apresentacoes (Slides)
```
Slide escuro (capa, divider): fundo #1a365d
- Titulo: Montserrat 800, #ffffff
- Subtitulo: Montserrat 600, #f7fafc
- Acento barra: #dd6b20
- Logótipo: variante clara
Slide claro (conteudo): fundo #ffffff
- Titulo: Montserrat 700, #1a365d
- Corpo: Open Sans 400, #4a5568
- Highlight box: fundo #f7fafc, borda esquerda #dd6b20 4px
- Numero/stat: Montserrat 800, #dd6b20 ou #2b6cb0
Slide citacao: fundo #f7fafc
- Aspas: #dd6b20
- Texto citacao: Montserrat 600, #1a365d
- Atribuicao: Open Sans 400, #4a5568
```
### Email Marketing
```
Wrapper: fundo #f7fafc
Container: fundo #ffffff, max-width 600px
Pre-header (top bar): fundo #1a365d, altura 4px ou bloco com logótipo
Header: fundo #1a365d, logótipo clara, padding 32px
Titulo: Montserrat 700, #ffffff, 28px
Body: fundo #ffffff, padding 32px
H2: Montserrat 600, #1a365d, 22px
Paragrafo: Open Sans 400, #4a5568, 16px, line-height 1.6
Link inline: #2b6cb0
CTA block: centrado, botao #dd6b20, texto #ffffff, border-radius 4px, padding 14px 28px
Divisor: border-top 1px solid #e2e8f0
Footer: fundo #f7fafc, texto #718096, 13px, links #4a5568
```
### Social Media
```
Post Instagram (1080x1080):
Opcao A (escuro): fundo #1a365d, titulo #ffffff, acento #dd6b20
Opcao B (claro): fundo #ffffff, titulo #1a365d, detalhe #dd6b20
Borda/frame: strip #dd6b20 (8-12px) em baixo ou em cima
Logo: canto inferior direito, variante adequada ao fundo
Story Instagram (1080x1920):
Gradiente vertical: #1a365d (topo) -> #2b6cb0 (base)
Texto: #ffffff
CTA button area: #dd6b20
LinkedIn Banner (1584x396):
Fundo: #1a365d ou fotografia com overlay #1a365d 60%
Texto: #ffffff (titulo), #f7fafc (sub)
Acento: strip ou elemento #dd6b20
```
### Documentos PDF / Propostas
```
Capa: fundo #1a365d
Logo: variante clara, centrado no topo
Titulo: Montserrat 800, #ffffff, 36px
Subtitulo: Montserrat 400, #f7fafc, 18px
Data/ref: Open Sans 400, #a0aec0, 14px, em baixo
Paginas internas:
Cabecalho: altura 48px, fundo #1a365d, logótipo pequena (variante clara), numero de pagina
Titulo capitulo: Montserrat 700, #1a365d, 22px, fundo #f7fafc, padding 12px, borda esquerda #dd6b20 4px
Corpo: Open Sans 400, #4a5568, 11pt, line-height 1.6
Callout/destaque: fundo #f7fafc, borda #dd6b20, icone #dd6b20
Tabelas: header fundo #1a365d texto #ffffff; linhas alternas #f7fafc / #ffffff
Rodape: borda topo #e2e8f0, texto #718096, 9pt
```
---
## Gradientes Aprovados
| Nome | Valor CSS | Uso |
|------|-----------|-----|
| Hero primario | `linear-gradient(135deg, #1a365d 0%, #2b6cb0 100%)` | Heroi web, fundo apresentacao |
| Acento | `linear-gradient(135deg, #dd6b20 0%, #f6ad55 100%)` | Banners promocionais |
| Escuro suave | `linear-gradient(180deg, #1a365d 0%, #2d3748 100%)` | Sidebars, overlays |
| Claro | `linear-gradient(180deg, #ffffff 0%, #f7fafc 100%)` | Seccoes de transicao |
> Nunca usar gradientes em texto (excecto como elemento decorativo com contraste garantido).
> Maximo 2 gradientes por composicao visual.
---
## Cores de Estado e Feedback
| Estado | Cor | Hex | Uso |
|--------|-----|-----|-----|
| Sucesso | Verde | `#38a169` | Confirmacoes, checkmarks, alertas positivos |
| Aviso | Amarelo | `#d69e2e` | Alertas de atencao, pendentes |
| Erro | Vermelho | `#e53e3e` | Erros, validacoes negativas |
| Informacao | Azul Medio | `#2b6cb0` | Mensagens informativas, tooltips |
> Cores de estado nao fazem parte da identidade visual principal.
> Usar apenas para feedback de interface, nunca como cor de marca.
---
*Referencia de paletas v1.0.0 | 2026-03-10 | Descomplicar®*
*Fonte principal: `brand-guidelines/SKILL.md`*
design-media/skills/brand-guidelines/references/descomplicar-theme.md
+94 -159
View File
@@ -1,188 +1,123 @@
---
name: "Descomplicar Digital"
description: "Professional technology consulting theme with warm accents"
version: "1.0.0"
updated: "2026-03-10"
name: "Descomplicar"
description: "Tokens da marca Descomplicar® — espelho legível por máquina do DESIGN.md no Open Design"
version: "2.0.0"
updated: "2026-07-22"
source: "~/workspace/open-design/design-systems/descomplicar/DESIGN.md"
---
# Tema Descomplicar Digital
# Tokens — Descomplicar®
Tema oficial Descomplicar® para uso em apresentações, relatórios, designs e qualquer material de comunicação.
> **Fonte de verdade:** `~/workspace/open-design/design-systems/descomplicar/DESIGN.md`
> Este ficheiro é um espelho para consumo automático (geradores, templates, scripts).
> Se divergir do `DESIGN.md`, o `DESIGN.md` ganha e este ficheiro deve ser corrigido.
>
> **Para marcas de clientes**, não usar estes valores — ler o `DESIGN.md` da marca respectiva
> em `design-systems/<slug-do-cliente>/`.
---
## Paleta de Cores
## Cores
```yaml
colors:
primary: "#1a365d" # Azul escuro — headers, fundos principais
secondary: "#2b6cb0" # Azul médio — links, sub-headers
accent: "#dd6b20" # Laranja — CTAs, destaques, números
background: "#ffffff" # Branco — fundo principal
surface: "#f7fafc" # Cinza muito claro — secções alternadas
text_primary: "#2d3748" # Cinza escuro — texto corpo
text_secondary: "#4a5568" # Cinza médio — subtítulos, legendas
border: "#e2e8f0" # Cinza claro — bordas, separadores
success: "#38a169" # Verde — confirmações
warning: "#d69e2e" # Amarelo — avisos
error: "#e53e3e" # Vermelho — erros
primary: "#cc8d00" # Dourado — CTAs, destaques, ícones, bordas activas
primary_light: "#f2d9a2" # Fundos secundários, hover suave, tags (nunca texto)
surface: "#ffffff" # Fundo de página, cards, modais
surface_alt: "#f8f8f8" # Secções alternadas, blocos de código
text: "#000000" # Headlines, corpo principal
text_muted: "#6e6e6e" # Subtítulos, metadados, placeholders
border: "#e5e5e5" # Divisórias, bordas de card
danger: "#dc2626" # Erros, alertas críticos
success: "#16a34a" # Confirmações
```
### Referência Visual
| Token | Hex | Uso |
|-------|-----|-----|
| `primary` | `#1a365d` | Headers H1/H2, fundos de navegação, capa de apresentação |
| `secondary` | `#2b6cb0` | Links, H3/H4, badges, ícones activos |
| `accent` | `#dd6b20` | Botões CTA, números em destaque, linhas de separação principais |
| `background` | `#ffffff` | Fundo padrão de slides e páginas |
| `surface` | `#f7fafc` | Slides alternados, tabelas linha par, painéis laterais |
| `text_primary` | `#2d3748` | Corpo de texto, parágrafos, listas |
| `text_secondary` | `#4a5568` | Subtítulos, legendas, texto auxiliar |
| `border` | `#e2e8f0` | Bordas de tabela, separadores horizontais, cards |
| `success` | `#38a169` | Confirmações, métricas positivas, status "concluído" |
| `warning` | `#d69e2e` | Avisos, métricas de atenção, status "em risco" |
| `error` | `#e53e3e` | Erros, métricas negativas, status "crítico" |
---
**Regras:** dourado é o único acento cromático; máximo 3 cores por visual; fundos grandes em
`surface` ou `surface_alt`; CTA com fundo dourado e texto preto; nunca texto branco sobre dourado.
## Tipografia
```yaml
fonts:
heading: "Montserrat"
heading_weight: "700, 800"
heading_fallback: "Arial, sans-serif"
body: "Open Sans"
body_weight: "400, 600"
body_fallback: "Helvetica, sans-serif"
code: "JetBrains Mono"
code_fallback: "Consolas, monospace"
display: "Montserrat"
display_fallback: "Poppins, system-ui, sans-serif"
display_weights: [700, 800]
body: "Inter"
body_fallback: "Open Sans, system-ui, sans-serif"
body_weights: [400, 500, 600]
mono: "JetBrains Mono"
mono_fallback: "IBM Plex Mono, monospace"
mono_weights: [400]
scale:
text_5xl: { size: 48, weight: 800, line_height: 1.1 } # Hero headline
text_4xl: { size: 36, weight: 700, line_height: 1.15 } # H1
text_3xl: { size: 30, weight: 700, line_height: 1.2 } # H2
text_2xl: { size: 24, weight: 700, line_height: 1.3 } # H3
text_xl: { size: 20, weight: 600, line_height: 1.4 } # H4, título de card
text_lg: { size: 18, weight: 500, line_height: 1.5 } # Parágrafo de entrada
text_base:{ size: 16, weight: 400, line_height: 1.6 } # Corpo
text_sm: { size: 14, weight: 400, line_height: 1.5 } # Legendas, UI
text_xs: { size: 12, weight: 500, line_height: 1.4 } # Tags, badges
```
### Hierarquia Tipográfica
| Nível | Fonte | Peso | Tamanho (slides) | Tamanho (docs) |
|-------|-------|------|-----------------|----------------|
| H1 — Título principal | Montserrat | 800 | 40-48px | 32px |
| H2 — Título secção | Montserrat | 700 | 28-36px | 24px |
| H3 — Subtítulo | Montserrat | 700 | 22-26px | 20px |
| H4 — Label | Open Sans | 600 | 18-20px | 16px |
| Corpo | Open Sans | 400 | 16-18px | 14-16px |
| Caption | Open Sans | 400 | 12-14px | 12px |
| Código | JetBrains Mono | 400 | 14-16px | 13px |
### Google Fonts — Import
```css
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Open+Sans:wght@400;600&family=JetBrains+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono&display=swap');
```
---
## Regras de Uso
## Espaçamento, grelha e raios
```yaml
usage_notes:
- Usar laranja com moderação (apenas CTAs e destaques-chave)
- Azul escuro para headers e elementos de navegação
- Fundos alternados branco/cinza para secções longas
- Nunca usar mais de 3 cores numa slide
- Manter contraste WCAG AA em todos os textos
spacing: # base 4px
space_1: 4
space_2: 8
space_3: 12
space_4: 16
space_6: 24
space_8: 32
space_12: 48
space_16: 64
space_24: 96
grid:
columns: 12
gutter: 24
max_width: 1280 # conteúdo geral
max_width_article: 960 # artigos
max_width_prose: 760 # texto corrido (line-height 1.7)
padding_x: { mobile: 16, tablet: 32, desktop: 48 }
breakpoints:
mobile: "<=768"
tablet: "769-1024"
desktop: ">1024"
radius:
sm: 4 # inputs, badges
md: 8 # cards, botões
lg: 12 # modais
full: 9999 # pills, avatares
```
### Regras Expandidas
## Movimento
**Cores**
- O laranja (`accent`) é reservado para no máximo 1-2 elementos por slide/página
- Nunca usar `primary` e `accent` em simultâneo em texto — garante legibilidade
- Fundo `surface` em slides alternados cria ritmo visual sem poluição
- Combinação permitida em texto: `primary` fundo + `background` texto, ou `background` fundo + `primary` texto
**Tipografia**
- Nunca misturar Montserrat com outra fonte de títulos no mesmo documento
- Open Sans é a única fonte de corpo permitida
- Código inline e blocos de código: sempre JetBrains Mono
- Não usar itálico em títulos — usar peso (bold) para ênfase
**Contraste WCAG AA**
- `text_primary` (#2d3748) sobre `background` (#ffffff): rácio 12.6:1 — aprovado
- `text_secondary` (#4a5568) sobre `background` (#ffffff): rácio 7.4:1 — aprovado
- `accent` (#dd6b20) sobre `background` (#ffffff): rácio 3.8:1 — aprovado para texto grande (>18px bold)
- `background` (#ffffff) sobre `primary` (#1a365d): rácio 12.6:1 — aprovado
---
## Aplicação em Slides
### Layout Tipo Capa
```
[Fundo: primary #1a365d]
[Logo Descomplicar — branco, topo esquerdo]
[H1: Montserrat 800, branco]
[H2: Montserrat 700, accent #dd6b20]
[Rodapé: Open Sans 400, text_secondary, separador border]
```yaml
motion:
micro: 150 # hover, focus (ms)
transition: 250 # mudanças de estado (ms)
page_fade: 200 # transições de página (ms)
easing_in: "ease-out"
easing_both: "ease-in-out"
card_hover: "translateY(-2px) + sombra 0 4px 16px rgba(0,0,0,0.1)"
proibido: ["parallax", "auto-play", "animações de entrada elaboradas"]
```
### Layout Tipo Conteúdo
## Acessibilidade
```yaml
contrast:
preto_sobre_branco: 21.0 # AAA
preto_sobre_dourado: 7.4 # AAA
dourado_sobre_preto: 7.4 # AAA
muted_sobre_branco: 5.1 # AA
branco_sobre_dourado: 2.9 # FALHA — proibido
minimo_corpo: 4.5 # AA
```
[Fundo: background #ffffff]
[Header barra: primary #1a365d, 8px altura]
[H2: primary #1a365d, Montserrat 700]
[Corpo: text_primary #2d3748, Open Sans 400]
[Sidebar ou destaque: surface #f7fafc]
[CTA ou número chave: accent #dd6b20, Montserrat 800]
```
### Layout Tipo Dados / Métricas
```
[Fundo alternado: surface #f7fafc]
[Número grande: accent #dd6b20, Montserrat 800, 60-80px]
[Label: text_secondary #4a5568, Open Sans 600, 14px]
[Ícone: secondary #2b6cb0]
```
---
## Aplicação em HTML (Desk CRM / Relatórios)
```css
:root {
--color-primary: #1a365d;
--color-secondary: #2b6cb0;
--color-accent: #dd6b20;
--color-background: #ffffff;
--color-surface: #f7fafc;
--color-text-primary: #2d3748;
--color-text-secondary: #4a5568;
--color-border: #e2e8f0;
--color-success: #38a169;
--color-warning: #d69e2e;
--color-error: #e53e3e;
--font-heading: 'Montserrat', Arial, sans-serif;
--font-body: 'Open Sans', Helvetica, sans-serif;
--font-code: 'JetBrains Mono', Consolas, monospace;
}
h1, h2 { font-family: var(--font-heading); font-weight: 800; color: var(--color-primary); }
h3, h4 { font-family: var(--font-heading); font-weight: 700; color: var(--color-secondary); }
p, li { font-family: var(--font-body); color: var(--color-text-primary); }
code { font-family: var(--font-code); }
.accent { color: var(--color-accent); }
.surface { background: var(--color-surface); }
```
---
## Compatibilidade com /design
Este tema é carregado automaticamente quando se usa `--brand descomplicar` no skill `/design`.
**Pack JSON:** `/media/ealmeida/Dados/Hub/04-Recursos/Design/brands/descomplicar.json`
---
*Tema v1.0.0 | 2026-03-10 | Descomplicar®*
design-media/skills/brand-guidelines/references/design-systems-multimarca.md
+89
View File
@@ -0,0 +1,89 @@
# Gestão de Design Systems Multi-Marca no Open Design
Referência operacional para criar e manter a identidade visual de **qualquer marca** — a
Descomplicar® e cada cliente — dentro do Open Design.
> Substituiu `color-palettes.md` em 22-07-2026. Esse ficheiro continha escalas de cor derivadas
> de uma paleta incorrecta (azul/laranja) que nunca foi a identidade da Descomplicar.
> Escalas de cor não se inventam aqui — vivem no `DESIGN.md` de cada marca.
---
## Onde vivem
```
~/workspace/open-design/design-systems/
descomplicar/DESIGN.md # a nossa marca
<slug-cliente>/DESIGN.md # uma pasta por cliente
```
O Open Design traz ainda mais de 140 design systems de referência instalados como plugins
(`design-system-apple`, `design-system-swiss`, `design-system-bento`, …). Servem de **referência
e ponto de partida** — nunca se entrega material de cliente com a identidade de outra marca.
---
## Criar o design system de um cliente
**1. Verificar duplicados** — procurar a pasta do cliente em `design-systems/`. Se já existir,
usar essa. Nunca criar um segundo design system para a mesma marca.
**2. Recolher material real** — site do cliente, manual de marca, logótipos, materiais impressos.
Sem material não há extracção: a identidade de um cliente **nunca se inventa**.
**3. Extrair** — skill `brand-extract` do Open Design sobre o site ou os ficheiros fornecidos.
Devolve cor, tipografia e padrões observados.
**4. Estruturar** — skill `theme-factory` ou redacção directa do `DESIGN.md`, seguindo a mesma
estrutura do da Descomplicar:
| Secção | Conteúdo |
|--------|----------|
| 1. Tema e atmosfera | Categoria, estilo visual, postura cromática, mood, acabamento |
| 2. Cor | Tokens com hex e uso; regras de aplicação |
| 3. Tipografia | Famílias, pesos, escala com tamanho/peso/line-height |
| 4. Espaçamento e grelha | Escala base, colunas, gutter, max-width, breakpoints, raios |
| 5. Layout e composição | Hierarquia, padrões de layout frequentes |
| 6. Componentes | Botões, badges, cards, inputs, navbar, rodapé |
| 7. Movimento | Durações, easing, o que é proibido |
| 8. Voz e marca | Tom, princípios de copy, exemplos certos e errados |
| 9. Anti-padrões | Lista explícita do que nunca fazer |
**5. Validar com o cliente** antes de tornar normativo. Um `DESIGN.md` por aprovar não deve
gerar material final.
**6. Registar** — anotar a marca e a origem do material no projecto ou tarefa correspondente.
---
## Aplicar numa produção
```
create_project(name: "<projecto>", designSystem: "<slug-da-marca>")
```
- Um projecto do Open Design serve **uma marca só**.
- Ecossistemas do mesmo cliente (landing, dashboard, app, deck) ficam **no mesmo projecto**,
para herdarem o mesmo `DESIGN.md` sem deriva entre artefactos.
- Marcas diferentes nunca partilham projecto.
---
## Manter
- Alterações de identidade fazem-se **no `DESIGN.md`** e só depois se propagam para espelhos
(skill `brand-guidelines`, `descomplicar-theme.md`, materiais no Hub).
- Ao detectar divergência entre um espelho e o `DESIGN.md`, corrigir o espelho — nunca o inverso.
- Rebranding de cliente: actualizar o `DESIGN.md` e regenerar os artefactos afectados, em vez de
corrigir peça a peça.
---
## Acessibilidade — verificação obrigatória
Independentemente da marca, validar antes de entregar:
- Texto de corpo com contraste mínimo AA (4.5:1); títulos grandes 3:1.
- Nenhum par de cores da marca usado abaixo do mínimo, mesmo que o cliente o use hoje —
quando o material de origem falha contraste, sinalizar ao cliente em vez de replicar o erro.
- Estados hover, focus e disabled explícitos em todos os elementos interactivos.