chore: initial monorepo scaffold + WDS Phase 1+2 artifacts

- Nx 22.7 monorepo (pnpm 11.1, TypeScript 5.9, Node 24)
- apps/api: NestJS 11 (CJS conforme CODING-RULES.md PGD-DB-004)
- apps/web: React 19 + Vite 8 (ESM)
- libs/shared/api-interface: Zod contract base
- Docker Compose dev: Postgres 18, Valkey 8, MinIO, Mailpit
- WDS artifacts:
  - design-artifacts/A-Product-Brief/ (5 docs canônicos + 16 dialogs)
  - design-artifacts/B-Trigger-Map/ (hub + 4 personas + feature impact)
- Stack canon: STACK.md v2.2 + CODING-RULES.md v2.0 + brand.md
- AGENTS.md + README.md como entrada para devs/agentes

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

design-artifacts/A-Product-Brief/03-visual-direction.md

@@ -0,0 +1,420 @@
+# Visual Direction: SAR — Força de Vendas
+
+**Status:** ✅ Block C COMPLETO (Steps 19-26)
+**Cliente:** JCS Sistemas
+**Última atualização:** 2026-05-27
+
+> Define a **direção visual canônica** do SAR. Companion de `01-product-brief.md` e `02-content-language.md`. Reaproveita `brand.md` como base e expande para variantes por cockpit.
+
+---
+
+## Materiais herdados (entrada para Block C)
+
+- **`brand.md`** — identidade visual canônica (paleta, tipografia, layout, ícones, gráficos, tokens, tom visual)
+- **`frontend/img/SAR_logo_fundo_transparente.png`** + **`SAR_icone_fundo_transparente.png`** — assets de logo
+- **`design-artifacts/_references/legacy-screens-html/index.html`** — mockup com brand aplicado em 9 telas reais
+- **`dialog/inspiration-analysis.md`** (Step 19) — 4 referências externas (Apple, Linear, Stripe, Notion) + 7 padrões destilados
+- **`02-content-language.md`** — tom de voz e princípios de content structure
+
+---
+
+## Existing Brand Assets
+
+### Inventário e decisões
+
+| Asset | Status | Localização | Decisão |
+|---|---|---|---|
+| **Logo SAR** (horizontal, ícone + wordmark + tagline) | ✅ Existe (PNG transparente) | `frontend/img/SAR_logo_fundo_transparente.png` | **Keep + refresh** — gerar SVG + variantes (vertical, monocromática, dark mode) |
+| **Ícone SAR** | ✅ Existe (PNG transparente) | `frontend/img/SAR_icone_fundo_transparente.png` | **Keep + refresh** — gerar SVG; vira favicon, PWA icon, notification icon |
+| **Logo JCS Sistemas** | ✅ Existe (4 variantes PNG) | `design-artifacts/_references/jcs-logo/` (azul, preto, branco, transparente) | **Keep + refresh** — gerar SVG; usar em "Powered by JCS" no footer |
+| **Paleta de cores** | ✅ Decidida | `brand.md` § Paleta | **Keep as-is** — canônica |
+| **Tipografia Plus Jakarta Sans** | ✅ Decidida | `brand.md` § Tipografia | **Keep as-is** — self-host em produção (LGPD + performance) |
+| **Iconografia FA 6.4** | ✅ Decidida | `brand.md` § Ícones | **Keep as-is** — importar subset usado |
+| **Gráficos Chart.js** | ✅ Decidido | `brand.md` § Gráficos | **Keep as-is** — tema custom com paleta JCS |
+| **Tokens (radius 12/20px + sombra)** | ✅ Decidido | `brand.md` § Bordas/sombras | **Keep as-is** |
+| **Layout base (topbar 80 + sidebar 260)** | ✅ Decidido | `brand.md` § Layout | **Keep + adaptar por cockpit** (Rafael mobile usa bottom nav) |
+| **Mockup HTML legado** | ✅ Existe (9 telas com brand aplicado) | `design-artifacts/_references/legacy-screens-html/index.html` | **Refresh** — usar como wireframe baseline; refazer com AntD em Phase 4 |
+| **Logo dark mode (versão fundo escuro)** | ❌ Não existe | — | **Create** — em Phase 6 (Design System) |
+| **Fotos/vídeos JCS para cases e /sobre** | 🟡 A confirmar | — | **Create eventualmente** — depende de ter clientes |
+
+### Análise visual das logos
+
+**Logo JCS Sistemas** (`logo_azul.png`):
+- Wordmark "JCS." em JCS Blue, sans-serif moderna bold, com período distintivo
+- Elemento gráfico: seta/swoosh horizontal passando pelo "C" (sugere movimento, precisão, velocidade)
+- "sistemas" em peso lighter, lowercase, mesmo tom azul
+- Layout horizontal, clean, alinha com brand.md "Apple-inspired"
+
+**Logo SAR** (`SAR_logo_fundo_transparente.png`):
+- Ícone: quadrado JCS Blue com gráfico de barras crescente em branco (metáfora analytics/dashboard)
+- Wordmark "SAR" em cinza escuro/preto, bold sans-serif
+- Tagline "FORÇA DE VENDAS" em letterspaced caps, peso médio, cinza médio
+- Hierarquia visual deliberada: SAR como produto distinto, JCS é marca-mãe
+
+### Coerência marca-mãe → produto
+
+A relação visual JCS ↔ SAR está bem resolvida:
+- **JCS Blue** é fio condutor (azul do ícone SAR + da wordmark JCS)
+- **Tipografias diferentes** sinalizam produtos distintos: JCS = "sistemas" (genérico, leve), SAR = "FORÇA DE VENDAS" (específico, técnico)
+- **Ícone SAR contém ícone de analytics** = comunica diferencial declarado (visibilidade + IA estratégica)
+
+### Partnership / afiliações declaradas
+
+| Item | Onde aparece | Estado |
+|---|---|---|
+| **"Powered by JCS Sistemas"** | Footer do produto + login screen + página `/sobre` | A implementar (logo JCS já disponível) |
+| **Selos técnicos** (LGPD compliant, futuras certificações) | Footer público + página `/sobre` | A criar/conquistar |
+| **Associações setoriais** | — | Nenhuma declarada por ora |
+| **Franquia / certificação externa** | — | N/A — SAR é produto JCS sob exclusiva propriedade |
+
+### Brand constraints (não negociáveis)
+
+- **JCS Blue `#004a99`** como único accent color cromático (brand.md)
+- **Plus Jakarta Sans** como única família tipográfica (brand.md)
+- **Logo SAR** deve coexistir com **Logo JCS** em todas as superfícies de marketing/contato (parental → produto)
+- **Tom visual Apple-inspired** (brand.md) — sem decoração desnecessária, sem gradientes pesados, sem ilustrações ornamentais
+- **Único destaque cromático** — não usar 5 cores fortes lado a lado; deixar a paleta funcional sem competir com o JCS Blue
+
+---
+
+## References
+
+### Referências positivas (destiladas em Step 19 + categorizadas em Step 22)
+
+| Categoria | Inspiração | Aplicação no SAR |
+|---|---|---|
+| **Layout** | Apple iCloud · Linear · Notion | Sidebar fixa + área limpa · max 3 níveis · white space generoso · sem zebra agressiva |
+| **Cor** | Apple · Linear | Cinza neutro base + 1 accent (JCS Blue) · cores funcionais só em estados · sem 5 cores fortes lado a lado |
+| **Tipografia** | Apple · Stripe | Hierarquia por peso e tamanho, não cor · Plus Jakarta 400/500/600/700 · numerais bem dimensionados em dashboards |
+| **Densidade** | Linear · Stripe | Densidade respirável — tabelas com peso visual baixo, espaço confortável |
+| **Imagery** | Apple · Stripe | Photography editorial · composições com espaço · sem stock óbvio |
+| **Efeitos** | Linear · Stripe | Animações sutis funcionais — nunca decorativas |
+| **Estados** | Notion · Linear | Empty states informativos · loading com contexto · erros conversacionais |
+| **Dark mode** | Linear · Vercel | Tema escuro elegante (não cinza-meio-cinza) — Rafael à noite |
+| **Mobile** | Apple iCloud · Linear mobile | Touch 44pt · bottom nav · gestos padrão · safe area iOS |
+
+Referências detalhadas em `dialog/inspiration-analysis.md`.
+
+### Referências negativas (estilos a EVITAR)
+
+| Estilo | Exemplo | Por quê |
+|---|---|---|
+| **Burocrata corporativo legado** | ERPs antigos (TOTVS clássico, SAP legado), portais gov | Telas densas, sombras 3D, "Confirmar Operação", azul-cinza pesado |
+| **Apps verticais BR de força de vendas** | Mercos, Promosoft, MaxFV | UI legada PHP anos 2010, zebra, abas sobrepostas, "hamburger no desktop". Oposto do positioning. |
+| **SaaS "fofo" / cartunesco** | Mailchimp, Slack-overuse, mascots | Emojis em produção, gradientes coloridos, ilustrações cartoon. SAR é consultor sênior, não meme. |
+| **Material Design pesado** | Apps Google antigos | Sombras grossas, FAB flutuante, ripple effects exagerados |
+| **Dashboards BI 2010-2015** | Power BI legado, Tableau antigo | Cores neon, gráficos 3D, layouts apertados, sidebar com 18 ícones |
+| **Sites brasileiros "exuberantes"** | E-commerces, banners promocionais BR | Blocos berrantes, "OFERTA!" em caps, badges girando, contadores regressivos |
+| **Tour interativo agressivo** | Pendo/Appcues overuse | Pop-ups, modais de boas-vindas, tooltips persistentes (já em exclusões Step 17a) |
+
+### Mood keywords (5)
+
+| # | Mood | Significado visual |
+|---|---|---|
+| 1 | **Clean** | White space generoso, sem ruído, foco no essencial |
+| 2 | **Confident** | Tipografia decisiva, cores assertivas, ações em destaque |
+| 3 | **Specific** | Números, nomes, dados concretos > generalidades; densidade onde faz sentido |
+| 4 | **Serene** | Apple-inspired calm — sem exclamações, sem urgência fake, animações sutis |
+| 5 | **Modern** | Tipografia variável, tokens contemporâneos, padrões 2025+ — explicitamente fora do legado do setor |
+
+**Frase âncora:** *"clean, confident, specific, serene, modern — como um consultor sênior que apareceu na sua empresa e abriu o notebook."*
+
+---
+
+## Design Style
+
+### UI Visual Style — Modern Flat + Minimal
+
+Estilo das 4 referências (Apple iCloud, Linear, Stripe, Notion):
+- Superfícies planas com sombra muito sutil (`0 4px 25px rgba(0,0,0,0.05)`)
+- Sem skeumorfismo, sem 3D, sem texturas
+- Bordas com radius suave (12/20px) — moderno, não brutalista
+- Foco no conteúdo, não no chrome
+
+### Design Aesthetic — Minimalism contemporâneo / Digital-native modern
+
+- White space é elemento, não vazio
+- Cada elemento tem propósito (zero decoração)
+- Composição assimétrica permitida quando funcional
+- Sem ilustrações ornamentais — apenas iconografia funcional (Font Awesome 6.4)
+- Post-Apple aesthetic: produto digital nativo, não digitalização de produto físico
+
+### Color Direction — Monochromatic + functional accents
+
+| Aspecto | Decisão |
+|---|---|
+| **Scheme** | Monochromatic (JCS Blue tones) + functional accents (verde sucesso · laranja alerta · vermelho erro) |
+| **Temperatura** | Cool (azul + cinzas neutros frios) |
+| **Luminosidade** | Light primary + dark mode elegante (Rafael à noite) |
+| **Saturação** | Média — JCS Blue protagonista; outros tons funcionais com saturação controlada |
+| **Distribuição** | 60% neutros · 30% white space · 10% accents |
+| **EVITAR** | Vermelho como primary · laranja saturado · gradientes complexos multi-color · paletas 5+ cores fortes simultâneas · neon (BI 2010-2015) · muted (timidez) |
+
+### Typography Direction — Plus Jakarta Sans (Geometric Humanist)
+
+| Aspecto | Decisão |
+|---|---|
+| **Família** | Plus Jakarta Sans (única) — pesos 400-800 |
+| **Classificação** | Geometric Humanist (proporções geométricas + calor humanista — confident sem ser frio) |
+| **Headlines** | Bold (700) e ExtraBold (800), tamanhos grandes |
+| **Body** | Regular (400) e Medium (500), alta legibilidade |
+| **Numerais** | Tabular figures em dashboards (Daniel/Sandra precisam de colunas alinhadas) |
+| **Tracking** | Default em texto; expanded em CAPS (referência: `FORÇA DE VENDAS` do logo SAR) |
+| **Personalidade** | Confident, decisivo, moderno, neutro-com-leve-calor |
+| **Hierarquia preliminar (refinar Phase 6)** | h1 32-40px · h2 24-28px · h3 20px · body 14-16px · caption 12-13px |
+
+---
+
+## Layout & Effects
+
+### 🌐 Site Marketing
+
+#### Hero (home)
+**Split hero** — texto à esquerda + vídeo (thumbnail com play) à direita. Equilibra storytelling Apple-clean com o "ver SAR em 90s" do Step 17a. **Sem autoplay** — play on click para economizar dados de quem está em mobile.
+
+#### Content layout por tipo de página
+
+| Página | Pattern |
+|---|---|
+| `/` (home) | Single column com seções fluidas (storytelling) |
+| `/funcionalidades/*` | Card-based + grid (modular, escaneável) |
+| `/comparativos/*` | Side-by-side comparison table |
+| `/recursos/blog/*` | Single column clássico (foco em leitura) |
+| `/precos` | 3-column tier + FAQ embaixo |
+| `/para/<setor>` | Single column com sections customizadas |
+
+#### Navegação site
+- Top nav sticky com 5-6 itens
+- Hamburger apenas mobile (não desktop)
+- Mega menu apenas em `Funcionalidades` e `Para`
+- CTA "Agende demo" sempre visível no header
+
+---
+
+### 🖥️ Produto — Layout por cockpit
+
+| Cockpit | Layout principal | Pattern dominante |
+|---|---|---|
+| **🟢 Rafael (mobile)** | Single column · cards verticais · bottom nav 4-5 ícones | Stack vertical com pull-to-refresh |
+| **🟡 Sandra (desktop)** | Sidebar 260px + área de conteúdo · grid de cards + tabelas | Dense + decisão (Linear-like) |
+| **🔵 Daniel (desktop/iPad)** | Sidebar 260px + **bento box** dashboard (KPIs em tamanhos variados) | Bento moderno (Stripe-like) |
+| **🟣 Alice (desktop)** | Sidebar 260px + **table-first** + forms em modal/drawer lateral | Dense forms com assistente lateral |
+
+#### Navegação produto
+- Sidebar 260px fixa para Sandra/Daniel/Alice (brand.md canon) — colapsável em iPad
+- Bottom nav para Rafael
+- Topbar 80px com search/command bar central + perfil + notificações
+- Breadcrumb opcional em profundidade > 2 níveis
+
+---
+
+### ✨ Visual Effects (níveis canônicos)
+
+| Efeito | Nível SAR | Notas |
+|---|---|---|
+| **Shadows** | Sutil (`0 4px 25px rgba(0,0,0,0.05)` brand.md) | Único nível base; elevated card pode ter sombra ligeiramente maior |
+| **Animations** | Sutis funcionais | Linear-like — transição estado 150-250ms, easing ease-out, micro-feedback. **Nunca** decorativas/looping |
+| **Parallax** | None | Gimmick em B2B; quebra densidade |
+| **Hover effects** | Sutil | Background change, opacity, underline; **nunca** transform 3D ou scale grande |
+| **Loading** | Skeleton screens (não spinner global) | Shimmer suave, max 1-1.5s |
+| **Real-time updates** | Micro-animação suave entre cockpits | Slide-in 200ms, fade-in para itens novos. **Sem** toast intrusivo |
+| **Transitions de página** | Mínimas — fade rápido 150ms ou nenhuma | TanStack Router preserva contexto |
+| **Focus rings** | Visíveis e acessíveis (WCAG AA) | Keyboard nav clara |
+| **Reduced motion** | Respeitar `prefers-reduced-motion` | Acessibilidade obrigatória |
+
+---
+
+### ⚡ Performance targets
+
+| Métrica | Target | Como |
+|---|---|---|
+| Lighthouse mobile | > 90 Performance/Acessibilidade/Best Practices | Padrão técnico |
+| TTI Rafael 3G | < 3s | Code-split por cockpit · lazy images |
+| First Contentful Paint | < 1.5s | SSG no marketing · SPA cache no produto |
+| Bundle inicial por entry | < 200KB gzipped | Vite tree-shaking · AntD modular imports |
+| Animações | Sempre `transform`/`opacity` | GPU-friendly |
+| Imagens | WebP/AVIF + `srcset` + lazy load | sharp (STACK §14) |
+| Code-split por cockpit | Sim — Rafael não baixa código da Sandra | Lazy routes TanStack Router |
+| Service Worker | Crítico para Rafael offline | PWA shell + IndexedDB |
+| Vídeo hero | Play on click, sem autoplay | Economiza dados |
+
+---
+
+## Imagery
+
+> **Estratégia canônica:** MVP usa **screenshots do produto + ilustrações minimíssimas**, **sem stock humano**. Apple-style produto-primário. Fotos reais entram quando houver clientes/cases.
+
+### Photography style
+
+| Estilo | Status | Onde |
+|---|---|---|
+| **Authentic/Documentary** | Habilitado pós-MVP | Cases reais (donos JCS clients), /sobre eventual com time JCS |
+| **Product-focused** | ✅ MVP primário | Screenshots reais do SAR (com dados anonimizados) — hero, /funcionalidades, /para-setor |
+| **Lifestyle** | 🟡 Com moderação, pós-MVP | Rep no carro, supervisor no notebook — sem "happy team smiling" |
+| **Polished/staged** | ❌ Nunca | Estética que satura o setor |
+
+### Anti-padrões absolutos
+- ❌ Executive shaking hands in suit
+- ❌ Diverse team smiling around laptop in modern office
+- ❌ Hand pointing at futuristic UI hologram
+- ❌ Gráficos 3D flutuando ao redor de pessoas
+- ❌ Senhor de meia-idade preocupado olhando planilha
+- ❌ Cidade ao fundo com gráfico de barras sobreposto
+
+### MVP imagery plan
+
+| Local | MVP | Pós-MVP / Y1+ |
+|---|---|---|
+| **Hero da home** | Screenshot premium do cockpit em ação | Mesmo (não trocar) |
+| **`/cases`** | Sem cases inicialmente; quando houver, fotos reais com permissão | Crescente |
+| **`/sobre`** | Apenas texto + logo JCS + valores | Foto do time JCS quando tiver |
+| **`/para-<setor>`** | Screenshots contextuais + iconografia funcional | Possível foto-ambiente do setor |
+| **Blog hero** | Ilustrações minimalistas (line art) + screenshots | Crescente |
+| **Lead magnets** | Mockup screenshot | — |
+
+### Por que screenshots-only funciona (precedente Apple)
+
+- Apple.com hoje: praticamente **zero foto humana** — produto, produto, produto
+- Diferencial declarado é o SAR (4 cockpits, IA, WhatsApp) — **mostrá-lo é o argumento**
+- Mercado B2B BR satura "team photos genéricos" — sair disso é diferenciação
+- Solo founder mode economiza grana de photoshoot
+- Reforça positioning "moderno em mercado medíocre"
+
+### Icons
+
+| Aspecto | Decisão |
+|---|---|
+| **Biblioteca** | Font Awesome 6.4 (brand.md canon) — subset only |
+| **Estilo** | **Regular/Outline** padrão; **Solid** apenas em estados (selected, success, alerta) |
+| **Tamanho** | Sistema 16/20/24px alinhado com tipografia |
+| **Cor** | Inherit do texto; accent JCS Blue só em ações primárias |
+| **Signature visual** | Ícone SAR (gráfico crescente em quadrado JCS Blue) reusado em pontos-chave |
+
+### Illustrations
+
+**Recomendação canônica:** Quase nenhuma no MVP. Apple-inspired clean prefere ausência a "ilustração funcional".
+
+| Onde | Direção |
+|---|---|
+| Empty states sofisticados (poucos) | Line art minimalista monocromática JCS Blue — ou nenhuma (só ícone + texto) |
+| Páginas de erro 404/500 | Line art minimalista, 1 elemento + frase direta |
+| Hero de cockpit no marketing | **Screenshot, não ilustração** |
+| Onboarding | **Tooltips, não ilustração** |
+| /sobre, /parceiros | Apenas texto + logos, sem ilustração |
+
+**EVITAR:** isométrico hipster · gradiente saturado · gente cartunesca · "diversity blob people" (Slack/Mailchimp style)
+
+### Image guidelines técnicas
+
+| Item | Padrão |
+|---|---|
+| **Aspect ratios** | 16:9 (hero/landscape) · 4:3 (cards) · 1:1 (avatars/logos) |
+| **Color treatment** | Levemente desaturado, alto contraste, temperatura fria |
+| **Alt text** | Obrigatório, descritivo (WCAG AA) |
+| **Compressão** | WebP/AVIF + JPG fallback, qualidade 80-85 |
+| **Lazy load** | Default em tudo abaixo do fold |
+| **Dimensões** | `srcset` responsivo (1x/2x/3x para DPI variável) |
+| **CDN** | Cloudflare (STACK §18) |
+| **Otimização** | Pipeline com sharp (STACK §14) |
+
+---
+
+## Design Constraints (compilados)
+
+| Categoria | Constraint |
+|---|---|
+| **Plataforma** | Web SaaS (React 19.2 + Vite + AntD 6.4) — Step 10a |
+| **Device target** | PWA mobile-first iOS (Rafael) · Desktop-first (Sandra/Daniel/Alice) · iPad first-class (Daniel) |
+| **Offline** | Rafael Read+Write com sync (afeta UI signaling: enviando/enviado/falha sync) |
+| **Performance** | Lighthouse mobile > 90 · TTI 3G < 3s · FCP < 1.5s · bundle < 200KB gzipped |
+| **Acessibilidade** | WCAG AA mínimo · focus rings visíveis · `prefers-reduced-motion` respeitado |
+| **Idioma** | pt-BR only no MVP · i18n-ready arquitetural |
+| **Brand** | JCS Blue único accent · Plus Jakarta única família · "Powered by JCS" presente · radius 12/20 · sombra única `0 4px 25px rgba(0,0,0,0.05)` |
+| **LGPD/segurança** | Self-host fonts (não Google Fonts CDN) · sem trackers third-party invasivos · cookies essenciais only por padrão |
+| **Coexistência** | App Android legado intocado no MVP · SAR PWA + backend SAR são greenfield |
+| **Solo founder** | Custo de design baixo — nenhum photoshoot no MVP · screenshots como protagonista |
+
+---
+
+## Visual DNA Summary
+
+```
+─────────────────────────────────────────────────────────
+SAR — Visual DNA
+─────────────────────────────────────────────────────────
+
+Style:        Modern Flat + Minimal
+              (Apple iCloud · Linear · Stripe · Notion family)
+
+Aesthetic:    Minimalism contemporâneo / Digital-native modern
+
+Colors:       Monochromatic JCS Blue (#004a99) + functional accents
+              Cool, light primary + dark mode elegante
+              Distribuição 60% neutros · 30% white space · 10% accents
+
+Typography:   Plus Jakarta Sans (Geometric Humanist)
+              Hierarquia por peso/tamanho · tabular numerals
+              Confident · decisivo · moderno
+
+Mood:         Clean · Confident · Specific · Serene · Modern
+              "Como um consultor sênior que apareceu na sua empresa
+               e abriu o notebook."
+
+Layout:       Site: split hero, layouts variados por tipo de página
+              Produto: cards Rafael · Linear-dense Sandra ·
+              bento Daniel · table-first Alice
+
+Effects:      Sombra única sutil (brand.md) · animações funcionais 150-250ms
+              SEM parallax · SEM transformações 3D · SEM toast intrusivo
+              Real-time entre cockpits com micro-animação
+
+Imagery:      Screenshots do produto > tudo (Apple-style)
+              Sem stock humano · ilustrações minimíssimas
+              FA 6.4 outline + ícone SAR como signature visual
+
+Key Element:  4 cockpits especializados sobre dado único em tempo real —
+              o "ícone do gráfico crescente" da logo SAR como símbolo
+              dessa essência.
+
+─────────────────────────────────────────────────────────
+```
+
+---
+
+## Validação de completeness
+
+| Seção | Status |
+|---|---|
+| ✅ Existing Brand Assets | Step 21 |
+| ✅ Visual References (positivas + negativas + mood) | Steps 19, 22 |
+| ✅ Design Style (UI + Aesthetic) | Step 23 |
+| ✅ Color Direction | Step 23 |
+| ✅ Typography Direction | Step 23 |
+| ✅ Layout Direction (site + 4 cockpits) | Step 24 |
+| ✅ Visual Effects | Step 24 |
+| ✅ Photography & Imagery | Step 25 |
+| ✅ Performance constraints | Step 24 |
+| ✅ Design Constraints (compilados) | Step 26 |
+| ✅ Visual DNA Summary | Step 26 |
+
+---
+
+## Como esse documento é consumido
+
+| Fase | Como usa este doc |
+|---|---|
+| **Phase 3 (PRD)** | Referência para decisões de produto que tocam UI (ex: PWA strategy, dark mode) |
+| **Phase 4 (UX Specs)** | **Source of truth visual** — toda page spec referencia layout/effects/imagery |
+| **Phase 5 (Agentic Dev)** | Tokens canônicos viram CSS variables; vocabulário e tom em microcopy |
+| **Phase 6 (Design System)** | Expande tokens em componentes; mantém Visual DNA Summary como north star |
+| **Phase 7 (Go Live)** | Site marketing usa diretamente layout/effects/imagery decisions |
+
+---
+
+## Próximos passos
+
+1. **Phase 4 (UX Specs):** Cada cockpit (Rafael/Sandra/Daniel/Alice) ganha pages individuais que **citam este doc**
+2. **Phase 6 (Design System):** Tokens compartilhados + variantes por cockpit
+3. **Marketing site:** seguir layout direction + imagery strategy
+
+Visual Direction COMPLETO. Ready for Block D (Platform Requirements — fast-track via STACK.md).