# Design System Oficial — agencia-generica-teste > 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) --- # Marca Genérica (Teste) — Visão Geral > **Documento:** `00-brand-overview.md` > **Cliente:** Marca Genérica (Teste) (Slug: `agencia-generica-teste`) > **Agência Geradora:** Propenza Marketing > **Papel no Sistema:** Âncora de contexto, arquétipo de marca, arquitetura de assinaturas e modulação de tom de voz --- ## 1. ⚓ The Context Anchor (Âncora de Contexto) - **Perfil do Cliente & Segmento**: Agência e consultoria de marketing de alta performance, design system e inteligência artificial para marcas em escala. - **Proposta Única de Valor (UVP)**: Construir marcas sólidas e escaláveis através da convergência entre inteligência de dados, tecnologia e design consistente. - **Objetivo Central de Negócio**: Conversão de clientes corporativos, posicionamento como autoridade em IA aplicada e retenção de contratos estratégicos. - **Limites Exatos de Mídia**: Desktop (1440px / 12 colunas), Mobile (390px / 4 colunas), Impressos (Cartão 90x50mm, A4 300 DPI FOGRA39) e Redes Sociais (Feed 4:5 1080x1350, Stories 9:16 1080x1920). - **Baseline de Acessibilidade Obrigatório**: **WCAG 2.2 Nível AA** como padrão mínimo (Contraste 4.5:1 para texto normal, 3:1 para texto grande $>18\text{pt}$ e componentes de interface). --- ## 2. 🏛️ Arquitetura de Marca & Assinaturas Oficiais A marca opera com diferentes assinaturas conforme o contexto de aplicação, respeitando a regra de ouro: > **Regra de Ouro:** *A tagline/descritor pode variar por unidade de negócio; o isologo, as proporções, a tipografia e as cores mestras **nunca mudam**.* | Assinatura / Tagline | Aplicação Oficial | Contexto de Uso | | :--- | :--- | :--- | | **Design System & IA Generativa** | Assinatura Principal | Padrão para site, institucional, propostas comerciais e redes | | **Holding & Ventures** | Grupo / Institucional | Documentos societários, relatórios executivos e contratos | | **Soluções Digitais** | Unidade Técnica | Landing pages de produto, web apps e documentação de código | --- ## 3. 🎭 Personalidade, Arquétipo & Tom de Voz ### Arquétipo Principal: **O Mago / O Criador Estrategista** - **Essência**: Construir marcas sólidas e escaláveis através da convergência entre inteligência de dados, tecnologia e design consistente. - **Sensação Transmitida**: Segurança executiva, clareza estratégica e acabamento refinado. ### Pilares de Tom de Voz: 1. **Autoritário & Cirúrgico**: Frases assertivas sem rodeios ou jargões vazios. Baseado em dados e métricas reais. 2. **Visionário & Vanguardista**: Demonstra domínio das tecnologias emergentes (IA, design generativo, automação). 3. **Premium & Confiável**: Vocabulário elegante, polido e respeitoso. ### Matriz de Modulação de Voz (Voice Modulation Grid): | Contexto da Jornada | Estado Emocional do Cliente | Modulação de Tom | Diretriz de Redação & Exemplo | | :--- | :--- | :--- | :--- | | **1. Descoberta & Hero Section** | Curioso, cético, buscando autoridade | **Assertivo, Inspirador & Direto** | Proposta única de valor e números concretos.
*Ex: "Estratégia de crescimento, consistência visual e engenharia de software."* | | **2. Conversão & Checkout** | Decidido mas avaliando risco | **Seguro, Transparente & Sem Fricção** | Clareza absoluta de entrega, sem letras miúdas.
*Ex: "Sem fidelidade. Cancele quando quiser com 1 clique."* | | **3. Mensagens de Erro & Falhas** | Frustrado, confuso | **Calmante, Instrutivo & Empático** | Nunca culpar o usuário. Explicar como resolver.
*Ex: "Não encontramos essa conta. Verifique o e-mail digitado ou redefina sua senha."* | | **4. Pós-venda & Suporte** | Entusiasmado ou com dúvida | **Resolutivo, Acolhedor & Eficiente** | Orientação ágil do próximo passo.
*Ex: "Seu ambiente está pronto! Vamos configurar seu primeiro token?"* | --- ## 4. 🎨 Pilares Visuais - **Pilar 1 — Dark Mode Monumental**: Fundos escuros profundos (`#0A0F1D`) que transmitem tecnologia, exclusividade e modernidade. - **Pilar 2 — Cobalto Elétrico & Neon Acento**: O azul elétrico (`#1D63FF`) atua como condutor de energia e foco nos CTAs principais. - **Pilar 3 — Vidro Fosco & Luz Direcional**: Elementos em glassmorphism com bordas sutis de 1px e luz difusa, criando sensação de profundidade e dimensionalidade. --- # Marca Genérica (Teste) — Cores & Contraste > **Documento:** `01-colors-and-contrast.md` > **Cliente:** Marca Genérica (Teste) (Slug: `agencia-generica-teste`) > **Agência Geradora:** Propenza Marketing > **Acessibilidade Baseline:** WCAG 2.2 Nível AA / AAA > **Papel no Sistema:** Fonte Única da Verdade (SSOT) de todas as definições cromáticas da marca --- ## 1. 📐 Regra de Distribuição Cromática Proporcional (60 / 25 / 10 / 5) Para garantir equilíbrio visual, legibilidade e evitar poluição estética, toda peça deve seguir rigorosamente a proporção de peso cromático: | Proporção | Camada | Cores Aplicáveis | Função na Composição | | :--- | :--- | :--- | :--- | | **60%** | **Fundo Neutro Dominante** | Dark Base (`#0A0F1D`) ou Off-White (`#FAFAFB`) | Espaço negativo, respiro visual e imersão | | **25%** | **Estrutura & Títulos** | Cobalto Primário (`#1D63FF`) | Títulos principais, blocos sólidos de ancoragem | | **10%** | **Linhas & Neutros de Apoio**| Cinzas (`#1E293B` / `#E2E8F0`) | Divisores, molduras, metadados e textos secundários | | **5%** | **Acentos & Pontos de Foco**| Cyan Neon (`#00F5D4`) | Apenas botões de ação (CTAs), badges e dados-chave | --- ## 2. 🎨 Paleta Primária da Marca | Amostra | Nome do Token | HEX | RGB | OKLCH | CMYK | Pantone | Uso Principal | | :--- | :--- | :--- | :--- | :--- | :--- | :--- | :--- | | 🟦 | `color-brand-500` | `#1D63FF` | `rgb(29, 99, 255)` | `oklch(0.58 0.24 264.5)` | `C:88 M:65 Y:0 K:0` | `PMS 2728 C` | Cor Mestra Institucional / Ação Principal | | 🟦 | `color-brand-600` | `#1050E6` | `rgb(16, 80, 230)` | `oklch(0.50 0.23 264.5)` | `C:92 M:72 Y:0 K:0` | `PMS 286 C` | Estados de Hover / Destaque Escuro | | 🟦 | `color-brand-50` | `#EFF5FF` | `rgb(239, 245, 255)` | `oklch(0.97 0.02 264.5)` | `C:5 M:2 Y:0 K:0` | `PMS 656 C` | Fundos de Apoio e Cards Suaves | --- ## 3. ⚡ Paleta Secundária & Acentos | Amostra | Nome do Token | HEX | RGB | OKLCH | CMYK | Pantone | Uso Principal | | :--- | :--- | :--- | :--- | :--- | :--- | :--- | :--- | | 🟩 | `color-accent-cyan` | `#00F5D4` | `rgb(0, 245, 212)` | `oklch(0.88 0.17 175.2)` | `C:60 M:0 Y:30 K:0` | `PMS 325 C` | Acentos Tecnológicos e Neon Glow | | 🟪 | `color-accent-purple` | `#7928CA` | `rgb(121, 40, 202)` | `oklch(0.46 0.26 305.8)` | `C:75 M:95 Y:0 K:0` | `PMS 2685 C` | Gradientes Secundários de IA | --- ## 4. 🛡️ Paleta Semântica & Cores de Dados | Função | Nome do Token | HEX | RGB | Aplicação | | :--- | :--- | :--- | :--- | :--- | | **Sucesso / Conformidade** | `color-semantic-success` | `#16A34A` | `rgb(22, 163, 74)` | Confirmações de envio, status ativo | | **Atenção / Alerta** | `color-semantic-warning` | `#D97706` | `rgb(217, 119, 6)` | Avisos preventivos e limites de uso | | **Erro / Desvio** | `color-semantic-danger` | `#DC2626` | `rgb(220, 38, 38)` | Erros de validação e exclusões | | **Dado Técnico / Telemetria**| `color-semantic-info` | `#0284C7` | `rgb(2, 132, 199)` | Gráficos, métricas e fluxos de dados | --- ## 5. 👁️ Relatório de Contraste WCAG 2.2 AA / AAA | Par de Cores (Texto / Fundo) | Taxa de Contraste | Nível WCAG | Avaliação | | :--- | :--- | :--- | :--- | | Texto Claro (`#F8FAFC`) sobre Fundo Base (`#0A0F1D`) | **16.8:1** | WCAG AAA | ✅ Aprovado com Louvor | | Texto Escuro (`#1C1E21`) sobre Fundo Claro (`#FFFFFF`) | **15.4:1** | WCAG AAA | ✅ Aprovado com Louvor | | Texto Branco (`#FFFFFF`) sobre Botão Brand (`#1D63FF`) | **4.92:1** | WCAG AA | ✅ Aprovado para Texto Normal | | Ícone Cyan (`#00F5D4`) sobre Fundo Escuro (`#0A0F1D`) | **11.2:1** | WCAG AAA | ✅ Aprovado com Louvor | ### 📸 Regra de Scrim para Texto sobre Imagens - **Proibição Absoluta:** Nunca aplicar tipografia diretamente sobre fotos sem tratamento de contraste. - **Solução Padrão:** Uso obrigatório de camada dark (*scrim*) com opacidade entre **55% e 75%**, ou aplicação do texto dentro de um card sólido (branco ou dark). --- # Marca Genérica (Teste) — Tipografia > **Documento:** `02-typography.md` > **Cliente:** Marca Genérica (Teste) (Slug: `agencia-generica-teste`) > **Agência Geradora:** Propenza Marketing > **Provedor:** Google Fonts > **Papel no Sistema:** Fonte Única da Verdade (SSOT) de todas as decisões tipográficas e escalas fluidas --- ## 1. 🔤 Pareamento Tipográfico Principal ### Família Display & Títulos: **Plus Jakarta Sans** - **Categoria**: Sans-Serif Geométrica Contemporânea - **Pesos Utilizados**: 600 (Semi-Bold), 700 (Bold), 800 (Extra-Bold) - **Tracking Oficial**: `-1%` a `-2%` (para títulos imponentes e modernos) - **Import Google Fonts**: ```html ``` ### Família Body & UI: **Inter** - **Categoria**: Neo-Grotesca Humanista - **Pesos Utilizados**: 400 (Regular), 500 (Medium), 600 (Semi-Bold) - **Tracking Oficial**: `0` (neutro para máxima legibilidade) ### Família Código & Métricas: **JetBrains Mono** - **Categoria**: Monospace Especializada em Dados & Código - **Uso**: Exibição de métricas numéricas, taxas de conversão e dados técnicos --- ## 2. 📐 Escala Modular Tipográfica Fluida (`clamp()`) | Token | Tamanho Desktop | Função Fluida CSS `clamp()` (Mobile 390px $\rightarrow$ Desktop 1440px) | Peso | Line Height | Tracking | Uso Oficial | | :--- | :--- | :--- | :--- | :--- | :--- | :--- | | `text.display` | 56px / 3.5rem | `clamp(2.25rem, 1.78rem + 1.9vw, 3.5rem)` | 800 | 1.1 (62px) | -0.03em | Hero Titular | | `text.h1` | 40px / 2.5rem | `clamp(1.75rem, 1.47rem + 1.14vw, 2.5rem)` | 700 | 1.2 (48px) | -0.025em | Títulos de Seções Principais | | `text.h2` | 32px / 2.0rem | `clamp(1.5rem, 1.31rem + 0.76vw, 2.0rem)` | 700 | 1.25 (40px) | -0.02em | Subtítulos H2 de Módulos | | `text.h3` | 24px / 1.5rem | `clamp(1.25rem, 1.15rem + 0.38vw, 1.5rem)` | 600 | 1.3 (32px) | -0.015em | Títulos de Cards e Métricas | | `text.kicker` | 14px / 0.875rem | `14px / 0.875rem` (Fixo em Caixa Alta) | 700 | 1.2 (18px) | **+0.08em** | Rótulo acima de títulos | | `text.body` | 16px / 1.0rem | `clamp(0.9375rem, 0.91rem + 0.1vw, 1.0rem)` | 400 | 1.5 (24px) | 0 | Texto de Leitura Padrão | | `text.sm` | 14px / 0.875rem | `14px / 0.875rem` (Fixo) | 500 | 1.45 (20px) | +0.01em | Botões, Inputs, Labels | --- ## 3. ✍️ Assinatura Textual: Negrito Seletivo & Ergonomia ### Diretriz de Negrito Seletivo (Selective Bolding) Dentro de parágrafos regulares, aplique destaque intencional em **Bold / Semi-Bold** apenas nos termos técnicos, verbos de ação e entregáveis que carregam o valor da mensagem (ex.: *"Desenvolvemos **design systems escaláveis**, garantindo **consistência matemática absoluta** em todos os pontos de contato"*). Isso guia a leitura dinâmica executiva em padrão F. ### Limite Ergonômico de Leitura - **Largura Máxima do Bloco de Texto**: Nunca ultrapassar **65 a 75 caracteres por linha** (~`720px`). - **Alinhamento**: Sempre alinhado à esquerda. Nunca justificar e nunca hifenizar. --- # Marca Genérica (Teste) — Grid & Tokens > **Documento:** `03-spacing-and-tokens.md` > **Cliente:** Marca Genérica (Teste) (Slug: `agencia-generica-teste`) > **Agência Geradora:** Propenza Marketing > **Padrão:** W3C Design Tokens Community Group (DTCG) > **Papel no Sistema:** Fonte Única da Verdade (SSOT) de todas as dimensões geométricas, grid, espaçamentos, raios e sombras --- ## 1. 📐 Escala Espacial Matemática (Grid de 4pt / 8pt) Nenhum valor arbitrário é permitido no código. Todos os espaçamentos, paddings e margins devem derivar estritamente desta escala: | Token | Valor em Pixels | Valor em Rem | Aplicação Primária | | :--- | :--- | :--- | :--- | | `space.1` | `4px` | `0.25rem` | Micro-espaçamento, gaps entre ícone e texto | | `space.2` | `8px` | `0.5rem` | Padding interno compacto de tags e badges | | `space.3` | `12px` | `0.75rem` | Gaps entre itens agrupados em listas | | `space.4` | `16px` | `1.0rem` | Padding padrão de botões e inputs | | `space.6` | `24px` | `1.5rem` | Padding interno de cards de conteúdo | | `space.8` | `32px` | `2.0rem` | Gutter do grid de colunas | | `space.12` | `48px` | `3.0rem` | Separação entre módulos e seções | | `space.16` | `64px` | `4.0rem` | Padding vertical de seções de Landing Page | | `space.24` | `96px` | `6.0rem` | Padding monumental da Hero Section | --- ## 2. 🛡️ Área de Proteção Matemática do Logotipo - **Fórmula do Espaço Livre**: $X = \text{altura da letra 'a' minúscula}$ da tipografia Plus Jakarta Sans no logotipo. - **Margem de Segurança Externa**: Margem livre mínima de **$X$ em todos os 4 lados**. Nenhum texto, botão, linha ou foto pode invadir esse espaço. - **Espaçamento Interno**: Distância fixa entre isologo, logotipo e descritor $= X/2$. --- ## 3. 📱 Zonas Seguras de Interface (Safe Zones) | Formato | Dimensão | Margem Interna | Zona Livre Obrigatória (Safe Zone) | | :--- | :--- | :--- | :--- | | **Feed Retrato** | `1080 x 1350 px` | `80px` em todas as bordas | Conteúdo centralizado dentro de 920px de largura útil | | **Stories & Reels** | `1080 x 1920 px` | `80px` laterais | **250px no topo** (header do app) e **320px na base** (barra de resposta e perfil) | | **Desktop Web** | Container `1200px` | `24px` padding | Gutter de 24px em grid de 12 colunas | --- ## 4. 🔲 Escala de Raios de Borda (`border-radius`) | Token | Valor em Pixels | Aplicação | | :--- | :--- | :--- | | `radius.xs` | `4px` | Badges, tags pequenas e checkboxes | | `radius.sm` | `6px` | Botões secundários e campos de input | | `radius.md` | `8px` | Botões primários e cards padrão | | `radius.lg` | `12px` | Modais e cards em destaque | | `radius.xl` | `16px` | Containers principais e painéis flutuantes | | `radius.full` | `9999px` | Pílulas e avatares circulares | --- ## 5. 🌑 Escala de Elevação & Sombras (`box-shadow`) | Token | Valor CSS | Aplicação | | :--- | :--- | :--- | | `shadow.sm` | `0 1px 2px 0 rgba(0, 0, 0, 0.05)` | Botões em repouso e badges | | `shadow.md` | `0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)` | Cards em repouso e dropdowns | | `shadow.lg` | `0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)` | Cards no hover e menus flutuantes | | `shadow.xl` | `0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)` | Modais e dialogs de destaque | --- # Marca Genérica (Teste) — Componentes Digitais > **Documento:** `04-digital-components.md` > **Cliente:** Marca Genérica (Teste) (Slug: `agencia-generica-teste`) > **Agência Geradora:** Propenza Marketing > **Padrão:** Modern UI / Component Vocabulary > **Papel no Sistema:** Especificação visual determinística de componentes interativos e anatomia de Landing Pages --- ## 1. 🔘 Botões de Ação (`ActionButton`) ### Diretriz de Copywriting de Alta Conversão (Verbo + Entregável) > **Regra Obrigatória:** Proibido o uso de termos genéricos como *"Saiba mais"* ou *"Clique aqui"*. Todo botão deve obrigatoriamente combinar um **Verbo de Ação + Entregável Técnico Tangível** (ex.: *"Solicitar Diagnóstico de Marca"*, *"Falar com um Estrategista"*, *"Ver Casos de Sucesso"*). ### Especificações Físicas: - **Altura Base**: `48px` (Touch-target acessível WCAG) - **Padding**: `12px 28px` - **Border Radius**: `8px` (`var(--radius-md)`) - **Tipografia**: `15px` / Semi-Bold / Caixa Alta e Baixa | Variante | Fundo (Background) | Texto (Color) | Borda | Efeito Hover | | :--- | :--- | :--- | :--- | :--- | | `primary` | `#1D63FF` | `#FFFFFF` | Nenhuma | `background: #1050E6; box-shadow: 0 4px 14px rgba(29, 99, 255, 0.3)` | | `secondary` | `transparent` | `#1D63FF` | `1.5px solid #1D63FF` | `background: rgba(29, 99, 255, 0.08)` | | `ghost` | `transparent` | `#94A3B8` | Nenhuma | `color: #F8FAFC; background: rgba(255, 255, 255, 0.05)` | --- ## 2. 🔢 Numeradores Circulares de Processo (`StepBadge`) Utilizados para sequências metodológicas, etapas de trabalho e fluxos cronológicos: - **Formato**: Círculo sólido com diâmetro de `48px` (mobile/web) ou `80px` (social). - **Fundo**: `#1D63FF` sólido com número em branco Bold centralizado. - **Padrão de Numeração**: **Dois dígitos sempre** (`01`, `02`, `03`) para etapas de processo; dígito único (`1`, `2`, `3`) apenas para listas curtas. --- ## 3. 🗂️ Cards de Conteúdo (`ContentCard`) - **Fundo**: Superfície base ou elevada (`var(--bg-secondary-color)`) - **Borda**: `1px solid var(--color-lightGrey)` - **Padding**: `24px` a `32px` - **Border Radius**: `12px` (`var(--radius-lg)`) --- ## 4. 📝 Campos de Formulário (`FormInput`) - **Altura Mínima**: `48px` (acessibilidade para dedos em mobile) - **Padding**: `12px 16px` - **Focus**: `border-color: #1D63FF; box-shadow: 0 0 0 3px rgba(29, 99, 255, 0.15)` - **Error**: `border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15)` --- ## 5. 🖥️ Anatomia da Landing Page & Bloco de Prova Quantificada A estrutura de Landing Page validada da marca segue a seguinte hierarquia: 1. **Sticky Header**: Logo da marca, links âncora e botão CTA principal. 2. **Hero Section Dividida**: - Lado Esquerdo: Kicker em caixa alta + H1 com proposta de valor direta + Parágrafo Lead com negrito seletivo + CTA Duplo. - Lado Direito: Foto técnica ou render 3D em perspectiva. 3. **Módulo de Problema & Solução**: 3 a 4 benefícios tangíveis. 4. **Módulo "Como Funciona"**: Etapas numeradas com o componente `StepBadge` (`01`, `02`, `03`). 5. 📊 **BLOCO OBRIGATÓRIO: Prova Quantificada (Case com Números)**: - **Regra:** A marca argumenta com dados mensurados reais (ex.: *"+340% de ROI Médio"*, *"100% de Consistência Visual"*, *"+R$ 48M Gerados"*), eliminando adjetivos vagos. 6. **Formulário de Conversão Final**: Redução de fricção e botão com entrega clara. 7. **FAQ Técnico & Rodapé Institucional**. --- # Marca Genérica (Teste) — Bibliotecas & Tooling > **Documento:** `05-libraries-and-tooling.md` > **Cliente:** Marca Genérica (Teste) (Slug: `agencia-generica-teste`) > **Agência Geradora:** Propenza Marketing > **Papel no Sistema:** Definição das bibliotecas e frameworks oficiais de código reutilizável --- ## 1. 🖌️ Sistema de Ícones: **Lucide Icons** - **Espessura Global Fixa**: `strokeWidth={1.3}` (para visual refinado, sóbrio e moderno). - **Importação Recomendada**: Direta via ESM (`lucide-react` ou `lucide-preact` para zero impacto de bundle). - **Tamanhos Padrão**: - `size={16}`: Ícones inline com texto, badges e botões compactos. - `size={20}`: Ícones em cards e botões principais de ação. - `size={24}`: Ícones de destaque em hero sections e listas de features. --- ## 2. 🧩 UI Primitives: **shadcn/ui & Radix UI** - **Radix UI Primitives**: Componentes acessíveis e não estilizados (`@radix-ui/react-dialog`, `@radix-ui/react-dropdown-menu`, `@radix-ui/react-tabs`). - **Padrão de Slot**: Uso de `@radix-ui/react-slot` para botões polimórficos (`asChild`). - **Utilitários de Classe**: `clsx` e `tailwind-merge` (`cn()`) para merge dinâmico e sem conflito de classes. --- ## 3. 🎨 Micro CSS & Estilização: **Chota CSS & Tailwind CSS** - **Micro Framework Chota**: Normalização leve (~3KB) de formulários, tipografia e grids. - **Mapeamento de Variáveis**: Tokens expostos em `tokens.css` consom as variáveis nativas `:root`. - **Configuração Tailwind**: `tailwind.config.js` estendido mapeando diretamente para os tokens semânticos. --- # Marca Genérica (Teste) — Produção Gráfica > **Documento:** `06-print-and-editorial.md` > **Cliente:** Marca Genérica (Teste) (Slug: `agencia-generica-teste`) > **Agência Geradora:** Propenza Marketing > **Padrão Gráfico:** CMYK FOGRA39 / 300 DPI / Sangria de 3mm > **Papel no Sistema:** Diretrizes técnicas para gráfica e materiais físicos --- ## 1. 🖨️ Padrões de Pré-Impressão - **Perfil de Cor**: `ISO Coated v2 (ECI) / FOGRA39` - **Resolução Mínima**: `300 DPI` em escala 1:1 - **Sangria Obrigatória (Bleed)**: `3mm` em todas as bordas externas - **Margem de Segurança Interna**: `4mm` de distância dos cortes --- ## 2. 📇 Papelaria Institucional ### Cartão de Visita Executivo (90x50mm) - **Formato Final**: `90 x 50 mm` (Arquivo com sangria: `96 x 56 mm`) - **Papel Recomendado**: Couché Fosco 350g ou Papel Offset Especial 300g - **Acabamentos**: Laminação Fosca Soft-Touch + Verniz Localizado / Hot Stamping Ciano --- # Marca Genérica (Teste) — Redes Sociais > **Documento:** `07-social-media.md` > **Cliente:** Marca Genérica (Teste) (Slug: `agencia-generica-teste`) > **Agência Geradora:** Propenza Marketing > **Papel no Sistema:** Formatos digitais, áreas seguras, regra de assinatura e templates operacionais de posts --- ## 1. 📱 Formatos Principais & Proporções | Formato | Dimensões | Proporção | Margem Segura | Aplicação | | :--- | :--- | :--- | :--- | :--- | | **Feed Vertical (Alta Retenção)** | `1080 x 1350 px` | `4:5` | `80px` em todas as bordas | Carrosséis e posts de autoridade | | **Stories & Reels** | `1080 x 1920 px` | `9:16` | Topo: `250px` / Base: `320px` | Vídeos verticais e anúncios | | **Feed Quadrado (Legado)** | `1080 x 1080 px` | `1:1` | `80px` | Gráficos informativos | | **Capa LinkedIn / Artigo** | `1200 x 628 px` | `1.91:1` | `64px` laterais | Banners e artigos de blog | --- ## 2. ⚑ Regra Fixa: Logotipo SEM Tagline em Redes Sociais > **Regra Obrigatória:** Em qualquer peça de rede social (Feed, Carrossel, Stories, Reels, Capa e Avatar), a assinatura da marca deve ser **obrigatoriamente a versão SEM a tagline/descritor**. > > **Motivo Técnico:** Em telas mobile compactas, a tagline perde legibilidade e compete visualmente com a headline principal da peça. Abaixo de **32px / 8.4mm**, a tagline deve ser sempre omitida. A tagline é reservada para impressos, papel timbrado e cabeçalhos de site. --- ## 3. 📑 Catálogo de Templates Oficiais de Post ### Template A — Post Técnico (Fundo Claro) 1. **Fundo**: Off-white padrão (`#FAFAFB`) com cantos chanfrados nos vértices diagonalmente opostos. 2. **Topo**: Logo vertical sem tagline centralizado no topo (~28% da largura da peça). 3. **Display**: Caixa alta, cor institucional, centralizado. 4. **Kicker**: Uma linha em caixa alta com tracking largo (`+8%`). 5. **Contexto**: Parágrafo de no máximo 3 linhas com **negrito seletivo** nos termos técnicos. 6. **Corpo**: 3 colunas com **Numerador Circular (`01`, `02`, `03`)** + rótulo Bold + descrição. 7. **Base**: Render 3D ou foto técnica sangrando na base da peça. ### Template B — Post Institucional (Fundo Escuro) 1. **Fundo**: Dark sólido institucional (`#0A0F1D`) com textura sutil em *multiply* a 15–20%. 2. **Headline**: Título dominante branco alinhado à esquerda com palavras-chave em destaque. 3. **Subtítulo**: Texto de apoio em peso Light branco. 4. **Visual**: Foto em card com borda sutil de 1px/2px e raio de 16px. 5. **Rodapé**: Logo vertical sem tagline na versão negativa (branco) centralizado no rodapé. ### Template C — Capa de Artigo / LinkedIn (Foto Cheia) 1. **Fundo**: Fotografia técnica ocupando **100% do quadro**. 2. **Selo de Assinatura**: **Selo branco com corte diagonal no canto superior esquerdo** contendo o logotipo institucional. 3. **Título**: Bloco inferior sólido ocupando no máximo 35% da altura com tipografia de alto contraste. ### Template D — Carrossel Interno (Divisão 50/50) 1. **Divisão**: Divisão vertical meio a meio. 2. **Lado Esquerdo**: Foto sangrando até a borda com caixa de legenda branca na base. 3. **Lado Direito**: Texto explicativo com título em duas cores de peso (Regular + Bold itálico) e parágrafo detalhado. 4. **Topo**: Onda gráfica assimétrica no topo da composição. --- # Marca Genérica (Teste) — Direção de Arte > **Documento:** `08-art-direction-and-motion.md` > **Cliente:** Marca Genérica (Teste) (Slug: `agencia-generica-teste`) > **Agência Geradora:** Propenza Marketing > **Papel no Sistema:** Diretrizes de fotografia real, dispositivos gráficos proprietários e tokens de movimento --- ## 1. 🎨 Dispositivos Gráficos Proprietários Estes recursos visuais garantem que qualquer peça seja reconhecida imediatamente como sendo da marca, mesmo antes da leitura do logotipo: ### 1. Cantos Chanfrados a 45° (Assinatura de Ancoragem) - Blocos sólidos cobalto ancorados nos cantos da peça com o vértice interno cortado em diagonal a 45°. - **Posição Canônica:** Superior-esquerdo + inferior-direito (diagonal natural do fluxo de leitura em Z). - **Uso:** Peças de fundo claro. Nunca aplicar nos quatro cantos simultaneamente. ### 2. Selo Branco de Assinatura (Para Sobreposição em Fotos) - Bloco branco no canto superior esquerdo com **um canto cortado em chanfro diagonal**, contendo a assinatura vertical do logotipo. - **Uso:** Capas de artigo, fotos sangradas 100% e materiais onde a imagem ocupa todo o fundo. ### 3. Onda / Curva Assimétrica de Topo - Faixa na cor institucional no topo da peça com a borda inferior em curva suave e fluida. - **Uso:** Capas de carrosséis e divisores de seções. ### 4. Marca d'Água do Isologo Cortada - Isologo em grande escala (60% a 120% da largura da peça), com opacidade ultra-sutil (**4% a 8%** sobre claro, ou **6% a 10%** sobre escuro). - **Regra:** Sempre cortado pela borda da peça; nunca centralizado por inteiro como um carimbo. --- ## 2. 📸 Direção de Fotografia Real & Set - **O que Fotografar:** Estrategistas e desenvolvedores em foco concentrado, telas de código com analytics, reuniões técnicas com wireframes, iluminação de estúdio em azul ambiente. - **Tratamento de Cor:** Temperatura fria, contraste refinado, sem filtros vintage. - **Direção de Pessoas:** Expressão de foco analítico. Proibido uso de modelos genéricos de banco de imagens sorrindo para a câmera. --- ## 3. 🎬 Motion Tokens & Transições | Token | Duração | Curva de Easing (Bézier) | Aplicação | | :--- | :--- | :--- | :--- | | `motion.instant` | `100ms` | `cubic-bezier(0.4, 0, 0.2, 1)` | Troca de estado de botões e checkboxes | | `motion.fast` | `180ms` | `cubic-bezier(0.16, 1, 0.3, 1)` | Hover de cartões e elevações | | `motion.normal` | `280ms` | `cubic-bezier(0.16, 1, 0.3, 1)` | Abertura de modais, dropdowns e gavetas | | `motion.slow` | `450ms` | `cubic-bezier(0.16, 1, 0.3, 1)` | Transições de página e revelação da Hero | --- # Marca Genérica (Teste) — Prompts de IA > **Documento:** `09-generative-ai-prompts.md` > **Cliente:** Marca Genérica (Teste) (Slug: `agencia-generica-teste`) > **Agência Geradora:** Propenza Marketing > **Papel no Sistema:** Catálogo mestre de prompts calibrados para os 12 motores generativos de imagem, vídeo, áudio e texto --- ## 1. 🖼️ Geração de Imagem & UI (Midjourney v6 & FLUX.1) ### Hero Section & Visual Mestre - **Motor**: `Midjourney v6` - **Proporção**: `--ar 16:9` - **Prompt**: ```text A sleek futuristic holographic data dashboard glowing in electric cobalt blue (#1D63FF) and subtle cyan (#00F5D4), floating in a dark minimalist architectural studio with smoked glass and matte black steel walls, volumetric soft rim lighting, cinematic depth of field, 8k resolution, ultra-clean commercial photography --ar 16:9 --style raw --v 6.0 ``` ### Interface Holográfica e Refrações em Vidro Fumê - **Motor**: `FLUX.1 [dev]` - **Proporção**: `16:9` - **Prompt**: ```text Cinematic commercial photograph of a sophisticated holographic analytics interface glowing with deep cobalt blue and vibrant cyan light accents, hovering above a dark polished obsidian boardroom table. In the background, floor-to-ceiling windows overlook a nighttime skyline with subtle blue reflections. Shot on 35mm prime lens, f/2.8, hyper-realistic glass refractions and clean minimalist aesthetic. ``` --- ## 2. 👤 Retratos Corporativos & Liderança (Social Media) ### Retrato de Liderança e Estrategista C-Level - **Motor**: `Midjourney v6` - **Proporção**: `--ar 4:5` - **Prompt**: ```text Medium close-up portrait of a confident business executive in their early 30s, sharp modern dark tailored blazer, standing in a contemporary agency office at dusk with architectural ambient blue backlighting, intelligent and visionary expression, cinematic lighting, shot on Hasselblad 85mm f/1.4, rich deep shadows, high-end editorial photography --ar 4:5 --style raw --v 6.0 ``` --- ## 3. 🎥 Geração de Vídeo (Runway Gen-3 & Luma Dream Machine) ### Abertura Institucional em Slow Dolly - **Motor**: `Runway Gen-3 Alpha` - **Prompt**: ```text [Camera Movement: Slow Dolly In] moving smoothly towards a floating dark glass sphere with glowing cobalt blue rings pulsing rhythmically. In the background, dark modern architectural studio walls with subtle volumetric smoke and cinematic blue rim lights. 24fps, photorealistic, 4k ultra-high definition, hyper-smooth optical motion. ``` --- ## 4. 🎵 Trilha Sonora & Locução (Suno AI & ElevenLabs) ### Trilha Sonora Institucional Deep Tech (110 BPM) - **Motor**: `Suno AI / Udio` - **Prompt**: ```text Minimalist ambient deep tech, subtle electronic pulse, modern corporate downtempo, 110 bpm, soft analog synth pads, elegant acoustic piano melody, crisp sub-bass, premium commercial production ``` ### Parâmetros de Síntese de Voz Executiva - **Motor**: `ElevenLabs` - **Prompt**: ```text Tone: Articulate, Confident, Inspiring, Warm Authority | Stability: 0.65 | Clarity + Similarity: 0.85 | Style Exaggeration: 0.10 | Model: Eleven Multilingual v2 ``` --- # Marca Genérica (Teste) — Governança de Marca > **Documento:** `GUARDRAILS.md` > **Cliente:** Marca Genérica (Teste) (Slug: `agencia-generica-teste`) > **Agência Geradora:** Propenza Marketing > **Papel no Sistema:** Políticas de imutabilidade, restrições para agentes autônomos e checklist de aprovação operacional --- ## 1. 🛡️ Políticas de Imutabilidade Estrita Os agentes autônomos e designers que operam este repositório devem seguir obrigatoriamente as seguintes travas: 1. **Imutabilidade de Tokens**: Nenhum valor arbitrário de cor (HEX não homologado) ou espaçamento (fora da escala de 4pt/8pt) pode ser introduzido no código ou nas peças. 2. **Conformidade WCAG 2.2 AA**: Nenhuma combinação de texto e fundo pode ser aprovada com contraste inferior a **4.5:1** (ou 3.0:1 para componentes de UI). 3. **Isolamento de Marca**: Nenhum elemento visual ou token deste cliente pode vazar para outros projetos da agência. --- ## 2. 📋 Checklist Operacional de Pré-Entrega (14 Itens) Antes de aprovar e exportar **qualquer** peça gráfica, landing page, anúncio ou código: - [ ] **1. Versão do Logotipo**: Logo na versão correta para o fundo (institucional / negativa / selo branco recortado). - [ ] **2. Regra de Redes Sociais**: Peça de rede social usando o logotipo **SEM a tagline/descritor**. - [ ] **3. Área de Proteção $X$**: Margem de segurança $X$ respeitada em todos os quatro lados do logo. - [ ] **4. Dimensão Mínima**: Logo acima de 32px de altura; tagline removida se menor que o limite. - [ ] **5. Fidelidade Cromática**: Cores conferidas contra o arquivo SSOT `01-colors-and-contrast.md`. - [ ] **6. Proporção 60/25/10/5**: Distribuição de peso visual respeitada (60% fundo, 25% primária, 10% apoio, 5% acento). - [ ] **7. Tipografia Exclusiva**: Uso exclusivo das fontes homologadas; fonte do logotipo não usada no corpo de texto. - [ ] **8. Contraste de Texto**: Contraste $\ge 4.5:1$; texto sobre fotos com *scrim* dark (55-75%) ou card sólido. - [ ] **9. Zonas Seguras (Stories/Reels)**: Título fora dos 250px do topo e CTA/logo fora dos 320px da base. - [ ] **10. Dispositivo Proprietário Presente**: Presença de ao menos um elemento proprietário (canto chanfrado, selo cortado, onda ou marca d'água). - [ ] **11. Negrito Seletivo**: Destaque intencional aplicado apenas nos termos técnicos e entregáveis do parágrafo. - [ ] **12. Prova Quantificada**: Nenhum dado apresentado sem unidade de medida e período de referência. - [ ] **13. CTA de Alta Conversão**: Botão com formato *"Verbo de Ação + Entregável Técnico"* (sem *"Saiba mais"*). - [ ] **14. Dimensão Exata de Exportação**: Arquivo exportado nas dimensões exatas da matriz de formatos. ---