---
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®*