# Design System Oficial — myka-synapse
> 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)
---
# 🧠 Synapse — Visão Geral & Território de Marca
> **Documento:** `00-brand-overview.md`
> **Nome da Marca:** Synapse (Synapse Company / Synapse Talents)
> **Fundadora & Diretora Executiva:** Mykarlla Pamplona (Myka Pamplona)
> **Slug:** `myka-synapse`
> **Posicionamento:** Ecossistema de Soluções em Recrutamento Estratégico, Gestão de Talentos e Conexões de Alta Performance que Catalisam Negócios
> **Agência Criativa & Estratégica:** Propenza Marketing
> **Status:** `SSOT Homologado` (Single Source of Truth)
---
## 1. ⚓ The Context Anchor (Âncora de Contexto)
### 1.1 A Origem & O Significado Intrínseco de "Synapse"
Na neurociência, a **sinapse** é a junção onde neurônios se comunicam através de pulsos eletroquímicos, transmitindo impulsos vitais que orquestram todo o funcionamento do organismo.
Para a **Synapse Company**, fundada pela estrategista **Mykarlla Pamplona**, a palavra transcende a biologia:
- **A Conexão Catalisadora**: A empresa atua como a sinapse que conecta pessoas certas, talentos raros, empresas inovadoras e resultados exponenciais.
- **Jornada Unificada Inovadora**: Cada candidato não é apenas um currículo em um processo seletivo; ele é acolhido como potencial futuro cliente, parceiro de negócios e embaixador da marca.
- **O Conceito de "Estiçar Gente"**: Desafiar os limites do profissional, expandir suas capacidades e colocá-lo no lugar onde ele gera o maior valor possível.
```
┌─────────────────────────────────────────────────────────────────────────────────────────────┐
│ AS 7 ANALOGIAS CANÔNICAS DA SYNAPSE │
├─────────────────────────────────────────────────────────────────────────────────────────────┤
│ 1. Redes Neurais: Transmissão fluida de dados que gera inteligência coletiva. │
│ 2. Pontes Estratégicas: Ligação ágil entre a necessidade da empresa e a aspiração do talento.│
│ 3. Pulso Elétrico: Inicia o movimento, inspira ação e rompe a inércia do mercado. │
│ 4. Catalisador Químico: Acelera o crescimento e a escalabilidade sem gerar atrito. │
│ 5. Reator Nuclear (Alta Energia): Transforma pequenos talentos em impacto exponencial. │
│ 6. O Sol Interno: Fonte inesgotável de clareza, aquecendo equipes e iluminando caminhos. │
│ 7. O Coração: Bombeia energia e oxigênio para que todas as partes operem em harmonia. │
└─────────────────────────────────────────────────────────────────────────────────────────────┘
```
### 1.2 Missão e Propósito
```
┌────────────────────────────────────────────────────────────────────────┐
│ MISSÃO SYNAPSE │
│────────────────────────────────────────────────────────────────────────│
│ "Construir pontes humanas e tecnológicas entre empresas e talentos, │
│ catalisando conexões de alta performance que transformam culturas, │
│ geram energia realizadora e impulsionam resultados exponenciais." │
└────────────────────────────────────────────────────────────────────────┘
```
### 1.3 Pilares e Valores Inegociáveis
1. **Alta Energia & Entusiasmo**: Nossos processos transmitem pulso elétrico, movimento e vivacidade em todas as interações.
2. **Overdelivery Estratégico**: Entregar sempre além do escopo básico; conectar pessoas com profundidade analítica e não apenas preencher vagas.
3. **Visão 360° do Candidato**: Respeito e dignidade ao talento em cada etapa; feedback transparente e acolhimento humano.
4. **Precisão & Assertividade**: Uso de metodologias ágeis de hunting e avaliação comportamental para reduzir o tempo de contratação e zerar o turnover precoce.
5. **Simplicidade & Elegância**: Design limpo, comunicação direta sem jargões corporativos vazios.
---
## 2. 🎯 Os Dois Públicos-Alvo Estruturais (ICPs)
```
┌────────────────────────────────────────────────────────┬────────────────────────────────────────────────────────┐
│ ICP 1: EMPRESAS CONTRATANTES (B2B) │ ICP 2: CANDIDATOS & TALENTOS (B2C) │
├────────────────────────────────────────────────────────┼────────────────────────────────────────────────────────┤
│ • Quem: Founders, CEOs, Diretores de RH e Gestores. │ • Quem: Profissionais em busca de recolocação ou salto │
│ • Dor: Vagas abertas há meses, contratações erradas, │ de carreira executiva e liderança. │
│ perda de tempo com triagens superficiais. │ • Dor: Processos seletivos frios, falta de feedback, │
│ • Desejo: Assertividade, velocidade, alinhamento de │ vagas fantasmas e sensação de desvalorização. │
│ cultura e profissionais que chegam gerando valor. │ • Desejo: Acolhimento, visibilidade perante grandes │
│ • Solução Synapse: Hunting estratégico e diagnóstico │ empresas e posicionamento de alta performance. │
│ cultural profundo. │ • Solução Synapse: Banco de Talentos Synapse Talents. │
└────────────────────────────────────────────────────────┴────────────────────────────────────────────────────────┘
```
---
## 3. 🧬 O Triângulo Arquetípico da Synapse
```
⚡ O MAGO / TRANSFORMADOR (CATALISADOR)
(Sinapses, Pulso Elétrico, Alta Energia,
Reator, Transformação Rápida)
/\
/ \
/ \
/ \
/ 🎯 \
/ \
/____________\
🤝 O CONECTOR 👑 O GOVERNANTE
(Acolhimento Humano, (Autoridade Estratégica,
Candidato como Parceiro, Rigor em Recrutamento,
Empatia e Pontes) Liderança de Myka Pamplona)
```
1. **O Mago / Catalisador (40%)**: É a fagulha que transforma potencial latente em resultado explosivo. Conecta os pontos que ninguém viu, catalisa carreiras e impulsiona empresas.
2. **O Conector / Cuidador Empático (35%)**: Constrói pontes seguras. Vê o ser humano por trás do currículo. Não descarta pessoas; desenvolve talentos.
3. **O Governante / Estrategista de Performance (25%)**: A segurança metodológica de Myka Pamplona, governança corporativa e inteligência de mercado para decisões de C-level.
---
## 4. 🗣️ Tom de Voz, Guia de Comunicação & Modulação
### 4.1 Características Centrais do Tom
- **Autoridade com proximidade**: Profissional, assertivo, mas caloroso e acessível.
- **Humano e inspirador**: Foco em crescimento de pessoas reais e negócios sustentáveis.
- **Enérgico e direto**: Comunica movimento, pulso e transformação; evita burocracia e lentidão verbal.
- **Zero Pedantismo**: Clareza estratégica em primeiro lugar, sem excesso de termos técnicos herméticos.
### 4.2 Matriz de Modulação Editorial (4 Cenários)
| Cenário de Comunicação | Tom Adotado | Diretriz de Redação | Exemplo Canônico de Aplicação |
| :--- | :--- | :--- | :--- |
| **1. LinkedIn Corporativo & B2B** | Estratégico, Analítico, Resolutivo | Demonstrar como a contratação errada custa caro e como a Synapse acelera o crescimento. | *"Uma contratação errada custa até 15 vezes o salário da posição. Na Synapse, nós não buscamos currículos; alinhamos sinapses cognitivas e culturais que destravam o faturamento da sua empresa."* |
| **2. Instagram & Ativação de Marca** | Dinâmico, Vibrante, Inspirador | Postagens com alta energia, bastidores com Myka e depoimentos de talentos. | *"O mercado não precisa de mais recrutamento frio. Precisa de sinapses reais: energia que conecta, desenvolve e faz crescer. Prontos para dar o próximo salto?"* |
| **3. Landing Page Empresas (Conversão)** | Seguro, Veloz, Propositor de Valor | Foco em agilidade, assertividade e diagnóstico gratuito. | *"Contrate os 5% melhores talentos do mercado em metade do tempo. Solicite um diagnóstico estratégico da sua equipe com a Synapse."* |
| **4. Onboarding de Candidatos** | Acolhedor, Respeitoso, Estimulante | Fazer o candidato se sentir valorizado desde o primeiro segundo. | *"Bem-vindo à Synapse. Aqui, sua trajetória é vista com respeito e atenção aos detalhes. Vamos conectar seu potencial às empresas que realmente valorizam seu talento."* |
---
# 🎨 Synapse — Cores & Contraste (SSOT)
> **Documento:** `01-colors-and-contrast.md`
> **Status:** `SSOT Homologado` — Extraído das Diretrizes Oficiais e Key Visual da Marca
> **Última atualização:** 2026-08-26
---
## ⚠️ Single Source of Truth (SSOT) de Cores
A paleta de cores da **Synapse (Myka Pamplona)** equilibra a profundidade orgânica da neurociência (verdes profundos) com o calor humano e o pulso elétrico da alta performance (terracota e menta sináptico).
---
## 1. 🏛️ Paleta Oficial da Marca
### 1.1 Cores Primárias & Gradiente Canônico
| Token Semântico | Nome Comercial | HEX | RGB | OKLCH | CMYK (FOGRA39) | Pantone™ |
| :--- | :--- | :---: | :--- | :--- | :--- | :--- |
| `color-brand-dark` | **Verde Floresta Noturno** | `#051E1D` | rgb(5, 30, 29) | `oklch(0.215 0.031 191.5)` | C85 M55 Y60 K75 | **Black 7 C** |
| `color-brand-teal` | **Verde Escuro Synapse** | `#0B3B37` | rgb(11, 59, 55) | `oklch(0.320 0.050 186.8)` | C80 M45 Y55 K50 | **567 C** |
| `color-brand-petrol` | **Verde Petróleo Profundo** | `#1B524F` | rgb(27, 82, 79) | `oklch(0.402 0.057 190.1)` | C75 M35 Y50 K35 | **560 C** |
| `color-brand-mint` | **Verde Médio / Sinapse Mint** | `#67A97D` | rgb(103, 169, 125) | `oklch(0.678 0.094 154.0)` | C55 M5 Y60 K0 | **556 C** |
### 1.2 Cores de Acento & Calor Humano
| Token Semântico | Nome Comercial | HEX | RGB | OKLCH | CMYK (FOGRA39) | Pantone™ |
| :--- | :--- | :---: | :--- | :--- | :--- | :--- |
| `color-accent-terracotta` | **Terracota / Alta Energia** | `#903B14` | rgb(144, 59, 20) | `oklch(0.463 0.125 42.1)` | C25 M85 Y100 K20 | **7586 C** |
| `color-accent-terracotta-light` | **Terracota Suporte** | `#A84027` | rgb(168, 64, 39) | `oklch(0.505 0.145 41.5)` | C20 M80 Y95 K15 | **1675 C** |
| `color-neutral-sand` | **Off-White Areia Nobre** | `#ECE7E2` | rgb(236, 231, 226) | `oklch(0.930 0.009 67.6)` | C5 M5 Y8 K0 | **7527 C** |
| `color-neutral-beige`| **Bege Acolhimento** | `#E9C7AD` | rgb(233, 199, 173) | `oklch(0.835 0.050 63.2)` | C8 M22 Y30 K0 | **475 C** |
| `color-brand-white` | **Branco Puro** | `#FFFFFF` | rgb(255, 255, 255) | `oklch(1.000 0.000 0.0)` | C0 M0 Y0 K0 | **White** |
---
## 2. ⚡ Gradiente Oficial Synapse
O gradiente representa a transmissão e a fluidez do pulso elétrico neural:
```css
.synapse-gradient {
background: linear-gradient(135deg, #0B3B37 0%, #1B524F 50%, #67A97D 100%);
}
```
---
## 3. ✅ Auditoria de Contraste WCAG 2.2 AA / AAA
| Par de Cores (Texto / Fundo) | Razão de Contraste | Nível WCAG | Aplicação Recomendada |
| :--- | :---: | :---: | :--- |
| **Branco sobre Verde Floresta** (`#FFFFFF` / `#051E1D`) | **17.36:1** | **AAA** | **Headlines principais em Hero e fundos dark** |
| **Off-White sobre Verde Floresta** (`#ECE7E2` / `#051E1D`) | **14.13:1** | **AAA** | **Textos corridos no modo escuro** |
| **Branco sobre Verde Escuro** (`#FFFFFF` / `#0B3B37`) | **12.39:1** | **AAA** | **Botões primários e cabeçalhos** |
| **Branco sobre Verde Petróleo** (`#FFFFFF` / `#1B524F`) | **8.87:1** | **AAA** | **Cards de serviços B2B** |
| **Branco sobre Terracota** (`#FFFFFF` / `#903B14`) | **7.44:1** | **AAA** | **Botões CTA de alta conversão / Pulso** |
| **Verde Mint sobre Verde Floresta** (`#67A97D` / `#051E1D`) | **6.24:1** | **AA** | **Badges técnicos e ícones de conexão** |
| **Verde Floresta sobre Verde Mint** (`#051E1D` / `#67A97D`) | **6.24:1** | **AA** | **Botões de destaque com texto escuro** |
---
## 4. 📐 Tokens CSS (:root)
```css
:root {
/* Primitivos */
--synapse-dark: #051E1D;
--synapse-teal: #0B3B37;
--synapse-petrol: #1B524F;
--synapse-mint: #67A97D;
--synapse-mint-soft: #6DA18C;
--synapse-terracotta: #903B14;
--synapse-terra-light: #A84027;
--synapse-sand: #ECE7E2;
--synapse-beige: #E9C7AD;
--synapse-white: #FFFFFF;
/* Semânticos */
--color-interactive-primary: var(--synapse-teal);
--color-interactive-pulse: var(--synapse-terracotta);
--color-interactive-hover: var(--synapse-petrol);
--bg-surface-base: var(--synapse-white);
--bg-surface-dark: var(--synapse-dark);
--bg-surface-card: var(--synapse-sand);
--text-on-dark: var(--synapse-sand);
--text-primary: var(--synapse-dark);
--text-accent: var(--synapse-mint);
}
```
---
# 🔤 Synapse — Tipografia & Escala Fluida (SSOT)
> **Documento:** `02-typography.md`
> **Status:** `SSOT Homologado` — Fontes Oficiais: **Arsenal** + **TikTok Sans / Plus Jakarta Sans**
> **Última atualização:** 2026-08-26
---
## ⚠️ Single Source of Truth (SSOT) de Tipografia
A identidade tipográfica da **Synapse (Mykarlla Pamplona)** une a autoridade clássica e o requinte intelectual da família **Arsenal** com a agilidade, clareza e modernidade digital da **TikTok Sans** (ou seu gêmeo web oficial **Plus Jakarta Sans**).
---
## 1. 🏛️ Importações Web Oficiais (Google Fonts)
```html
```
```css
/* Importação CSS */
@import url('https://fonts.googleapis.com/css2?family=Arsenal:ital,wght@0,400;0,700;1,400;1,700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');
```
---
## 2. 📐 Papel das Famílias no Sistema
| Família | Estilo / Peso | Papel no Sistema | Exemplo de Aplicação |
| :--- | :--- | :--- | :--- |
| **Arsenal** | **Bold (700) e Regular (400)** | **Títulos H1, H2, Headlines de Impacto e Frases Institucionais** | *"CONECTANDO TALENTOS, CATALISANDO NEGÓCIOS"* |
| **Arsenal** | **Italic (400/700)** | **Citações de Myka Pamplona e Palavras-Chave de Alta Energia** | *"A energia que transforma potencial em resultado exponencial."* |
| **Plus Jakarta Sans / TikTok Sans** | **Regular (400) e Medium (500)** | **Corpo de texto, descrições de vagas, diagnósticos e artigos** | *"Processos seletivos ágeis e assertivos para empresas em escala."* |
| **Plus Jakarta Sans / TikTok Sans** | **SemiBold (600) e Bold (700)** | **Labels de botões, menus de navegação, status e badges** | *"CONTRATAR TALENTOS"* / *"BANCO DE TALENTOS"* |
| **JetBrains Mono** | **Medium (500)** | **Métricas de recrutamento, SLA de contratação e dados** | *"SLA: 14 dias"* / *"Turnover: < 2%"* |
---
## 3. 📱 Escala Tipográfica Fluida (`clamp()`)
```css
:root {
--font-display: 'Arsenal', serif;
--font-body: 'Plus Jakarta Sans', 'TikTok Sans', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Escala Modular 1.25 Fluid Clamp */
--text-hero: clamp(2.35rem, 5vw + 1rem, 4.000rem); /* 38px → 64px */
--text-h1: clamp(1.95rem, 4vw + 0.75rem, 3.200rem);/* 31px → 51px */
--text-h2: clamp(1.55rem, 3vw + 0.5rem, 2.500rem); /* 25px → 40px */
--text-h3: clamp(1.25rem, 2vw + 0.5rem, 1.950rem); /* 20px → 31px */
--text-lead: clamp(1.063rem, 1vw + 0.5rem, 1.250rem); /* 17px → 20px */
--text-body: clamp(0.938rem, 0.4vw + 0.75rem, 1.000rem);/* 15px → 16px */
--text-small:clamp(0.813rem, 0.2vw + 0.7rem, 0.875rem); /* 13px → 14px */
}
```
---
## 4. 🔠 Especificação do Logotipo Oficial
O logotipo combina o monograma fluido "S" com a tipografia "SYNAPSE":
```css
.synapse-wordmark {
font-family: var(--font-body);
font-weight: 300;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--synapse-dark); /* #051E1D */
}
```
---
# 📐 Synapse — Espaçamento, Tokens & Geometria (SSOT)
> **Documento:** `03-spacing-and-tokens.md`
> **Status:** `SSOT Homologado` — Grade 4pt/8pt & Raios Orgânicos de Sinapse
> **Última atualização:** 2026-08-26
---
## 1. 🏗️ Grid System & Espacialidade
A espacialidade segue a cadência matemática de **4pt e 8pt**, equilibrando a densidade analítica de dashboards com o respiro elegante de uma boutique executiva:
```
Base: 4px = 0.25rem
Escala: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128px
```
| Token | px | rem | Aplicação Recomendada |
| :--- | :---: | :---: | :--- |
| `space-1` | 4px | 0.250rem | Micro-gap entre ícone e badge |
| `space-2` | 8px | 0.500rem | Padding vertical de tags de competência |
| `space-3` | 12px | 0.750rem | Gap interno de botões |
| `space-4` | 16px | 1.000rem | Padding padrão de botões e inputs |
| `space-6` | 24px | 1.500rem | Padding interno de cards de talentos |
| `space-8` | 32px | 2.000rem | Gap entre blocos do funil |
| `space-12` | 48px | 3.000rem | Separação entre grandes seções |
| `space-16` | 64px | 4.000rem | Padding vertical de seções de Hero |
---
## 2. 🔘 Raios de Curvatura (Inspirados no Key Visual Oficial)
O Key Visual da marca apresenta contêineres com cantos amplamente arredondados e orgânicos, refletindo a fluidez neural do símbolo "S":
| Token | px | Aplicação |
| :--- | :---: | :--- |
| `radius-sm` | 6px | Tags de filtro de vagas |
| `radius-md` | **10px** | **Botões de ação primária e inputs** |
| `radius-lg` | 18px | Cards de serviços e depoimentos |
| `radius-xl` | **24px** | **Módulos centrais (como no Key Visual oficial)** |
| `radius-2xl`| 32px | Contêineres de destaque e banners |
| `radius-full`| 9999px | Badges de status e pílulas de navegação |
---
## 3. 🌑 Elevação & Sombras (Verde Petróleo Tingido)
| Token | Valor CSS | Aplicação |
| :--- | :--- | :--- |
| `shadow-sm` | `0 2px 8px rgba(11, 59, 55, 0.08)` | Cards em repouso |
| `shadow-md` | `0 4px 16px rgba(11, 59, 55, 0.12)` | Hover em cards de vagas |
| `shadow-lg` | `0 10px 30px rgba(11, 59, 55, 0.18)` | Modais de diagnóstico e formulários |
| `shadow-pulse`| `0 0 24px rgba(103, 169, 125, 0.35)` | Efeito de pulso elétrico sináptico |
---
# 💻 Synapse — Componentes Digitais & Landing Pages (SSOT)
> **Documento:** `04-digital-components.md`
> **Status:** `SSOT Homologado` — Arquitetura de Conversão B2B e Banco de Talentos
> **Última atualização:** 2026-08-26
---
## 1. 🏛️ HeaderNavbar — O Hub Conector
- **Esquerda**: Símbolo "S" em gradiente verde acompanhado da wordmark `SYNAPSE`.
- **Centro**: Menus estratégicos:
- *O Conceito* (Por que Synapse? Alta Energia)
- *Para Empresas* (Hunting Estratégico & Diagnóstico)
- *Para Candidatos* (Synapse Talents & Carreira)
- *Insights de Liderança* (Artigos com Myka Pamplona)
- **Direita**: Dual Action Buttons:
- Botão Outline: *"Sou Candidato"*
- Botão Primário Terracota: *"Contratar Talentos"*.
---
## 2. ⚡ ActionButton (6 Variantes Oficiais)
```
┌───────────────────────────┬───────────────────────────┬───────────────────────────┐
│ 1. PRIMARY TEAL │ 2. PULSE TERRACOTTA │ 3. MINT HIGHLIGHT │
│ Fundo: #0B3B37 │ Fundo: #903B14 │ Fundo: #67A97D │
│ Texto: #FFFFFF (Bold) │ Texto: #FFFFFF │ Texto: #051E1D (Bold) │
│ Uso: Conversão B2B │ Uso: Alta energia / CTA │ Uso: Destaques dinâmicos │
├───────────────────────────┼───────────────────────────┼───────────────────────────┤
│ 4. SAND SECONDARY │ 5. OUTLINE TEAL │ 6. GHOST CONNECTOR │
│ Fundo: #ECE7E2 │ Borda: 2px #0B3B37 │ Sem fundo nem borda │
│ Texto: #051E1D │ Texto: #0B3B37 │ Texto com seta interativa│
│ Uso: Cards em fundo dark │ Uso: Candidatos/login │ Uso: Saiba mais │
└───────────────────────────┴───────────────────────────┴───────────────────────────┘
```
### Especificação CSS da Variante Terracota (Alta Energia):
```css
.btn-synapse-pulse {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background-color: var(--synapse-terracotta); /* #903B14 */
color: var(--synapse-white);
font-family: var(--font-body);
font-weight: 700;
font-size: 1rem;
padding: 16px 32px;
border-radius: 10px;
border: none;
cursor: pointer;
box-shadow: 0 4px 16px rgba(144, 59, 20, 0.30);
transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-synapse-pulse:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(144, 59, 20, 0.45);
}
```
---
## 3. 👥 DualFunnelModule — O Módulo de Dupla Entrada
Componente central da Landing Page com duas portas de entrada claramente delineadas:
- **Porta A: Empresas Contratantes** (Fundo Verde Escuro `#0B3B37`, texto Off-White `#ECE7E2`, benefício: *"Hunting assertivo, fechamento de vagas em tempo recorde"*).
- **Porta B: Banco de Talentos** (Fundo Off-White `#ECE7E2`, texto Verde Floresta `#051E1D`, benefício: *"Visibilidade perante as empresas mais inovadoras do país"*).
---
## 4. 📋 DiagnosticForm — Solicitação de Diagnóstico Gratuito
- **Formulário Flutuante**: 4 campos essenciais (*Nome do Gestor*, *Empresa*, *WhatsApp Corporativo*, *Tamanho do Time*).
- **Badge Superior**: *"Diagnóstico Estratégico sem Custo"*.
- **CTA**: *"Agendar Análise com Myka Pamplona"*.
---
# 🧰 Synapse — Bibliotecas & Tooling do Cliente (SSOT)
> **Documento:** `05-libraries-and-tooling.md`
> **Status:** `Dados Pendentes / A Definir pelo Cliente`
> **Última atualização:** 2026-08-26
---
## ⚠️ Diretriz de Isolamento de Stack & Fidelidade aos Dados
> **Status da Stack de Produção:** Não informada / Vazia por determinação do cliente.
> Conforme o Guardrail Anti-Template Bleed, é terminantemente proibido presumir tecnologias que não constam nos documentos homologados da marca.
---
## 1. 🏗️ Stack Tecnológica de Produção
*(Pendente de definição pelo cliente / equipe técnica da Synapse)*
- **Portal & Landing Pages**: `[A definir pelo cliente]`
- **Banco de Talentos / ATS**: `[A definir pelo cliente]`
- **CRM & Automação**: `[A definir pelo cliente]`
---
## 2. 🔣 Biblioteca de Ícones Homologada: Lucide Icons
- **Biblioteca Oficial**: [Lucide Icons](https://lucide.dev/)
- **Espessura do Traço (Stroke Width)**: `1.6px` (firme, contemporâneo e limpo)
| Ação / Conceito | Componente Lucide | Significado no Sistema |
| :--- | :--- | :--- |
| **Sinapses & Conexão** | `` | Redes neurais e conexões |
| **Pulso Elétrico / Energia** | `` | Alta performance e movimento |
| **Empresas Contratantes** | `` | Hunting corporativo B2B |
| **Candidatos & Talentos** | `` | Synapse Talents |
| **Ponte Estratégica** | `` | União entre partes |
| **Diagnóstico de Equipe** | `` | Análise de fit cultural |
---
# 🖨️ Synapse — Produção Gráfica & Editorial (SSOT)
> **Documento:** `06-print-and-editorial.md`
> **Status:** `SSOT Homologado` — Especificações de Impressão, Papelaria & Relatórios
> **Última atualização:** 2026-08-26
---
## 1. ⚙️ Normas Técnicas para Materiais Gráficos
- **Espaço de Cor Gráfico**: CMYK padrão **ISO Coated v2 (ECI) / FOGRA39**.
- **Resolução Mínima**: **300 DPI** em escala 1:1.
- **Sangria (Bleed)**: Mínimo de **3mm** para impressos convencionais.
- **Margem de Segurança Interna**: **5mm** de distância para textos e marcas de corte.
---
## 2. 🎨 Fórmulas CMYK & Pantone™ Oficiais
| Cor | HEX | CMYK Oficial | Pantone™ Correspondente | Aplicação em Gráfica |
| :--- | :---: | :--- | :--- | :--- |
| **Verde Escuro Synapse** | `#0B3B37` | **C80 M45 Y55 K50** | **Pantone 567 C** | Capa de pastas, cartões executivos |
| **Terracota / Energia** | `#903B14` | **C25 M85 Y100 K20** | **Pantone 7586 C** | Selos de aprovação, acentos nobres |
| **Verde Médio Mint** | `#67A97D` | **C55 M5 Y60 K0** | **Pantone 556 C** | Linhas de conexão e gráficos |
| **Off-White Areia** | `#ECE7E2` | **C5 M5 Y8 K0** | **Pantone 7527 C** | Páginas internas de relatórios |
---
## 3. 📄 Peças Gráficas Homologadas
### 3.1 Relatório de Diagnóstico de Hunting (Executive Dossier)
- **Formato**: A4 Vertical (210 × 297mm).
- **Papel**: Couché Fosco 150g/m² interno; Capa em Couché Fosco 300g/m² com laminação soft touch e verniz reserva no símbolo "S".
- **Conteúdo**: Mapeamento de competências, score de aderência cultural e histórico executivo do candidato.
### 3.2 Cartão de Visitas Executivo Myka Pamplona
- **Formato**: 90 × 50mm.
- **Papel**: Colorplus Verde Escuro 320g ou Couché 350g empastado.
- **Acabamento**: Hot stamping cobre/terracota no símbolo "S" e tipografia em baixo relevo seco (letterpress).
---
# 📱 Synapse — Redes Sociais & Conteúdo Estratégico (SSOT)
> **Documento:** `07-social-media.md`
> **Status:** `SSOT Homologado` — Grids Feed 4:5, LinkedIn & Ativação de Marca
> **Última atualização:** 2026-08-26
---
## 1. 📐 Formatos & Safe Zones Obrigatórias
- **Feed Instagram (Padrão Único Obrigatório)**: **1080 × 1350px (Proporção 4:5)**. Ocupa o máximo de respiro vertical no feed.
- **Carrosséis LinkedIn (Documentos PDF)**: **1080 × 1350px (4:5)**. Padrão ouro para leitura de artigos executivos no mobile.
- **Stories & Reels**: **1080 × 1920px (Proporção 9:16)**.
- *Safe Zone Superior*: 250px livres.
- *Safe Zone Inferior*: 320px livres.
---
## 2. 🎨 Padrão Visual dos Criativos
1. **Cromática**: Fundo em Verde Floresta Noturno (`#051E1D`) ou Verde Escuro (`#0B3B37`) com textos em Off-White (`#ECE7E2`) e acentos pontuais em Terracota (`#903B14`).
2. **Tipografia**: Títulos em **Arsenal Bold** (transmitindo peso intelectual e postura) e textos explicativos em **Plus Jakarta Sans**.
3. **Formas Arredondadas**: Cards com bordas arredondadas amplas (`24px`), espelhando a estética do Key Visual oficial.
---
## 3. 🎯 Os 3 Modelos Editoriais Canônicos
```
┌───────────────────────────┬───────────────────────────┬───────────────────────────┐
│ MODELO A │ MODELO B │ MODELO C │
│ "Pulso de Liderança" │ "Synapse de Talentos" │ "Estiçar Gente" │
├───────────────────────────┼───────────────────────────┼───────────────────────────┤
│ • LinkedIn & Instagram │ • Oportunidade Aberta │ • Citação de Myka │
│ • "O Custo de Contratar" │ • Cargo, Senioridade, SLA │ • Tipografia Arsenal │
│ • Carrossel de 6 slides │ • Badge: "Vaga Confidenc."│ • Alta energia & impacto │
│ • Foco: Autoridade B2B │ • Foco: Captação de C-lev │ • Foco: Cultura e conexão │
└───────────────────────────┴───────────────────────────┴───────────────────────────┘
```
---
# 🎬 Synapse — Direção de Arte & Motion (SSOT)
> **Documento:** `08-art-direction-and-motion.md`
> **Status:** `SSOT Homologado` — Ensaios Executivos, Biofilia & Efeito Synapse Pulse
> **Última atualização:** 2026-08-26
---
## 1. 📷 Direção de Fotografia & Imagem Pessoal (Myka Pamplona)
- **Expressão & Posicionamento**: Postura de alta executiva calorosa, olhar direto, sorriso acolhedor e confiança inabalável.
- **Paleta de Figurino**: Peças de alfaiataria em tons de verde escuro, terracota suave, bege e off-white.
- **Cenários & Estética**: Espaços contemporâneos com design biofílico (vegetação natural integrada à arquitetura moderna, texturas de madeira nobre e iluminação quente de 4500K a 5000K).
---
## 2. ⚡ O Efeito "Synapse Pulse" (Motion de Identidade)
Nas interfaces digitais e vinhetas de vídeo, o símbolo "S" ganha vida com uma propagação de pulso luminoso:
- Um ponto de luz em Verde Mint (`#67A97D`) ou Terracota (`#903B14`) percorre a curvatura do "S" simulando um disparo elétrico sináptico.
---
## 3. 🎞️ Motion Tokens Digitais
| Token | Duração | Curva de Aceleração | Uso na Interface |
| :--- | :---: | :--- | :--- |
| `motion-fast` | 150ms | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Hover de botões |
| `motion-normal`| 250ms | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Abertura de modais e accordions |
| `motion-pulse` | 600ms | `cubic-bezier(0.16, 1, 0.3, 1)` | Efeito de ativação do pulso elétrico |
---
# 🤖 Synapse — Catálogo de Prompts de IA Generativa (SSOT)
> **Documento:** `09-generative-ai-prompts.md`
> **Status:** `SSOT Homologado` — Prompts para Midjourney v6.1, FLUX.1 & Runway
> **Última atualização:** 2026-08-26
---
## 1. 🖼️ Prompts para Imagens Estáticas (Midjourney v6.1 & FLUX.1)
### Prompt 01: Ensaio de Liderança Executiva (Myka Pamplona Inspired)
```text
High-end editorial corporate portrait of an elegant Brazilian female CEO and executive recruiter, 30s, confident and charismatic expression, tailored terracotta linen blazer with dark forest green silk undershirt, warm inviting smile, seated in a contemporary biophilic architectural office with lush indoor plants and walnut wood accents, soft daylight through glass facade, shot on Hasselblad H6D-100c, 80mm f/2.8 lens, ultra clean luxury corporate aesthetic --ar 4:5 --style raw --v 6.1
```
### Prompt 02: Mockup do Portal Synapse & Dashboard de Talentos
```text
Workspace desk shot, sleek MacBook Pro on a solid warm oak table displaying an ultra-clean executive recruitment platform with dark green and mint interface tags, rounded cards layout, warm coffee mug beside, terracotta notebook and minimalist pen, soft sunlight, photorealistic, 8k --ar 4:5 --style raw --v 6.1
```
### Prompt 03: Reunião Executiva de Conexão C-Level
```text
Cinematic scene of an executive headhunter presenting an executive candidate dossier to a tech startup founder in a private architectural lounge, dark teal and warm sand interior palette, professional empathy, subtle depth of field, authentic corporate interaction, high resolution --ar 4:5 --style raw --v 6.1
```
---
## 2. 🎥 Prompts de Vídeo para B-Roll (Runway Gen-3)
```text
Cinematic 4k slow motion, two business executives shaking hands warmly in a modern sunlit glass office, dynamic camera push-in, subtle light flare, feeling of transformative connection and high energy --ar 9:16
```
---
# 🛡️ GUARDRAILS — Políticas de Imutabilidade, Isolamento e Governança
> **Projeto:** Synapse 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** alterar ou distorcer as cores mestras:
- Verde Floresta Noturno: `#051E1D` (Black 7 C)
- Verde Escuro Synapse: `#0B3B37` (Pantone 567 C)
- Terracota de Alta Energia: `#903B14` (Pantone 7586 C)
- Verde Médio Mint: `#67A97D` (Pantone 556 C)
- Off-White Areia: `#ECE7E2`
- **PROIBIDO** o uso de azuis corporativos genéricos ou vermelhos agressivos de erro no lugar do terracota.
### Tipografia (SSOT: `02-typography.md`)
- **TÍTULOS E HEADLINES**: Estritamente **Arsenal** (Google Fonts).
- **TEXTOS CORRIDOS E APOIO**: Estritamente **TikTok Sans** ou o correspondente web **Plus Jakarta Sans**.
---
## 2. 🔒 Isolamento da Stack Técnica do Cliente
- A stack do visualizador do Design System (Preact, Vite, Chota CSS) serve unicamente para documentação interna e demonstração.
- A stack de produção real do cliente está pendente de definição por parte do cliente em `05-libraries-and-tooling.md` (proibido presumir ferramentas não homologadas).
---
## 3. �� Diretriz Anti-Template Bleed (Zero Hallucination)
- É estritamente vedada a importação de regras ou tokens de outras marcas para a Synapse.
---