# Design System Oficial — essencial-bpo
> Documento consolidado gerado automaticamente pela Propenza Marketing para consumo por Agentes de IA e LLMs.
> Padrão: W3C Design Tokens / WCAG 2.2 AA / Single Source of Truth (SSOT)
---
# 🏢 Essencial BPO — Visão Geral & Território de Marca
> **Documento:** `00-brand-overview.md`
> **Cliente:** Essencial BPO (Slug: `essencial-bpo`)
> **Liderança / Fundadora:** Pamela
> **Posicionamento:** Boutique de Gestão Financeira, BPO Financeiro Estratégico & Consultoria
> **Agência Criativa & Estratégica:** Propenza Marketing
> **Status:** `SSOT Homologado` (Single Source of Truth)
---
## 1. ⚓ The Context Anchor (Âncora de Contexto)
### 1.1 A História de Fundação e o Encontro de Visões
A **Essencial BPO** nasceu do encontro de duas trajetórias profissionais que se complementam de forma orgânica e potente. Trabalhando juntas por cerca de dois anos em uma mesma organização, as fundadoras consolidaram uma parceria pautada em confiança irrestrita e resultados de excelência. Nesse convívio, manifestou-se uma sinergia rara: **enquanto uma enxergava a minúcia e o rigor do detalhe, a outra visualizava a amplitude do todo**. O que faltava em uma, sobrava na outra — transformando essa complementaridade na maior fortaleza do negócio.
Da inquietação em transformar o mercado financeiro tradicional nasceu a decisão de empreender: construir uma empresa que refletisse como o financeiro corporativo deve ser conduzido de fato: **com clareza, estratégia e proximidade humana**. A marca foi concebida do zero — posicionamento, identidade, propósito e planejamento operacional foram estruturados antes mesmo do primeiro cliente. A Essencial nasceu primeiro como **visão**, e então como **operação**.
```
┌────────────────────────────────────────────────────────────────────────┐
│ MISSÃO ESSENCIAL BPO │
├────────────────────────────────────────────────────────────────────────┤
│ "Transformar o financeiro das empresas em uma ferramenta estratégica │
│ de gestão, trazendo clareza, controle, previsibilidade e segurança │
│ para a tomada de decisões dos empresários." │
└────────────────────────────────────────────────────────────────────────┘
```
### 1.2 Visão de Futuro
> **Ser referência nacional em BPO financeiro estratégico**, reconhecida pela excelência técnica indiscutível, profundidade analítica e pela capacidade de gerar impacto tangível nos resultados e na maturidade financeira dos negócios atendidos.
### 1.3 Pilares e Valores Inegociáveis
- **Clareza e Transparência**: Números organizados, dados auditáveis, relatórios compreensíveis e comunicação sem rodeios.
- **Responsabilidade (Mentalidade de Dono)**: Tratamos o caixa, as contas e o futuro de cada cliente com a mesma seriedade e zelo com que cuidamos do nosso próprio negócio.
- **Excelência Técnica**: Processos milimetricamente mapeados, conciliação impecável e decisões pautadas em análise factual.
- **Visão Estratégica**: Recusa terminante ao comodismo operacional. Não executamos apenas rotinas; apoiamos o crescimento e a rentabilidade.
- **Parceria e Proximidade**: Atuação lado a lado com empresários, lideranças e contabilidades, construindo relações de longo prazo.
- **Organização e Previsibilidade**: O crescimento sustentável e seguro começa obrigatoriamente pelo domínio e projeção do fluxo de caixa.
---
## 2. 🎯 Perfil do Cliente Ideal (ICP) & Diagnóstico de Dores
### 2.1 Quem Atendemos
- **Segmento Principal**: Pequenas e Médias Empresas (PMEs), com ênfase destacada em **empresas de serviços**, consultorias, agências e negócios em fase de profissionalização da gestão.
- **Perfil do Tomador de Decisão**: Sócios e empresários que dominam seu *core business* (sua entrega técnica ou comercial), mas não têm tempo, vocação ou braço interno qualificado para dedicar à gestão financeira no nível analítico que o porte da empresa exige.
- **Nível de Maturidade Desejado**: Empresas que valorizam governança, buscam previsibilidade e entendem que o financeiro não é um centro de custo, mas um motor de sustentabilidade.
### 2.2 As Dores Críticas que a Essencial BPO Elimina
```
┌───────────────────────────────────────┐ ┌───────────────────────────────────────┐
│ CENÁRIO ANTERIOR (CAOS) │ │ COM A ESSENCIAL (CLAREZA) │
├───────────────────────────────────────┤ ├───────────────────────────────────────┤
│ • Operação no "escuro", sem métricas │ ──► │ • Dashboards e relatórios acionáveis │
│ • Insegurança total ao tomar decisões │ ──► │ • Previsibilidade de fluxo de caixa │
│ • Contas a pagar/receber desorganizadas│ ──► │ • Rotinas pontuais e conciliação 100% │
│ • Dificuldade em entender os lucros │ ──► │ • Margens, DRE e indicadores claros │
│ • BPO tradicional frio e robotizado │ ──► │ • Boutique próxima com apoio humano │
└───────────────────────────────────────┘ └───────────────────────────────────────┘
```
---
## 3. 💎 Proposta de Valor, Portfólio & Modelo de Negócio
### 3.1 A Proposta de Valor
A **Essencial BPO** atua como o **braço financeiro estratégico das empresas**. Mais do que terceirizar rotinas financeiras, organizamos processos, integramos sistemas (ERP Conta Azul e ecossistemas contábeis) e traduzimos números complexos em **informações gerenciais lúcidas e didáticas**, permitindo que o empresário tenha controle absoluto e foco no crescimento do seu negócio.
### 3.2 Portfólio de Soluções
1. **Gestão Financeira Completa (BPO Operacional e Tático)**:
- Gestão ativa de contas a pagar e a receber.
- Faturamento, emissão e conciliação bancária diária.
- Organização de documentação para fechamento contábil.
2. **Controladoria & Previsibilidade de Caixa**:
- Controle rigoroso e projeção contínua de fluxo de caixa (cenários de curto e médio prazo).
- Relatórios gerenciais periódicos e indicadores-chave (KPIs de rentabilidade e liquidez).
- Elaboração e acompanhamento de orçamento anual (Budget vs Actual).
3. **Implantação & Otimização de Sistemas**:
- Parametrização, saneamento de dados e implementação avançada do ERP **Conta Azul**.
- Integração inteligente entre vendas, financeiro e contabilidade parceira.
4. **Consultoria Financeira Estratégica Personalizada**:
- Diagnóstico profundo da saúde financeira da empresa.
- Reuniões consultivas estratégicas de alinhamento com os sócios.
- Apoio consultivo para precificação, redução de custos e expansão segura.
### 3.3 Faixas de Ticket Médio
- **Serviços Recorrentes de BPO Financeiro**: R$ 1.500,00 a R$ 5.000,00 / mês (conforme volume transacional e complexidade).
- **Projetos de Consultoria Financeira & Estruturação**: R$ 15.000,00 a R$ 30.000,00 / projeto.
---
## 4. 🧬 DNA, Arquétipo & Posicionamento de Marca
### 4.1 O Triângulo Arquetípico da Essencial BPO
```
👑 O GOVERNANTE
(Controle, Ordem,
Previsibilidade)
/\
/ \
/ \
/ \
/ ✨ \
/ \
/____________\
🧙♂️ O SÁBIO 🤝 O CUIDADOR
(Visão Analítica, (Proximidade, Empatia,
Dados & Didática) Parceria Humana)
```
1. **O Sábio (40%)**: É a inteligência analítica, a profundidade técnica e a capacidade de traduzir números frios em decisões lúcidas e didáticas.
2. **O Cuidador / Prestativo (35%)**: É o acolhimento, a sensibilidade humana, o atendimento boutique e o cuidado genuíno com o patrimônio e a tranquilidade do empresário.
3. **O Governante (25%)**: É a estrutura, a governança corporativa, o rigor dos processos e a segurança de quem assume a gestão com mentalidade de dono.
---
## 5. 🗣️ Tom de Voz, Guia de Comunicação & Modulação
### 5.1 O que a Marca É vs O que a Marca NÃO É
| A Essencial BPO É... | A Essencial BPO NÃO É... |
| :--- | :--- |
| **Próxima, acessível e empática** | Fria, distante ou inacessível |
| **Didática e esclarecedora** | Hermética, pedante ou repleta de economês vazio |
| **Estratégica e orientada a decisões** | Meramente operacional, mecânica ou burocrática |
| **Boutique sofisticada e consultiva** | Genérica, industrializada ou "linha de produção" |
| **Confiante e firme nos números** | Insegura, hesitante ou baseada em "achismos" |
### 5.2 Matriz de Modulação de Redação (4 Cenários Operacionais)
| Cenário de Contato | Tom Adotado | Diretriz de Comunicação | Exemplo de Aplicação |
| :--- | :--- | :--- | :--- |
| **1. Diagnóstico & Vendas (Comercial)** | Consultivo, Atencioso, Seguro | Ouvir com profundidade, identificar o nó financeiro e demonstrar como a clareza traz paz de espírito. | *"Sabemos como é desafiador liderar o negócio sem saber exatamente o que esperar do caixa no mês que vem. Nosso papel é trazer luz e previsibilidade para que você decida com segurança."* |
| **2. Relatórios & Fechamentos (Técnico)** | Didático, Preciso, Orientado à Ação | Traduzir gráficos e tabelas em conclusões práticas. Dizer o que o número significa para o negócio. | *"O seu ponto de equilíbrio operacional caiu 8% este mês graças à renegociação de fornecedores. Isso amplia nossa margem de segurança para os investimentos do próximo trimestre."* |
| **3. Conteúdo & Redes Sociais (Autoridade)** | Educativo, Provocador, Humano | Quebrar mitos de gestão financeira, acolher a dor do empresário e descomplicar rotinas financeiras. | *"Ter faturamento não significa ter lucro — e ter lucro não garante caixa. Você sabe exatamente qual o fôlego financeiro da sua empresa hoje se as vendas pararem por 30 dias?"* |
| **4. Alerta ou Momento Crítico (Apoio)** | Calmo, Transparente, Proativo | Trazer o problema acompanhado imediatamente de um plano de contingência claro e viável. | *"Identificamos um descasamento pontual no fluxo da próxima quinzena. Já preparamos duas alternativas preventivas de remanejamento para avaliarmos juntos hoje às 15h."* |
---
# 🎨 Essencial BPO — Cores & Contraste (SSOT)
> **Documento:** `01-colors-and-contrast.md`
> **Status:** `SSOT Homologado` — Fonte: Apresentação de Marca Essencial BPO (Studio Mabi)
> **Última atualização:** 2026-08-26
---
## ⚠️ Single Source of Truth (SSOT) de Cores
> Este documento é a fonte única e absoluta de verdade para todas as cores da Essencial BPO. Qualquer asset digital, impresso ou de IA generativa DEVE referenciar este documento. Alterações só são válidas com aprovação da Propenza Marketing.
---
## 1. 🏛️ Paleta Oficial — Extraída do Manual de Marca (PDF Rebranding)
### 1.1 Cores Primárias (Core Brand Colors)
| Token Semântico | Nome | HEX | RGB | OKLCH | CMYK Offset | Pantone™ |
| :--- | :--- | :---: | :--- | :--- | :--- | :--- |
| `color-brand-navy` | **Azul Navy** | `#253C6E` | rgb(37,60,110) | oklch(0.346 0.101 252.8) | C66 M45 Y0 K57 | **282 C** |
| `color-brand-royal` | **Azul Royal** | `#3F6FB4` | rgb(63,111,180) | oklch(0.482 0.134 252.2) | C65 M38 Y0 K29 | **2728 C** |
| `color-brand-offwhite` | **Off-White Quente** | `#FEF8F1` | rgb(254,248,241) | oklch(0.987 0.009 87.3) | C0 M2 Y5 K0 | **9103 C** |
### 1.2 Paleta de Apoio (Derivadas Matemáticas)
| Token Semântico | Nome | HEX | OKLCH | Uso Principal |
| :--- | :--- | :---: | :--- | :--- |
| `color-brand-deep` | **Azul Profundo** | `#1A2640` | oklch(0.233 0.072 259.1) | Textos principais, dark mode |
| `color-brand-mist` | **Azul Névoa** | `#6B8FC0` | oklch(0.608 0.093 244.6) | Ícones, badges, decorativos |
| `color-brand-ice` | **Azul Gelo** | `#E8EFF9` | oklch(0.947 0.026 250.4) | Background cards |
| `color-brand-slate` | **Azul Ardósia** | `#334966` | oklch(0.393 0.071 249.3) | Textos secundários, bordas |
| `color-neutral-white` | **Branco Puro** | `#FFFFFF` | oklch(1.000 0.000 0.0) | Fundos principais light mode |
| `color-neutral-100` | **Cinza Quase Branco** | `#F7F8FA` | oklch(0.975 0.005 258.3) | Background alternado |
| `color-neutral-900` | **Carvão** | `#111827` | oklch(0.189 0.038 264.1) | Dark mode surface |
### 1.3 Cores de Status & Feedback
| Token Semântico | Nome | HEX | Uso |
| :--- | :--- | :---: | :--- |
| `color-feedback-success` | **Verde Financeiro** | `#16A34A` | Confirmações, fluxo positivo, lucro |
| `color-feedback-warning` | **Âmbar Alerta** | `#D97706` | Alertas de caixa, prazos |
| `color-feedback-error` | **Vermelho Crítico** | `#DC2626` | Erros, dívidas, saldo negativo |
| `color-feedback-info` | **Azul Info** | `#2563EB` | Informações, dicas, tutoriais |
---
## 2. ✅ Auditoria de Contraste WCAG 2.2 — Nível AA (Mínimo Obrigatório)
> WCAG 2.2 Critério 1.4.3 (AA): ≥ 4.5:1 para texto normal | ≥ 3:1 para texto grande (>18pt/24px)
### Combinações Aprovadas ✅
| Combinação | Texto / Fundo | Razão | Nível | Status |
| :--- | :---: | :---: | :---: | :---: |
| Navy sobre Branco | `#253C6E` / `#FFFFFF` | **10.4:1** | AAA | ✅ Aprovado |
| Navy sobre Off-White | `#253C6E` / `#FEF8F1` | **10.1:1** | AAA | ✅ Aprovado |
| Navy sobre Azul Gelo | `#253C6E` / `#E8EFF9` | **8.7:1** | AAA | ✅ Aprovado |
| Azul Profundo sobre Branco | `#1A2640` / `#FFFFFF` | **15.8:1** | AAA | ✅ Aprovado |
| Branco sobre Navy | `#FFFFFF` / `#253C6E` | **10.4:1** | AAA | ✅ Aprovado |
| Branco sobre Azul Royal | `#FFFFFF` / `#3F6FB4` | **4.7:1** | AA | ✅ Aprovado |
| Off-White sobre Navy | `#FEF8F1` / `#253C6E` | **10.1:1** | AAA | ✅ Aprovado |
### Combinações Proibidas ❌
| Combinação | Texto / Fundo | Razão | Motivo |
| :--- | :---: | :---: | :--- |
| Azul Royal sobre Branco (texto <16px) | `#3F6FB4` / `#FFFFFF` | **4.7:1** | Usar apenas em texto ≥16px Bold |
| Azul Névoa sobre Branco | `#6B8FC0` / `#FFFFFF` | **2.8:1** | Reprovado — apenas decorativo sem texto |
| Branco sobre Azul Gelo | `#FFFFFF` / `#E8EFF9` | **1.1:1** | Reprovado |
---
## 3. 🌙 Dark Mode — Tokens Semânticos
| Papel Semântico | Light Mode | Dark Mode | Token |
| :--- | :---: | :---: | :--- |
| Background Principal | `#FFFFFF` | `#0F172A` | `bg-surface-base` |
| Background Card | `#F7F8FA` | `#1E2D4A` | `bg-surface-card` |
| Texto Principal | `#1A2640` | `#E8EFF9` | `text-primary` |
| Texto Secundário | `#334966` | `#6B8FC0` | `text-secondary` |
| Borda Sutil | `#E8EFF9` | `#253C6E` | `border-subtle` |
| Acento Primário | `#3F6FB4` | `#5B8DD9` | `color-interactive-primary` |
---
## 4. 📐 Token Matrix — 3 Camadas
### Tier 1 — Primitivos (Raw Values)
```json
{
"brand-navy-500": "#253C6E",
"brand-navy-700": "#1A2640",
"brand-navy-300": "#334966",
"brand-royal-500": "#3F6FB4",
"brand-royal-300": "#6B8FC0",
"brand-royal-100": "#E8EFF9",
"brand-offwhite": "#FEF8F1",
"neutral-0": "#FFFFFF",
"neutral-50": "#F7F8FA",
"neutral-900": "#111827",
"feedback-success": "#16A34A",
"feedback-warning": "#D97706",
"feedback-error": "#DC2626",
"feedback-info": "#2563EB"
}
```
### Tier 2 — Semânticos (Aliases)
```json
{
"color-interactive-primary": "{brand-royal-500}",
"color-interactive-hover": "{brand-navy-500}",
"bg-surface-base": "{neutral-0}",
"bg-surface-card": "{brand-royal-100}",
"bg-surface-accent": "{brand-offwhite}",
"text-primary": "{brand-navy-700}",
"text-secondary": "{brand-navy-300}",
"text-on-dark": "{neutral-0}",
"border-subtle": "{brand-royal-100}",
"border-default": "{brand-royal-300}"
}
```
### Tier 3 — Component-Scoped
```json
{
"button-primary-bg": "{color-interactive-primary}",
"button-primary-hover-bg": "{color-interactive-hover}",
"button-primary-text": "{text-on-dark}",
"button-outline-border": "{color-interactive-primary}",
"card-border": "{border-subtle}",
"card-bg": "{bg-surface-card}",
"input-border-focus": "{color-interactive-primary}",
"nav-bg": "{brand-navy-500}",
"nav-text": "{text-on-dark}"
}
```
---
## 5. 🖨️ Especificações para Impressão (300 DPI — Offset)
> **Perfil Obrigatório:** ISO Coated v2 300% (FOGRA39)
| Cor | CMYK Offset (FOGRA39) | Pantone™ (Coated) |
| :--- | :---: | :---: |
| Azul Navy | C66 M45 Y0 K57 | **282 C** |
| Azul Royal | C65 M38 Y0 K29 | **2728 C** |
| Off-White | C0 M2 Y5 K0 | **9103 C** |
> ⚠️ Valores CMYK extraídos do PDF de rebranding (Studio Mabi). Validar com arquivo fonte original antes de envio para gráfica.
---
## 6. 🤖 Descritores de Cor para IA Generativa
```
Color palette: deep navy blue (#253C6E), clear royal blue (#3F6FB4),
warm off-white cream (#FEF8F1). No warm colors, no greens, no purples.
Corporate financial aesthetic, clean and trustworthy.
--sref [essencial-bpo-style] --ar 4:5
```
---
# 🔤 Essencial BPO — Tipografia & Escala Fluida (SSOT)
> **Documento:** `02-typography.md`
> **Status:** `SSOT Homologado` — Fonte: Apresentação de Marca Essencial BPO (Studio Mabi)
> **Última atualização:** 2026-08-26
---
## ⚠️ Single Source of Truth (SSOT) de Tipografia
As fontes oficiais da Essencial BPO foram definidas pelo Studio Mabi no rebranding. **Libra Sans** (Display) e **Aileron** (Body) são as únicas famílias tipográficas autorizadas.
> ⚠️ **Nota de Disponibilidade:** Libra Sans e Aileron são fontes premium/independentes. Não estão disponíveis no Google Fonts. Veja a seção 1.3 para alternativas web-safe aprovadas e instruções de licenciamento.
---
## 1. 🏛️ Famílias Tipográficas Oficiais
### 1.1 Fonte Display — Libra Sans (Títulos & Headlines)
| Atributo | Valor |
| :--- | :--- |
| **Nome** | Libra Sans |
| **Classificação** | Sans-Serif Geométrica |
| **Estilo Visual** | Geométrica moderna, formas abertas, leveza estrutural |
| **Pesos Disponíveis** | Regular (400), Medium (500), SemiBold (600), Bold (700) |
| **Uso Principal** | H1, H2, H3 — Headlines, títulos de seção, calls-to-action |
| **Licença** | Premium — verificar com Studio Mabi |
| **Stack CSS** | `'Libra Sans', 'Plus Jakarta Sans', 'DM Sans', sans-serif` |
### 1.2 Fonte Body — Aileron (Corpo de Texto & UI)
| Atributo | Valor |
| :--- | :--- |
| **Nome** | Aileron |
| **Classificação** | Sans-Serif Humanista |
| **Estilo Visual** | Humanista legível, proporcional, amigável e profissional |
| **Pesos Disponíveis** | Light (300), Regular (400), SemiBold (600) |
| **Uso Principal** | Body text, parágrafos, labels, inputs, navegação |
| **Licença** | Open Font License (OFL) — Uso livre |
| **Stack CSS** | `'Aileron', 'Inter', 'DM Sans', system-ui, sans-serif` |
### 1.3 Substitutas Web-Safe (Google Fonts — Aprovadas)
Para projetos web onde Libra Sans não pode ser carregada, use:
| Substituição | Fonte Google Fonts | Motivo da Escolha |
| :--- | :--- | :--- |
| Display (substituta) | **Plus Jakarta Sans** | Geométrica moderna, pesos variados, similar em estrutura |
| Display (alternativa) | **DM Sans** | Geométrica clean, excelente para headlines financeiros |
| Body (substituta) | **Inter** | Humanista de excelência, legibilidade máxima em telas |
```html
```
---
## 2. 📐 Escala Tipográfica Modular (Razão 1.25 — Major Third)
> **Razão:** `1.25` (Major Third) — escala profissional para contexto B2B corporativo. Garante hierarquia clara sem exagero de tamanho.
> **Base:** `16px` (1rem) — padrão de acessibilidade W3C.
### Escala Fixa (Desktop — 1440px)
| Step | Token | px | rem | Uso |
| :---: | :--- | :---: | :---: | :--- |
| -2 | `text-xs` | 10px | 0.625rem | Micro-labels, badges de status |
| -1 | `text-sm` | 13px | 0.813rem | Legendas, captions, helper text |
| 0 | `text-base` | 16px | 1.000rem | **Corpo de texto padrão** |
| 1 | `text-md` | 20px | 1.250rem | Subtítulos menores, lead text |
| 2 | `text-lg` | 25px | 1.563rem | H4, cards de destaque |
| 3 | `text-xl` | 31px | 1.953rem | H3, títulos de seção |
| 4 | `text-2xl` | 39px | 2.441rem | H2, headlines de landing page |
| 5 | `text-3xl` | 49px | 3.052rem | H1 — Herói principal |
| 6 | `text-4xl` | 61px | 3.815rem | Display — Hero gigante |
### Escala Fluida (clamp() — Responsivo)
```css
/* Títulos Fluidos — Mobile até Desktop */
--text-hero: clamp(2.000rem, 5vw + 0.5rem, 3.815rem);
--text-h1: clamp(1.750rem, 4vw + 0.25rem, 3.052rem);
--text-h2: clamp(1.375rem, 3vw + 0.25rem, 2.441rem);
--text-h3: clamp(1.125rem, 2.5vw + 0.125rem, 1.953rem);
--text-h4: clamp(1.000rem, 2vw + 0.125rem, 1.563rem);
--text-lead: clamp(1.000rem, 1.5vw + 0.125rem, 1.250rem);
--text-body: clamp(0.938rem, 1vw + 0.375rem, 1.000rem);
--text-small: clamp(0.813rem, 0.75vw + 0.25rem, 0.875rem);
```
---
## 3. 📏 Especificações de Hierarquia & Regras de Uso
### H1 — Headline Principal
```css
font-family: 'Libra Sans', 'Plus Jakarta Sans', sans-serif;
font-size: var(--text-h1);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--text-primary); /* #1A2640 */
```
**Uso:** Um único H1 por página. Comunicação de autoridade e valor. Ex.: "Seu financeiro, finalmente sob controle."
### H2 — Headlines de Seção
```css
font-family: 'Libra Sans', 'Plus Jakarta Sans', sans-serif;
font-size: var(--text-h2);
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.015em;
```
**Uso:** Títulos de seções na landing page (Serviços, Resultados, Depoimentos).
### H3 — Subtítulos de Componentes
```css
font-family: 'Libra Sans', 'Plus Jakarta Sans', sans-serif;
font-size: var(--text-h3);
font-weight: 600;
line-height: 1.35;
```
**Uso:** Títulos de cards de serviço, seções de formulário.
### Body / Parágrafos
```css
font-family: 'Aileron', 'Inter', system-ui, sans-serif;
font-size: var(--text-body);
font-weight: 400;
line-height: 1.65; /* Legibilidade máxima em blocos de texto */
```
### Lead / Subtítulo Hero
```css
font-family: 'Aileron', 'Inter', system-ui, sans-serif;
font-size: var(--text-lead);
font-weight: 400;
line-height: 1.55;
color: var(--text-secondary); /* #334966 */
```
### Labels / Inputs / Navegação
```css
font-family: 'Aileron', 'Inter', system-ui, sans-serif;
font-size: var(--text-sm); /* 13px */
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.02em;
```
---
## 4. ✅ Regras Tipográficas Invioláveis (WCAG + Brand)
1. **Tamanho mínimo de texto para leitura:** `13px` (0.813rem) — jamais usar fonte menor em conteúdo de texto.
2. **Contraste obrigatório:** Sempre validar par texto/fundo na tabela de contraste (`01-colors-and-contrast.md`).
3. **Line-height mínimo em body:** `1.5` (WCAG 2.2 Critério 1.4.12).
4. **Letter-spacing:** Nunca usar `letter-spacing` negativo em textos de corpo.
5. **BPO** em letras minúsculas (pequenas): sempre `BPO` em weight normal, nunca bold isolado.
6. **Mix de pesos:** Não usar mais de 3 tamanhos e 2 pesos diferentes na mesma tela.
---
## 5. 📝 Escala para Relatórios Financeiros & Documentos
| Elemento | Fonte | Tamanho | Peso | Line-Height |
| :--- | :--- | :---: | :---: | :---: |
| Título do Relatório | Libra Sans | 24pt | Bold | 1.2 |
| Subtítulo de Seção | Libra Sans | 16pt | SemiBold | 1.3 |
| Corpo do Relatório | Aileron | 11pt | Regular | 1.6 |
| Números/KPIs | Aileron | 11pt | SemiBold | 1.4 |
| Rodapé/Legenda | Aileron | 8pt | Regular | 1.4 |
| Notas de Tabela | Aileron | 8pt | Light | 1.3 |
---
# 📐 Essencial BPO — Espaçamento, Grid & Tokens (SSOT)
> **Documento:** `03-spacing-and-tokens.md`
> **Status:** `SSOT Homologado`
> **Última atualização:** 2026-08-26
---
## 1. 🏗️ Grid System
### Grid de 4pt (Base Universal)
Todos os espaçamentos são múltiplos de **4px**. Jamais usar valores fora desta grade (ex.: 5px, 7px, 11px são proibidos).
```
Base unit: 4px = 0.25rem
Grid: 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96, 128px
```
### Grids de Layout Responsivo
| Contexto | Colunas | Gutter | Margem Lateral | Max Width |
| :---: | :---: | :---: | :---: | :---: |
| Desktop (≥1440px) | 12 cols | 24px | 80px | 1280px |
| Laptop (≥1024px) | 12 cols | 20px | 48px | 1024px |
| Tablet (≥768px) | 8 cols | 16px | 32px | 768px |
| Mobile (≥390px) | 4 cols | 16px | 20px | 100% |
---
## 2. 🔢 Escala de Espaçamento (Tokens)
| Token | px | rem | Uso Canônico |
| :--- | :---: | :---: | :--- |
| `space-0` | 0px | 0 | Reset |
| `space-1` | 4px | 0.25rem | Gap mínimo, separadores micro |
| `space-2` | 8px | 0.5rem | Padding interno de badges/chips |
| `space-3` | 12px | 0.75rem | Gap entre ícone e label |
| `space-4` | 16px | 1rem | **Padding padrão de componentes** |
| `space-5` | 20px | 1.25rem | Padding de inputs e botões |
| `space-6` | 24px | 1.5rem | Gap entre cards, padding de cards |
| `space-8` | 32px | 2rem | Margem entre seções menores |
| `space-10` | 40px | 2.5rem | Padding vertical de seções |
| `space-12` | 48px | 3rem | Espaçamento entre blocos |
| `space-16` | 64px | 4rem | Margem entre seções principais |
| `space-20` | 80px | 5rem | Padding hero, seções de destaque |
| `space-24` | 96px | 6rem | Espaçamento máximo entre blocos |
---
## 3. 🔘 Border Radius (Raios de Curvatura)
A Essencial BPO usa bordas **suavemente arredondadas** — profissionalismo com toque humano.
| Token | px | Uso |
| :--- | :---: | :--- |
| `radius-none` | 0px | Bordas de tabelas, separadores |
| `radius-sm` | 4px | Badges, chips, tags de status |
| `radius-md` | 8px | **Botões, inputs, campos de formulário** |
| `radius-lg` | 12px | Cards de serviço, painéis |
| `radius-xl` | 16px | Cards hero, painéis de destaque |
| `radius-2xl` | 24px | Modais, drawers, tooltips grandes |
| `radius-full` | 9999px | Avatar, toggle, pílulas de filtro |
---
## 4. 🌑 Sombras (Box Shadows)
Sombras sutis reforçam elevação e hierarquia — nunca usar sombras agressivas ou coloridas.
| Token | CSS Value | Uso |
| :--- | :--- | :--- |
| `shadow-xs` | `0 1px 2px rgba(37,60,110,0.04)` | Cards flat, hover mínimo |
| `shadow-sm` | `0 2px 8px rgba(37,60,110,0.06)` | Inputs, botões ghost |
| `shadow-md` | `0 4px 16px rgba(37,60,110,0.10)` | **Cards de serviço, painéis padrão** |
| `shadow-lg` | `0 8px 32px rgba(37,60,110,0.14)` | Modais, dropdowns |
| `shadow-xl` | `0 16px 48px rgba(37,60,110,0.18)` | Hero cards, CTAs |
| `shadow-inner` | `inset 0 2px 4px rgba(37,60,110,0.06)` | Inputs em foco |
---
## 5. ⚡ Tokens de Movimento (Motion Tokens)
| Token | Valor | Uso |
| :--- | :--- | :--- |
| `duration-instant` | `50ms` | Micro-feedback imediato |
| `duration-fast` | `150ms` | Hover de botões e links |
| `duration-base` | `250ms` | **Transições padrão de UI** |
| `duration-moderate` | `350ms` | Abertura de cards, accordions |
| `duration-slow` | `500ms` | Modais, page transitions |
| `easing-standard` | `cubic-bezier(0.4, 0, 0.2, 1)` | Transições gerais (Material) |
| `easing-enter` | `cubic-bezier(0.0, 0, 0.2, 1)` | Elementos entrando |
| `easing-exit` | `cubic-bezier(0.4, 0, 1, 1)` | Elementos saindo |
---
## 6. 📦 Touch Targets & Acessibilidade
- **Touch target mínimo:** `44×44px` (WCAG 2.2 AA — Critério 2.5.8)
- **Botões primários:** mínimo `height: 48px` em mobile
- **Links inline:** não usar tamanho menor que 16px sem sublinhado
---
## 7. 🎛️ Tokens W3C DTCG (Design Token Community Group)
```json
{
"$schema": "https://design-tokens.org/schemas/v1/design-tokens.schema.json",
"$metadata": {
"tokenSetOrder": ["primitives", "semantic", "component"]
},
"color": {
"brand": {
"navy": { "500": { "$value": "#253C6E", "$type": "color" } },
"navy": { "700": { "$value": "#1A2640", "$type": "color" } },
"royal": { "500": { "$value": "#3F6FB4", "$type": "color" } },
"ice": { "$value": "#E8EFF9", "$type": "color" } },
"offwhite": { "$value": "#FEF8F1", "$type": "color" }
}
},
"spacing": {
"4": { "$value": "4px", "$type": "dimension" },
"8": { "$value": "8px", "$type": "dimension" },
"16": { "$value": "16px", "$type": "dimension" },
"24": { "$value": "24px", "$type": "dimension" },
"32": { "$value": "32px", "$type": "dimension" }
},
"borderRadius": {
"md": { "$value": "8px", "$type": "dimension" },
"lg": { "$value": "12px", "$type": "dimension" }
}
}
```
---
# 🧩 Essencial BPO — Componentes Digitais & Landing Pages (SSOT)
> **Documento:** `04-digital-components.md`
> **Status:** `SSOT Homologado`
> **Última atualização:** 2026-08-26
---
## 1. 🎯 Arquitetura de Conversão Consultiva B2B
A landing page da Essencial BPO deve seguir o **fluxo de maturação consultiva**:
```
AWARENESS → CREDIBILIDADE → DIAGNÓSTICO → PROVA SOCIAL → AÇÃO
│ │ │ │ │
HeroSection ServicesGrid DiagnosticTool TestimonialsCarousel LeadForm
```
### Seções Obrigatórias da Landing Page (Ordem Canônica)
1. **HeaderNavbar** — Fixo, transparente > sólido no scroll
2. **HeroSection** — Headline de dor/transformação + Dual CTA
3. **TrustBadges** — Logos de parceiros / certificações / métricas
4. **ServicesGrid** — 4 cards de serviços (BPO, Controladoria, Conta Azul, Consultoria)
5. **DiagnosticBanner** — CTA para calculadora/diagnóstico financeiro
6. **AboutFounders** — Seção humana com foto das fundadoras + história
7. **TestimonialsCarousel** — 3-5 depoimentos de clientes reais
8. **PricingOrProcess** — Processo de onboarding (3-4 etapas) OU tabela de preços
9. **FaqAccordion** — 5-7 perguntas frequentes de PMEs
10. **ContactForm** — Formulário de qualificação em etapas
11. **Footer** — Links, contato, redes sociais, LGPD
---
## 2. ��️ Vocabulário de Componentes
### HeaderNavbar
```
Variantes: default | scrolled | mobile-open
Estados: default | hover | active
Especificações:
- Height: 72px (desktop) | 64px (mobile)
- Padding: 0 80px (desktop) | 0 20px (mobile)
- Background: transparent → rgba(37,60,110,0.95) no scroll
- Backdrop: blur(12px) ao rolar
- Transition: background 250ms easing-standard
- Logo: 120×32px (desktop) | 100×28px (mobile)
- Nav links: font-size 14px, font-weight 600, letter-spacing 0.02em
- CTA: ButtonPrimary compact (height 40px, px 20px)
- Z-index: 100
```
### HeroSection
```
Variantes: light-bg | navy-bg
Layout: Split (texto esquerda + visual direita)
Especificações:
- Min-height: 100vh (desktop) | auto com padding 80px 0 (mobile)
- Padding: 0 80px (desktop) | 0 20px (mobile)
- Headline: text-h1, font-weight 700, color #1A2640
- Subtítulo: text-lead, font-weight 400, color #334966
- Gap entre headline e sub: space-6 (24px)
- Gap entre sub e CTAs: space-8 (32px)
- CTA Stack: flex-row gap-4 (desktop) | flex-col gap-3 (mobile)
- Visual: ilustração ou mockup de dashboard financeiro
```
### ActionButton (Botão)
```
Variantes: primary | secondary | outline | ghost | destructive
primary:
- Background: #3F6FB4
- Hover: #253C6E
- Text: #FFFFFF
- Height: 48px
- Padding: 12px 24px
- Border-radius: radius-md (8px)
- Font: 16px, SemiBold
- Transition: all 150ms easing-standard
secondary:
- Background: #253C6E
- Text: #FFFFFF
- (demais igual ao primary)
outline:
- Background: transparent
- Border: 2px solid #3F6FB4
- Text: #3F6FB4
- Hover: Background #E8EFF9
ghost:
- Background: transparent
- Text: #3F6FB4
- Hover: Background rgba(63,111,180,0.08)
Estados:
- default | hover | active | focus-visible | disabled | loading
- Focus-visible: outline 3px solid #3F6FB4, offset 2px
- Disabled: opacity 0.45, cursor: not-allowed
- Loading: spinner 16px + texto "Aguarde..."
```
### ContentCard (Card de Serviço)
```
Variantes: service | metric | testimonial | pricing
service:
- Padding: space-6 (24px)
- Border-radius: radius-lg (12px)
- Background: #FFFFFF
- Border: 1px solid #E8EFF9
- Shadow: shadow-md
- Hover: shadow-xl, translateY(-4px), border-color #3F6FB4
- Transition: all 250ms easing-standard
- Ícone: 40×40px, cor #3F6FB4 (Lucide Icons, stroke 1.5)
- Título: text-h4, SemiBold, #1A2640
- Descrição: text-body, Regular, #334966
- Link: text-sm, SemiBold, #3F6FB4 com ícone ArrowRight
metric:
- Número: text-4xl ou text-3xl, Bold, #253C6E
- Label: text-sm, Regular, #334966
- Trend arrow: verde (#16A34A) ou vermelho (#DC2626)
```
### FormInput (Campo de Formulário)
```
Estados: default | hover | focus | error | disabled | success
default:
- Height: 48px
- Padding: 12px 16px
- Border: 1.5px solid #E8EFF9 (#6B8FC0 no hover)
- Border-radius: radius-md (8px)
- Background: #FFFFFF
- Font: text-body, #1A2640
- Placeholder: #6B8FC0
focus:
- Border: 2px solid #3F6FB4
- Box-shadow: shadow-inner + 0 0 0 3px rgba(63,111,180,0.15)
- Outline: none
error:
- Border: 2px solid #DC2626
- Helper text: text-sm, #DC2626
- Ícone: AlertCircle 16px, #DC2626
Label:
- Font: text-sm (13px), SemiBold, #1A2640
- Margin-bottom: space-2 (8px)
- Required marker: "*" em #DC2626
```
### StatusBadge (Badges de Status)
```
Variantes: active | pending | warning | error | neutral
active:
- Background: rgba(22,163,74,0.10)
- Text: #16A34A
- Font: text-xs, SemiBold
- Padding: 4px 10px
- Border-radius: radius-full (9999px)
pending:
- Background: rgba(217,119,6,0.10)
- Text: #D97706
error:
- Background: rgba(220,38,38,0.10)
- Text: #DC2626
```
### DiagnosticTool (Calculadora Financeira)
```
Layout: Multi-step wizard (3-4 etapas)
Etapa 1 - Perfil: faturamento mensal, setor, número de funcionários
Etapa 2 - Saúde Financeira: tem DRE? fluxo de caixa? conciliação?
Etapa 3 - Resultado: score de maturidade + CTA para diagnóstico gratuito
Especificações:
- Container: max-width 640px, padding 40px, border-radius radius-xl
- Progress bar: height 4px, navy para royal gradient
- Botões de passo: primary avançar, ghost voltar
- Resultado: card destacado com ícone + score visual
```
### TestimonialsCarousel
```
Layout: 3 cards visíveis (desktop) | 1 card (mobile)
Auto-play: 5s interval, pause on hover
Controles: dots + prev/next arrows
Card de depoimento:
- Quote: text-lg, italic, #334966
- Avatar: 48×48px, border-radius full
- Nome: text-sm, SemiBold, #1A2640
- Cargo + Empresa: text-xs, Regular, #6B8FC0
- Rating: 5 estrelas, #D97706
```
### ModalDialog
```
Backdrop: rgba(26,38,64,0.6), blur(4px)
Container: max-width 540px, padding 32px, radius-2xl, shadow-xl
Header: título H3 + botão fechar (X)
Body: scrollable se conteúdo > 60vh
Footer: flex-end, gap-3, btn outline + btn primary
Animação: scale(0.95)→scale(1) + opacity 0→1, 250ms easing-enter
Fechar: ESC, click fora, btn fechar
Focus trap: obrigatório (acessibilidade)
```
---
## 3. 📱 Responsividade — Breakpoints
| Token | px | Classe | Comportamento |
| :--- | :---: | :--- | :--- |
| `bp-xs` | 375px | `xs:` | Mobile pequeno |
| `bp-sm` | 640px | `sm:` | Mobile landscape |
| `bp-md` | 768px | `md:` | Tablet |
| `bp-lg` | 1024px | `lg:` | Laptop |
| `bp-xl` | 1280px | `xl:` | Desktop padrão |
| `bp-2xl` | 1440px | `2xl:` | Desktop wide |
---
## 4. 🧠 Guia de Microcopy para Componentes
| Componente | Tom | Exemplo |
| :--- | :--- | :--- |
| CTA Principal | Consultivo + Urgência suave | "Quero organizar meu financeiro" |
| CTA Secundário | Didático | "Como funciona o BPO?" |
| Form Submit | Ação clara | "Solicitar diagnóstico gratuito" |
| Input Placeholder | Orientador | "Ex.: R$ 50.000,00 / mês" |
| Error State | Calmo + Orientador | "Verifique o valor informado" |
| Loading State | Transparente | "Analisando seu perfil..." |
| Success State | Caloroso | "Perfeito! Entraremos em contato em até 24h." |
| Empty State | Humano | "Nenhum relatório disponível ainda — estamos preparando tudo para você." |
---
# 🧰 Essencial BPO — Bibliotecas de UI, Ícones & Stack Tecnológica (SSOT)
> **Documento:** `05-libraries-and-tooling.md`
> **Status:** `SSOT Homologado`
> **Última atualização:** 2026-08-26
---
> ⚠️ **Guardrail Anti-Stack Bleed:** Este documento documenta a stack real de produção da **Essencial BPO**. Proibido vazar tecnologias do visualizador de Design System (Preact, Vite, Chota CSS) como se fossem da stack do cliente.
---
## 1. 🏗️ Stack de Produção do Cliente (Real)
### Cenário A — Site Institucional / Landing Pages (Mais Provável)
| Camada | Tecnologia | Versão | Motivo |
| :--- | :--- | :---: | :--- |
| CMS / Page Builder | **WordPress** | 6.x | Gestão de conteúdo sem código |
| Page Builder | **Elementor Pro** | Latest | Construção visual, sem dev |
| Hospedagem | **Hostinger / Locaweb** | — | Padrão PME Brasil |
| Formulários | **Elementor Forms** ou **RD Forms** | — | Captura de leads |
| Analytics | **Google Analytics 4** | — | Monitoramento de tráfego |
| CRM | **RD Station** ou **HubSpot Starter** | — | Gestão de leads |
### Cenário B — Aplicação de Gestão Interna (Futuro)
| Camada | Tecnologia | Motivo |
| :--- | :--- | :--- |
| Framework | **Next.js 14+** (App Router) | SSR/SSG para dashboards |
| Estilização | **Tailwind CSS 3.x** | Utilitário, produtividade |
| Componentes | **shadcn/ui** + **Radix UI** | Acessível, sem estilo imposto |
| Ícones | **Lucide React** | Consistência, stroke 1.5 |
| Gráficos | **Recharts** ou **Tremor** | Dashboards financeiros |
| Autenticação | **NextAuth.js** | OAuth2 + credenciais |
| Banco de Dados | **Supabase** (PostgreSQL) | BaaS escalável |
### Sistema de Gestão Financeira
| Ferramenta | Uso |
| :--- | :--- |
| **Conta Azul** | ERP financeiro principal dos clientes |
| **Excel / Google Sheets** | Relatórios e modelagem financeira |
| **Notion** | SOPs, documentação interna |
| **Slack / WhatsApp** | Comunicação com clientes |
---
## 2. 🎨 Biblioteca de Ícones — Lucide Icons
### Especificações Padrão
| Propriedade | Valor |
| :--- | :--- |
| Biblioteca | **Lucide Icons** |
| Stroke Width | `1.5` (padrão) — `1.8` para ícones small |
| Tamanho em UI Web | 16px (inline), 20px (UI), 24px (featured), 40px (hero) |
| Cor Padrão | `currentColor` (herdará a cor do texto) |
| Cor de Destaque | `#3F6FB4` (Azul Royal) em ícones standalone |
### Mapa de Ícones por Serviço
| Serviço / Elemento | Ícone Lucide | Uso |
| :--- | :--- | :--- |
| Gestão Financeira / BPO | `Landmark` ou `Building2` | Cards de serviço, navbar |
| Fluxo de Caixa | `TrendingUp` | KPIs, relatórios |
| Contas a Pagar/Receber | `Wallet` | Módulos de gestão |
| Conciliação Bancária | `GitMerge` | Processos técnicos |
| Conta Azul / ERP | `Database` | Integrações |
| Consultoria | `Briefcase` | Serviços premium |
| Relatórios | `BarChart3` | Analytics |
| Diagnóstico | `Stethoscope` | Ferramenta diagnóstico |
| Segurança / Confiança | `ShieldCheck` | Trust badges |
| Parceria | `Handshake` | Diferenciais |
| Alerta Financeiro | `AlertTriangle` | Estados de erro |
| Sucesso | `CheckCircle2` | Confirmações |
| WhatsApp | `MessageCircle` | CTAs de contato |
| E-mail | `Mail` | Formulários |
| Telefone | `Phone` | Contato |
| Instagram | `Instagram` | Redes sociais |
| LinkedIn | `Linkedin` | Redes sociais |
---
## 3. 🧩 Componentes shadcn/ui Recomendados (Cenário B - App)
Para o eventual desenvolvimento de dashboards e painéis internos:
```bash
npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add input
npx shadcn-ui@latest add form
npx shadcn-ui@latest add select
npx shadcn-ui@latest add dialog
npx shadcn-ui@latest add badge
npx shadcn-ui@latest add table
npx shadcn-ui@latest add tabs
npx shadcn-ui@latest add accordion
npx shadcn-ui@latest add toast
```
### Configuração de Tema (shadcn/ui)
```css
/* CSS Variables — Alinhado com as Cores Essencial BPO */
:root {
--background: 0 0% 100%;
--foreground: 220 52% 17%; /* #1A2640 */
--primary: 218 48% 48%; /* #3F6FB4 */
--primary-foreground: 0 0% 100%;
--secondary: 220 49% 29%; /* #253C6E */
--secondary-foreground: 0 0% 100%;
--muted: 218 35% 93%; /* #E8EFF9 */
--muted-foreground: 217 34% 37%; /* #334966 */
--border: 218 35% 93%;
--ring: 218 48% 48%;
--radius: 0.5rem;
}
```
---
## 4. 📊 Stack de Analytics & Marketing
| Ferramenta | Uso | Integração |
| :--- | :--- | :--- |
| **Google Analytics 4** | Tráfego, conversões | Tag Manager |
| **Google Tag Manager** | Gestão de scripts | Centralizado |
| **RD Station Marketing** | E-mail, automação, lead scoring | API REST |
| **Meta Pixel** | Remarketing Instagram/Facebook | Tag Manager |
| **LinkedIn Insight Tag** | Remarketing B2B | Tag Manager |
| **Hotjar** | Heatmaps, gravação de sessão | Tag Manager |
---
# 🖨️ Essencial BPO — Materiais Impressos & Produção Gráfica (SSOT)
> **Documento:** `06-print-and-editorial.md`
> **Status:** `SSOT Homologado`
> **Última atualização:** 2026-08-26
---
## 1. 🏛️ Padrões Gerais de Impressão
| Especificação | Valor | Observação |
| :--- | :---: | :--- |
| **Resolução mínima** | 300 DPI | Obrigatório para todos os materiais |
| **Perfil de cor** | CMYK (ISO Coated v2 FOGRA39) | Offset comercial |
| **Sangria padrão** | 3mm em todos os lados | Obrigatório em todos os materiais |
| **Área de segurança** | 5mm da borda (texto/logos) | Nunca colocar texto na margem de sangria |
| **Formato de entrega** | PDF/X-4 | Com fontes incorporadas |
| **Software recomendado** | Adobe Illustrator / InDesign | Exportar com perfil FOGRA39 |
---
## 2. 📇 Cartão de Visita (Business Card)
```
┌─────────────────────────────────────────┐ ← sangria 3mm
│ ┌───────────────────────────────────┐ │
│ │ [Logo Essencial BPO] │ │ ← área segura 5mm
│ │ │ │
│ │ Nome Completo │ │
│ │ Cargo / Especialização │ │
│ │ │ │
│ │ 📞 (11) 9 9101-3541 │ │
│ │ 📧 nome@essencialbpo.com.br │ │
│ │ 🌐 essencialbpo.com.br │ │
│ │ 📱 @essencial_bpoo │ │
│ └───────────────────────────────────┘ │
└─────────────────────────────────────────┘
Dimensões:
- Frente: 90mm × 50mm (+ 3mm sangria = 96×56mm)
- Verso: Navy (#253C6E) sólido + logo em off-white
- Acabamento recomendado: Laminação fosca + hot stamping prata
no logo (versão premium)
- Papel: Couché 300g/m² (mínimo) | Triplex 350g/m² (premium)
Tipografia (impressão):
- Nome: Libra Sans Bold, 11pt, Off-White #FEF8F1
- Cargo: Aileron Regular, 8pt, #6B8FC0
- Dados de contato: Aileron Regular, 7pt, #E8EFF9
```
---
## 3. 📄 Papel Timbrado A4
```
Formato: A4 (210 × 297mm)
Sangria: Sem sangria (fundo branco até as bordas)
Margem de texto: Superior 40mm | Inferior 25mm | Lateral 25mm
Header (zona superior — 35mm):
- Logo Essencial BPO (posição: canto superior esquerdo, 30mm de altura)
- Barra de cor navy (#253C6E): 8mm de altura, full-width, no topo
- Dados de contato: canto superior direito, Aileron 7pt, #334966
Watermark (background):
- Símbolo "€" Essencial em #E8EFF9, opacidade 15%
- Posição: canto inferior direito, 120mm de altura
- Não interferir com o texto
Footer (zona inferior — 20mm):
- Linha separadora: 0.5pt, #E8EFF9
- Copyright: Aileron 7pt, #6B8FC0
- Redes sociais: ícones Lucide 8pt
CMYK do timbrado:
- Barra navy: C66 M45 Y0 K57
- Corpo do texto: K100 (preto puro para economizar tinta)
```
---
## 4. 📁 Pasta de Proposta Comercial
```
Formato: A4 fechada | A3 aberta (420×297mm)
Papel: Couché 250g/m²
Acabamento: Laminação fosca parcial
Capa:
- Background: #253C6E (Navy) full-bleed
- Logo: Off-White, centralizado, 70mm de largura
- Título da pasta: "Proposta Comercial" — Aileron Light, 14pt, #FEF8F1
- Aba de identificação: 20mm de largura, lateral direita, #3F6FB4
Miolo (páginas internas):
- Mesmo padrão do papel timbrado A4
- Paginação: Aileron 8pt, #6B8FC0, canto inferior direito
```
---
## 5. 📊 Relatório Financeiro Periódico
```
Formato: A4 (210×297mm) | Digital (PDF) ou Impresso
Versão digital: 72 DPI, RGB, PDF/A
Versão impressa: 300 DPI, CMYK, PDF/X-4
Layout:
- Header: Logo + título do relatório + data de competência
- Sumário executivo: Caixa destacada, background #E8EFF9
- Gráficos: Palette de cores #253C6E (barras), #3F6FB4 (linhas),
#6B8FC0 (comparativo), #16A34A (positivo), #DC2626 (negativo)
- Tabelas: Header navy, linhas alternadas white/#F7F8FA
- KPIs: Números em Libra Sans Bold 24pt, navy
- Conclusão/Ações: Caixa lateral azul (#E8EFF9), Aileron Regular 10pt
Gráficos obrigatórios:
- Fluxo de Caixa: Área com gradiente navy→royal
- DRE: Barras agrupadas (Receita, Custo, Lucro)
- Evolução mensal: Linha + pontos
- KPIs de Liquidez: Gauges circulares
```
---
## 6. 📋 Checklist de Entrega Gráfica
Antes de enviar qualquer arte para gráfica:
- [ ] Resolução mínima 300 DPI confirmada
- [ ] Sangria de 3mm aplicada em todos os lados
- [ ] Área de segurança de 5mm respeitada
- [ ] Fontes incorporadas no PDF (não apenas subset)
- [ ] Imagens em CMYK (não RGB)
- [ ] Perfil FOGRA39 aplicado e verificado
- [ ] Prova digital aprovada pelo cliente
- [ ] Versão de impressão salva como PDF/X-4
- [ ] Backup do arquivo editável (.ai, .indd) salvo no projeto
---
# 📱 Essencial BPO — Redes Sociais, Anúncios & Grids (SSOT)
> **Documento:** `07-social-media.md`
> **Status:** `SSOT Homologado`
> **Última atualização:** 2026-08-26
---
## 1. 🎯 Estratégia por Rede Social
| Rede | Prioridade | Objetivo | Tom | Frequência |
| :--- | :---: | :--- | :--- | :---: |
| **LinkedIn** | 🔴 Alta | Autoridade B2B, captação empresários | Consultivo, didático, estratégico | 3-5x/semana |
| **Instagram** | 🟠 Alta | Humanização, conteúdo educativo, reels | Educativo, próximo, inspirador | Diário |
| **WhatsApp Business** | 🟠 Alta | Relacionamento, atendimento, nurture | Próximo, consultivo | Conforme demanda |
| **YouTube** | 🟡 Média | Conteúdo longo, educação financeira | Didático, profissional | Semanal |
| **TikTok** | 🟢 Baixa | Awareness PME jovem empreendedor | Descontraído, educativo rápido | 3x/semana |
---
## 2. 📐 Dimensões & Grids Oficiais
### Instagram
| Formato | Dimensão | Razão | Área Segura |
| :--- | :---: | :---: | :--- |
| Feed Quadrado | 1080×1080px | 1:1 | 60px em todos os lados |
| Feed Retrato (Recomendado) | 1080×1350px | 4:5 | 80px topo/base, 60px lados |
| Stories / Reels | 1080×1920px | 9:16 | 250px topo/base (zona de toque), 60px lados |
| Carrossel | 1080×1080px | 1:1 | Primeiro card: logo; Últimos: CTA |
| Foto de Perfil | 320×320px | 1:1 | Logo símbolo centralizado |
### LinkedIn
| Formato | Dimensão | Razão | Área Segura |
| :--- | :---: | :---: | :--- |
| Post Padrão (Paisagem) | 1200×628px | 1.91:1 | 80px todos os lados |
| Post Quadrado | 1080×1080px | 1:1 | 60px todos os lados |
| Post Carrossel (PDF) | 1080×1080px/slide | 1:1 | 60px todos os lados |
| Capa do Perfil | 1584×396px | 4:1 | Logo à esquerda, texto à direita |
| Foto de Perfil Empresa | 300×300px | 1:1 | Logo símbolo |
### WhatsApp / Anúncios Meta
| Formato | Dimensão | Uso |
| :--- | :---: | :--- |
| Status WhatsApp | 1080×1920px | Conteúdo rápido, promoções |
| Anúncio Feed Meta | 1080×1350px | Captação de leads |
| Anúncio Stories Meta | 1080×1920px | Remarketing |
| Anúncio Carrossel Meta | 1080×1080px | Apresentação de serviços |
---
## 3. 🎨 Grid de Templates por Categoria de Conteúdo
### Categoria 1: Conteúdo Educativo (Autoridade)
```
Background: #253C6E (Navy) ou #F7F8FA (Cinza Claro)
Título: Libra Sans Bold, 28-36pt, Off-White ou Navy
Texto: Aileron Regular, 14-16pt, #E8EFF9 ou #334966
Ícone: Lucide, 48×48px, #3F6FB4
Estrutura: "Você sabia que..." | "X erros que..." | "Como funciona o..."
Logo: canto inferior direito, 15% da largura
```
### Categoria 2: Carrossel Didático (Sequência de Slides)
```
Slide 1 (Capa): Background navy, título impactante + hook pergunta
Slides 2-5 (Conteúdo): Background branco/gelo, 1 insight por slide
Slide Final (CTA): Background royal (#3F6FB4), CTA + Instagram handle
Proporção de cor: 70% branco/gelo, 30% navy/royal
```
### Categoria 3: Humanização & Bastidores
```
Foto principal: Colorida, iluminação natural, sem filtros pesados
Overlay sutil: Gradiente navy 20% opacity no rodapé
Texto: Tag de localização, hashtag da marca, CTA suave
Tom: "No dia a dia aqui na Essencial..." | "Encontro de resultado com [cliente]..."
```
### Categoria 4: Depoimentos & Social Proof
```
Background: #FEF8F1 (Off-White Quente)
Aspas: Libra Sans 96pt, #3F6FB4, opacidade 30% (decorativo)
Texto depoimento: Aileron Regular, 16pt, #1A2640
Nome cliente: Aileron SemiBold, 12pt, #3F6FB4
Cargo/empresa: Aileron Regular, 11pt, #334966
Avatar: 60×60px, border-radius full, borda 3px navy
```
### Categoria 5: Anúncios (Tráfego Pago)
```
Headline: 5-7 palavras máximo, dor ou ganho específico
CTA: Botão visível, "Quero diagnóstico grátis" | "Entender mais"
Visual: Foto de empresário(a) no ambiente + overlay navy lateral
Urgência opcional: Badge vermelho "Vagas limitadas" (usar raramente)
WCAG em anúncios: Texto sobre imagem sempre com overlay ≥60% opacity
```
---
## 4. 📝 Guia de Hashtags
### Hashtags Primárias (sempre usar)
```
#EssencialBPO #BPOFinanceiro #GestaoFinanceira
```
### Hashtags de Autoridade
```
#FinanceiroEstrategico #ControladoriaPME #FluxoDeCaixa
#DRESimplificado #ContaAzul #BPOEstrategico
```
### Hashtags de Nicho PME
```
#PMEBrasil #PequenasEmpresas #EmpreendedorBrasil
#GestaoEmpresarial #FinanceiroCorporativo
```
### Hashtags Educativas
```
#EducacaoFinanceira #DicasFinanceiras #GestaoNoPonto
#FinanceiroSemMedo #EmpreendedorismoFinanceiro
```
---
## 5. ✅ Regras de Qualidade Visual (Anti-Padrões Proibidos)
- ❌ **PROIBIDO** usar filtros de cor com tons sépia, vintage ou gradientes aleatórios
- ❌ **PROIBIDO** texto em imagens sem contraste ≥ 4.5:1 (WCAG)
- ❌ **PROIBIDO** logos de concorrentes em posts de comparação
- ❌ **PROIBIDO** fotos de banco de imagem com pessoas obviamente "stock" e falsas
- ❌ **PROIBIDO** excesso de texto em anúncios Meta (regra dos 20%)
- ✅ **OBRIGATÓRIO** sempre incluir legendas em Reels e vídeos (acessibilidade)
- ✅ **OBRIGATÓRIO** logo visível em todos os posts (brand recall)
- ✅ **OBRIGATÓRIO** CTA em 100% dos posts (mesmo que sutil)
---
# 🎬 Essencial BPO — Direção de Arte, Fotografia & Motion (SSOT)
> **Documento:** `08-art-direction-and-motion.md`
> **Status:** `SSOT Homologado`
> **Última atualização:** 2026-08-26
---
## 1. 📸 Território Visual & Mood Board
### 1.1 Palavra de Ordem Visual
> **"Clareza com Humanidade."** — A Essencial BPO não é uma fintech fria de algoritmos. É uma boutique de pessoas reais que entendem de números. As imagens devem transmitir **inteligência + calor humano**.
### 1.2 Atmosfera Fotográfica
| Dimensão | Diretriz | Anti-padrão |
| :--- | :--- | :--- |
| **Iluminação** | Natural, suave, calorosa. Luz lateral de janela. | Flash duro, iluminação de estúdio fria/artificial |
| **Ambientes** | Escritório boutique, home-office organizado, reunião de equipe, cafeteria de trabalho | Grandes corporações, cubicles, open spaces genéricos |
| **Pessoas** | Fundadoras Pamela e sócia em contexto real, equipe em trabalho genuíno, clientes satisfeitos | Fotos de banco de imagens com pessoas óbviamente posadas |
| **Paleta da foto** | Tons frios de azul + neutros quentes (bege, off-white, linho) | Fotos com filtro quente excessivo (sépia/laranja) ou com muitas cores |
| **Ângulo** | Eye level (na altura dos olhos), ligeiramente above eye line | Contra-plongée (de baixo para cima — parece autoritário demais) |
| **Composição** | Regra dos terços, espaço negativo generoso, fundos limpos | Composição lotada, background confuso |
### 1.3 Diretrizes para Fotos das Fundadoras
```
Contexto recomendado:
- Em frente a tela/laptop com dashboard financeiro aberto
- Em reunião consultiva com cliente (pose de escuta ativa)
- Apresentando relatório em tablet/notebook
- Ambiente de home-office organizado com toque pessoal (planta, quadro)
Vestuário:
- Cores: Navy, branco, azul claro, cinza — alinhadas à paleta da marca
- Evitar: cores fortes (vermelho, amarelo, roxo) que conflitem com a identidade
Expressão:
- Confiante e receptiva (não rígida ou séria demais)
- Leve sorriso de "estou aqui para ajudar"
- Olhar para a câmera (para conteúdos de autoridade) ou para o trabalho (bastidores)
```
---
## 2. 🎬 Direção de Vídeo
### 2.1 Vídeos de Autoridade (LinkedIn / YouTube)
```
Formato: Horizontal 16:9 (1920×1080px)
Duração: 60-180 segundos
Estrutura narrativa:
0-5s: Hook (pergunta de dor ou dado impactante)
5-30s: Problema e contexto
30-90s: Solução / didática
90-120s: Prova social / resultado
120-180s: CTA e próximo passo
Captação:
- Câmera: mínimo iPhone 13 Pro (4K) ou câmera mirrorless
- Iluminação: Ring light 30cm ou luz de janela + rebatedor
- Áudio: Lapela sem fio (Rode Wireless GO) ou microfone shotgun
- Background: parede clean (branco ou azul claro) ou bookshelf organizado
```
### 2.2 Reels / TikTok (Conteúdo Vertical)
```
Formato: Vertical 9:16 (1080×1920px)
Duração: 15-60 segundos (ponto ideal: 30-45s)
Hook obrigatório: Nos primeiros 2 segundos
Templates Reels:
- Tipo 1: "Erro X que destrói o caixa da empresa" (texto animado + voz)
- Tipo 2: "Antes vs Depois" com split screen
- Tipo 3: Tutorial rápido de conceito financeiro em 30s
- Tipo 4: Behind the scenes da operação (humanização)
```
### 2.3 Vídeos Institucionais (Hero / Apresentação)
```
Formato: 16:9 ou 4:5 (dependendo do canal)
Duração: 90-120 segundos
Música: Instrumental corporate moderno, BPM 90-110, piano + synth
Paleta: Intercalar cenas navy e cenas bright (alternância visual)
Texto animado: Fonte Libra Sans, entrada slide-up, saída fade-out
```
---
## 3. ✨ Motion Tokens (Animações de UI)
### 3.1 Filosofia de Movimento
> **"Funcional, nunca decorativo."** — Cada animação deve ter propósito: guiar o olhar, confirmar ação ou criar hierarquia temporal.
### 3.2 Tokens de Animação
```css
/* Durações */
--motion-instant: 50ms; /* Micro-feedback: hover de cores */
--motion-fast: 150ms; /* Hover de botões, links */
--motion-base: 250ms; /* Transições padrão de UI */
--motion-moderate: 350ms; /* Accordions, cards expandíveis */
--motion-slow: 500ms; /* Page transitions, modais */
--motion-xslow: 800ms; /* Hero animations, scroll reveals */
/* Easings */
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Padrão geral */
--ease-enter: cubic-bezier(0.0, 0, 0.2, 1); /* Elementos entrando */
--ease-exit: cubic-bezier(0.4, 0, 1, 1); /* Elementos saindo */
--ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* CTAs especiais */
```
### 3.3 Animações Canônicas da Essencial BPO
#### Hover de Botão Primário
```css
transition: background-color 150ms var(--ease-standard),
box-shadow 150ms var(--ease-standard),
transform 150ms var(--ease-standard);
&:hover {
background: #253C6E;
box-shadow: 0 8px 24px rgba(37,60,110,0.3);
transform: translateY(-2px);
}
```
#### Card Reveal (Scroll Animation)
```css
@keyframes card-reveal {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.card { animation: card-reveal 500ms var(--ease-enter) forwards; }
```
#### Número Counter (KPIs)
```css
/* Uso com JS IntersectionObserver */
/* Contagem de 0 → valor final em 1200ms, easing ease-out */
```
#### Loading State (Formulário)
```css
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { animation: spin 800ms linear infinite; }
```
---
## 4. 📻 Identidade Sonora (Referências)
| Uso | Estilo Musical | Referências |
| :--- | :--- | :--- |
| Vídeos institucionais | Corporate moderno, piano + synth | Epidemic Sound: "Corporate Minimalism" |
| Reels/TikTok educativo | Lo-fi corporate, upbeat | "Lo-fi beats corporate" |
| Stories de bastidores | Acústico leve, voz natural | Sem música ou música ambiente baixa |
| Anúncios Meta | Energético, BPM 120+, sem letra | Epidemic Sound: "Motivational Business" |
---
# 🤖 Essencial BPO — Engenharia de Prompts de IA Generativa (Catálogo SSOT)
> **Documento:** `09-generative-ai-prompts.md`
> **Status:** `SSOT Homologado`
> **Última atualização:** 2026-08-26
---
## 1. 🎨 Âncoras de Estilo (Style Anchors)
Sempre incluir estas âncoras em todos os prompts para garantir coerência cromática e estética:
```
[BRAND-ANCHOR]
Color palette: deep navy blue #253C6E, clear royal blue #3F6FB4,
warm off-white cream #FEF8F1, clean white. No warm tones (orange,
red, yellow). No greens. No purples.
Style: boutique financial consulting, professional yet human,
clean modern, trustworthy, premium minimal.
Brazilian corporate aesthetic.
```
---
## 2. 📸 Prompts para Fotografia Institucional
### 2.1 Ensaio das Fundadoras — Retratos de Autoridade
**Midjourney v6:**
```
professional Brazilian businesswoman, financial consultant, boutique office setting,
natural window light from left side, soft warm white background,
wearing navy blue or white professional attire, confident warm smile,
looking directly at camera, laptop and documents on desk,
shallow depth of field, 35mm lens equivalent, editorial photography style,
color palette: navy blue, white, warm neutrals --ar 4:5 --style raw --v 6.1
```
**FLUX.1 Dev:**
```
portrait photo of professional Brazilian female financial consultant,
natural side lighting, clean minimal office background,
navy blue clothing, confident expression, shallow depth of field,
editorial professional photography, warm neutral tones
```
### 2.2 Cenas de Trabalho (Action Shots)
**Midjourney v6:**
```
two Brazilian female business professionals reviewing financial dashboard
on laptop in a bright modern office, one pointing at screen, collaborative pose,
natural daylight, plants in background, warm white and navy accents,
editorial corporate photography, candid authentic moment --ar 16:9 --v 6.1
```
### 2.3 Fotos de Reunião Consultiva com Cliente
**Midjourney v6:**
```
Brazilian financial advisor presenting report to small business owner couple,
round table meeting, tablet with charts visible, warm office lighting,
professional yet relaxed atmosphere, financial documents,
corporate boutique consulting aesthetic --ar 16:9 --style raw --v 6.1
```
---
## 3. 🖼️ Prompts para Visuais de Marketing
### 3.1 Hero Banner — Landing Page
**Midjourney v6:**
```
abstract financial growth visualization, clean minimal design,
deep navy blue #253C6E background with royal blue #3F6FB4 geometric elements,
upward trending lines, data dashboard elements floating in space,
soft glow effect, no text, professional corporate tech aesthetic,
horizontal composition --ar 16:9 --v 6.1 --quality 2
```
### 3.2 Ícones Estilizados para Posts (Ilustrações)
**DALL-E 3:**
```
Flat design icon illustration set for financial management company:
cash flow chart, balance sheet, financial report document, coins stacking upward.
Color palette: deep navy blue and royal blue only.
Clean minimal flat vector style, white background, no gradients.
Professional Brazilian fintech aesthetic.
```
### 3.3 Background para Apresentações PowerPoint / Google Slides
**Midjourney v6:**
```
abstract geometric background for corporate presentation,
deep navy blue #253C6E base color, subtle geometric grid pattern,
royal blue accent lines, minimal and professional,
no text, clean elegant corporate design --ar 16:9 --v 6.1
```
---
## 4. 📱 Prompts para Redes Sociais
### 4.1 Carrossel LinkedIn — Visual Header
**Midjourney v6:**
```
professional LinkedIn carousel slide background, financial consulting theme,
navy blue gradient with subtle data visualization elements,
clean minimal design, horizontal format,
space for text overlay on right side --ar 1.91:1 --v 6.1
```
### 4.2 Stories / Reels — Backgrounds Animáveis
**Runway Gen-3 Alpha:**
```
Slow camera pull back through minimal modern office space,
navy blue and white color palette, data charts on screens,
professional corporate atmosphere, smooth cinematic motion,
no people, establishing shot for text overlay
```
---
## 5. 📊 Prompts para Visualizações Financeiras
### 5.1 Dashboard Concept (UI Mockup)
**Midjourney v6:**
```
financial management software dashboard UI design mockup,
navy blue #253C6E sidebar, clean white main area,
royal blue #3F6FB4 accent charts and KPIs, data visualizations,
cash flow bar chart, donut chart, trend line,
modern Brazilian fintech SaaS aesthetic, flat design --ar 16:9 --v 6.1
```
### 5.2 Infográfico de Processo (3 Etapas)
**DALL-E 3:**
```
Clean infographic showing 3-step financial consulting process:
1. Diagnosis 2. Implementation 3. Results.
Navy blue and royal blue color scheme, minimal flat design icons,
professional corporate style, horizontal layout, white background.
No text in image.
```
---
## 6. 🎬 Prompts para Vídeo (Runway / Sora)
### 6.1 Loop de Background para Vídeos Institucionais
**Runway Gen-3:**
```
Abstract financial data visualization animation, navy blue particles
forming rising graph lines, smooth looping motion,
professional corporate aesthetic, no text, 10 second loop
```
### 6.2 Transição de Abertura de Vídeo
**Runway Gen-3:**
```
Logo reveal animation concept: geometric shapes in navy blue
assembling from left to right forming letter E shape,
clean corporate motion graphics, white background,
smooth professional animation, 3 seconds
```
---
## 7. 🛡️ Guardrails de IA para a Essencial BPO
### Proibições Absolutas em Prompts de IA
- ❌ NUNCA usar imagens com dinheiro físico sendo contado (clichê)
- ❌ NUNCA usar imagens com cofres ou correntes (comunicação de bloqueio)
- ❌ NUNCA usar fotos com homens de terno sério em poses de cruzar braços
- ❌ NUNCA usar paleta de cores quentes (laranja, vermelho, amarelo)
- ❌ NUNCA usar imagens com calculadoras velhas ou papéis bagunçados
- ✅ SEMPRE representar mulheres de negócios quando houver pessoas
- ✅ SEMPRE incluir tecnologia (laptops, tablets com dados reais)
- ✅ SEMPRE transmitir clareza, organização, controle financeiro
---
# 🛡️ GUARDRAILS — Políticas de Imutabilidade, Isolamento e Governança
> **Projeto:** Essencial BPO Design System v1.0.0
> **Responsável:** Propenza Marketing
> **Data de vigência:** 2026-08-26
---
## 1. ⚓ Políticas de Fonte Única de Verdade (SSOT)
### Cores (SSOT: `01-colors-and-contrast.md` + `tokens.css`)
- **PROIBIDO** usar qualquer valor de cor que não esteja definido em `tokens.css` ou `tokens.json`.
- **PROIBIDO** alterar `#253C6E` (Azul Navy) ou `#3F6FB4` (Azul Royal) sem aprovação da Propenza + Studio Mabi.
- **PROIBIDO** usar filtros de imagem que alterem a percepção das cores da marca.
### Tipografia (SSOT: `02-typography.md`)
- **PROIBIDO** usar outras fontes além de Libra Sans (display), Aileron (body) ou suas substitutas aprovadas (Plus Jakarta Sans, Inter).
- **PROIBIDO** usar tamanhos fora da escala modular definida.
- **PROIBIDO** usar fonte menor que 13px (0.813rem) em qualquer conteúdo de texto.
### Logotipo (Fonte: Studio Mabi — arquivos originais)
- **PROIBIDO** distorcer, esticar, rotacionar ou aplicar efeitos no logo.
- **PROIBIDO** usar o logo em cores não autorizadas (apenas versões definidas: navy, branco, colorida).
- **PROIBIDO** alterar a proporção entre o símbolo "€" e o wordmark "Essencial BPO".
- **Versões autorizadas:** Logo completo (símbolo + wordmark), Símbolo isolado, Sublogo (fundo navy).
---
## 2. 🔒 Isolamento da Stack Técnica
- **PROIBIDO** descrever a stack de desenvolvimento do Design System Viewer (Preact, Vite, Chota CSS) como sendo a stack de produção da Essencial BPO.
- A stack real de produção está documentada em `05-libraries-and-tooling.md`.
- Qualquer proposta de stack deve ser apresentada como **proposta** e aprovada pelo cliente antes de ser inserida no SSOT.
---
## 3. 🚫 Anti-Template Bleed (Zero Hallucination)
- **PROIBIDO** transferir dados de outros clientes (ex.: cores, fontes, taglines de Water Meyer, JetINK, Villa Vida etc.) para este Design System.
- **PROIBIDO** preencher dados ausentes com valores genéricos de template sem aviso explícito ao usuário.
- **REGRA:** Se um dado não constar no material oficial da Essencial BPO (PDF Studio Mabi, briefing Pamela), o agente DEVE:
1. Avisar que o dado não foi encontrado.
2. Apresentar proposta estratégica.
3. Aguardar aprovação antes de gravar.
---
## 4. ✅ Aprovações Necessárias para Alterações
| Tipo de Alteração | Aprovação Necessária | Arquivo Impactado |
| :--- | :--- | :--- |
| Mudar cor da paleta primária | Propenza + Pamela (cliente) | `01-colors-and-contrast.md`, `tokens.css`, `tokens.json` |
| Trocar família tipográfica | Propenza + Pamela | `02-typography.md`, `tokens.css` |
| Adicionar novo serviço | Pamela (cliente) | `04-digital-components.md`, `00-brand-overview.md` |
| Mudar logo ou símbolo | Pamela + Studio Mabi | `assets/` |
| Alterar valores CMYK | Studio Mabi (designer original) | `06-print-and-editorial.md` |
---
## 5. 📋 Versionamento
- **v1.0.0** (2026-08-26): Design System inicial criado a partir do PDF de rebranding Studio Mabi + Briefing Pamela.
- Toda alteração deve incrementar a versão seguindo SemVer: MAJOR.MINOR.PATCH.
---