Julian/sar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
6769a0d82a8bc27bec8972df190da5673488b766
sar/design-artifacts/A-Product-Brief/03-visual-direction.md
julian 17c08e6392 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>
2026-05-27 14:34:20 +00:00

22 KiB
Raw Blame History

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

Reference in New Issue View Git Blame Copy Permalink