brand-guidelines: alinhar com o Open Design e tornar multi-marca

A skill documentava uma paleta azul/laranja (#1a365d, #dd6b20) com Open Sans que nao corresponde nem ao design system nem ao site real. Cada ferramenta produzia material com uma marca diferente. Passa a espelhar o DESIGN.md do Open Design como fonte de verdade unica: dourado #cc8d00 sobre preto e branco, Montserrat (display) e Inter (corpo), com precedencia explicita do DESIGN.md sobre qualquer espelho. Reformulada para servir qualquer marca (Descomplicar e clientes), com procedimento para criar design systems de cliente a partir de material real via brand-extract, validacao antes de tornar normativo, e um projecto por marca. - SKILL.md v2.0.0: espelho correcto + gestao multi-marca - descomplicar-theme.md v2.0.0: tokens YAML derivados do DESIGN.md - color-palettes.md removido: 47 valores derivados da paleta errada - design-systems-multimarca.md: procedimento de gestao no Open Design Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-22 20:46:03 +01:00
parent 0f894c57b7
commit d852d54bf3
4 changed files with 400 additions and 627 deletions
@@ -1,188 +1,123 @@
 ---
-name: "Descomplicar Digital"
-description: "Professional technology consulting theme with warm accents"
-version: "1.0.0"
-updated: "2026-03-10"
+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 {
-  --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®*