feat: refactor 30+ skills to Anthropic progressive disclosure pattern
- All SKILL.md files now <500 lines (avg reduction 69%) - Detailed content extracted to references/ subdirectories - Frontmatter standardised: only name + description (Anthropic standard) - New skills: brand-guidelines, spec-coauthor, report-templates, skill-creator - Design skills: anti-slop guidelines, premium-proposals reference - Removed non-standard frontmatter fields (triggers, version, author, category) Plugins affected: infraestrutura, marketing, dev-tools, crm-ops, gestao, core-tools, negocio, perfex-dev, wordpress, design-media Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -49,14 +49,6 @@ mcp__notebooklm__notebook_query notebook_id:"5be0d1a6-00f2-4cd9-b835-978cb772160
|
||||
mcp__notebooklm__notebook_query notebook_id:"9053d0e8-dd39-460b-b5ea-e67af3e9a675" query:"visual design tipografia cores"
|
||||
```
|
||||
|
||||
### Dify KB (Secundario - se NotebookLM insuficiente)
|
||||
|
||||
```
|
||||
mcp__dify-kb__dify_kb_retrieve_segments dataset:"UX e Usabilidade" query:"interface design sistemas componentes"
|
||||
mcp__dify-kb__dify_kb_retrieve_segments dataset:"Desenvolvimento de WebSites" query:"design responsivo layouts"
|
||||
mcp__dify-kb__dify_kb_retrieve_segments dataset:"Canva" query:"visual design tipografia cores"
|
||||
```
|
||||
|
||||
## System Prompt
|
||||
|
||||
### Papel
|
||||
@@ -114,11 +106,6 @@ Designer de interfaces responsavel por criar designs visuais apelativos, manter
|
||||
- **Consistency**: Mesmos patterns = menos cognitive load
|
||||
- **Feedback**: Sistema responde a accoes (loaders, confirmacoes)
|
||||
- **Simplicity**: Remover tudo que nao adiciona valor
|
||||
|
||||
## Datasets Dify (Consultar SEMPRE)
|
||||
```
|
||||
mcp__dify-kb__dify_kb_retrieve_segments dataset:"UX e Usabilidade" query:"interface design componentes acessibilidade"
|
||||
mcp__dify-kb__dify_kb_retrieve_segments dataset:"Canva" query:"design visual tipografia cores"
|
||||
```
|
||||
|
||||
## Colaboracao
|
||||
@@ -144,13 +131,11 @@ mcp__dify-kb__dify_kb_retrieve_segments dataset:"Canva" query:"design visual tip
|
||||
- **elevenlabs** - Text-to-speech, voice cloning, audio transcription
|
||||
- **vimeo** - Video management - upload, metadata, transcripts, analytics
|
||||
|
||||
### All Available (33 total)
|
||||
desk-crm-v3, moloni, context7, gitea, n8n, cwp, filesystem, ssh-unified, google-analytics, imap, outline-api, youtube-research, youtube-uploader, dify-kb, wikijs, gsc, lighthouse, mcp-time, memory-supabase, puppeteer, tavily, replicate
|
||||
### All Available (32 total)
|
||||
desk-crm-v3, moloni, context7, gitea, n8n, cwp, filesystem, ssh-unified, google-analytics, imap, outline-api, youtube-research, youtube-uploader, wikijs, gsc, lighthouse, mcp-time, memory-supabase, puppeteer, tavily, replicate
|
||||
|
||||
**Discovery:** Use ToolSearch to find specific tools.
|
||||
**Example:** `ToolSearch("ssh upload")` finds SSH upload tools.
|
||||
|
||||
|
||||
## Your Available Skills
|
||||
|
||||
### Primary Skills (Your Domain)
|
||||
@@ -175,13 +160,11 @@ desk-crm-v3, moloni, context7, gitea, n8n, cwp, filesystem, ssh-unified, google-
|
||||
- **/knowledge** - Gestão unificada de conhecimento - pesquisa inteligente com
|
||||
- **/desk** - Integração com Desk CRM via ficheiro .desk-project. Auto-det
|
||||
|
||||
### All Available (54 total)
|
||||
### All Available (53 total)
|
||||
/billing-check, /crm-ops, /ecommerce, /lead-approach, /orcamento, /saas, /content-marketing-pt, /seo-content-optimization, /social-media, /ui-ux-pro-max-repo, /crm-admin, /db-design, /elementor, /mcp-dev, /nextjs, /php-dev, /react-patterns, /woocommerce, /wp-dev, /backup-strategies, /security-audit, /server-health, /wp-performance, /wp-update, /second-brain-repo, /ads, /doc-sync, /marketing-strategy, /product, /skill-creator, /sop-creator, /calendar-manager, /delegate, /interview, /time, /today, /research, /youtube, /seo-audit, /seo-report, /archive, /metrics, /sdk
|
||||
|
||||
**Discovery:** Use the Skill tool to invoke skills.
|
||||
**Example:** `Skill("skill-name")` invokes the skill.
|
||||
|
||||
|
||||
## Your Team & Responsibilities
|
||||
|
||||
You are part of **11 SDKs** (TaskForce teams):
|
||||
@@ -195,9 +178,6 @@ You are part of **11 SDKs** (TaskForce teams):
|
||||
**Purpose:** NULL
|
||||
|
||||
**Your responsibilities in this TaskForce:**
|
||||
|
||||
- **Sistema de agentes especializados para delegacao de tarefas via Task tool com consulta automatica de datasets Dify.**: NULL
|
||||
|
||||
### TaskForce E-commerce
|
||||
|
||||
**Purpose:** NULL
|
||||
|
||||
@@ -32,8 +32,6 @@ created: '2025-01-13'
|
||||
updated: '2026-02-04'
|
||||
author: Descomplicar®
|
||||
---
|
||||
|
||||
|
||||
# Video Production Specialist Descomplicar
|
||||
|
||||
Especialista em criacao de videos programaticos usando Remotion e React para produzir intros, promos, social media content e tutoriais animados escaláveis.
|
||||
@@ -110,13 +108,6 @@ mcp__notebooklm__notebook_query notebook_id:"76647e0f-3ae2-4c00-a0a8-f457aebf565
|
||||
mcp__notebooklm__notebook_query notebook_id:"081ca512-8279-4850-b2b9-dff090267482" query:"animacao storytelling"
|
||||
```
|
||||
|
||||
### Dify KB (Secundario - se NotebookLM insuficiente)
|
||||
|
||||
```
|
||||
mcp__dify-kb__dify_kb_retrieve_segments dataset:"Marketing Digital" query:"video conteudo visual"
|
||||
mcp__dify-kb__dify_kb_retrieve_segments dataset:"Criatividade" query:"animacao storytelling"
|
||||
```
|
||||
|
||||
## Colaboracao
|
||||
- Reports to: Creative Director
|
||||
- Colabora com: Social Media Manager, Motion Designer, Copywriter
|
||||
@@ -136,13 +127,11 @@ mcp__dify-kb__dify_kb_retrieve_segments dataset:"Criatividade" query:"animacao s
|
||||
- **outline-api** - Outline documentation
|
||||
- **replicate** - AI models - imagem, vídeo, áudio, LLMs
|
||||
|
||||
### All Available (33 total)
|
||||
desk-crm-v3, moloni, context7, gitea, n8n, cwp, filesystem, ssh-unified, google-analytics, imap, dify-kb, wikijs, gsc, lighthouse, mcp-time, memory-supabase, puppeteer, mcp-mermaid, mcp-echarts, powerpoint, penpot, pixabay, pexels, tavily, magic, design-systems
|
||||
### All Available (32 total)
|
||||
desk-crm-v3, moloni, context7, gitea, n8n, cwp, filesystem, ssh-unified, google-analytics, imap, wikijs, gsc, lighthouse, mcp-time, memory-supabase, puppeteer, mcp-mermaid, mcp-echarts, powerpoint, penpot, pixabay, pexels, tavily, magic, design-systems
|
||||
|
||||
**Discovery:** Use ToolSearch to find specific tools.
|
||||
**Example:** `ToolSearch("ssh upload")` finds SSH upload tools.
|
||||
|
||||
|
||||
## Your Available Skills
|
||||
|
||||
### Primary Skills (Your Domain)
|
||||
@@ -168,7 +157,7 @@ desk-crm-v3, moloni, context7, gitea, n8n, cwp, filesystem, ssh-unified, google-
|
||||
- **/knowledge** - Gestão unificada de conhecimento - pesquisa inteligente com
|
||||
- **/desk** - Integração com Desk CRM via ficheiro .desk-project. Auto-det
|
||||
|
||||
### All Available (54 total)
|
||||
### All Available (53 total)
|
||||
/billing-check, /crm-ops, /ecommerce, /lead-approach, /orcamento, /saas, /ui-ux-pro-max-repo, /brand-voice-generator, /frontend-design, /pptx-generator, /ui-ux-pro-max, /crm-admin, /db-design, /elementor, /mcp-dev, /nextjs, /php-dev, /react-patterns, /woocommerce, /wp-dev, /backup-strategies, /security-audit, /server-health, /wp-performance, /wp-update, /second-brain-repo, /ads, /doc-sync, /marketing-strategy, /product, /skill-creator, /sop-creator, /calendar-manager, /delegate, /interview, /time, /today, /seo-audit, /seo-report, /archive, /metrics, /sdk
|
||||
|
||||
**Discovery:** Use the Skill tool to invoke skills.
|
||||
|
||||
@@ -48,15 +48,6 @@ mcp__notebooklm__notebook_query notebook_id:"5be0d1a6-00f2-4cd9-b835-978cb772160
|
||||
mcp__notebooklm__notebook_query notebook_id:"081ca512-8279-4850-b2b9-dff090267482" query:"conversao usabilidade navegacao"
|
||||
```
|
||||
|
||||
### Dify KB (Secundario - se NotebookLM insuficiente)
|
||||
|
||||
```
|
||||
mcp__dify-kb__dify_kb_retrieve_segments dataset:"Desenvolvimento de WebSites" query:"layouts design web responsivo"
|
||||
mcp__dify-kb__dify_kb_retrieve_segments dataset:"WordPress" query:"themes templates design"
|
||||
mcp__dify-kb__dify_kb_retrieve_segments dataset:"Elementor" query:"page builder design visual"
|
||||
mcp__dify-kb__dify_kb_retrieve_segments dataset:"UX e Usabilidade" query:"conversao usabilidade navegacao"
|
||||
```
|
||||
|
||||
## System Prompt
|
||||
|
||||
### Papel
|
||||
@@ -117,12 +108,6 @@ Designer web responsavel por criar layouts visualmente impactantes e funcionais,
|
||||
- **White space**: Dar espaco para respirar, nao sobrecarregar
|
||||
- **Hierarchy**: Tamanhos, cores, contraste para guiar olho
|
||||
- **Responsiveness**: Breakpoints logicos (mobile, tablet, desktop)
|
||||
|
||||
## Datasets Dify (Consultar SEMPRE)
|
||||
```
|
||||
mcp__dify-kb__dify_kb_retrieve_segments dataset:"Desenvolvimento de WebSites" query:"layouts design responsivo conversao"
|
||||
mcp__dify-kb__dify_kb_retrieve_segments dataset:"WordPress" query:"temas templates design"
|
||||
mcp__dify-kb__dify_kb_retrieve_segments dataset:"UX e Usabilidade" query:"navegacao usabilidade heuristicas"
|
||||
```
|
||||
|
||||
## Colaboracao
|
||||
@@ -148,13 +133,11 @@ mcp__dify-kb__dify_kb_retrieve_segments dataset:"UX e Usabilidade" query:"navega
|
||||
- **elevenlabs** - Text-to-speech, voice cloning, audio transcription
|
||||
- **vimeo** - Video management - upload, metadata, transcripts, analytics
|
||||
|
||||
### All Available (33 total)
|
||||
desk-crm-v3, moloni, context7, gitea, n8n, cwp, filesystem, ssh-unified, google-analytics, imap, outline-api, youtube-research, youtube-uploader, dify-kb, wikijs, gsc, lighthouse, mcp-time, memory-supabase, puppeteer, tavily, replicate
|
||||
### All Available (32 total)
|
||||
desk-crm-v3, moloni, context7, gitea, n8n, cwp, filesystem, ssh-unified, google-analytics, imap, outline-api, youtube-research, youtube-uploader, wikijs, gsc, lighthouse, mcp-time, memory-supabase, puppeteer, tavily, replicate
|
||||
|
||||
**Discovery:** Use ToolSearch to find specific tools.
|
||||
**Example:** `ToolSearch("ssh upload")` finds SSH upload tools.
|
||||
|
||||
|
||||
## Your Available Skills
|
||||
|
||||
### Primary Skills (Your Domain)
|
||||
@@ -179,13 +162,11 @@ desk-crm-v3, moloni, context7, gitea, n8n, cwp, filesystem, ssh-unified, google-
|
||||
- **/knowledge** - Gestão unificada de conhecimento - pesquisa inteligente com
|
||||
- **/desk** - Integração com Desk CRM via ficheiro .desk-project. Auto-det
|
||||
|
||||
### All Available (54 total)
|
||||
### All Available (53 total)
|
||||
/billing-check, /crm-ops, /ecommerce, /lead-approach, /orcamento, /saas, /content-marketing-pt, /seo-content-optimization, /social-media, /ui-ux-pro-max-repo, /crm-admin, /db-design, /elementor, /mcp-dev, /nextjs, /php-dev, /react-patterns, /woocommerce, /wp-dev, /backup-strategies, /security-audit, /server-health, /wp-performance, /wp-update, /second-brain-repo, /ads, /doc-sync, /marketing-strategy, /product, /skill-creator, /sop-creator, /calendar-manager, /delegate, /interview, /time, /today, /research, /youtube, /seo-audit, /seo-report, /archive, /metrics, /sdk
|
||||
|
||||
**Discovery:** Use the Skill tool to invoke skills.
|
||||
**Example:** `Skill("skill-name")` invokes the skill.
|
||||
|
||||
|
||||
## Your Team & Responsibilities
|
||||
|
||||
You are part of **7 SDKs** (TaskForce teams):
|
||||
@@ -195,9 +176,6 @@ You are part of **7 SDKs** (TaskForce teams):
|
||||
**Purpose:** NULL
|
||||
|
||||
**Your responsibilities in this TaskForce:**
|
||||
|
||||
- **Sistema de agentes especializados para delegacao de tarefas via Task tool com consulta automatica de datasets Dify.**: NULL
|
||||
|
||||
### TaskForce E-commerce
|
||||
|
||||
**Purpose:** NULL
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"description": "Knowledge sources (NotebookLM + Dify KB) for Design and Media domain",
|
||||
"description": "Knowledge sources for Design and Media domain",
|
||||
"sources": {
|
||||
"notebooklm": {
|
||||
"description": "NotebookLM - conhecimento curado profundo via Gemini 2.5 RAG (PRIMARIO)",
|
||||
@@ -10,16 +10,14 @@
|
||||
"title": "Social Media e Branding",
|
||||
"topics": [
|
||||
"canva"
|
||||
],
|
||||
"maps_from_dify": "Canva"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "081ca512-8279-4850-b2b9-dff090267482",
|
||||
"title": "UI/UX Design",
|
||||
"topics": [
|
||||
"usabilidade"
|
||||
],
|
||||
"maps_from_dify": "UX e Usabilidade"
|
||||
]
|
||||
}
|
||||
],
|
||||
"pending": [
|
||||
@@ -35,33 +33,6 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
"dify_kb": {
|
||||
"description": "Dify KB - datasets tematicos (FALLBACK)",
|
||||
"query_tool": "mcp__dify-kb__dify_kb_retrieve_segments",
|
||||
"datasets": [
|
||||
{
|
||||
"id": "7efc5db4-05b1-408a-9e41-b612188ee877",
|
||||
"name": "Canva",
|
||||
"priority": 1,
|
||||
"document_count": 24,
|
||||
"word_count": 148976
|
||||
},
|
||||
{
|
||||
"id": "e14ab89e-8910-43b6-becf-d57c78afd62d",
|
||||
"name": "UX e Usabilidade",
|
||||
"priority": 1,
|
||||
"document_count": 4,
|
||||
"word_count": 413593
|
||||
},
|
||||
{
|
||||
"id": "39818f77-8c70-4729-9b5c-6f92d3a2b418",
|
||||
"name": "Criatividade",
|
||||
"priority": 2,
|
||||
"document_count": 9,
|
||||
"word_count": 262795
|
||||
}
|
||||
]
|
||||
},
|
||||
"brand_packs": {
|
||||
"description": "Brand packs JSON para identidade visual por cliente",
|
||||
"path": "/media/ealmeida/Dados/Hub/04-Recursos/Design/brands/",
|
||||
@@ -69,8 +40,15 @@
|
||||
{
|
||||
"slug": "descomplicar",
|
||||
"name": "Descomplicar - Consultoria e Desenvolvimento",
|
||||
"colors": {"primary": "#dd7500", "secondary": "#cc8d00", "accent": "#f2d9a2"},
|
||||
"fonts": {"heading": "Nexa", "body": "Roboto"}
|
||||
"colors": {
|
||||
"primary": "#dd7500",
|
||||
"secondary": "#cc8d00",
|
||||
"accent": "#f2d9a2"
|
||||
},
|
||||
"fonts": {
|
||||
"heading": "Nexa",
|
||||
"body": "Roboto"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
318
design-media/skills/brand-guidelines/SKILL.md
Normal file
318
design-media/skills/brand-guidelines/SKILL.md
Normal file
@@ -0,0 +1,318 @@
|
||||
---
|
||||
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.
|
||||
---
|
||||
|
||||
# /brand-guidelines - Identidade Visual Descomplicar®
|
||||
|
||||
Referencia normativa da marca Descomplicar®. Aplicar em todos os materiais de comunicacao,
|
||||
design e desenvolvimento.
|
||||
|
||||
---
|
||||
|
||||
## Identidade da Marca
|
||||
|
||||
**Nome oficial:** Descomplicar®
|
||||
**Slogan:** Crescimento Digital
|
||||
**Website:** descomplicar.pt
|
||||
**Tom:** Profissional mas acessivel, tecnologico sem ser frio
|
||||
**Valores:** Simplicidade, transparencia, resultados mensuraveis
|
||||
|
||||
> A marca registada (®) e obrigatoria na primeira ocorrencia em qualquer documento ou comunicacao.
|
||||
> Nas ocorrencias seguintes, pode usar-se apenas "Descomplicar".
|
||||
|
||||
---
|
||||
|
||||
## Paleta de Cores Principal
|
||||
|
||||
| Nome | Hex | RGB | Uso |
|
||||
|------|-----|-----|-----|
|
||||
| Azul Escuro | `#1a365d` | 26, 54, 93 | Texto principal, fundos escuros, cabecalhos |
|
||||
| Azul Medio | `#2b6cb0` | 43, 108, 176 | Links, acentos, botoes secundarios |
|
||||
| Laranja | `#dd6b20` | 221, 107, 32 | CTA, destaques, elementos de accao |
|
||||
| Branco | `#ffffff` | 255, 255, 255 | Fundos claros, texto sobre escuro |
|
||||
| Cinza Claro | `#f7fafc` | 247, 250, 252 | Fundos secundarios, secoes alternadas |
|
||||
| Cinza Texto | `#4a5568` | 74, 85, 104 | Texto de corpo, descricoes |
|
||||
|
||||
Paleta completa com variacoes de contexto: `references/color-palettes.md`
|
||||
|
||||
---
|
||||
|
||||
## CSS Variables (Web)
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Cores principais */
|
||||
--color-primary: #1a365d;
|
||||
--color-secondary: #2b6cb0;
|
||||
--color-accent: #dd6b20;
|
||||
|
||||
/* Neutros */
|
||||
--color-white: #ffffff;
|
||||
--color-bg-light: #f7fafc;
|
||||
--color-text-body: #4a5568;
|
||||
--color-text-heading: #1a365d;
|
||||
|
||||
/* Estados */
|
||||
--color-primary-hover: #2a4a7f;
|
||||
--color-secondary-hover: #2c5282;
|
||||
--color-accent-hover: #c05621;
|
||||
|
||||
/* Bordas e divisores */
|
||||
--color-border: #e2e8f0;
|
||||
--color-border-light: #edf2f7;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Tipografia
|
||||
|
||||
### Hierarquia
|
||||
|
||||
| Elemento | Familia | Peso | Tamanho base |
|
||||
|----------|---------|------|--------------|
|
||||
| H1 / Titulo principal | Montserrat | Extra Bold (800) | 48px / 3rem |
|
||||
| H2 / Titulo secao | Montserrat | Bold (700) | 36px / 2.25rem |
|
||||
| H3 / Subtitulo | Montserrat | Semi Bold (600) | 24px / 1.5rem |
|
||||
| H4 / Label | Montserrat | Semi Bold (600) | 18px / 1.125rem |
|
||||
| Corpo / Paragrafo | Open Sans | Regular (400) | 16px / 1rem |
|
||||
| Destaque / Lead | Open Sans | Semi Bold (600) | 18px / 1.125rem |
|
||||
| Legenda / Caption | Open Sans | Regular (400) | 14px / 0.875rem |
|
||||
| Codigo | JetBrains Mono | Regular (400) | 14px / 0.875rem |
|
||||
|
||||
### CSS Tipografia
|
||||
|
||||
```css
|
||||
:root {
|
||||
--font-heading: 'Montserrat', 'Arial Black', sans-serif;
|
||||
--font-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
|
||||
--font-code: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
|
||||
|
||||
--line-height-heading: 1.2;
|
||||
--line-height-body: 1.6;
|
||||
--letter-spacing-heading: -0.025em;
|
||||
}
|
||||
```
|
||||
|
||||
### Fallbacks de Sistema
|
||||
|
||||
- **Montserrat** indisponivel: `'Arial Black', 'Impact', sans-serif`
|
||||
- **Open Sans** indisponivel: `'Helvetica Neue', Arial, sans-serif`
|
||||
- **JetBrains Mono** indisponivel: `'Fira Code', 'Courier New', monospace`
|
||||
|
||||
---
|
||||
|
||||
## Logótipo
|
||||
|
||||
### Regras de Uso
|
||||
|
||||
| Regra | Descricao |
|
||||
|-------|-----------|
|
||||
| Espaco minimo | Margem de pelo menos 2x a altura da letra "D" em todos os lados |
|
||||
| Tamanho minimo | 120px de largura em digital; 30mm em impressao |
|
||||
| Fundo permitido | Branco `#ffffff`, Azul Escuro `#1a365d`, Cinza Claro `#f7fafc` |
|
||||
| Fundo proibido | Qualquer fundo com baixo contraste, fotografias sem overlay |
|
||||
| Distorcao | Nunca esticar, rodar ou alterar proporcoes |
|
||||
| Cores proibidas | Nunca alterar as cores do logótipo original |
|
||||
| Texto junto | Nunca sobrepor texto ao logótipo |
|
||||
|
||||
### Variantes Disponiveis
|
||||
|
||||
| Variante | Quando usar |
|
||||
|----------|-------------|
|
||||
| Principal (horizontal) | Uso geral, cabecalhos, documentos |
|
||||
| Compacta (icone + nome vertical) | Espacos reduzidos, avatares |
|
||||
| Monocromatica escura | Documentos a preto e branco, impressao simples |
|
||||
| Monocromatica clara | Sobre fundos escuros, rodapes |
|
||||
| Icone isolado | Favicon, app icon, redes sociais (foto de perfil) |
|
||||
|
||||
### Ficheiros Logótipo
|
||||
|
||||
```
|
||||
Hub/04-Recursos/Design/brands/descomplicar/
|
||||
logo-principal.svg
|
||||
logo-compacto.svg
|
||||
logo-mono-escuro.svg
|
||||
logo-mono-claro.svg
|
||||
favicon.png
|
||||
favicon.svg
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Aplicacao por Contexto
|
||||
|
||||
### Apresentacoes e Slides
|
||||
|
||||
```
|
||||
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`
|
||||
|
||||
### Documentos e Propostas
|
||||
|
||||
```
|
||||
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
|
||||
|
||||
### Principios
|
||||
|
||||
| Principio | Descricao |
|
||||
|-----------|-----------|
|
||||
| Claro e directo | Frases curtas, vocabulario acessivel, sem jargao desnecessario |
|
||||
| Confiante mas humilde | Mostramos resultados, nao promessas vazias |
|
||||
| Tecnico sem ser frio | Tecnologia ao servico das pessoas, nao o contrario |
|
||||
| Orientado a resultados | Sempre ligar accoes a beneficios mensuravelis |
|
||||
| Em portugues correcto | PT-PT sempre, sem brasileirismos, sem calao |
|
||||
|
||||
### Vocabulario da Marca
|
||||
|
||||
| Usar | Evitar |
|
||||
|------|--------|
|
||||
| crescimento digital | growth hacking |
|
||||
| resultados mensuraveis | metricas (sem contexto) |
|
||||
| simplicidade | user-friendly (em textos publicos) |
|
||||
| parceiros / clientes | users / leads (em comunicacao externa) |
|
||||
| solucoes | produtos (quando sao servicos) |
|
||||
| equipa | time (brasileirismo) |
|
||||
|
||||
### Voz por Canal
|
||||
|
||||
- **Website / Propostas:** Formal-acessivel. Nos apresentamos, o cliente decide.
|
||||
- **Redes Sociais:** Mais conversacional, com pergunta ou convite a interaccao.
|
||||
- **Emails:** Directo e pessoal, nome do destinatario sempre que possivel.
|
||||
- **Documentacao tecnica:** Preciso e estruturado, sem ambiguidade.
|
||||
|
||||
---
|
||||
|
||||
## Iconografia e Imagens
|
||||
|
||||
### Icones
|
||||
|
||||
- **Estilo:** Linear, peso medio (1.5-2px), cantos ligeiramente arredondados
|
||||
- **Bibliotecas recomendadas:** Lucide Icons, Heroicons, Phosphor Icons
|
||||
- **Tamanhos:** 16px, 20px, 24px, 32px (escala 4px)
|
||||
- **Cor:** Herdar da cor de texto do contexto ou usar cor de acento
|
||||
|
||||
### Fotografia
|
||||
|
||||
- **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
|
||||
|
||||
| Par de cores | Racio contraste | Nivel WCAG |
|
||||
|-------------|-----------------|------------|
|
||||
| Branco sobre Azul Escuro | 12.6:1 | AAA |
|
||||
| Branco sobre Azul Medio | 5.1:1 | AA |
|
||||
| Branco sobre Laranja | 3.1:1 | AA (texto grande) |
|
||||
| Cinza Texto sobre Branco | 7.0:1 | AAA |
|
||||
| Azul Escuro sobre Cinza Claro | 11.9:1 | AAA |
|
||||
|
||||
> Texto de corpo (abaixo de 18px normal ou 14px bold) requer minimo AA (4.5:1).
|
||||
> Nunca usar Laranja como fundo de texto de corpo.
|
||||
|
||||
---
|
||||
|
||||
## Checklist Conformidade de Marca
|
||||
|
||||
- [ ] Logótipo com espaco de respiro correcto
|
||||
- [ ] Apenas cores da paleta oficial
|
||||
- [ ] Tipografia Montserrat (headings) e Open Sans (corpo)
|
||||
- [ ] Tom de comunicacao adequado ao canal
|
||||
- [ ] Marca registada (®) na primeira ocorrencia
|
||||
- [ ] Contraste WCAG AA minimo em texto
|
||||
- [ ] Slogan "Crescimento Digital" presente (quando relevante)
|
||||
- [ ] Sem brasileirismos no texto
|
||||
- [ ] Espacamento em multiplos de 4px
|
||||
|
||||
---
|
||||
|
||||
**Versao**: 1.0.0 | **Data**: 2026-03-10 | **Autor**: Descomplicar®
|
||||
*Paletas detalhadas por contexto: `references/color-palettes.md`*
|
||||
@@ -0,0 +1,227 @@
|
||||
# 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`*
|
||||
@@ -0,0 +1,188 @@
|
||||
---
|
||||
name: "Descomplicar Digital"
|
||||
description: "Professional technology consulting theme with warm accents"
|
||||
version: "1.0.0"
|
||||
updated: "2026-03-10"
|
||||
---
|
||||
|
||||
# Tema Descomplicar Digital
|
||||
|
||||
Tema oficial Descomplicar® para uso em apresentações, relatórios, designs e qualquer material de comunicação.
|
||||
|
||||
---
|
||||
|
||||
## Paleta de 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
|
||||
```
|
||||
|
||||
### 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" |
|
||||
|
||||
---
|
||||
|
||||
## 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"
|
||||
```
|
||||
|
||||
### 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');
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Regras de Uso
|
||||
|
||||
```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
|
||||
```
|
||||
|
||||
### Regras Expandidas
|
||||
|
||||
**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]
|
||||
```
|
||||
|
||||
### Layout Tipo Conteúdo
|
||||
|
||||
```
|
||||
[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®*
|
||||
@@ -1,28 +1,43 @@
|
||||
---
|
||||
name: design
|
||||
description: >
|
||||
Motor de design profissional multi-marca. Gera apresentacoes, infograficos, logos, social media, web pages e identidade visual para qualquer empresa.
|
||||
Use when user mentions "design", "criar design", "fazer apresentacao", "infografico", "logo", "social media post", "landing page", "identidade visual",
|
||||
"brand", "marca", "--brand", "proposta visual".
|
||||
triggers:
|
||||
- /design
|
||||
- design
|
||||
- criar design
|
||||
- apresentacao
|
||||
- infografico
|
||||
- social media post
|
||||
- logo
|
||||
- landing page
|
||||
- identidade visual
|
||||
version: 2.0.0
|
||||
author: Descomplicar Crescimento Digital
|
||||
category: design
|
||||
description: Motor de design profissional multi-marca. Gera apresentações, infográficos, logos, social media, web pages e identidade visual.
|
||||
---
|
||||
|
||||
# /design - Motor de Design Profissional
|
||||
|
||||
Ponto de entrada unificado para o sistema de design multi-marca. Routing automatico para o motor adequado.
|
||||
|
||||
## Contexto NotebookLM
|
||||
|
||||
ANTES de executar, consultar notebooks para contexto especializado:
|
||||
|
||||
| Notebook | ID | Consultar quando |
|
||||
|----------|-----|-----------------|
|
||||
| Tipografia e Cor para Web | f97a0d2b | Sempre |
|
||||
| UI/UX Design | 081ca512 | Para decisões de interface |
|
||||
| Design Profissional AItomatizado | b568b13b-0eed-48c9-b513-5c5b7ec0b102 | Sempre |
|
||||
|
||||
```
|
||||
mcp__notebooklm__notebook_query({
|
||||
notebook_id: "f97a0d2b-a5b3-4640-b941-3cbb184b1b81",
|
||||
query: "<adaptar ao contexto do pedido do utilizador>"
|
||||
})
|
||||
|
||||
mcp__notebooklm__notebook_query({
|
||||
notebook_id: "081ca512-8279-4850-b2b9-dff090267482",
|
||||
query: "<adaptar ao contexto de interface/UX do pedido>"
|
||||
})
|
||||
|
||||
mcp__notebooklm__notebook_query({
|
||||
notebook_id: "b568b13b-0eed-48c9-b513-5c5b7ec0b102",
|
||||
query: "<adaptar ao contexto de design profissional e automação>"
|
||||
})
|
||||
```
|
||||
|
||||
Integrar insights do NotebookLM nas recomendações e decisões.
|
||||
|
||||
---
|
||||
|
||||
## Comandos
|
||||
|
||||
| Comando | Output | Motor |
|
||||
|
||||
289
design-media/skills/design/references/premium-proposals.md
Normal file
289
design-media/skills/design/references/premium-proposals.md
Normal file
@@ -0,0 +1,289 @@
|
||||
# Referência: Propostas Premium — Design de Capas e Páginas Visuais
|
||||
|
||||
Guia prático para criar páginas visuais de impacto em propostas comerciais Descomplicar.
|
||||
Baseado na filosofia canvas-design: design-forward, cada página comunica antes de ser lida.
|
||||
|
||||
---
|
||||
|
||||
## Filosofia de Design
|
||||
|
||||
**Princípio central:** o cliente forma opinião sobre a proposta nos primeiros 3 segundos.
|
||||
Cada página deve funcionar como imagem antes de funcionar como texto.
|
||||
|
||||
| Princípio | Aplicação |
|
||||
|-----------|-----------|
|
||||
| Visual-first | Imagem/composição comunica o tema antes do texto |
|
||||
| Texto mínimo | Menos palavras, mais impacto por palavra |
|
||||
| Espaço negativo | Respiração generosa — o vazio é parte do design |
|
||||
| Tipografia como design | O tipo de letra é um elemento visual, não só legível |
|
||||
| Paleta disciplinada | Máximo 3 cores por página (+ neutros) |
|
||||
|
||||
---
|
||||
|
||||
## Paleta Descomplicar
|
||||
|
||||
```python
|
||||
# Cores base da marca — aplicar consistentemente
|
||||
PALETA = {
|
||||
"dourado": "#C9A84C", # acento principal
|
||||
"dourado_lt": "#E8D5A3", # acento suave / fundo dourado
|
||||
"preto": "#0D0D0D", # fundo principal dark
|
||||
"cinza_esc": "#1A1A1A", # fundo secundário
|
||||
"cinza_med": "#3D3D3D", # separadores
|
||||
"cinza_lt": "#F5F5F5", # fundo light / texto em dark
|
||||
"branco": "#FFFFFF", # texto em dark, fundo clean
|
||||
}
|
||||
|
||||
# Tipografia (Nexa é a fonte da marca)
|
||||
FONTES = {
|
||||
"heading": "Nexa Bold",
|
||||
"subheading":"Nexa Light",
|
||||
"corpo": "Source Sans 3",
|
||||
"detalhe": "IBM Plex Mono", # para números, códigos
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Workflow: do conceito à página
|
||||
|
||||
```
|
||||
1. BRIEFING — que secção é esta? qual a mensagem principal?
|
||||
2. COMPOSIÇÃO — escolher layout base (ver tipos abaixo)
|
||||
3. HIERARQUIA — definir 3 níveis: âncora visual / título / detalhe
|
||||
4. COR — aplicar paleta com dominante + acento
|
||||
5. TIPOGRAFIA — tamanhos com contraste forte (ex: 72pt / 14pt)
|
||||
6. REFINAMENTO — remover tudo o que não é necessário
|
||||
7. EXPORTAÇÃO — PDF vector (300dpi para imprimir, 72dpi para digital)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Tipos de Página por Secção
|
||||
|
||||
### Capa de Proposta (primeira página)
|
||||
|
||||
**Objectivo:** impressionar, identificar o cliente, criar antecipação.
|
||||
|
||||
```python
|
||||
# Composição com python-reportlab
|
||||
from reportlab.lib.pagesizes import A4
|
||||
from reportlab.pdfgen import canvas
|
||||
from reportlab.lib.colors import HexColor
|
||||
|
||||
W, H = A4 # 595 x 842 pontos
|
||||
|
||||
def criar_capa(c: canvas.Canvas, nome_cliente: str, titulo: str):
|
||||
# Fundo preto total
|
||||
c.setFillColor(HexColor("#0D0D0D"))
|
||||
c.rect(0, 0, W, H, fill=1, stroke=0)
|
||||
|
||||
# Barra dourada lateral esquerda (elemento âncora)
|
||||
c.setFillColor(HexColor("#C9A84C"))
|
||||
c.rect(0, 0, 8, H, fill=1, stroke=0)
|
||||
|
||||
# Logo Descomplicar (topo direito)
|
||||
c.drawImage("assets/logo-white.png", W - 130, H - 60, 110, 40, mask="auto")
|
||||
|
||||
# Título em grande — dois terços da página
|
||||
c.setFillColor(HexColor("#FFFFFF"))
|
||||
c.setFont("Nexa-Bold", 52)
|
||||
# Quebra em 2 linhas se necessário
|
||||
linhas = quebrar_texto(titulo, max_chars=24)
|
||||
y = H * 0.55
|
||||
for linha in linhas:
|
||||
c.drawString(48, y, linha)
|
||||
y -= 64
|
||||
|
||||
# Nome do cliente — acento dourado
|
||||
c.setFillColor(HexColor("#C9A84C"))
|
||||
c.setFont("Nexa-Light", 18)
|
||||
c.drawString(48, H * 0.35, f"Preparado para {nome_cliente}")
|
||||
|
||||
# Data — rodapé discreto
|
||||
c.setFillColor(HexColor("#3D3D3D"))
|
||||
c.setFont("SourceSans3-Regular", 10)
|
||||
c.drawString(48, 32, f"Descomplicar® · descomplicar.pt · Março 2026")
|
||||
```
|
||||
|
||||
**Composição alternativa (versão light):**
|
||||
- Fundo branco com mancha fotográfica no lado direito (60% da largura)
|
||||
- Título sobreposto à foto com overlay escuro
|
||||
- Logo em preto, barra dourada mantida
|
||||
|
||||
### Separador de Secção
|
||||
|
||||
**Objectivo:** pausar o ritmo, anunciar o tema seguinte.
|
||||
|
||||
```python
|
||||
def criar_separador(c: canvas.Canvas, numero: str, titulo_seccao: str):
|
||||
# Fundo dourado total — inversão de cor
|
||||
c.setFillColor(HexColor("#C9A84C"))
|
||||
c.rect(0, 0, W, H, fill=1, stroke=0)
|
||||
|
||||
# Número enorme em background (marca de água visual)
|
||||
c.setFillColor(HexColor("#E8D5A3")) # dourado claro
|
||||
c.setFont("Nexa-Bold", 280)
|
||||
c.drawString(-20, H * 0.1, numero) # pode sair do bounds — intencional
|
||||
|
||||
# Título da secção — preto sobre dourado
|
||||
c.setFillColor(HexColor("#0D0D0D"))
|
||||
c.setFont("Nexa-Bold", 42)
|
||||
c.drawString(48, H * 0.45, titulo_seccao)
|
||||
|
||||
# Linha divisória fina
|
||||
c.setStrokeColor(HexColor("#0D0D0D"))
|
||||
c.setLineWidth(1)
|
||||
c.line(48, H * 0.42, W - 48, H * 0.42)
|
||||
```
|
||||
|
||||
### Infográfico de Dados
|
||||
|
||||
**Objectivo:** tornar números abstractos em narrativa visual.
|
||||
|
||||
```python
|
||||
def criar_infografico_metricas(c: canvas.Canvas, metricas: list[dict]):
|
||||
"""
|
||||
metricas = [
|
||||
{"valor": "3x", "label": "Aumento de tráfego", "icone": "trend"},
|
||||
{"valor": "47%", "label": "Redução de custo por lead", "icone": "savings"},
|
||||
{"valor": "12", "label": "Palavras-chave no Top 3", "icone": "star"},
|
||||
]
|
||||
"""
|
||||
# Fundo neutro quente
|
||||
c.setFillColor(HexColor("#F5F5F5"))
|
||||
c.rect(0, 0, W, H, fill=1, stroke=0)
|
||||
|
||||
# Título da página
|
||||
c.setFillColor(HexColor("#0D0D0D"))
|
||||
c.setFont("Nexa-Bold", 32)
|
||||
c.drawString(48, H - 80, "Resultados Projectados")
|
||||
|
||||
# Grid de métricas (3 colunas)
|
||||
col_w = (W - 96) / len(metricas)
|
||||
for i, m in enumerate(metricas):
|
||||
x = 48 + i * col_w
|
||||
y_center = H * 0.5
|
||||
|
||||
# Caixa de métrica
|
||||
c.setFillColor(HexColor("#FFFFFF"))
|
||||
c.roundRect(x + 8, y_center - 80, col_w - 16, 160, 12, fill=1, stroke=0)
|
||||
|
||||
# Valor principal — grande e dourado
|
||||
c.setFillColor(HexColor("#C9A84C"))
|
||||
c.setFont("Nexa-Bold", 56)
|
||||
c.drawCentredString(x + col_w / 2, y_center + 20, m["valor"])
|
||||
|
||||
# Label — preto, pequeno
|
||||
c.setFillColor(HexColor("#3D3D3D"))
|
||||
c.setFont("SourceSans3-Regular", 11)
|
||||
c.drawCentredString(x + col_w / 2, y_center - 20, m["label"])
|
||||
```
|
||||
|
||||
### Página de Pricing Visual
|
||||
|
||||
**Objectivo:** apresentar preços sem que pareçam uma tabela de custos.
|
||||
|
||||
```python
|
||||
def criar_pricing(c: canvas.Canvas, planos: list[dict]):
|
||||
"""
|
||||
planos = [
|
||||
{"nome": "Essencial", "preco": 450, "destaque": False,
|
||||
"items": ["SEO On-page", "Relatório mensal", "2 artigos/mês"]},
|
||||
{"nome": "Crescimento", "preco": 850, "destaque": True,
|
||||
"items": ["SEO completo", "Google Ads", "4 artigos/mês", "Dashboard BI"]},
|
||||
]
|
||||
"""
|
||||
# Fundo escuro para pricing
|
||||
c.setFillColor(HexColor("#0D0D0D"))
|
||||
c.rect(0, 0, W, H, fill=1, stroke=0)
|
||||
|
||||
card_w = (W - 96 - 16 * (len(planos) - 1)) / len(planos)
|
||||
|
||||
for i, p in enumerate(planos):
|
||||
x = 48 + i * (card_w + 16)
|
||||
y_top = H * 0.75
|
||||
|
||||
if p["destaque"]:
|
||||
# Card dourado para o plano recomendado
|
||||
c.setFillColor(HexColor("#C9A84C"))
|
||||
c.roundRect(x - 4, y_top - 4, card_w + 8, H * 0.5 + 8, 16, fill=1, stroke=0)
|
||||
texto_cor = HexColor("#0D0D0D")
|
||||
else:
|
||||
c.setFillColor(HexColor("#1A1A1A"))
|
||||
c.roundRect(x, y_top, card_w, H * 0.5, 12, fill=1, stroke=0)
|
||||
texto_cor = HexColor("#FFFFFF")
|
||||
|
||||
# Nome do plano
|
||||
c.setFillColor(texto_cor)
|
||||
c.setFont("Nexa-Bold", 20)
|
||||
c.drawString(x + 20, y_top + H * 0.5 - 44, p["nome"])
|
||||
|
||||
# Preço
|
||||
c.setFont("Nexa-Bold", 48)
|
||||
c.drawString(x + 20, y_top + H * 0.5 - 100, f"{p['preco']}€")
|
||||
c.setFont("SourceSans3-Regular", 11)
|
||||
c.drawString(x + 20, y_top + H * 0.5 - 118, "/ mês + IVA")
|
||||
|
||||
# Items incluídos
|
||||
c.setFont("SourceSans3-Regular", 12)
|
||||
y_item = y_top + H * 0.5 - 150
|
||||
for item in p["items"]:
|
||||
c.drawString(x + 28, y_item, f"— {item}")
|
||||
y_item -= 22
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Ferramentas: python-reportlab vs pptxgenjs
|
||||
|
||||
| Critério | python-reportlab | pptxgenjs (Node) |
|
||||
|----------|-----------------|------------------|
|
||||
| Output | PDF nativo | PPTX (editável) |
|
||||
| Controlo | Pixel-perfect | Aproximado |
|
||||
| Fontes custom | Suporte completo | Limitado |
|
||||
| Melhor para | Proposta final PDF | Template editável pelo cliente |
|
||||
| Ambiente | Servidor dev (`/root/Dev`) | Servidor dev ou local |
|
||||
|
||||
**Recomendação:** usar reportlab para proposta final; pptxgenjs se o cliente precisar de editar.
|
||||
|
||||
```bash
|
||||
# Instalar no servidor dev
|
||||
pip install reportlab Pillow
|
||||
|
||||
# Registar fontes Nexa
|
||||
from reportlab.pdfbase import pdfmetrics
|
||||
from reportlab.pdfbase.ttfonts import TTFont
|
||||
pdfmetrics.registerFont(TTFont("Nexa-Bold", "/root/Dev/assets/fonts/Nexa-Bold.ttf"))
|
||||
pdfmetrics.registerFont(TTFont("Nexa-Light", "/root/Dev/assets/fonts/Nexa-Light.ttf"))
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Regras de Composição (resumo operacional)
|
||||
|
||||
1. **Uma mensagem por página** — se precisas de duas frases para explicar, remove uma
|
||||
2. **Âncora visual primeiro** — o olho precisa de um ponto de entrada (número grande, foto, cor)
|
||||
3. **Contraste de escala** — combinar elemento 280pt com texto 12pt (não 24pt com 18pt)
|
||||
4. **Margens generosas** — margem mínima de 48pt em A4; prefere 64pt
|
||||
5. **Rodapé discreto** — página + marca em 9pt, nunca competir com conteúdo
|
||||
6. **Máximo 3 fontes** — Nexa Bold + Nexa Light + Source Sans 3 (IBM Plex Mono opcional para dados)
|
||||
7. **Alinhamento consistente** — escolher esquerda ou centrado para o documento inteiro
|
||||
|
||||
---
|
||||
|
||||
## Checklist de Qualidade
|
||||
|
||||
- [ ] Capa com nome do cliente e data correctos
|
||||
- [ ] Logo Descomplicar presente em todas as páginas (rodapé ou canto)
|
||||
- [ ] Paleta restrita a 3 cores por página
|
||||
- [ ] Nenhuma fonte genérica (Arial, Calibri, Times)
|
||||
- [ ] Espaço negativo generoso — sem páginas "cheias"
|
||||
- [ ] Preços em EUR sem decimais desnecessários (850EUR, não 850,00EUR)
|
||||
- [ ] PDF exportado em vector (não rasterizado)
|
||||
- [ ] Tamanho final < 10MB para envio por email
|
||||
- [ ] Testar visualização em modo claro e escuro (PDF viewer)
|
||||
|
||||
---
|
||||
|
||||
*Referência: premium-proposals v1.0 | 2026-03-10 | Descomplicar®*
|
||||
Reference in New Issue
Block a user