# Design System Oficial — water-meyer

> 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)

---


<!-- INÍCIO DO DOCUMENTO: 00-brand-overview.md -->

# 🏢 Visão Geral da Marca — Water Meyer

> **Versão Oficial:** 1.1 · **Data de Consolidação:** 2026-08-20  
> **Status:** `SSOT Homologado` (Single Source of Truth)  
> **Sede:** Hortolândia / SP · **Fundação:** 2006–2026 (20 Anos de Mercado)  

---

## 1. Context Anchor (Âncora de Contexto)

A **Water Meyer** é uma empresa consolidada de **engenharia consultiva e tratamento de água e ar**, atuando há mais de duas décadas no segmento industrial e corporativo de alta performance.

### 🎯 Posicionamento e Proposta de Valor
A marca **não vende produto químico de prateleira** — a Water Meyer entrega **previsibilidade operacional e segurança patrimonial**. A proposta de valor é ancorada em quatro pilares determinísticos:
1. **Diagnóstico Científico & Análise de Laboratório Próprio**
2. **Protocolos Químicos e Térmicos Controlados**
3. **Execução Técnica Especializada com Rigor de Engenharia**
4. **Demonstração Quantificada de Resultados (Métricas, Economia e Eficiência)**

### 👤 Perfil do Usuário e Decisor (Persona B2B)
- **Decisores:** Diretores Industriais, Gerentes de Operações e Utilidades, Engenheiros de Manutenção e Gestores de Facilities de plantas industriais de grande porte (automotiva, químico-farmacêutica, papel e celulose, alimentos e bebidas, shopping centers e hospitais).
- **Necessidade Central:** Eliminação de paradas não programadas, redução do coeficiente de incrustação/corrosão em torres e caldeiras, conformidade regulatória ambiental (CETESB/IBAMA) e redução real de consumo de água e energia.

---

## 2. Bio e Manifestos Oficiais

### Bio Oficial da Marca
> 💧 **Eficiência Hídrica e Térmica**  
> ⚙️ **Engenharia Consultiva em Água e Ar**  
> *Cuidamos daquilo que é vital: gerimos a qualidade da água e do ar.*

### Atributos Centrais da Identidade
Conforme definição do Manual Oficial de Identidade Visual, todo e qualquer ativo da Water Meyer deve transmitir:
- **Solidez**: 20 anos de experiência industrial comprovada.
- **Inovação**: Telemetria avançada, automação de dosagem e monitoramento contínuo.
- **Clareza**: Comunicação objetiva, dados com unidades e períodos, sem rodeios.
- **Dinamismo**: Fluidez visual inspirada na serpentina de fluxo contínuo.

---

## 3. Arquitetura de Marca & Assinaturas Oficiais

A marca Water Meyer opera com **4 taglines oficiais**, cada uma dedicada a uma unidade estratégica:

| Tagline | Aplicação Exclusiva |
| :--- | :--- |
| **Tratamento da Água e do Ar** | **Assinatura Principal da Operação**: Padrão para redes sociais, site institucional, landing pages e propostas comerciais. |
| **Holding** | Institucional, diretoria societária, documentos jurídicos e contratos corporativos. |
| **Soluções Ambientais** | Unidade dedicada a auditorias ambientais, efluentes e conformidade ecológica. |
| **Comunicação Digital** | Unidade educacional, materiais de treinamento e conteúdos técnicos avançados. |

> 📌 **Regra de Imutabilidade da Arquitetura:**
> A tagline varia de acordo com a unidade; contudo, o **isologo (serpentina), a tipografia institucional, as cores e as proporções geométricas nunca mudam**.

---

## 4. Anatomia e Regras Rígidas do Logotipo

### Anatomia dos Três Elementos
1. **Isologo (A Serpentina)**: Letras "W" e "M" estilizadas em fita contínua em perspectiva 3D sóbria, inspiradas na serpentina de sistemas de troca térmica. Bicolor: fita frontal **Navy `#0A1931`**, fita posterior **Cinza `#ACACAC`**.
2. **Logotipo (Nome Nominativo)**: "Water Meyer" na tipografia **Gabarito Bold**, com tracking ajustado em **-5%**.
3. **Descritor (Tagline)**: Em tipografia **Metropolis Light/Thin**, caixa alta e baixa, com tracking largo característico de **+58%**.

### ⚑ Regra de Ouro — Redes Sociais SEM Tagline
> **Em qualquer peça de rede social (Feed 4:5, Feed 1:1, Stories 9:16, Reels, Capas de Destaque e Avatares), a assinatura obrigatória é a versão VERTICAL SEM TAGLINE.**  
> *Justificativa técnica:* Em telas mobile de alta densidade, a tagline reduz a legibilidade e compete visualmente com a headline da peça. A tagline permanece obrigatória em propostas, papel timbrado, apresentações, site institucional e impressos.

### Área de Proteção e Dimensões Mínimas
- **Unidade de Proteção $X$**: Altura da letra "a" minúscula da tipografia Gabarito do nome "Water Meyer".
- **Margem de Segurança**: Mínimo de $X$ livre em todos os 4 lados da assinatura.
- **Espaçamento Interno**: Fixo em $X/2$ entre isologo, nome e tagline.
- **Dimensão Mínima de Impressão**: 25 mm de largura (com tagline); 6 mm de altura (sem tagline).
- **Dimensão Mínima Digital**: 95 px (com tagline); 23 px de altura (sem tagline).
- **Corte da Tagline**: Abaixo de 32 px de altura ou 8,4 mm na gráfica, remova a tagline obrigatoriamente.

---

## 5. Matriz de Voz e Modulação de Redação

| Situação de Comunicação | Tom Adotado | Diretriz de Redação | Exemplo Prático |
| :--- | :--- | :--- | :--- |
| **Relatórios & Diagnósticos Técnicos** | Científico, Exato, Neutro | Dados mensurados, unidades exatas, causas físico-químicas. | *"Redução de incrustação de carbonato de cálcio em 42%, restabelecendo o CEE de 1,00 para 0,61."* |
| **Landing Pages & Propostas** | Consultivo, Seguro, Orientado a ROI | Foco na proteção patrimonial e previsibilidade operacional. | *"Elimine o risco de paradas emergenciais com monitoramento contínuo e tratamento preventivo."* |
| **Redes Sociais & Conteúdo** | Educativo, Claro, Especialista | Desmistificação de problemas industriais com negrito seletivo. | *"Descubra como o **biofilme bacteriano** compromete a troca térmica dos seus chillers."* |
| **Atendimento & Suporte Técnico** | Ágil, Solícito, Resolutivo | Protocolos claros, prazos definidos, sem jargões evasivos. | *"Nossa equipe técnica já está com o protocolo de desinfecção ativo. Relatório em até 24h."* |

---

## 6. Histórico de Divergências e Correções Homologadas

1. **Correção do Navy Oficial**: O site legado utilizava `#171F34`. O Design System oficial homologa e fixa o **Navy Oficial `#0A1931` (Pantone 282 C)**.
2. **Remoção de Elementos Espúrios**: Eliminada a cor bege `#B89788` herdada de temas genéricos de WordPress no passado.
3. **Grafismos Proprietários**: Formalização dos 5 elementos geométricos (*cantos chanfrados a 45°*, *selo branco*, *onda navy*, *marca d'água da serpentina* e *textura de água*).


<!-- FIM DO DOCUMENTO: 00-brand-overview.md -->

---

<!-- INÍCIO DO DOCUMENTO: 01-colors-and-contrast.md -->

# 🎨 Cores, Paletas & Acessibilidade WCAG — Water Meyer

> **SSOT de Cores e Contraste**: Este documento é a Fonte Única da Verdade para reprodução cromática em mídias digitais, código CSS/Tailwind e gráfica física da Water Meyer.

---

## 1. Paleta Institucional Primária (Oficial)

Valores extraídos rigorosamente do **Manual de Identidade Visual Oficial (§Padrão Cromático)**.

| Token | Nome da Cor | HEX | RGB | OKLCH | CMYK (Manual) | Pantone Oficial |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `--wm-navy` | **Navy Water Meyer** (Principal) | `#0A1931` | `10, 25, 49` | `oklch(0.22 0.052 259)` | `80 / 49 / 0 / 81` | **282 C** |
| `--wm-blue` | **Azul Meyer** (Acento Secundário) | `#3D6192` | `61, 97, 146` | `oklch(0.49 0.090 256)` | `58 / 34 / 0 / 43` | **7683 C** |
| `--wm-gray` | **Cinza Serpentina** (Fita Posterior) | `#ACACAC` | `172, 172, 172` | `oklch(0.74 0.000 90)` | `0 / 0 / 0 / 33` | **422 C** |
| `--wm-gray-light` | **Cinza Claro** (Divisores & Linhas) | `#D0D0D0` | `208, 208, 208` | `oklch(0.86 0.000 90)` | `0 / 0 / 0 / 18` | **420 C** |

### Proporção de Distribuição Visual (Regra 60 / 25 / 10 / 5)
- **60% Superfície / Neutros**: Branco (`#FFFFFF`) ou Off-White institucional (`#FAFAFB`) em temas claros; Navy sólido (`#0A1931`) em capas institucionais.
- **25% Navy Water Meyer (`#0A1931`)**: Blocos estruturais, cabeçalhos, títulos principais, cantos chanfrados e cards de destaque.
- **10% Cinzas (`#ACACAC` / `#D0D0D0`)**: Fita posterior do isologo, bordas sutis de tabelas, linhas de conexão técnica e molduras.
- **5% Azul Meyer (`#3D6192`)**: Acentos de dados, ícones de destaque, números de processo e gráficos de telemetria.

---

## 2. Tokens Estendidos de Interface (Web & UI)

Tokens derivados da aplicação prática para garantir profundidade, hierarquia e superfícies táteis em código.

| Token | HEX | OKLCH | Uso e Semântica de Interface |
| :--- | :--- | :--- | :--- |
| `--wm-navy-900` | `#0A1931` | `oklch(0.22 0.052 259)` | Superfície sólida de alta autoridade, cabeçalhos escuros |
| `--wm-navy-800` | `#122040` | `oklch(0.25 0.064 264)` | Camada de profundidade em degradês de fundo escuro |
| `--wm-blue-500` | `#3D6192` | `oklch(0.49 0.090 256)` | Destaque institucional, links e interações secundárias |
| `--wm-blue-300` | `#8FA8C8` | `oklch(0.72 0.054 255)` | Ícones sobre fundo navy escuro, linhas de telemetria |
| `--wm-ink` | `#515867` | `oklch(0.46 0.026 266)` | Corpo de texto principal em páginas e fundos claros |
| `--wm-bg` | `#FAFAFB` | `oklch(0.99 0.001 286)` | **Off-white padrão de posts de feed e cartões digitais** |
| `--wm-bg-alt` | `#F2F3F5` | `oklch(0.96 0.003 265)` | Fundo de seções alternadas em Landing Pages e tabelas |
| `--wm-line` | `#D0D0D0` | `oklch(0.86 0.000 90)` | Divisores de seção, bordas de cards e grades técnicas |
| `--wm-white` | `#FFFFFF` | `oklch(1.00 0.000 90)` | Fundo neutro puro, tipografia negativa em fundos escuros |

---

## 3. Cores Funcionais (Uso Restrito a Gráficos e Dados)

> ⚠️ **Aviso de Governança:** Estas cores nunca devem ser usadas como cor principal de identidade de marca. Destinam-se exclusivamente a dashboards, indicadores de conformidade e telemetria.

| Aplicação | HEX | RGB | OKLCH | Significado Técnico |
| :--- | :--- | :--- | :--- | :--- |
| **Positivo / Conformidade** | `#2DC653` | `45, 198, 83` | `oklch(0.73 0.200 147)` | Ganho de eficiência, água em conformidade, ROI |
| **Alerta / Desvio Técnico** | `#E63946` | `230, 57, 70` | `oklch(0.61 0.208 22)` | Risco de incrustação, desvio de pH, parada iminente |
| **Telemetria / Fluxo Hídrico** | `#00B4D8` | `0, 180, 216` | `oklch(0.71 0.129 219)` | Sensores de vazão, condutividade e gráficos de fluxo |

---

## 4. Selo Comemorativo 20 Anos (2006–2026)

- **Gradiente Dourado Metálico**: `#BF9747` $\rightarrow$ `#F9DD97` $\rightarrow$ `#BF9747` aplicado em ângulo de $45^\circ$.
- **Base**: Disco circular Navy `#0A1931` sólido com anel dourado fino.
- **Posição Canônica**: Canto superior direito de peças de feed/apresentações ou ao lado da assinatura em e-mails corporativos.

---

## 5. Tabela de Contraste e Acessibilidade WCAG 2.2

Todas as combinações de cores da Water Meyer foram matematicamente auditadas sob o padrão **WCAG 2.2 Nível AA e AAA**:

| Combinação (Texto / Fundo) | Razão de Contraste | WCAG AA Texto Normal ($\ge 4.5:1$) | WCAG AAA Texto Normal ($\ge 7.0:1$) | Veredito & Diretriz de Uso |
| :--- | :---: | :---: | :---: | :--- |
| `#0A1931` sobre `#FFFFFF` | **17.6:1** | ✅ Aprovado | ✅ Aprovado | **Contraste Perfeito**: Títulos e corpo em fundo branco |
| `#FFFFFF` sobre `#0A1931` | **17.6:1** | ✅ Aprovado | ✅ Aprovado | **Contraste Perfeito**: Texto negativo em fundo navy |
| `#0A1931` sobre `#FAFAFB` | **16.8:1** | ✅ Aprovado | ✅ Aprovado | Padrão absoluto para peças de feed e redes sociais |
| `#515867` sobre `#FAFAFB` | **6.8:1** | ✅ Aprovado | ⚠️ Não AAA | Padrão para corpo de texto longo e parágrafos |
| `#3D6192` sobre `#FFFFFF` | **6.3:1** | ✅ Aprovado | ⚠️ Não AAA | Links, botões outline e subtítulos destacados |
| `#8FA8C8` sobre `#0A1931` | **7.2:1** | ✅ Aprovado | ✅ Aprovado | Legendas técnicas e rótulos secundários sobre navy |
| `#ACACAC` sobre `#FFFFFF` | **2.3:1** | ❌ Reprovado | ❌ Reprovado | ❌ **PROIBIDO PARA TEXTO**. Usar apenas em linhas e grafismos |
| `#3D6192` sobre `#0A1931` | **2.8:1** | ❌ Reprovado | ❌ Reprovado | ❌ **PROIBIDO PARA TEXTO**. Sobre navy use `#FFFFFF` ou `#8FA8C8` |

### 🛡️ Regra de Scrim (Texto sobre Fotografias)
- Todo texto aplicado diretamente sobre foto industrial exige uma camada de reforço de contraste:
  - **Scrim Navy:** Camada de Navy `#0A1931` com opacidade de **55% a 75%** entre a foto e o texto.
  - **Caixa de Legenda Sólida:** Fundo branco `#FFFFFF` ou Navy `#0A1931` opaco com padding mínimo de 24px.


<!-- FIM DO DOCUMENTO: 01-colors-and-contrast.md -->

---

<!-- INÍCIO DO DOCUMENTO: 02-typography.md -->

# 🔤 Tipografia & Escalas Modulares — Water Meyer

> **SSOT de Tipografia**: Define as famílias tipográficas oficiais, papéis hierárquicos, escalas modulares para Web/Social/Impresso e regras de microtipografia da Water Meyer.

---

## 1. Famílias Tipográficas Oficiais

| Família | Pesos Permitidos | Papel no Sistema | Origem & Licença |
| :--- | :--- | :--- | :--- |
| **Gabarito** | **Bold** (Único peso permitido) | **Exclusiva da marca nominativa no logotipo** ("Water Meyer"). *Nunca usar em títulos de páginas ou corpo de texto*. | Google Fonts (Open Source) |
| **Metropolis** | Thin, Light, Regular, SemiBold, Bold | **Família de toda a comunicação visual**: títulos, headlines, parágrafos, botões, tabelas, web e impressos. | Chris Simpson (Licença Livre / Auto-hospedada) |
| **Pilha de Fallback** | Regular, SemiBold, Bold | Usada quando a webfont não estiver carregada (e-mails HTML, sistemas legados). | `Poppins, "Century Gothic", "Segoe UI", Arial, sans-serif` |

---

## 2. Matriz de Pesos e Papéis Hierárquicos

- **Thin & Light (100/300)**: Taglines secundárias de documentos, subtítulos de respiro, kickers institucionais e números grandes decorativos de fundo.
- **Regular (400)**: **Corpo de texto padrão** para todos os documentos, relatórios, landing pages e posts de redes sociais.
- **SemiBold (600)**: Ênfases técnicas dentro do parágrafo, rótulos de botões (*ActionButtons*), badges e títulos de cards.
- **Bold (700)**: Títulos dominantes (H1/H2), numeradores de etapas (`01`, `02`), destaques de métricas e chamadas de alto impacto.
- **Itálico**: Restrito exclusivamente a ênfases pontuais em expressões-chave dentro de títulos (ex.: *"que se **transforma em solução**"*). Nunca utilizar em parágrafos completos.

---

## 3. Escala Modular Digital — Social Media (Base 1080px)

| Nível / Estilo | Tamanho (px) | Peso | Tracking (Letter-Spacing) | Line-Height | Aplicação Prática |
| :--- | :---: | :---: | :---: | :---: | :--- |
| **Display Hero** | 100 – 120 px | Bold | `-2%` | `0.95` | Palavra dominante única (ex.: "TELEMETRIA", "EFICIÊNCIA") |
| **H1 Capa** | 72 – 88 px | Bold | `-1%` | `1.05` | Título principal de post e capa de carrossel |
| **H2 Interna** | 54 – 64 px | Bold | `-1%` | `1.10` | Título de lâminas internas e seções |
| **Kicker / Chapéu** | 28 – 32 px | Regular | **`+8%`** (Largo) | `1.20` | Rótulo superior em caixa alta |
| **Corpo Padrão** | 34 – 38 px | Regular | `0` | `1.35` | Texto explicativo e descrições técnicas |
| **Corpo Colunas** | 26 – 30 px | Regular | `0` | `1.40` | Texto em layouts de 3 colunas de etapas |
| **Rótulo de Etapa** | 30 – 34 px | Bold (Caixa Alta) | `+4%` | `1.15` | Ex.: "SISTEMA EM CAMPO", "DIAGNÓSTICO" |
| **Legenda / Rodapé** | 22 – 24 px | Light | `+2%` | `1.30` | Notas de rodapé, fontes e créditos de imagem |

---

## 4. Escala Modular Web & Landing Pages (Funções Fluidas `clamp()`)

| Token Semântico | Desktop (1440px) | Mobile (390px) | Função Fluida CSS (`clamp()`) | Peso | Line-Height |
| :--- | :---: | :---: | :--- | :---: | :---: |
| `--wm-h1` | 56 px (3.5rem) | 32 px (2.0rem) | `clamp(2.0rem, 1.6rem + 2vw, 3.5rem)` | Bold | `1.10` |
| `--wm-h2` | 42 px (2.625rem) | 28 px (1.75rem) | `clamp(1.75rem, 1.4rem + 1.5vw, 2.625rem)` | Bold | `1.15` |
| `--wm-h3` | 28 px (1.75rem) | 22 px (1.375rem) | `clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem)` | Bold | `1.25` |
| `--wm-body` | 18 px (1.125rem) | 16 px (1.0rem) | `clamp(1.0rem, 0.95rem + 0.3vw, 1.125rem)` | Regular | `1.60` |
| `--wm-small` | 15 px (0.9375rem) | 14 px (0.875rem) | `0.9375rem` | Regular | `1.50` |
| `--wm-button` | 16 px (1.0rem) | 15 px (0.9375rem) | `1.0rem` | SemiBold | `1.00` |

> 📏 **Limite de Comprimento de Linha (*Measure*):** O bloco de texto corrido na web deve conter entre **65 e 75 caracteres** por linha (largura máxima em torno de 720px) para máxima legibilidade.

---

## 5. Escala Editorial — Impressos (Padrão A4)

- **Título Principal (H1):** 28 a 32 pt · Metropolis Bold (Tracking `-1%`)
- **Subtítulo / Kicker:** 16 a 18 pt · Metropolis Light (Tracking `+4%`)
- **Corpo de Texto:** 10.5 a 11.5 pt · Metropolis Regular (Entrelinha 14.5 pt / $1.35$)
- **Legenda Técnica:** 8.5 a 9 pt · Metropolis Light
- **Rodapé & Paginação:** 7.5 pt · Metropolis Regular

---

## 6. Regras Rígidas de Redação e Microtipografia

1. **Assinatura Textual — Negrito Seletivo:** Dentro de parágrafos em *Regular*, deve-se destacar em *SemiBold/Bold* exclusivamente os termos físico-químicos e métricas operacionais que fundamentam o argumento (ex.: *"assegurar a **estabilidade microbiológica**, mitigar a **formação de biofilme** e manter o **coeficiente térmico ideal**"*).
2. **Uso Restrito de Caixa Alta (ALL CAPS):** Permitido somente em kickers (uma linha curta), títulos de display de 1 palavra e rótulos de etapa (`01 DIAGNÓSTICO`). Proibido em parágrafos completos.
3. **Alinhamento:** Alinhamento à esquerda por padrão. Centralizado apenas em frases de destaque com menos de 3 linhas e rodapés institucionais.
4. **Sem Justificação / Sem Hifenização Forçada:** Nunca justificar texto em mídias digitais ou posts de social media para evitar rios de espaço em branco.


<!-- FIM DO DOCUMENTO: 02-typography.md -->

---

<!-- INÍCIO DO DOCUMENTO: 03-spacing-and-tokens.md -->

# 📐 Espaçamento, Grid & Geometria — Water Meyer

> **SSOT de Geometria e Espaçamentos**: Define a grade base de 8pt/4pt, escalas modulares de respiro, raios de canto, sombras e margens de segurança para todos os formatos físicos e digitais da Water Meyer.

---

## 1. Grade Base Modular (Escala de 8pt / 4pt)

O sistema geométrico da Water Meyer é regido por uma escala matemática rigorosa baseada em incrementos de **8px** (com subdivisões de **4px** para micro-espaçamentos).

### Escala de Espaçamento Web & UI
| Token W3C / CSS | Valor em Rem | Valor em Pixels | Aplicação Típica em Interface |
| :--- | :---: | :---: | :--- |
| `--sp-05` / `--space-1` | `0.25rem` | **4 px** | Gap interno de tags, padding mínimo de ícones |
| `--sp-1` / `--space-2` | `0.50rem` | **8 px** | Espaço entre ícone e texto, gaps de badges |
| `--sp-2` / `--space-4` | `1.00rem` | **16 px** | Padding interno de inputs, botões compactos |
| `--sp-3` / `--space-6` | `1.50rem` | **24 px** | Padding padrão de cards, gutters de grid web |
| `--sp-4` / `--space-8` | `2.00rem` | **32 px** | Margens entre blocos de conteúdo e cabeçalhos |
| `--sp-5` / `--space-12` | `3.00rem` | **48 px** | Gaps entre seções em mobile, respiro de cards |
| `--sp-6` / `--space-16` | `4.00rem` | **64 px** | Margens entre grandes blocos de landing pages |
| `--sp-7` / `--space-24` | `6.00rem` | **96 px** | **Espaçamento vertical máximo entre seções de LP** |

### Escala Social Media (Canvas Base 1080px)
Para layouts de alta resolução (1080px), os valores são calculados em dobro ($2\times$):
`8 · 16 · 32 · 48 · 64 · 96 · 128 · 192 · 256 px`

---

## 2. Margens de Segurança & Áreas Livres por Formato

Nenhum elemento essencial (textos, logotipos, CTAs ou dados numéricos) pode invadir as margens de segurança estabelecidas:

| Formato | Dimensões Físicas/Pixels | Margens Internas | Zonas de Exclusão Adicionais (UI) |
| :--- | :---: | :---: | :--- |
| **Feed Retrato (4:5)** | `1080 × 1350 px` | **80 px laterais** / **88 px topo e base** | Sem interferência de UI externa |
| **Feed Quadrado (1:1)** | `1080 × 1080 px` | **80 px** em todos os lados | Sem interferência de UI externa |
| **Stories & Reels (9:16)** | `1080 × 1920 px` | **80 px laterais** | **250 px no Topo** (Header do app) e **320 px na Base** (Campo de mensagem) |
| **LinkedIn Artigo / Capa** | `1200 × 628 px` | **64 px** em todos os lados | Sem interferência |
| **Apresentações Técnicas** | `1920 × 1080 px` | **96 px** em todos os lados | Grade corporativa widescreen |
| **Papel Timbrado A4** | `210 × 297 mm` | **15 mm** de margem interna | **5 mm de Sangria Gráfica** em todos os lados |

---

## 3. Raios de Canto (*Border Radius*)

A identidade da Water Meyer é caracterizada pela precisão e sobriedade de contêineres **predominantemente retos**. As curvas da marca pertencem à serpentina do isologo e à onda de topo, e não a cantos plásticos inflados.

| Elemento de Design | Token | Raio de Canto | Diretriz |
| :--- | :--- | :---: | :--- |
| **Cards, Caixas de Texto & Tabelas** | `--radius-sm` | **0 px (Reto)** ou **8 px** | Sobriedade industrial e arquitetônica |
| **Botões de Ação (*ActionButtons*)** | `--radius-btn` | **4 px a 8 px** | Interatividade tátil sem formato arredondado excessivo |
| **Fotografias em Cards** | `--radius-img` | **16 px a 24 px** | Apenas fotos em destaque dentro de cards institucionais |
| **Avatares, Selos & Numeradores** | `--radius-full` | **50% (Círculo)** | Restrito a elementos circulares perfeitos |

---

## 4. Sombras e Profundidade (*Elevation Tokens*)

A Water Meyer evita sombras difusas e excessivas, priorizando a nitidez dos planos:

- **Sombra Padrão de Card (`--shadow`):** `0 2px 12px rgba(10, 25, 49, 0.08)`  
  *Gera uma elevação sutil e premium sobre superfícies claras `#FAFAFB` sem poluir o contraste.*
- **Sombra Interativa / Hover (`--shadow-hover`):** `0 8px 24px rgba(10, 25, 49, 0.14)`  
  *Utilizada na transição ao passar o mouse sobre cards clicáveis e botões primários.*
- **Container Máximo Web (`--container`):** `1200 px` centralizado com auto-padding lateral de 24px.


<!-- FIM DO DOCUMENTO: 03-spacing-and-tokens.md -->

---

<!-- INÍCIO DO DOCUMENTO: 04-digital-components.md -->

# 🧩 Componentes Digitais & Landing Pages — Water Meyer

> **Vocabulário Estrito de Componentes**: Especificação determinística de variantes, estados interativos, grafismos proprietários e arquitetura de conversão para Landing Pages e Web Apps da Water Meyer.

---

## 1. Vocabulário e Catálogo de Componentes

### 1.1 ActionButton (Botões de Ação)
Todos os botões utilizam tipografia **Metropolis SemiBold 15–16px**, padding horizontal/vertical em tokens (`16px 32px`), raios de 4–8px e micro-transições suaves de 200ms.

| Variante | Fundo | Cor do Texto | Borda | Estado :hover |
| :--- | :--- | :--- | :--- | :--- |
| **Primário (`primary`)** | `#0A1931` (Navy) | `#FFFFFF` | Nenhuma | Fundo `#122040` + Sombra de elevação |
| **Secundário (`secondary`)** | Transparente | `#0A1931` | `1.5px` sólida `#0A1931` | Fundo `#0A1931` com texto `#FFFFFF` |
| **Sobre Fundo Escuro (`on-navy`)** | `#FFFFFF` | `#0A1931` | Nenhuma | Fundo `#F2F3F5` com leve escala |
| **Desabilitado (`disabled`)** | `#D0D0D0` | `#515867` | Nenhuma | Cursor `not-allowed`, sem efeito hover |

> 🏷️ **Regra de Copywriting de CTAs (Inviolável):**  
> Os rótulos de botão devem sempre combinar um **verbo de ação + entregável técnico mensurável**.  
> - **Correto:** *"Solicitar Diagnóstico Técnico"*, *"Falar com um Especialista em Água"*, *"Agendar Coleta de Amostra"*.  
> - **Proibido:** *"Saiba mais"*, *"Clique aqui"*, *"Enviar"*.

---

### 1.2 Numerador Circular de Processos (`ProcessStepNumber`)
Elemento icônico para marcar sequências de diagnóstico e etapas operacionais:
- **Forma:** Círculo perfeito sólido em Navy `#0A1931`.
- **Tipografia Interna:** **Metropolis Bold**, cor branca `#FFFFFF`, centralizado.
- **Dimensões:** Diâmetro de `80–96px` em posts de social media (1080px) e `56–64px` na web.
- **Formato Numérico:** Sempre dois dígitos para processos industriais (`01`, `02`, `03`, `04`).
- **Disposição:** Numerador no topo, acompanhado de Rótulo em Bold Caixa Alta (`+4%` tracking) e descrição técnica logo abaixo.

---

### 1.3 Card de Conteúdo Técnico (`ContentCard`)
- **Superfície:** Fundo Branco `#FFFFFF` ou Neutro Alternado `#F2F3F5`.
- **Borda & Sombra:** Borda sutil de `1px` em Cinza `#D0D0D0` **ou** sem borda com sombra suave (`0 2px 12px rgba(10,25,49,.08)`).
- **Padding Interno:** `32px a 40px`.
- **Estrutura Interna:** Ícone linear temático em Navy ou Azul Meyer no topo $\rightarrow$ Título em Metropolis Bold Navy $\rightarrow$ Parágrafo em Metropolis Regular Ink (`#515867`).

---

### 1.4 Caixa de Legenda de Foto (`PhotoCaptionBox`)
- **Uso:** Identificar equipamentos, reatores ou instalações industriais em fotos de campo.
- **Estrutura:** Bloco retangular branco `#FFFFFF` sólido, sem bordas, posicionado no canto inferior esquerdo da fotografia (recuado 48px das bordas da peça).
- **Texto:** Duas linhas em Metropolis Bold Navy (ex.: *"1º Reator Water Meyer / Unidade Hortolândia"*). Padding interno de `32px`.

---

### 1.5 Tabela de Dados & Prova Quantificada (`DataTable`)
- **Cabeçalho (*Header*):** Navy `#0A1931` sólido com tipografia branca Metropolis Bold.
- **Linhas Alternadas:** Alternância entre Branco `#FFFFFF` e `#F2F3F5` para facilidade de leitura.
- **Divisores:** `1px` sólido `#D0D0D0`.
- **Alinhamento:** Textos alinhados à esquerda; métricas e números técnicos alinhados rigorosamente à direita.
- **Destaque de Ganho:** Célula de resultado final com indicador em Verde `#2DC653` (ganho econômico) ou Azul Meyer `#3D6192`.

---

## 2. Os 5 Grafismos Proprietários (Assinatura de Arte)

Estes 5 grafismos são o selo visual que torna qualquer peça reconhecível como Water Meyer mesmo sem o logotipo visível:

1. **Cantos Chanfrados Navy a 45° (*Beveled Corners*):**  
   Blocos Navy `#0A1931` sólidos nos cantos, com o vértice voltado para o centro da peça chanfrado a 45°.  
   *Posição Canônica:* Canto Superior-Esquerdo + Canto Inferior-Direito (diagonal de leitura em Z). Proporção: 12% a 22% da largura.
2. **Selo Branco de Assinatura com Corte Diagonal (*Photo Seal*):**  
   Bloco branco no canto superior esquerdo sobre fotos sangradas, com o canto inferior direito cortado em diagonal, abrigando o logotipo institucional.
3. **Onda Navy de Topo (*Top Wave*):**  
   Faixa Navy no cabeçalho com a borda inferior cortada em curva assimétrica orgânica (evocando o fluxo d'água). Altura de 12% a 18% da peça.
4. **Marca d'Água da Serpentina (*Watermark*):**  
   O isologo estilizado em grande escala (60% a 120% da largura), cortado pela borda da tela. Opacidade de 6% a 10% em branco sobre navy, ou 4% a 6% em navy sobre off-white.
5. **Textura de Água (*Water Texture Overlay*):**  
   Fotografia real de água em movimento com blend mode *multiply* a 15%–20% de opacidade sobre fundos Navy. Utilizada apenas em peças institucionais nobres.

---

## 3. Arquitetura de Conversão Validada para Landing Pages

A estrutura oficial de página da Water Meyer (validada no case *Limpeza Química Industrial*) é composta pelas seguintes 9 seções obrigatórias:

1. **Hero Section Dividida (50/50):** Headline de alto impacto à esquerda com CTA primário; fotografia técnica de engenharia sangrando à direita com caixa de legenda.
2. **Diagnóstico do Problema Operacional:** Descrição clara das consequências financeiras de incrustação, corrosão e biofilme em sistemas de resfriamento e caldeiras.
3. **Solução em 4 Benefícios Mensuráveis:** 4 cards com ícones lineares e títulos em Metropolis Bold.
4. **Como Funciona (Metodologia em 4 Etapas):** Grid com os 4 numeradores circulares (`01 Coleta e Análise`, `02 Protocolo Químico`, `03 Execução Controlada`, `04 Auditoria e Laudo`).
5. **Prova Quantificada (Obrigatório):** Tabela de case real demonstrando a redução de custos, recuperação de vazão e coeficiente CEE medido antes e depois da intervenção.
6. **Diferenciais & Engenharia Consultiva:** Laboratório próprio, 20 anos de mercado e corpo técnico especializado.
7. **Formulário de Qualificação & CTA:** Formulário direto com campos de tipo de indústria, volume hídrico e botão primário navy.
8. **FAQ Técnico (Perguntas Frequentes):** Accordion sóbrio respondendo dúvidas regulatórias (CETESB/normas técnicas).
9. **Rodapé Institucional:** Logotipo com tagline oficial "Tratamento da Água e do Ar", endereço da sede em Hortolândia/SP e canais comerciais.


<!-- FIM DO DOCUMENTO: 04-digital-components.md -->

---

<!-- INÍCIO DO DOCUMENTO: 05-libraries-and-tooling.md -->

# 🧰 Bibliotecas de UI, Ícones & Ecossistema — Water Meyer

> **Padrão de Tooling & Stack**: Define o ecossistema oficial de bibliotecas de componentes, pacotes de ícones, frameworks de estilização e dependências recomendadas para produtos digitais da Water Meyer.

---

## 1. Stack Oficial de Desenvolvimento Front-End

Para garantir máxima performance, acessibilidade e escalabilidade, todos os ativos digitais da Water Meyer (Landing Pages, Portais de Telemetria e Dashboards) devem seguir a stack recomendada:

| Camada | Tecnologia / Biblioteca Homologada | Justificativa Técnica |
| :--- | :--- | :--- |
| **Framework Base** | **React / Next.js / Vite** | Renderização ultrarrápida, SEO otimizado e componentização moderna. |
| **Motor de Estilos** | **Tailwind CSS v3/v4** | Estilização orientada a tokens, ausência de classes arbitrárias e zero CSS não utilizado. |
| **Componentes de Acessibilidade** | **Radix UI / shadcn/ui** | Componentes *headless* com suporte nativo integral ao **WCAG 2.2 AA** (foco por teclado, ARIA roles, acessibilidade em modais e accordions). |
| **Biblioteca de Ícones** | **Lucide Icons** | Conjunto uniforme de ícones lineares com traço geométrico consistente. |
| **Animação & Interação** | **Framer Motion** | Transições de alta precisão com micro-interações fluidas e respeitando `prefers-reduced-motion`. |

---

## 2. Padrão Rígido de Iconografia (Lucide Icons)

A Water Meyer utiliza ícones exclusivamente **lineares (outline)** para preservar o caráter científico e corporativo da marca:

### Diretrizes de Uso dos Ícones
- **Espessura do Traço (*Stroke Width*):** Fixo em `strokeWidth={1.5}` (ou `2px` em escala base de 24px).
- **Dimensões Padrão:**
  - Ícones em botões e badges: `size={16}` ou `size={18}`.
  - Ícones de cards e seções: `size={24}` ou `size={28}`.
  - Ícones de destaque do Instagram: `size={40}` dentro de círculo Navy com anel branco.
- **Cores Permitidas:**
  - Sobre fundo claro: Navy `#0A1931` ou Azul Meyer `#3D6192`.
  - Sobre fundo Navy escuro: Branco `#FFFFFF` ou Azul Claro `#8FA8C8`.
- **Proibições:** Nunca utilizar ícones 3D, ícones preenchidos pesados, emojis no meio do texto ou múltiplos estilos de ícones na mesma interface.

---

## 3. Snippets de Instalação e Configuração

### Instalação de Dependências Essenciais
```bash
npm install lucide-react clsx tailwind-merge framer-motion @radix-ui/react-accordion @radix-ui/react-dialog
```

### Configuração do Helper de Classes (`cn`)
```typescript
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
```


<!-- FIM DO DOCUMENTO: 05-libraries-and-tooling.md -->

---

<!-- INÍCIO DO DOCUMENTO: 06-print-and-editorial.md -->

# 🖨️ Materiais Impressos, Editorial & Produção Gráfica — Water Meyer

> **Manual de Pré-Impressão e Gráfica**: Especificações técnicas determinísticas para reprodução física, controle cromático CMYK/Pantone, sangrias e acabamentos nobres da Water Meyer.

---

## 1. Padrões Cromáticos para Impressão Off-set e Digital

Todas as artes destinadas a impressão gráfica devem ser preparadas exclusivamente com os valores cromáticos oficiais do manual da marca:

| Identificação da Cor | Pantone Oficial | Fórmula CMYK Oficial | Aplicação Gráfica Principal |
| :--- | :---: | :---: | :--- |
| **Navy Water Meyer** | **Pantone 282 C** | `C: 80% / M: 49% / Y: 0% / K: 81%` | Fundos institucionais, títulos, pastas corporativas |
| **Azul Meyer** | **Pantone 7683 C** | `C: 58% / M: 34% / Y: 0% / K: 43%` | Acentos, destaques em propostas e tabelas |
| **Cinza Serpentina** | **Pantone 422 C** | `C: 0% / M: 0% / Y: 0% / K: 33%` | Fita posterior da serpentina, linhas de tabela |
| **Cinza Claro** | **Pantone 420 C** | `C: 0% / M: 0% / Y: 0% / K: 18%` | Divisores de páginas e fundos suaves |

---

## 2. Parâmetros de Fechamento de Arquivo (Pré-Impressão)

- **Resolução Mínima:** `300 DPI / PPI` na escala 1:1 para todas as imagens e gráficos rasterizados.
- **Sangria Gráfica Obrigatória (*Bleed*):** `5 mm` de sangria externa além dos limites do corte em todos os 4 lados do documento.
- **Margem Interna de Segurança:** Mínimo de `15 mm` em relação à linha de corte para textos, tabelas e logotipos em páginas A4.
- **Textos em Preto/Navy:** Textos corridos devem ser configurados em Preto Puro (`K: 100%`) ou Navy Oficial em Overprint (superimposição) para evitar desencaixe de cor (registro).
- **Conversão de Fontes:** Todas as tipografias devem ser convertidas em curvas/vetores (`Convert to Outlines`) no fechamento final de PDFs para a gráfica (`PDF/X-1a:2001` ou `PDF/X-4`).

---

## 3. Especificação de Papéis, Gramaturas & Acabamentos Nobres

| Peça Corporativa | Dimensão Final | Papel / Substrato | Acabamento Especial |
| :--- | :---: | :--- | :--- |
| **Cartão de Visita** | `90 × 50 mm` | **Couché Fosco 350g/m²** | Laminação *Soft Touch* bilateral + **Verniz UV Localizado** sobre a serpentina do isologo na frente. |
| **Pasta de Propostas & Laudos** | `220 × 310 mm` (Fechada) | **Papel Supremo 350g/m²** ou Couché 350g | Laminação fosca externa, bolsa interna colada para acondicionamento de relatórios técnicos. |
| **Papel Timbrado A4** | `210 × 297 mm` (A4) | **Papel Offset 90g ou 120g** alcalino | Impressão plana off-set, alta alvura, compatível com impressoras a laser de escritório. |
| **Envelopes Ofício e Saco** | `229 × 114 mm` / `260 × 360 mm` | **Papel Offset 120g** | Fita autoadesiva (siliconada) com impressão do logo oficial com tagline. |
| **Sinalização de Laboratório & Placas** | Formatos sob medida | **PVC Expandido 3mm / ACM** | Impressão UV direta com verniz fosco protetor anti-químico. |
| **Uniformes de Campo & EPIs** | — | Tecido técnico antichamas / Algodão | Bordado de alta precisão no peito esquerdo ou silkscreen com tinta vinílica industrial. |
| **Adesivagem de Frota / Veículos** | Conforme modelo | **Vinil Automotivo Fundido (Cast)** | Laminação com película protetora anti-UV para resistência a intempéries. |

---

## 4. Dimensões Mínimas do Logotipo em Impressão

- **Assinatura Vertical Completa (com Tagline):** Mínimo de **25 mm de largura** (ou 8,4 mm de altura).
- **Assinatura Sem Tagline:** Mínimo de **6 mm de altura**.
- **Ícone Redondo da Serpentina:** Mínimo de **5 mm de diâmetro**.
- *Abaixo de 8,4 mm de altura, a tagline "Tratamento da Água e do Ar" deve ser compulsoriamente suprimida.*


<!-- FIM DO DOCUMENTO: 06-print-and-editorial.md -->

---

<!-- INÍCIO DO DOCUMENTO: 07-social-media.md -->

# 📱 Redes Sociais, Anúncios & Grids — Water Meyer

> **Manual de Social Media & Criação de Conteúdo**: Matriz de formatos, áreas de segurança, regras invioláveis de aplicação de logotipo e templates estruturados para Instagram, LinkedIn e anúncios digitais.

---

## 1. Regra Inviolável de Aplicação de Marca no Social

> ⚑ **REGRA DE OURO DAS REDES SOCIAIS (INVIOLÁVEL):**  
> **Em qualquer publicação de rede social (Feed Retrato 4:5, Feed Quadrado 1:1, Carrossel, Stories 9:16, Reels, Capas e Anúncios), a assinatura obrigatória é o LOGOTIPO VERTICAL SEM A TAGLINE "Tratamento da Água e do Ar".**  
> *Motivo técnico:* Em telas mobile de alta densidade (smartphones), a tagline perde legibilidade, polui a hierarquia e entra em conflito visual com o título (*headline*) da peça.

---

## 2. Matriz de Formatos e Áreas de Segurança

| Canal / Formato | Dimensão Exata | Margens Laterais | Zonas Livres de UI / Exclusão | Posição Padrão da Marca |
| :--- | :---: | :---: | :--- | :--- |
| **Feed Retrato (Padrão IG)** | `1080 × 1350 px` (4:5) | `80 px` | `88 px` no topo e na base | Topo centralizado ou rodapé centralizado |
| **Feed Quadrado (Feed Clássico)** | `1080 × 1080 px` (1:1) | `80 px` | `80 px` no topo e na base | Rodapé centralizado |
| **Carrossel (Lâminas Internas)** | `1080 × 1350 px` (4:5) | `80 px` | `88 px` no topo e base | Isologo sutil ou selo 20 anos à direita |
| **Stories & Reels (Vertical)** | `1080 × 1920 px` (9:16) | `80 px` | **250 px no topo** e **320 px na base** | Rodapé (acima dos 320px de zona livre) |
| **LinkedIn Artigo / Capa** | `1200 × 628 px` | `64 px` | Sem interferência de UI | Selo branco no canto superior esquerdo |
| **Capa de Destaques Instagram** | `1080 × 1920 px` | Central | Ícone centralizado em diâmetro de 400px | Ícone linear branco em círculo Navy |
| **Avatar de Perfil** | `1080 × 1080 px` | Central | Círculo de corte de 1080px | Isologo Navy em fundo branco com anel |

---

## 3. Os 4 Templates Estruturados da Marca

### 3.1 Template A — Post Técnico / Educativo (Fundo Claro `#FAFAFB`)
Estrutura vertical para apresentação de conceitos de engenharia, diagnóstico e processos:
1. **Cantos Chanfrados Navy a 45°:** Ancorados no Canto Superior-Esquerdo e Inferior-Direito.
2. **Logotipo Vertical Sem Tagline:** Centralizado no topo com largura de aproximadamente 28% da peça.
3. **Display Principal:** Em Metropolis Bold, caixa alta, cor Navy `#0A1931`, tracking `-2%` (ex.: `"TELEMETRIA INDUSTRIAL"`).
4. **Kicker / Chapéu:** Metropolis Regular em caixa alta, tracking largo `+8%`.
5. **Parágrafo de Contexto:** Máximo de 3 linhas com **negrito seletivo** nos termos técnicos fundamentais.
6. **3 Colunas de Processo:** Três blocos verticais contendo **Numerador Circular** (`01`, `02`, `03`) + Rótulo em Bold + Breve descrição técnica.
7. **Imagem Técnica de Campo:** Fotografia de reator ou tubulação sangrando na base inferior.

---

### 3.2 Template B — Post Institucional / Autoridade (Fundo Navy `#0A1931`)
Estrutura para comunicação de datas comemorativas, 20 anos da empresa ou posicionamento de liderança:
1. **Fundo Navy Sólido:** Com textura suave de água em blend mode *multiply* a 15%–20% de opacidade.
2. **Título de Alto Impacto:** Alinhado à esquerda em Metropolis Bold Branco, com palavra-chave em destaque.
3. **Subtítulo:** Em Metropolis Light Branco com respiro de leitura.
4. **Selo 20 Anos:** Posicionado no canto superior direito da composição.
5. **Card de Fotografia:** Imagem de engenheiro com EPI em card central com borda branca de `2px` e raio de `16px`.
6. **Logotipo Vertical Negativo (Branco):** Centralizado no rodapé.

---

### 3.3 Template C — Capa de Artigo / LinkedIn (Foto 100% Cheia)
1. **Fotografia 100% Sangrada:** Foto de alta resolução de torre de resfriamento, caldeira ou laboratório ocupando todo o quadro.
2. **Selo Branco de Assinatura:** No canto superior esquerdo, com corte diagonal no vértice inferior direito, contendo o logotipo institucional.
3. **Faixa de Título Inferior (Opcional):** Bloco sólido em Navy `#0A1931` na base ocupando no máximo 35% da altura da imagem.

---

### 3.4 Template D — Carrossel Interno Foto + Texto (Divisão 50/50)
1. **Divisão Vertical em Duas Metades:**
   - **Lado Esquerdo:** Fotografia técnica sangrada na borda esquerda com **Caixa de Legenda Branca** no canto inferior.
   - **Lado Direito:** Fundo claro `#FAFAFB` com título em dois pesos (Regular + Bold itálico) e parágrafo explicativo.
2. **Onda Navy de Topo:** Faixa assimétrica no cabeçalho com o selo comemorativo ou isologo à direita.

---

## 4. Diretrizes de Copywriting e Legendas

- **Estrutura de Legenda:** `Contexto do Problema Operacional` $\rightarrow$ `Mecanismo Físico-Químico` $\rightarrow$ `Consequência Financeira/Operacional` $\rightarrow$ `CTA Consultivo`.
- **Hashtags:** No final do texto, separadas por espaço, no máximo 8 hashtags técnicas e setoriais (ex.: `#EngenhariaHídrica #TratamentoDeÁgua #EficiênciaTérmica #TorresDeResfriamento #WaterMeyer`).
- **Uso de Emojis:** Restrito estritamente à biografia do perfil. No corpo das postagens, priorizar sobriedade e pontuação gramatical impecável.


<!-- FIM DO DOCUMENTO: 07-social-media.md -->

---

<!-- INÍCIO DO DOCUMENTO: 08-art-direction-and-motion.md -->

# 🎬 Direção de Fotografia, Audiovisual & Motion — Water Meyer

> **Diretrizes de Produção de Imagem & Cinema**: Guia estético para sessões de fotografia industrial, direção de arte audiovisual, tokens de animação de interface e identidade sonora da Water Meyer.

---

## 1. Direção de Fotografia Industrial & Fotojornalismo

A fotografia da Water Meyer deve transmitir **autenticidade científica e precisão operacional**, documentando a engenharia viva e eliminando clichês de bancos de imagens genéricos.

### 🏭 Assuntos Prioritários para Captação
- **Equipamentos e Plantas Reais:** Torres de resfriamento industriais, caldeiras a vapor, chillers de alta capacidade, reatores químicos, trocadores de calor de placas e tubulações de grande diâmetro.
- **Laboratório Próprio de Análises:** Bancadas de espectrofotometria, titulação, ensaios de condutividade, amostras de água límpida em béqueres de vidro graduado e laudos técnicos em tablets.
- **Equipe Técnica em Ação:** Engenheiros e técnicos de campo paramentados com **EPI completo e higienizado** (capacete de segurança branco/azul, óculos de proteção, uniforme técnico com bordado Water Meyer, luvas de nitrilo e protetor auricular).
- **Fluidez & Água em Movimento:** Jatos d'água controlados, superfícies de tanques com iluminação rasante e fluxo contínuo.

### 📷 Tratamento de Cor & Iluminação
- **Temperatura de Cor:** Levemente fria e técnica (**5200K a 5600K**), realçando os tons azulados do aço inoxidável e da água tratada.
- **Contraste:** Médio-alto, preservando texturas de metais escovados e superfícies técnicas sem saturação excessiva.
- **Composição & Ângulos:** Preferência por perspectivas diagonais e linhas de fuga de tubulações que conversem visualmente com a geometria contínua do isologo da serpentina.
- **Expressões Humanas:** Postura de trabalho compenetrado, atenção ao manuseio de equipamentos de medição. *Terminantemente proibidas poses artificiais com modelos sorrindo diretamente para a câmera*.

### 📊 Renders Técnicos & Fluxos de Processo
- Disposição estritamente horizontal da esquerda para a direita (origem $\rightarrow$ tratamento $\rightarrow$ telemetria $\rightarrow$ resultado limpo).
- Elementos conectados por **linhas pontilhadas Navy `#0A1931`** com setas direcionais discretas.

---

## 2. Tokens de Motion Design & Interação Web

As micro-interações na interface da Water Meyer seguem uma física mecânica precisa, com acelerações rápidas e desacelerações suaves:

| Token Semântico | Duração | Curva de Aceleração (*Easing*) | Aplicação em Código / UI |
| :--- | :---: | :--- | :--- |
| `--motion-fast` | `150 ms` | `cubic-bezier(0.16, 1, 0.3, 1)` | Hover de botões, tags, inputs e ícones |
| `--motion-normal` | `250 ms` | `cubic-bezier(0.16, 1, 0.3, 1)` | Abertura de accordions (FAQ), tooltips e cards |
| `--motion-slow` | `400 ms` | `cubic-bezier(0.16, 1, 0.3, 1)` | Transições de modais, menus laterais e drawers |
| `--motion-entrance` | `600 ms` | `cubic-bezier(0.16, 1, 0.3, 1)` | Entrada gradual de seções de página (*stagger fade-in*) |

```css
/* Exemplo de Transição Padrão */
.wm-interactive-element {
  transition: all var(--motion-normal) cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```

---

## 3. Identidade Sonora & Trilha Institucional (Vídeos & Reels)

- **Gênero Musical:** Contemporâneo Minimalista / *Downtempo Orgânico*.
- **Instrumentação:** Piano acústico límpido, notas esparsas e graves controlados, combinados com pulso suave de sintetizador atmosférico (estilo *Max Richter / Nils Frahm / Ólafur Arnalds corporativo*).
- **Proibições:** Batidas eletrônicas estridentes de EDM, música corporativa de palmas e assobios (*corporate ukulele*) e efeitos sonoros exagerados.
- **Locução Institucional:** Voz de registro barítono ou médio-grave, dicção pausada, segura, didática e confiável.


<!-- FIM DO DOCUMENTO: 08-art-direction-and-motion.md -->

---

<!-- INÍCIO DO DOCUMENTO: 09-generative-ai-prompts.md -->

# 🤖 Engenharia de Prompts de IA Generativa — Water Meyer

> **Catálogo de Engenharia de Prompts Calibrados**: Biblioteca de prompts de alta fidelidade para Midjourney v6, FLUX.1 e geradores de vídeo cinematográfico (Runway Gen-3, Sora, Luma Dream Machine) parametrizados especificamente para a identidade visual da Water Meyer.

---

## 1. Parâmetros Globais de Calibração Visual

Para assegurar consistência com o padrão técnico da marca (temperatura fria 5400K, realismo sem filtros espalhafatosos e foco em fotojornalismo industrial), utilize sempre os seguintes parâmetros:

- **Midjourney v6:** `--v 6.0 --style raw --c 5 --q 2`
- **Iluminação & Atmosfera:** `clean industrial lighting, subtle cool blue tones (5400K), sharp focus on stainless steel surfaces, cinematic depth of field, authentic photojournalism`
- **Negative Prompt (Obrigatório):** `blurry, 3d render cartoon, overly saturated, smiling models looking at camera, dirty equipment, rust, chaotic composition, cheesy corporate stock photo`

---

## 2. Catálogo Consolidado de Prompts de Imagem

### 📷 Prompt 01 — Engenheiro em Inspeção Técnica de Campo (Feed 4:5)
```text
A professional female industrial chemical engineer wearing a clean white hardhat, protective safety glasses, and a navy blue technical work shirt with subtle reflective stripes. She is focused on inspecting an industrial water cooling tower telemetry panel with digital readouts inside a state-of-the-art manufacturing plant. Clean environment, stainless steel piping, soft morning sunlight combined with cool 5400K industrial lighting, authentic photojournalism, cinematic 50mm f/2.8 lens, high-end commercial photography --ar 4:5 --v 6.0 --style raw
```

---

### 📷 Prompt 02 — Vista Monumental de Torres de Resfriamento (Widescreen 16:9)
```text
Cinematic architectural photography of modern industrial water cooling towers and stainless steel heat exchangers in a clean pharmaceutical plant. Crystal clear water flowing through monitored transparent inspection pipes, precise geometric alignment, crisp deep navy and cool silver-blue tones, morning atmospheric haze, hyper-detailed textures of brushed metal and pristine industrial facility --ar 16:9 --v 6.0 --style raw
```

---

### 📷 Prompt 03 — Laboratório Próprio de Análise Físico-Química (Horizontal 16:9)
```text
A high-tech chemical analysis laboratory dedicated to industrial water testing. High precision spectrophotometer on a white quartz bench, crystal clear water samples inside graduated glass beakers catching clean studio light, a male chemist in a crisp white lab coat taking notes on a modern tablet in the background out of focus. Deep navy accents, pristine cleanliness, scientific rigor, Canon EOS R5 with 85mm f/1.8 lens, commercial sharpness --ar 16:9 --v 6.0 --style raw
```

---

### 📷 Prompt 04 — Macro Shot de Trocador de Calor de Placas Limpo (1:1)
```text
Extreme macro detailed photograph of clean stainless steel plate heat exchanger channels. Spotless metal surface without any calcium scale or bio-fouling, microscopic droplets of purified water glistening on the metallic surface, directional studio light emphasizing precision engineering and fluid mechanics, deep navy background shadow, commercial product photography --ar 1:1 --v 6.0 --style raw
```

---

### 📷 Prompt 05 — Painel de Telemetria e Sensores de Vazão em Tempo Real (4:5)
```text
Close-up shot of a modern industrial water telemetry control box mounted on a clean industrial pipe. Digital OLED display showing water flow rates and pH levels with sharp blue LED indicators, brushed steel enclosure, hands of an engineer in technical nitrile gloves calibrating the sensor, crisp depth of field, documentary realism --ar 4:5 --v 6.0 --style raw
```

---

## 3. Prompts de Vídeo & Motion Cinematográfico (Runway Gen-3 / Sora / Luma)

### 🎬 Vídeo Prompt 01 — Slow Cinematic Drone Reveal da Planta Industrial
```text
Slow, smooth cinematic aerial push-in towards a modern clean industrial water treatment plant at dawn. Cool blue morning light reflecting on large cylindrical water treatment reactors and polished steel piping. Steam rising gently from cooling towers in slow motion, precise geometric symmetry, 4k resolution, 60fps slowed to 24fps cinematic shutter speed.
```

### 🎬 Vídeo Prompt 02 — Macro Fluid Motion (Água Tratada em Fluxo Laminar)
```text
High-speed camera macro shot at 120fps showing pristine, crystal-clear treated water flowing smoothly through a transparent glass testing chamber. Subtle laminar flow lines, soft cool blue rim lighting, elegant fluid dynamics, hyper-clean scientific aesthetic, cinematic macro lens with shallow depth of field.
```

---

## 4. Prompt para Geração de Roteiro de Vídeo Institucional (LLM)

```text
Atue como Diretor Criativo Sênior da Propenza Marketing para a empresa Water Meyer (20 anos de mercado, engenharia consultiva em água e ar). 
Escreva um roteiro de vídeo institucional de 60 segundos para LinkedIn e YouTube. 
Estrutura: 
1. 0-15s (O Problema Invisível): Custo oculto de incrustações, biofilme e desperdício térmico na indústria. 
2. 15-35s (A Solução Técnica): Diagnóstico laboratorial, dosagem controlada e telemetria contínua. 
3. 35-50s (O Resultado Quantificado): Demonstração de métricas (recuperação de CEE e ROI financeiro medido). 
4. 50-60s (Assinatura): Water Meyer — Cuidamos daquilo que é vital: gerimos a qualidade da água e do ar. 
Tom: Seguro, barítono, sóbrio, sem clichês de autoajuda corporativa.
```


<!-- FIM DO DOCUMENTO: 09-generative-ai-prompts.md -->

---

<!-- INÍCIO DO DOCUMENTO: GUARDRAILS.md -->

# Water Meyer — Governança de Marca

> **Documento:** `GUARDRAILS.md`  
> **Cliente:** Water Meyer (Slug: `water-meyer`)  
> **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. Navy oficial é `#0A1931` (nunca `#171F34` nem preto puro `#000000`).
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.
4. **Exclusividade da Tipografia Gabarito**: A fonte Gabarito Bold é restrita exclusivamente ao logotipo nominativo ("Water Meyer"). Todo texto corrido e títulos devem usar **Metropolis**.

---

## 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 Navy/Cinza / negativo Branco / selo branco recortado em fotos).
- [ ] **2. Regra de Redes Sociais**: Peça de rede social usando o logotipo **SEM a tagline "Tratamento da Água e do Ar"**.
- [ ] **3. Área de Proteção $X$**: Margem de segurança $X$ (altura da letra 'a' minúscula do logo) respeitada em todos os quatro lados.
- [ ] **4. Dimensão Mínima**: Logo acima de 32px de altura / 8.4mm; tagline removida se menor que o limite.
- [ ] **5. Fidelidade Cromática**: Cores conferidas contra o arquivo SSOT `01-colors-and-contrast.md` (`#0A1931`, `#3D6192`, `#ACACAC`, `#D0D0D0`, `#FAFAFB`).
- [ ] **6. Proporção 60/25/10/5**: Distribuição de peso visual respeitada (60% superfície, 25% Navy, 10% Cinza, 5% Azul Meyer).
- [ ] **7. Tipografia Exclusiva**: Uso exclusivo de Metropolis (Thin a Bold) na comunicação.
- [ ] **8. Contraste de Texto**: Contraste $\ge 4.5:1$; texto sobre fotos com *scrim* navy (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 dos 5 grafismos (cantos chanfrados 45°, selo branco, onda navy, marca d'água de serpentina ou textura de água).
- [ ] **11. Negrito Seletivo**: Destaque intencional aplicado apenas nos termos físico-químicos e métricas 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 (1080x1350, 1080x1920, 1200x628, A4).


<!-- FIM DO DOCUMENTO: GUARDRAILS.md -->

---