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