sinapse-ai 9.4.0 → 9.5.0

package/squads/squad-artdir/checklists/seven-pillars-validation-checklist.md

@@ -0,0 +1,172 @@
+# 7 Pillars Validation Checklist
+
+> Use este checklist para validar qualquer entrega de art direction contra os 7 pilares.
+> Cada item e binario (pass/fail). Score minimo por pilar: 6/10 para PASS.
+
+---
+
+## Pilar 1: Visual Hierarchy & Controlled Attention
+
+- [ ] Focal point claro por viewport (Von Restorff applied)
+- [ ] Heading hierarchy consistente (h1 > h2 > h3, sem pulos)
+- [ ] Accent color APENAS em elementos de conversao
+- [ ] Reading pattern adequado ao tipo de conteudo (F, Z, layer cake)
+- [ ] Hick's Law: max 3 opcoes de CTA por viewport
+- [ ] Fitts's Law: CTAs min 44x44px, proximos ao conteudo convincente
+- [ ] Gestalt proximity: elementos relacionados agrupados
+- [ ] Gestalt figure/ground: separacao clara conteudo vs fundo
+- [ ] Nenhum viewport sem hierarquia clara
+- [ ] Atencao direcionada para conversao, nao para decoracao
+
+**Score: __ /10**
+
+---
+
+## Pilar 2: Color System
+
+- [ ] Max 1 accent + 1 neutral (restricao respeitada)
+- [ ] Accent color tem justificativa neuropsicologica documentada
+- [ ] WCAG AAA (7:1) em TODOS os CTAs
+- [ ] WCAG AA (4.5:1) em TODO o body text
+- [ ] WCAG AA (3:1) em texto grande e UI components
+- [ ] Cores semanticas funcionais (success, warning, error, info)
+- [ ] Color-blindness safe (cor nunca e unico indicador)
+- [ ] Dark/light mode e redesenhado (nao invertido)
+- [ ] Von Restorff maximizado (accent destoa do neutral)
+- [ ] Emotion target alinhado com hue selecionado
+
+**Score: __ /10**
+
+---
+
+## Pilar 3: Typography
+
+- [ ] Font pairing justificado por posicionamento de marca
+- [ ] Type scale consistente e modular (ratio documentado)
+- [ ] Fluid typography com clamp() (nao breakpoint-based)
+- [ ] Tracking tight em headings, normal em body, wide em labels
+- [ ] Line-height tight em display, relaxado em body longo
+- [ ] Font loading otimizado (swap, preload heading, subset)
+- [ ] Tratamentos especiais documentados (gradient text, mono inline, etc.)
+- [ ] All-caps tem tracking adicional (+0.05em min)
+- [ ] Max line length 65ch para body text
+- [ ] Fontes carregam < 200KB total
+
+**Score: __ /10**
+
+---
+
+## Pilar 4: Motion System
+
+- [ ] Toda animacao cita principio Disney ou psicologico
+- [ ] Apenas GPU properties animadas (transform, opacity)
+- [ ] 60fps target desktop verificado
+- [ ] 30fps minimo mobile verificado
+- [ ] prefers-reduced-motion cobre 100% das animacoes
+- [ ] Easing NUNCA e linear para UI motion
+- [ ] Duration micro: 150-400ms, macro: 400-1200ms
+- [ ] Stagger cria ritmo (30-120ms entre elementos)
+- [ ] will-change usado com parcimonia e removido apos uso
+- [ ] Nenhuma animacao > 5s sem controle de pausa
+
+**Score: __ /10**
+
+---
+
+## Pilar 5: Information Architecture
+
+- [ ] Toda secao tem papel cognitivo documentado
+- [ ] Sequencia justificada por principio psicologico
+- [ ] Progressive disclosure implementado (L1 scan > L2 skim > L3 read > L4 deep)
+- [ ] Min 2 Zeigarnik loops identificados e posicionados
+- [ ] Peak moment posicionado mid-page (nao primeiro ou ultimo)
+- [ ] End moment (footer) e significativo (nao generico)
+- [ ] Self-qualification presente antes do hard sell
+- [ ] Curiosity gaps entre secoes mantem scroll
+- [ ] Goal gradient aplicado (progress aumenta perto do CTA)
+- [ ] Pode converter em qualquer ponto da pagina
+
+**Score: __ /10**
+
+---
+
+## Pilar 6: CRO Patterns
+
+- [ ] Social proof presente e verificavel (nomes, fotos, handles reais)
+- [ ] Multiple CTAs em diferentes niveis de intencao
+- [ ] Risk reversal enderecea top 3 objecoes
+- [ ] Comparison table enquadrada favoravelmente (se aplicavel)
+- [ ] Impact hypotheses documentadas para cada padrao (metrica + direcao + %)
+- [ ] Sticky CTA aparece apos hero scroll
+- [ ] CTA copy usa verbo de acao + beneficio (nao "Submit")
+- [ ] Scarcity/urgency e REAL (nao fabricada)
+- [ ] Form otimizado (multi-step, inline validation, single column)
+- [ ] Trust signals no footer (seguranca, compliance, suporte)
+
+**Score: __ /10**
+
+---
+
+## Pilar 7: Layout & Spacing
+
+- [ ] 4px/8px baseline grid enforced
+- [ ] Spacing entre secoes: 96-192px (respiracao cognitiva)
+- [ ] Full-bleed vs contained justificado por secao
+- [ ] Responsive breakpoints testados (320, 640, 1024, 1440px)
+- [ ] Max content width enforced (65ch body, 1280-1440px container)
+- [ ] Mobile-first layout explicito
+- [ ] Container queries para componentes (quando aplicavel)
+- [ ] Asymmetric balance usado para direcionalidade
+- [ ] Section pacing cria ritmo vertical
+- [ ] Nenhum layout orphan (elemento sozinho sem contexto)
+
+**Score: __ /10**
+
+---
+
+## WCAG Compliance (Transversal)
+
+- [ ] Contrast ratios verificados com ferramenta
+- [ ] Keyboard navigation completa (Tab + Enter + Escape)
+- [ ] Focus states visiveis em TODOS os elementos interativos
+- [ ] Skip link presente e funcional
+- [ ] Alt text em todas as imagens significativas
+- [ ] Form labels presentes e associados
+- [ ] aria-live para conteudo dinamico
+- [ ] lang attribute no html
+- [ ] Touch targets min 44x44px (mobile)
+- [ ] Nenhum keyboard trap (exceto modal)
+
+**Score: __ /10**
+
+---
+
+## Performance (Transversal)
+
+- [ ] Lighthouse target > 90
+- [ ] FCP < 1.5s
+- [ ] LCP < 2.5s
+- [ ] CLS < 0.1
+- [ ] Animation JS < 100KB gzipped
+- [ ] Font files < 200KB total
+- [ ] Images otimizadas (WebP/AVIF, lazy loading)
+- [ ] Critical CSS inlined
+- [ ] Nao-blocking JS (defer/async)
+- [ ] Service worker para cache (se aplicavel)
+
+**Score: __ /10**
+
+---
+
+## Verdict
+
+| Resultado | Criterio |
+|-----------|---------|
+| **PASS** | Todos os pilares >= 7/10, nenhuma violacao WCAG critica |
+| **CONCERNS** | Todos os pilares >= 6/10, violacoes WCAG menores |
+| **FAIL** | Qualquer pilar < 6/10 OU violacao WCAG critica |
+
+**Overall Score:** __ /90 (soma dos 9 scores)
+**Verdict:** ___________
+**Reviewer:** ___________
+**Date:** ___________

package/squads/squad-artdir/knowledge-base/case-nyo-ia-reference.md

@@ -0,0 +1,289 @@
+# Case Study: nyo.ia.br — Canonical Art Direction Reference
+
+> Analise completa do site nyo.ia.br como referencia canonica de art direction para conversao.
+> Cada decisao estetica e desconstruida pelo principio psicologico que a sustenta.
+
+---
+
+## Overview
+
+**URL:** https://nyo.ia.br
+**Categoria:** AI Agents SaaS (B2B)
+**Audiencia:** Founders, CTOs, VPs de Vendas (Brasil)
+**Posicionamento:** "Seus agentes de IA nunca dormem" — automacao agressiva com resultado concreto
+
+---
+
+## 1. Visual Language Analysis
+
+### Dark Mode Decision
+
+| Decisao | Justificativa Psicologica |
+|---------|--------------------------|
+| Background: neutral-950 (#0a0a0a aprox.) | Sofisticacao tech, reducao de fadiga, imersao |
+| Nao e true black (#000) | Evita "void" feeling, mantém profundidade |
+| Text: neutral-100 (off-white) | Contraste alto sem glare de pure white |
+| Accent: red-orange (#E8402D) | Von Restorff — unico elemento quente em campo frio |
+
+**Principios em acao:** Von Restorff (accent destoa), Authority (dark = sofisticacao), Contrast (legibilidade)
+
+### Accent Color Strategy
+
+```
+Toda a pagina: neutral dark + neutral light
+UNICO elemento com cor quente: CTAs e highlights em red-orange
+
+→ Von Restorff effect maximizado
+→ Quando TUDO e frio, o QUENTE converte
+→ Accent usado em: botoes CTA, badges, hover states, progress indicators
+```
+
+**Principio:** Max 1 accent rule — restricao forca atencao para os pontos de conversao
+
+### Density Level
+
+- **Alta densidade de informacao** — cada viewport tem conteudo substancial
+- Nao ha secoes "vazias" — ate o espaco e intencional
+- Dados, metricas, agentes — informacao densa para audiencia tecnica
+- **Principio:** Audiencia tech/founder espera densidade — low-density pareceria "empty"
+
+### Visual Identity Signals
+
+| Sinal | O que Comunica | Como Comunica |
+|-------|---------------|---------------|
+| "//" prefix em textos | "Somos builders, somos codigo" | Estetica terminal/code |
+| Monospace accent | Precisao tecnica | JetBrains Mono / Space Mono |
+| Dark mode | Sofisticacao, tech-native | Ambiente dev-like |
+| Metrics visuals | Data-driven, transparencia | Numeros grandes, counters |
+| Live clock | Presenca real-time | Relogio local no header |
+
+---
+
+## 2. Motion Philosophy
+
+### Core Motion Decisions
+
+| Tecnica | Implementacao | Principio |
+|---------|--------------|-----------|
+| Lenis smooth scroll | Smooth scrolling nativo, nao browser default | Controle da experiencia, premium feel |
+| GSAP ScrollTrigger | Scroll-driven animations para reveals | Progressive disclosure via scroll |
+| Frame sequence | 60+ frames como image sequence pinned | Cinema-level hero, impressao de premium |
+| Text scramble | Caracteres randomicos → texto final | Tech aesthetic, anticipation principle |
+| Marquee scroll-direction | Inverte direcao baseado no scroll | Engagement, surpresa, interatividade |
+| Clip-path reveal | Sections revelam via clip-path morph | Staging, storytelling, drama |
+
+### Frame Sequence Hero
+
+```
+60+ imagens renderizadas
+Pinned section com ScrollTrigger
+Scroll position → frame index mapping
+Efeito: usuario "controla" a animacao com scroll
+
+Principios:
+- Anticipation: scroll como trigger cria expectativa
+- Control: usuario sente agency sobre a experiencia
+- Zeigarnik: scroll incompleto = narrativa incompleta → scroll mais
+```
+
+### Text Scramble Effect
+
+```
+"■▓▒░█▓▒" → "AGENTES" → "AGENTES DE IA"
+
+Sequence:
+1. Random chars aparecem (noise)
+2. Chars gradualmente resolvem para texto correto
+3. Left-to-right ou simultaneous reveal
+
+Principios:
+- Anticipation (Disney): buildup antes do reveal
+- Curiosity gap: o que esse texto vai dizer?
+- Tech aesthetic: "decodificando" — reforça posicionamento AI
+```
+
+### Marquee com Scroll Direction
+
+```
+Scroll para baixo → marquee move para direita
+Scroll para cima → marquee inverte para esquerda
+
+Principios:
+- Secondary action (Disney): movimento secundário ao scroll
+- Engagement: conteudo responde ao usuario
+- Continuity (Gestalt): direcao consistente com scroll
+```
+
+### Body Lock em Modals
+
+```
+Modal abre → body scroll trava
+Focus trap dentro do modal
+Escape ou click outside fecha
+
+Principios:
+- Staging (Disney): modal e o unico palco ativo
+- Focus: elimina distracao do background
+- Commitment: usuario engajou, agora complete a acao
+```
+
+### Progress Bars e Indicators
+
+```
+Barra fixa no topo que avanca com scroll
+Indica progresso na pagina
+
+Principios:
+- Zeigarnik: barra incompleta = tarefa incompleta → scroll mais
+- Goal gradient: "80% — quase la" → esforco aumenta
+- Cognitive fluency: usuario sabe onde esta
+```
+
+---
+
+## 3. IA as Psychological Tool
+
+### Information Architecture Breakdown
+
+| Secao | Papel Cognitivo | Principio |
+|-------|----------------|-----------|
+| 1. Hero com frame sequence | HOOK — impacto visual + curiosity gap | Von Restorff, Zeigarnik |
+| 2. "AI Agents never sleep" | PROMISE — beneficio central | Framing (always-on) |
+| 3. Agent showcase carousel | DEMONSTRATE — o que cada agente faz | Progressive disclosure |
+| 4. Agent modals | DEEP DIVE — expandir detalhes por agente | Zeigarnik (abrir = completar) |
+| 5. Metrics section | PROOF — numeros concretos | Anchoring, authority |
+| 6. Comparison table | COMPARE — nos vs alternativas | Framing, anchoring |
+| 7. Testimonials | PROOF (social) — clientes reais | Social proof |
+| 8. FAQ | OVERCOME — resolver objecoes | Risk reversal |
+| 9. CTA final | CONVERT — multiplas opcoes | Hick's (limitado), commitment |
+| 10. Footer com trust | REINFORCE — ultima impressao | Peak-end rule |
+
+### Progressive Disclosure via Agent Modals
+
+```
+Carousel → mostra 10 agentes como cards
+Cada card: nome + icone + one-liner
+Click → modal expande com:
+  - Descricao detalhada
+  - Features especificas
+  - Metricas de resultado
+  - CTA contextual
+
+Principios:
+- Progressive disclosure: L1 (card) → L2 (modal)
+- Zeigarnik: card mostra parcial → click para completar
+- Hick's Law: 10 opcoes MAS so uma por vez no modal
+```
+
+### Comparison Table Strategy
+
+```
+| Feature     | Eles   | NYO      |
+|-------------|--------|----------|
+| Agentes AI  | 3      | 10       |
+| Uptime      | 99.5%  | 99.97%   |
+| Resposta    | 2h     | 2min     |
+| Preco       | $$$    | $$       |
+
+Coluna NYO: highlighted com accent color
+
+Principios:
+- Anchoring: numeros concorrentes sao a ancora
+- Framing: features escolhidas favorecem NYO
+- Von Restorff: coluna highlight = focal point
+```
+
+### FAQ como Objecao Handling
+
+```
+Cada pergunta = uma objecao comum
+Respostas curtas, diretas, com link para proof
+
+"E se eu quiser cancelar?" → "Cancele quando quiser, sem multa"
+"Funciona com meu CRM?" → "Integramos com +50 CRMs. Lista completa"
+
+Principios:
+- Risk reversal: remove medo
+- Cognitive fluency: resposta simples = mais crivel
+- Commitment: ler FAQ = micro-compromisso com a decisao
+```
+
+### Multiple CTAs Strategy
+
+```
+CTA #1 (hero): "Agendar demonstracao" — alto compromisso
+CTA #2 (mid-page): "Comece gratis" — baixo compromisso
+CTA #3 (modal): "Fale com vendas" — personalizado
+CTA #4 (sticky bar): "Agende uma demo" — persistente
+CTA #5 (footer): "Comece agora" — ultima chance
+
+Principios:
+- Diferentes niveis de intencao: explore → learn → try → buy
+- Hick's Law respeitada: max 2 opcoes por viewport
+- Availability: CTA sempre visivel, sempre acessivel
+```
+
+### Real Social Handles
+
+```
+Testimonials incluem @username do Twitter/LinkedIn
+Verificavel — usuario pode checar se e real
+
+Principio:
+- Verifiability: proof que pode ser validado = mais confiavel
+- Authority: handles reais > "Joao, CEO"
+- Social proof: publico, nao anonimo
+```
+
+---
+
+## 4. CRO Patterns Applied
+
+### Pattern Map
+
+| Padrao | Localizacao | Principio | Impacto Estimado |
+|--------|-----------|-----------|-----------------|
+| Frame sequence hero | Topo | Engagement, premium perception | +20-30% time on page |
+| Live clock | Header | Real-time presence, tech signal | +5% credibility |
+| Agent carousel | Mid-page | Progressive disclosure | +15% engagement |
+| Comparison table | Pre-CTA | Anchoring, framing | +15-25% conversion |
+| Sticky CTA | After hero | Availability | +15-25% CTA visibility |
+| Testimonials + handles | Post-compare | Social proof (verifiable) | +10-20% trust |
+| FAQ accordion | Pre-footer | Objection handling | +10% reduction in bounce |
+| Multiple CTAs | Throughout | Intent capture | +10-15% total conversion |
+| Progress bar | Fixed top | Zeigarnik, goal gradient | +5-10% scroll depth |
+| Text scramble | Hero + sections | Tech aesthetic, curiosity | +10% time on page |
+
+---
+
+## 5. Lessons for Art Direction
+
+### O que Copiar (princípios)
+
+1. **Single accent color** — restricao maximiza Von Restorff
+2. **Dark mode + density** — match com audiencia tech
+3. **Scroll as narrative** — usuario controla o ritmo
+4. **Progressive disclosure via modals** — L1 overview → L2 detail on demand
+5. **Real social proof** — handles verificaveis, numeros concretos
+6. **Multiple intent CTAs** — capture diferentes niveis de compromisso
+7. **FAQ as objection handling** — cada pergunta e uma venda
+
+### O que NAO Copiar (execucao especifica)
+
+1. **Frame sequence exato** — necessita 60+ renders custom, high cost
+2. **Text scramble em tudo** — use com parcimonia, senao perde efeito
+3. **Custom cursor** — nao presente neste site, adicionar apenas se fizer sentido
+4. **Exata paleta de cor** — extract o principio (high contrast accent on dark), nao os hex codes
+
+### O que Entender (gatilhos)
+
+> "Nunca clone sem entender qual gatilho cada elemento ativa."
+
+| Elemento | Gatilho que Ativa | Se Remover, Perde |
+|---------|-------------------|-------------------|
+| Frame sequence | Agency do usuario + premium perception | Engagement hero, time on page |
+| Text scramble | Curiosity + tech positioning | Brand differentiation |
+| Live clock | Real-time trust | Subtle authority signal |
+| Marquee reversal | Engagement via interactivity | Secondary motion richness |
+| Progress bar | Zeigarnik + goal gradient | Scroll completion |
+| Agent modals | Progressive disclosure depth | Detail without overwhelm |