brand-guidelines: alinhar com o Open Design e tornar multi-marca
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:
Claude Opus 4.8
@@ -1,66 +1,113 @@
|
|||||||
---
|
---
|
||||||
name: brand-guidelines
|
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,
|
Esta skill serve **qualquer marca** — a Descomplicar® e cada cliente. A Descomplicar é apenas
|
||||||
design e desenvolvimento.
|
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
|
## Identidade da Marca
|
||||||
|
|
||||||
**Nome oficial:** Descomplicar®
|
**Nome oficial:** Descomplicar®
|
||||||
**Slogan:** Crescimento Digital
|
|
||||||
**Website:** descomplicar.pt
|
**Website:** descomplicar.pt
|
||||||
**Tom:** Profissional mas acessivel, tecnologico sem ser frio
|
**Categoria:** agência de aceleração digital portuguesa — artigos, podcast semanal e automações de IA
|
||||||
**Valores:** Simplicidade, transparencia, resultados mensuraveis
|
**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.
|
> A marca registada (®) é obrigatória na primeira ocorrência em qualquer documento ou comunicação.
|
||||||
> Nas ocorrencias seguintes, pode usar-se apenas "Descomplicar".
|
> Nas ocorrências seguintes, pode usar-se apenas "Descomplicar".
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Paleta de Cores Principal
|
## Paleta de Cores
|
||||||
|
|
||||||
| Nome | Hex | RGB | Uso |
|
| Token | Hex | Uso |
|
||||||
|------|-----|-----|-----|
|
|-------|-----|-----|
|
||||||
| Azul Escuro | `#1a365d` | 26, 54, 93 | Texto principal, fundos escuros, cabecalhos |
|
| Primary (Dourado) | `#cc8d00` | CTAs, faixas de destaque, ícones, bordas activas, badges |
|
||||||
| Azul Medio | `#2b6cb0` | 43, 108, 176 | Links, acentos, botoes secundarios |
|
| Primary Light | `#f2d9a2` | Fundos secundários, hover suave, tags — **nunca para texto** |
|
||||||
| Laranja | `#dd6b20` | 221, 107, 32 | CTA, destaques, elementos de accao |
|
| Surface | `#ffffff` | Fundo de página, cards, modais |
|
||||||
| Branco | `#ffffff` | 255, 255, 255 | Fundos claros, texto sobre escuro |
|
| Text | `#000000` | Headlines, corpo principal, labels importantes |
|
||||||
| Cinza Claro | `#f7fafc` | 247, 250, 252 | Fundos secundarios, secoes alternadas |
|
| Text Muted | `#6e6e6e` | Subtítulos, metadados, placeholders |
|
||||||
| Cinza Texto | `#4a5568` | 74, 85, 104 | Texto de corpo, descricoes |
|
| 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`
|
**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`).
|
||||||
## CSS Variables (Web)
|
- CTA principal: fundo dourado com texto preto.
|
||||||
|
- A secção de maior destaque usa fundo preto, texto branco e acento dourado.
|
||||||
|
|
||||||
```css
|
```css
|
||||||
:root {
|
:root {
|
||||||
/* Cores principais */
|
--color-primary: #cc8d00;
|
||||||
--color-primary: #1a365d;
|
--color-primary-light: #f2d9a2;
|
||||||
--color-secondary: #2b6cb0;
|
--color-surface: #ffffff;
|
||||||
--color-accent: #dd6b20;
|
--color-surface-alt: #f8f8f8;
|
||||||
|
--color-text: #000000;
|
||||||
/* Neutros */
|
--color-text-muted: #6e6e6e;
|
||||||
--color-white: #ffffff;
|
--color-border: #e5e5e5;
|
||||||
--color-bg-light: #f7fafc;
|
--color-danger: #dc2626;
|
||||||
--color-text-body: #4a5568;
|
--color-success: #16a34a;
|
||||||
--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;
|
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -68,254 +115,183 @@ Paleta completa com variacoes de contexto: `references/color-palettes.md`
|
|||||||
|
|
||||||
## Tipografia
|
## 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 |
|
### Escala
|
||||||
|----------|---------|------|--------------|
|
|
||||||
| 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 |
|
|
||||||
|
|
||||||
### 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
|
```css
|
||||||
:root {
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono&display=swap');
|
||||||
--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;
|
|
||||||
}
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Fallbacks de Sistema
|
---
|
||||||
|
|
||||||
- **Montserrat** indisponivel: `'Arial Black', 'Impact', sans-serif`
|
## Espaçamento, Grelha e Raios
|
||||||
- **Open Sans** indisponivel: `'Helvetica Neue', Arial, sans-serif`
|
|
||||||
- **JetBrains Mono** indisponivel: `'Fira Code', 'Courier New', monospace`
|
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
|
## Logótipo
|
||||||
|
|
||||||
### Regras de Uso
|
| Regra | Descrição |
|
||||||
|
|
||||||
| Regra | Descricao |
|
|
||||||
|-------|-----------|
|
|-------|-----------|
|
||||||
| Espaco minimo | Margem de pelo menos 2x a altura da letra "D" em todos os lados |
|
| Espaço mínimo | Margem de pelo menos 2x a altura da letra "D" em todos os lados |
|
||||||
| Tamanho minimo | 120px de largura em digital; 30mm em impressao |
|
| Tamanho mínimo | 120px de largura em digital; 30mm em impressão |
|
||||||
| Fundo permitido | Branco `#ffffff`, Azul Escuro `#1a365d`, Cinza Claro `#f7fafc` |
|
| Fundos permitidos | Branco `#ffffff`, preto `#000000`, cinza claro `#f8f8f8` |
|
||||||
| Fundo proibido | Qualquer fundo com baixo contraste, fotografias sem overlay |
|
| Fundos proibidos | Baixo contraste, fotografias sem overlay |
|
||||||
| Distorcao | Nunca esticar, rodar ou alterar proporcoes |
|
| Proibido | Esticar, rodar, alterar proporções, alterar cores, sobrepor texto |
|
||||||
| Cores proibidas | Nunca alterar as cores do logótipo original |
|
|
||||||
| Texto junto | Nunca sobrepor texto ao logótipo |
|
|
||||||
|
|
||||||
### Variantes Disponiveis
|
**Variantes:** principal (horizontal), compacta, monocromática escura, monocromática clara, ícone isolado (favicon, avatar).
|
||||||
|
|
||||||
| Variante | Quando usar |
|
**Ficheiros:** `Hub/04-Recursos/Design/brands/descomplicar/`
|
||||||
|----------|-------------|
|
|
||||||
| 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
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 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.
|
||||||
|
|
||||||
```
|
**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`.
|
||||||
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
|
|
||||||
```
|
|
||||||
|
|
||||||
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`.
|
||||||
|
|
||||||
```
|
**Redes sociais** — Fundo preto ou branco, elemento de marca em dourado, texto sem emojis.
|
||||||
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
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Tom de Comunicacao
|
## Tom de Comunicação
|
||||||
|
|
||||||
### Principios
|
**Tom:** profissional mas acessível, directo, orientado à acção, confiante sem arrogância.
|
||||||
|
|
||||||
| Principio | Descricao |
|
**Princípios de copy:**
|
||||||
|-----------|-----------|
|
- PT-PT estrito — "utilizador" não "usuário", "transferir" não "baixar", "ecrã" não "tela", "equipa" não "time".
|
||||||
| Claro e directo | Frases curtas, vocabulario acessivel, sem jargao desnecessario |
|
- Frases curtas, verbo no início nos CTAs: "Saber mais", "Ver guia", "Falar connosco".
|
||||||
| Confiante mas humilde | Mostramos resultados, nao promessas vazias |
|
- Títulos assertivos, sem interrogações desnecessárias.
|
||||||
| Tecnico sem ser frio | Tecnologia ao servico das pessoas, nao o contrario |
|
- Dados concretos: "400+ artigos", não "muitos artigos".
|
||||||
| Orientado a resultados | Sempre ligar accoes a beneficios mensuravelis |
|
- Sem emojis e sem exclamações excessivas em qualquer contexto de marca.
|
||||||
| Em portugues correcto | PT-PT sempre, sem brasileirismos, sem calao |
|
|
||||||
|
|
||||||
### 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 |
|
**CTAs correctos:** "Ver todos os guias", "Pedir auditoria gratuita", "Subscrever newsletter".
|
||||||
|------|--------|
|
**CTAs incorrectos:** "Clique aqui!", "Saiba Mais!!!", qualquer CTA com emoji.
|
||||||
| 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.
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Iconografia e Imagens
|
## 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
|
**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.
|
||||||
- **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
|
**Ilustrações e gráficos:** flat, linhas limpas, paleta restrita à marca; destaques a dourado.
|
||||||
|
|
||||||
- **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);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Acessibilidade
|
## Acessibilidade
|
||||||
|
|
||||||
| Par de cores | Racio contraste | Nivel WCAG |
|
| Par de cores | Rácio | Nível |
|
||||||
|-------------|-----------------|------------|
|
|--------------|-------|-------|
|
||||||
| Branco sobre Azul Escuro | 12.6:1 | AAA |
|
| Preto sobre branco | 21:1 | AAA |
|
||||||
| Branco sobre Azul Medio | 5.1:1 | AA |
|
| Preto sobre dourado `#cc8d00` | ~7.4:1 | AAA |
|
||||||
| Branco sobre Laranja | 3.1:1 | AA (texto grande) |
|
| Dourado `#cc8d00` sobre preto | ~7.4:1 | AAA |
|
||||||
| Cinza Texto sobre Branco | 7.0:1 | AAA |
|
| Text Muted `#6e6e6e` sobre branco | ~5.1:1 | AA |
|
||||||
| Azul Escuro sobre Cinza Claro | 11.9:1 | AAA |
|
| **Branco sobre dourado** | **~2.9:1** | **falha — proibido** |
|
||||||
|
|
||||||
> Texto de corpo (abaixo de 18px normal ou 14px bold) requer minimo AA (4.5:1).
|
Texto de corpo requer no mínimo AA (4.5:1). Todos os botões precisam de estados hover, focus e disabled explícitos.
|
||||||
> Nunca usar Laranja como fundo de texto de corpo.
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Checklist Conformidade de Marca
|
## Anti-padrões (proibido)
|
||||||
|
|
||||||
- [ ] Logótipo com espaco de respiro correcto
|
- Gradientes multicolor ou agressivos em elementos de marca
|
||||||
- [ ] Apenas cores da paleta oficial
|
- Mais de 3 cores simultâneas num visual
|
||||||
- [ ] Tipografia Montserrat (headings) e Open Sans (corpo)
|
- Stock photos genéricas
|
||||||
- [ ] Tom de comunicacao adequado ao canal
|
- Emojis em qualquer contexto de marca
|
||||||
- [ ] Marca registada (®) na primeira ocorrencia
|
- Tipografia decorativa além de Montserrat e Inter
|
||||||
- [ ] Contraste WCAG AA minimo em texto
|
- Sombras pesadas ou neumorfismo
|
||||||
- [ ] Slogan "Crescimento Digital" presente (quando relevante)
|
- Animações que distraem (rotações, bounces, pulse contínuo)
|
||||||
- [ ] Sem brasileirismos no texto
|
- Texto branco sobre dourado — contraste insuficiente
|
||||||
- [ ] Espacamento em multiplos de 4px
|
- 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®
|
## Checklist de Conformidade
|
||||||
*Paletas detalhadas por contexto: `references/color-palettes.md`*
|
|
||||||
|
- [ ] `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.
|
Registo de erros conhecidos e como evitá-los. Lido automaticamente antes de executar.
|
||||||
|
|
||||||
```jsonl
|
```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.*
|
*Adicionar nova linha após cada erro corrigido.*
|
||||||
|
|||||||
@@ -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`*
|
|
||||||
@@ -1,188 +1,123 @@
|
|||||||
---
|
---
|
||||||
name: "Descomplicar Digital"
|
name: "Descomplicar"
|
||||||
description: "Professional technology consulting theme with warm accents"
|
description: "Tokens da marca Descomplicar® — espelho legível por máquina do DESIGN.md no Open Design"
|
||||||
version: "1.0.0"
|
version: "2.0.0"
|
||||||
updated: "2026-03-10"
|
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>/`.
|
||||||
|
|
||||||
---
|
## Cores
|
||||||
|
|
||||||
## Paleta de Cores
|
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
colors:
|
colors:
|
||||||
primary: "#1a365d" # Azul escuro — headers, fundos principais
|
primary: "#cc8d00" # Dourado — CTAs, destaques, ícones, bordas activas
|
||||||
secondary: "#2b6cb0" # Azul médio — links, sub-headers
|
primary_light: "#f2d9a2" # Fundos secundários, hover suave, tags (nunca texto)
|
||||||
accent: "#dd6b20" # Laranja — CTAs, destaques, números
|
surface: "#ffffff" # Fundo de página, cards, modais
|
||||||
background: "#ffffff" # Branco — fundo principal
|
surface_alt: "#f8f8f8" # Secções alternadas, blocos de código
|
||||||
surface: "#f7fafc" # Cinza muito claro — secções alternadas
|
text: "#000000" # Headlines, corpo principal
|
||||||
text_primary: "#2d3748" # Cinza escuro — texto corpo
|
text_muted: "#6e6e6e" # Subtítulos, metadados, placeholders
|
||||||
text_secondary: "#4a5568" # Cinza médio — subtítulos, legendas
|
border: "#e5e5e5" # Divisórias, bordas de card
|
||||||
border: "#e2e8f0" # Cinza claro — bordas, separadores
|
danger: "#dc2626" # Erros, alertas críticos
|
||||||
success: "#38a169" # Verde — confirmações
|
success: "#16a34a" # Confirmações
|
||||||
warning: "#d69e2e" # Amarelo — avisos
|
|
||||||
error: "#e53e3e" # Vermelho — erros
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Referência Visual
|
**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.
|
||||||
| 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" |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Tipografia
|
## Tipografia
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
fonts:
|
fonts:
|
||||||
heading: "Montserrat"
|
display: "Montserrat"
|
||||||
heading_weight: "700, 800"
|
display_fallback: "Poppins, system-ui, sans-serif"
|
||||||
heading_fallback: "Arial, sans-serif"
|
display_weights: [700, 800]
|
||||||
body: "Open Sans"
|
body: "Inter"
|
||||||
body_weight: "400, 600"
|
body_fallback: "Open Sans, system-ui, sans-serif"
|
||||||
body_fallback: "Helvetica, sans-serif"
|
body_weights: [400, 500, 600]
|
||||||
code: "JetBrains Mono"
|
mono: "JetBrains Mono"
|
||||||
code_fallback: "Consolas, monospace"
|
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
|
```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');
|
||||||
```
|
```
|
||||||
|
|
||||||
---
|
## Espaçamento, grelha e raios
|
||||||
|
|
||||||
## Regras de Uso
|
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
usage_notes:
|
spacing: # base 4px
|
||||||
- Usar laranja com moderação (apenas CTAs e destaques-chave)
|
space_1: 4
|
||||||
- Azul escuro para headers e elementos de navegação
|
space_2: 8
|
||||||
- Fundos alternados branco/cinza para secções longas
|
space_3: 12
|
||||||
- Nunca usar mais de 3 cores numa slide
|
space_4: 16
|
||||||
- Manter contraste WCAG AA em todos os textos
|
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**
|
```yaml
|
||||||
- O laranja (`accent`) é reservado para no máximo 1-2 elementos por slide/página
|
motion:
|
||||||
- Nunca usar `primary` e `accent` em simultâneo em texto — garante legibilidade
|
micro: 150 # hover, focus (ms)
|
||||||
- Fundo `surface` em slides alternados cria ritmo visual sem poluição
|
transition: 250 # mudanças de estado (ms)
|
||||||
- Combinação permitida em texto: `primary` fundo + `background` texto, ou `background` fundo + `primary` texto
|
page_fade: 200 # transições de página (ms)
|
||||||
|
easing_in: "ease-out"
|
||||||
**Tipografia**
|
easing_both: "ease-in-out"
|
||||||
- Nunca misturar Montserrat com outra fonte de títulos no mesmo documento
|
card_hover: "translateY(-2px) + sombra 0 4px 16px rgba(0,0,0,0.1)"
|
||||||
- Open Sans é a única fonte de corpo permitida
|
proibido: ["parallax", "auto-play", "animações de entrada elaboradas"]
|
||||||
- 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]
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### 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®*
|
|
||||||
|
|||||||
@@ -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.
|
||||||
Reference in New Issue
Block a user