155 lines
5.0 KiB
Markdown
155 lines
5.0 KiB
Markdown
---
|
|
name: "Descomplicar Digital"
|
|
description: "Professional technology consulting theme with warm accents"
|
|
version: "1.0.0"
|
|
updated: "2026-03-10"
|
|
layer: wiki
|
|
---
|
|
|
|
# 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 {
|
|
--c |