Merge remote-tracking branch 'origin/main'
# Conflicts: # .claude-plugin/marketplace.json # .gitignore # acidaos/skills/devops/SKILL.md # acidaos/skills/docs/SKILL.md # acidaos/skills/rust-dev/SKILL.md # acidaos/skills/spoke-dev/SKILL.md # automacao/agents/automation-lead.md # automacao/agents/mcp-protocol-developer.md # automacao/agents/n8n-automation-expert.md # automacao/skills/moloni-api/SKILL.md # automacao/skills/n8n/SKILL.md # core-tools/skills/_core/SKILL.md # core-tools/skills/agent-context-injector/SKILL.md # core-tools/skills/component-generator/SKILL.md # core-tools/skills/db-maintenance-manager/SKILL.md # core-tools/skills/infrastructure-manager/SKILL.md # core-tools/skills/metrics/SKILL.md # core-tools/skills/plugin-curator/SKILL.md # core-tools/skills/plugin-manager/SKILL.md # core-tools/skills/plugin-manager/profiles.json # core-tools/skills/quality-validator/SKILL.md # core-tools/skills/relationship-manager/SKILL.md # crm-ops/.claude-plugin/plugin.json # crm-ops/CHANGELOG.md # crm-ops/agents/budget-proposal-specialist.md # crm-ops/agents/lead-approach-strategist.md # crm-ops/agents/lead-qualifier.md # crm-ops/agents/sales-manager.md # crm-ops/agents/support-specialist.md # crm-ops/skills/auto-expense/SKILL.md # crm-ops/skills/billing-check/SKILL.md # crm-ops/skills/crm-admin/SKILL.md # crm-ops/skills/crm/SKILL.md # crm-ops/skills/desk/SKILL.md # crm-ops/skills/estrategia-marca/SKILL.md # crm-ops/skills/estrategia-marca/references/metodologia-acida.md # crm-ops/skills/estrategia-marca/references/template-documento.md # crm-ops/skills/expense/SKILL.md # crm-ops/skills/invoice/SKILL.md # crm-ops/skills/orcamento/SKILL-light.md # crm-ops/skills/orcamento/SKILL.md # crm-ops/skills/proposal-deck/SKILL.md # crm-ops/skills/proposta-visual/SKILL.md # crm-ops/skills/ticket-manage/SKILL.md # crm-ops/skills/ticket-triage/SKILL.md # crm-ops/skills/ticket/SKILL.md # design-media/agents/design-critic.md # design-media/agents/design-generator.md # design-media/agents/design-lead.md # design-media/agents/design-prompt-architect.md # design-media/agents/design-researcher.md # design-media/agents/ui-designer.md # design-media/agents/video-production-specialist.md # design-media/agents/web-designer.md # design-media/skills/brand-guidelines/SKILL.md # design-media/skills/brand-guidelines/references/descomplicar-theme.md # design-media/skills/cinematic-site/SKILL.md # design-media/skills/clone-style/SKILL.md # design-media/skills/design-b2b/SKILL.md # design-media/skills/design-ecommerce/SKILL.md # design-media/skills/design-saude/SKILL.md # design-media/skills/design-solar/SKILL.md # design-media/skills/design/SKILL.md # design-media/skills/design/references/premium-proposals.md # dev-tools/agents/database-design-specialist.md # dev-tools/agents/dev-helper.md # dev-tools/agents/development-lead.md # dev-tools/agents/javascript-fullstack-specialist.md # dev-tools/agents/nextjs-specialist.md # dev-tools/agents/php-fullstack-engineer.md # dev-tools/skills/benchmark/SKILL.md # dev-tools/skills/canary/SKILL.md # dev-tools/skills/chrome/SKILL.md # dev-tools/skills/db-design/SKILL.md # dev-tools/skills/dep-audit/SKILL.md # dev-tools/skills/diagrama/SKILL.md # dev-tools/skills/docx/SKILL-light.md # dev-tools/skills/docx/SKILL.md # dev-tools/skills/docx/scripts/__init__.py # dev-tools/skills/docx/scripts/office/pack.py # dev-tools/skills/docx/scripts/office/unpack.py # dev-tools/skills/docx/scripts/office/validate.py # dev-tools/skills/nextjs/SKILL.md # dev-tools/skills/pdf/SKILL-light.md # dev-tools/skills/pdf/SKILL.md # dev-tools/skills/php-dev/SKILL.md # dev-tools/skills/prompt-refine/SKILL.md # dev-tools/skills/react-patterns/SKILL.md # dev-tools/skills/skill-creator/SKILL.md # dev-tools/skills/skill-creator/references/descomplicar-standards.md # dev-tools/skills/webapp-testing/SKILL.md # dev-tools/skills/webapp-testing/scripts/with_server.py # dev-tools/skills/xlsx/SKILL.md # dev-tools/skills/xlsx/scripts/office/pack.py # dev-tools/skills/xlsx/scripts/office/unpack.py # dev-tools/skills/xlsx/scripts/office/validate.py # dev-tools/skills/youtube-extract/SKILL.md # gestao/.claude-plugin/plugin.json # gestao/agents/analytics-insights-agent.md # gestao/agents/compliance-auditor.md # gestao/agents/project-manager.md # gestao/agents/reflect-agent.md # gestao/agents/software-project-planner.md # gestao/agents/time-management-agent.md # gestao/agents/wiki-knowledge-agent.md # gestao/skills/aiktop-tasks/SKILL.md # gestao/skills/archive/SKILL.md # gestao/skills/calendar-manager/SKILL.md # gestao/skills/cleanup-downloads/SKILL.md # gestao/skills/clip-agent/SKILL.md # gestao/skills/clip-health/SKILL.md # gestao/skills/clip-instructions/SKILL.md # gestao/skills/clip-issue/SKILL.md # gestao/skills/clip-org/SKILL.md # gestao/skills/clip-routine/SKILL.md # gestao/skills/clip-skill/SKILL.md # gestao/skills/clip-vision/SKILL.md # gestao/skills/clip/SKILL.md # gestao/skills/daily-digest/SKILL.md # gestao/skills/deep-research/SKILL.md # gestao/skills/delegate/SKILL.md # gestao/skills/doc-coauthoring/SKILL.md # gestao/skills/dual-review/SKILL.md # gestao/skills/hub-compile/SKILL.md # gestao/skills/hub-search/SKILL.md # gestao/skills/imap-triage/SKILL.md # gestao/skills/index-update/SKILL.md # gestao/skills/knowledge/SKILL.md # gestao/skills/knowledge/docs/workflow.md # gestao/skills/knowledge/references/routing-guide.md # gestao/skills/mindmap/SKILL.md # gestao/skills/monday-briefing/SKILL.md # gestao/skills/notebooklm/SKILL.md # gestao/skills/office-hours/SKILL.md # gestao/skills/onboarding/SKILL.md # gestao/skills/proc-creator/SKILL.md # gestao/skills/reflect/SKILL.md # gestao/skills/report-templates/SKILL.md # gestao/skills/report/SKILL.md # gestao/skills/research-pipeline/SKILL.md # gestao/skills/review-corrections/SKILL.md # gestao/skills/spec-coauthor/SKILL.md # gestao/skills/task-state/SKILL.md # gestao/skills/tasks-overview/SKILL.md # gestao/skills/time/SKILL.md # gestao/skills/today/SETUP_MCPS.md # gestao/skills/today/SKILL.md # gestao/skills/today/prompts/execute.md # gestao/skills/today/templates/daily-report.md # gestao/skills/validate-component/SKILL.md # gestao/skills/worklog/SKILL.md # infraestrutura/.claude-plugin/plugin.json # infraestrutura/agents/backup-specialist.md # infraestrutura/agents/cwp-server-manager.md # infraestrutura/agents/easypanel-specialist.md # infraestrutura/agents/infrastructure-orchestrator.md # infraestrutura/agents/proxmox-specialist.md # infraestrutura/agents/security-compliance-specialist.md # infraestrutura/skills/authentik/SKILL.md # infraestrutura/skills/backup-strategies/SKILL.md # infraestrutura/skills/backup-strategies/references/scripts.md # infraestrutura/skills/cwp/SKILL.md # infraestrutura/skills/easypanel-api/SKILL.md # infraestrutura/skills/easypanel-cicd/SKILL.md # infraestrutura/skills/easypanel-deploy/SKILL.md # infraestrutura/skills/easypanel-init/SKILL.md # infraestrutura/skills/easypanel-monitor/SKILL.md # infraestrutura/skills/easypanel-rollback/SKILL.md # infraestrutura/skills/easypanel-troubleshoot/SKILL.md # infraestrutura/skills/easypanel-validate/SKILL.md # infraestrutura/skills/gateway-check/SKILL.md # infraestrutura/skills/infra-check/SKILL.md # infraestrutura/skills/mcp-dev/SKILL.md # infraestrutura/skills/mcp-dev/references/best-practices.md # infraestrutura/skills/mcp-dev/references/evaluation-guide.md # infraestrutura/skills/mcp-dev/references/templates.md # infraestrutura/skills/pbs-config/SKILL.md # infraestrutura/skills/proxmox-cluster/SKILL.md # infraestrutura/skills/proxmox-ha/SKILL.md # infraestrutura/skills/proxmox-setup/SKILL.md # infraestrutura/skills/security-audit/SKILL.md # infraestrutura/skills/security-check/SKILL.md # infraestrutura/skills/server-health/SKILL.md # infraestrutura/skills/vm-migration/SKILL.md # marketing/.claude-plugin/plugin.json # marketing/CHANGELOG.md # marketing/agents/content-manager.md # marketing/agents/copywriter.md # marketing/agents/marketing-planning-expert.md # marketing/agents/ppc-specialist.md # marketing/agents/seo-specialist.md # marketing/agents/social-media-manager.md # marketing/agents/video-production-specialist.md # marketing/agents/youtube-specialist.md # marketing/skills/ads/SKILL.md # marketing/skills/content-marketing-pt/SKILL.md # marketing/skills/lead-approach/SKILL.md # marketing/skills/marketing-strategy/SKILL.md # marketing/skills/seo-audit/SKILL.md # marketing/skills/seo-audit/references/ferramentas-api.md # marketing/skills/seo-audit/references/template-relatorio-auditoria.md # marketing/skills/seo-content-optimization/SKILL.md # marketing/skills/seo-content-optimization/references/structured-data.md # marketing/skills/seo-report/SKILL.md # marketing/skills/seo-report/references/implementacao-tecnica.md # marketing/skills/seo-report/references/template-relatorio.md # marketing/skills/social-media/SKILL.md # marketing/skills/trend-signal/SKILL.md # marketing/skills/video/SKILL.md # marketing/skills/video/rules/3d.md # marketing/skills/video/rules/animations.md # marketing/skills/video/rules/assets.md # marketing/skills/video/rules/audio.md # marketing/skills/video/rules/calculate-metadata.md # marketing/skills/video/rules/can-decode.md # marketing/skills/video/rules/charts.md # marketing/skills/video/rules/compositions.md # marketing/skills/video/rules/display-captions.md # marketing/skills/video/rules/extract-frames.md # marketing/skills/video/rules/fonts.md # marketing/skills/video/rules/get-audio-duration.md # marketing/skills/video/rules/get-video-dimensions.md # marketing/skills/video/rules/get-video-duration.md # marketing/skills/video/rules/gifs.md # marketing/skills/video/rules/images.md # marketing/skills/video/rules/import-srt-captions.md # marketing/skills/video/rules/lottie.md # marketing/skills/video/rules/maps.md # marketing/skills/video/rules/measuring-dom-nodes.md # marketing/skills/video/rules/measuring-text.md # marketing/skills/video/rules/parameters.md # marketing/skills/video/rules/sequencing.md # marketing/skills/video/rules/tailwind.md # marketing/skills/video/rules/text-animations.md # marketing/skills/video/rules/timing.md # marketing/skills/video/rules/transcribe-captions.md # marketing/skills/video/rules/transitions.md # marketing/skills/video/rules/trimming.md # marketing/skills/video/rules/videos.md # marketing/skills/youtube/SKILL.md # metabase/agents/metabase-analyst.md # metabase/skills/dashboard/SKILL.md # metabase/skills/metabase/SKILL.md # metabase/skills/query/SKILL.md # negocio/agents/ecommerce-architect.md # negocio/agents/finance-manager.md # negocio/agents/research-analyst.md # negocio/agents/saas-architect.md # negocio/skills/ecommerce/SKILL.md # negocio/skills/interview/SKILL.md # negocio/skills/product/SKILL.md # negocio/skills/research/SKILL.md # negocio/skills/saas/SKILL.md # perfex-dev/agents/perfex-crm-module-developer.md # perfex-dev/skills/perfex-controllers/SKILL.md # perfex-dev/skills/perfex-database/SKILL.md # perfex-dev/skills/perfex-forms/SKILL.md # perfex-dev/skills/perfex-hooks/SKILL.md # perfex-dev/skills/perfex-menus/SKILL.md # perfex-dev/skills/perfex-migrations/SKILL.md # perfex-dev/skills/perfex-module-basics/SKILL.md # perfex-dev/skills/perfex-permissions/SKILL.md # perfex-dev/skills/perfex-security/SKILL.md # perfex-dev/skills/perfex-views/SKILL.md # project-manager/.claude-plugin/plugin.json # project-manager/agents/scrum-master.md # project-manager/agents/spec-writer.md # project-manager/hooks/spec-gate.sh # project-manager/skills/brainstorm/SKILL.md # project-manager/skills/discover/SKILL.md # project-manager/skills/scope/SKILL.md # project-manager/skills/spec/SKILL.md # project-manager/skills/sprint/SKILL.md # project-manager/skills/status/SKILL.md # wordpress/.claude-plugin/plugin.json # wordpress/agents/elementor-specialist.md # wordpress/agents/woocommerce-specialist.md # wordpress/agents/wordpress-performance-specialist.md # wordpress/agents/wordpress-plugin-developer.md # wordpress/skills/branda-menu/SKILL.md # wordpress/skills/crocoblock/SKILL.md # wordpress/skills/elementor/SKILL.md # wordpress/skills/jetengine/SKILL.md # wordpress/skills/rank-math/SKILL.md # wordpress/skills/rank-math/references/commands.md # wordpress/skills/seo-post/SKILL.md # wordpress/skills/woocommerce-cli/SKILL.md # wordpress/skills/woocommerce/SKILL.md # wordpress/skills/wp-cli/SKILL.md # wordpress/skills/wp-cli/references/commands.md # wordpress/skills/wp-cli/scripts/wp-auto.sh # wordpress/skills/wp-dev/SKILL.md # wordpress/skills/wp-hardening/SKILL.md # wordpress/skills/wp-performance/SKILL.md # wordpress/skills/wp-translate/SKILL.md # wordpress/skills/wp-update/SKILL.md
This commit is contained in:
@@ -1,155 +1,123 @@
|
||||
---
|
||||
name: "Descomplicar Digital"
|
||||
description: "Professional technology consulting theme with warm accents"
|
||||
version: "1.0.0"
|
||||
updated: "2026-03-10"
|
||||
layer: wiki
|
||||
name: "Descomplicar"
|
||||
description: "Tokens da marca Descomplicar® — espelho legível por máquina do DESIGN.md no Open Design"
|
||||
version: "2.0.0"
|
||||
updated: "2026-07-22"
|
||||
source: "~/workspace/open-design/design-systems/descomplicar/DESIGN.md"
|
||||
---
|
||||
|
||||
# Tema Descomplicar Digital
|
||||
# Tokens — Descomplicar®
|
||||
|
||||
Tema oficial Descomplicar® para uso em apresentações, relatórios, designs e qualquer material de comunicação.
|
||||
> **Fonte de verdade:** `~/workspace/open-design/design-systems/descomplicar/DESIGN.md`
|
||||
> Este ficheiro é um espelho para consumo automático (geradores, templates, scripts).
|
||||
> Se divergir do `DESIGN.md`, o `DESIGN.md` ganha e este ficheiro deve ser corrigido.
|
||||
>
|
||||
> **Para marcas de clientes**, não usar estes valores — ler o `DESIGN.md` da marca respectiva
|
||||
> em `design-systems/<slug-do-cliente>/`.
|
||||
|
||||
---
|
||||
|
||||
## Paleta de Cores
|
||||
## Cores
|
||||
|
||||
```yaml
|
||||
colors:
|
||||
primary: "#1a365d" # Azul escuro — headers, fundos principais
|
||||
secondary: "#2b6cb0" # Azul médio — links, sub-headers
|
||||
accent: "#dd6b20" # Laranja — CTAs, destaques, números
|
||||
background: "#ffffff" # Branco — fundo principal
|
||||
surface: "#f7fafc" # Cinza muito claro — secções alternadas
|
||||
text_primary: "#2d3748" # Cinza escuro — texto corpo
|
||||
text_secondary: "#4a5568" # Cinza médio — subtítulos, legendas
|
||||
border: "#e2e8f0" # Cinza claro — bordas, separadores
|
||||
success: "#38a169" # Verde — confirmações
|
||||
warning: "#d69e2e" # Amarelo — avisos
|
||||
error: "#e53e3e" # Vermelho — erros
|
||||
primary: "#cc8d00" # Dourado — CTAs, destaques, ícones, bordas activas
|
||||
primary_light: "#f2d9a2" # Fundos secundários, hover suave, tags (nunca texto)
|
||||
surface: "#ffffff" # Fundo de página, cards, modais
|
||||
surface_alt: "#f8f8f8" # Secções alternadas, blocos de código
|
||||
text: "#000000" # Headlines, corpo principal
|
||||
text_muted: "#6e6e6e" # Subtítulos, metadados, placeholders
|
||||
border: "#e5e5e5" # Divisórias, bordas de card
|
||||
danger: "#dc2626" # Erros, alertas críticos
|
||||
success: "#16a34a" # Confirmações
|
||||
```
|
||||
|
||||
### Referência Visual
|
||||
|
||||
| Token | Hex | Uso |
|
||||
|-------|-----|-----|
|
||||
| `primary` | `#1a365d` | Headers H1/H2, fundos de navegação, capa de apresentação |
|
||||
| `secondary` | `#2b6cb0` | Links, H3/H4, badges, ícones activos |
|
||||
| `accent` | `#dd6b20` | Botões CTA, números em destaque, linhas de separação principais |
|
||||
| `background` | `#ffffff` | Fundo padrão de slides e páginas |
|
||||
| `surface` | `#f7fafc` | Slides alternados, tabelas linha par, painéis laterais |
|
||||
| `text_primary` | `#2d3748` | Corpo de texto, parágrafos, listas |
|
||||
| `text_secondary` | `#4a5568` | Subtítulos, legendas, texto auxiliar |
|
||||
| `border` | `#e2e8f0` | Bordas de tabela, separadores horizontais, cards |
|
||||
| `success` | `#38a169` | Confirmações, métricas positivas, status "concluído" |
|
||||
| `warning` | `#d69e2e` | Avisos, métricas de atenção, status "em risco" |
|
||||
| `error` | `#e53e3e` | Erros, métricas negativas, status "crítico" |
|
||||
|
||||
---
|
||||
**Regras:** dourado é o único acento cromático; máximo 3 cores por visual; fundos grandes em
|
||||
`surface` ou `surface_alt`; CTA com fundo dourado e texto preto; nunca texto branco sobre dourado.
|
||||
|
||||
## Tipografia
|
||||
|
||||
```yaml
|
||||
fonts:
|
||||
heading: "Montserrat"
|
||||
heading_weight: "700, 800"
|
||||
heading_fallback: "Arial, sans-serif"
|
||||
body: "Open Sans"
|
||||
body_weight: "400, 600"
|
||||
body_fallback: "Helvetica, sans-serif"
|
||||
code: "JetBrains Mono"
|
||||
code_fallback: "Consolas, monospace"
|
||||
display: "Montserrat"
|
||||
display_fallback: "Poppins, system-ui, sans-serif"
|
||||
display_weights: [700, 800]
|
||||
body: "Inter"
|
||||
body_fallback: "Open Sans, system-ui, sans-serif"
|
||||
body_weights: [400, 500, 600]
|
||||
mono: "JetBrains Mono"
|
||||
mono_fallback: "IBM Plex Mono, monospace"
|
||||
mono_weights: [400]
|
||||
|
||||
scale:
|
||||
text_5xl: { size: 48, weight: 800, line_height: 1.1 } # Hero headline
|
||||
text_4xl: { size: 36, weight: 700, line_height: 1.15 } # H1
|
||||
text_3xl: { size: 30, weight: 700, line_height: 1.2 } # H2
|
||||
text_2xl: { size: 24, weight: 700, line_height: 1.3 } # H3
|
||||
text_xl: { size: 20, weight: 600, line_height: 1.4 } # H4, título de card
|
||||
text_lg: { size: 18, weight: 500, line_height: 1.5 } # Parágrafo de entrada
|
||||
text_base:{ size: 16, weight: 400, line_height: 1.6 } # Corpo
|
||||
text_sm: { size: 14, weight: 400, line_height: 1.5 } # Legendas, UI
|
||||
text_xs: { size: 12, weight: 500, line_height: 1.4 } # Tags, badges
|
||||
```
|
||||
|
||||
### Hierarquia Tipográfica
|
||||
|
||||
| Nível | Fonte | Peso | Tamanho (slides) | Tamanho (docs) |
|
||||
|-------|-------|------|-----------------|----------------|
|
||||
| H1 — Título principal | Montserrat | 800 | 40-48px | 32px |
|
||||
| H2 — Título secção | Montserrat | 700 | 28-36px | 24px |
|
||||
| H3 — Subtítulo | Montserrat | 700 | 22-26px | 20px |
|
||||
| H4 — Label | Open Sans | 600 | 18-20px | 16px |
|
||||
| Corpo | Open Sans | 400 | 16-18px | 14-16px |
|
||||
| Caption | Open Sans | 400 | 12-14px | 12px |
|
||||
| Código | JetBrains Mono | 400 | 14-16px | 13px |
|
||||
|
||||
### Google Fonts — Import
|
||||
|
||||
```css
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Open+Sans:wght@400;600&family=JetBrains+Mono&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono&display=swap');
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Regras de Uso
|
||||
## Espaçamento, grelha e raios
|
||||
|
||||
```yaml
|
||||
usage_notes:
|
||||
- Usar laranja com moderação (apenas CTAs e destaques-chave)
|
||||
- Azul escuro para headers e elementos de navegação
|
||||
- Fundos alternados branco/cinza para secções longas
|
||||
- Nunca usar mais de 3 cores numa slide
|
||||
- Manter contraste WCAG AA em todos os textos
|
||||
spacing: # base 4px
|
||||
space_1: 4
|
||||
space_2: 8
|
||||
space_3: 12
|
||||
space_4: 16
|
||||
space_6: 24
|
||||
space_8: 32
|
||||
space_12: 48
|
||||
space_16: 64
|
||||
space_24: 96
|
||||
|
||||
grid:
|
||||
columns: 12
|
||||
gutter: 24
|
||||
max_width: 1280 # conteúdo geral
|
||||
max_width_article: 960 # artigos
|
||||
max_width_prose: 760 # texto corrido (line-height 1.7)
|
||||
padding_x: { mobile: 16, tablet: 32, desktop: 48 }
|
||||
|
||||
breakpoints:
|
||||
mobile: "<=768"
|
||||
tablet: "769-1024"
|
||||
desktop: ">1024"
|
||||
|
||||
radius:
|
||||
sm: 4 # inputs, badges
|
||||
md: 8 # cards, botões
|
||||
lg: 12 # modais
|
||||
full: 9999 # pills, avatares
|
||||
```
|
||||
|
||||
### Regras Expandidas
|
||||
## Movimento
|
||||
|
||||
**Cores**
|
||||
- O laranja (`accent`) é reservado para no máximo 1-2 elementos por slide/página
|
||||
- Nunca usar `primary` e `accent` em simultâneo em texto — garante legibilidade
|
||||
- Fundo `surface` em slides alternados cria ritmo visual sem poluição
|
||||
- Combinação permitida em texto: `primary` fundo + `background` texto, ou `background` fundo + `primary` texto
|
||||
|
||||
**Tipografia**
|
||||
- Nunca misturar Montserrat com outra fonte de títulos no mesmo documento
|
||||
- Open Sans é a única fonte de corpo permitida
|
||||
- Código inline e blocos de código: sempre JetBrains Mono
|
||||
- Não usar itálico em títulos — usar peso (bold) para ênfase
|
||||
|
||||
**Contraste WCAG AA**
|
||||
- `text_primary` (#2d3748) sobre `background` (#ffffff): rácio 12.6:1 — aprovado
|
||||
- `text_secondary` (#4a5568) sobre `background` (#ffffff): rácio 7.4:1 — aprovado
|
||||
- `accent` (#dd6b20) sobre `background` (#ffffff): rácio 3.8:1 — aprovado para texto grande (>18px bold)
|
||||
- `background` (#ffffff) sobre `primary` (#1a365d): rácio 12.6:1 — aprovado
|
||||
|
||||
---
|
||||
|
||||
## Aplicação em Slides
|
||||
|
||||
### Layout Tipo Capa
|
||||
|
||||
```
|
||||
[Fundo: primary #1a365d]
|
||||
[Logo Descomplicar — branco, topo esquerdo]
|
||||
[H1: Montserrat 800, branco]
|
||||
[H2: Montserrat 700, accent #dd6b20]
|
||||
[Rodapé: Open Sans 400, text_secondary, separador border]
|
||||
```yaml
|
||||
motion:
|
||||
micro: 150 # hover, focus (ms)
|
||||
transition: 250 # mudanças de estado (ms)
|
||||
page_fade: 200 # transições de página (ms)
|
||||
easing_in: "ease-out"
|
||||
easing_both: "ease-in-out"
|
||||
card_hover: "translateY(-2px) + sombra 0 4px 16px rgba(0,0,0,0.1)"
|
||||
proibido: ["parallax", "auto-play", "animações de entrada elaboradas"]
|
||||
```
|
||||
|
||||
### Layout Tipo Conteúdo
|
||||
## Acessibilidade
|
||||
|
||||
```yaml
|
||||
contrast:
|
||||
preto_sobre_branco: 21.0 # AAA
|
||||
preto_sobre_dourado: 7.4 # AAA
|
||||
dourado_sobre_preto: 7.4 # AAA
|
||||
muted_sobre_branco: 5.1 # AA
|
||||
branco_sobre_dourado: 2.9 # FALHA — proibido
|
||||
minimo_corpo: 4.5 # AA
|
||||
```
|
||||
[Fundo: background #ffffff]
|
||||
[Header barra: primary #1a365d, 8px altura]
|
||||
[H2: primary #1a365d, Montserrat 700]
|
||||
[Corpo: text_primary #2d3748, Open Sans 400]
|
||||
[Sidebar ou destaque: surface #f7fafc]
|
||||
[CTA ou número chave: accent #dd6b20, Montserrat 800]
|
||||
```
|
||||
|
||||
### Layout Tipo Dados / Métricas
|
||||
|
||||
```
|
||||
[Fundo alternado: surface #f7fafc]
|
||||
[Número grande: accent #dd6b20, Montserrat 800, 60-80px]
|
||||
[Label: text_secondary #4a5568, Open Sans 600, 14px]
|
||||
[Ícone: secondary #2b6cb0]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Aplicação em HTML (Desk CRM / Relatórios)
|
||||
|
||||
```css
|
||||
:root {
|
||||
--c
|
||||
@@ -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