julian
17c08e6392
- 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>
102 lines
4.8 KiB
Markdown
102 lines
4.8 KiB
Markdown
# Inspiration Analysis — SAR
|
||
|
||
**Confirmed:** 2026-05-27
|
||
**Step:** 19 — Inspiration Workshop
|
||
|
||
> **Insight estratégico chave:** O mercado B2B de força de vendas brasileiro é visualmente medíocre (Mercos, Promosoft, TOTVS, etc. todos com UI antiga/burocrata). Julian declarou: "não acho nada que tem no mercado de identidade como inspirador — mais uma das coisas que nos trouxe para esse projeto". **A estética moderna é parte do diferencial do SAR**, não apenas detalhe — é motivo de origem do produto.
|
||
|
||
---
|
||
|
||
## Referência primária — Brand.md (já estabelecido)
|
||
|
||
Tom Apple-inspired: clean, minimalista, espaço em branco generoso, hierarquia clara, sem ruído visual.
|
||
|
||
---
|
||
|
||
## 4 referências externas (fora do setor B2B força de vendas BR)
|
||
|
||
### 1. Apple iCloud / Apple Settings
|
||
|
||
**Por quê:** Já é a referência declarada no `brand.md`. Personifica "Apple-inspired clean".
|
||
|
||
**O que destilar:**
|
||
- Sidebar fixa com hierarquia clara
|
||
- White space generoso, sem zebra
|
||
- Tipografia decisiva (SF Pro, peso variável)
|
||
- Sem ruído visual; ações importantes em destaque
|
||
- Cinza neutro como base, azul Apple como único accent
|
||
|
||
### 2. Linear (linear.app)
|
||
|
||
**Por quê:** SaaS B2B moderno, dense info + clean — diretamente aplicável aos cockpits Sandra/Alice.
|
||
|
||
**O que destilar:**
|
||
- Densidade de informação **sem cansar** — tabelas/listas com peso visual baixo
|
||
- Atalhos de teclado-first (boa pista para Sandra e Alice em bulk operations)
|
||
- Animações sutis (funcionais, não enfeite)
|
||
- Dark mode elegante (Rafael à noite)
|
||
- Vocabulário consistente (status, prioridade, owner)
|
||
|
||
### 3. Stripe Dashboard
|
||
|
||
**Por quê:** Densidade + acessibilidade visual — referência crítica para o cockpit Daniel (BI + IA).
|
||
|
||
**O que destilar:**
|
||
- Dados importantes em destaque, secundários comprimidos
|
||
- Métricas com contexto (não só número — comparação + tendência)
|
||
- Tabelas de transação com hierarquia visual clara
|
||
- Estados de erro/alerta integrados ao fluxo (não modal popup)
|
||
- Search/command bar central (futuro acelerador)
|
||
|
||
### 4. Notion (notion.so)
|
||
|
||
**Por quê:** Flexibilidade + tom + empty states — referência para o produto se sentir poderoso sem parecer complexo.
|
||
|
||
**O que destilar:**
|
||
- Empty states informativos e generosos
|
||
- Hierarquia tipográfica que guia o olho
|
||
- Densidade adaptável (cards × lista × tabela)
|
||
- Tom de voz nas micro-interações (próximo do que SAR quer)
|
||
- Apesar de poderoso, parece simples
|
||
|
||
---
|
||
|
||
## 7 padrões destilados (entram em Design Style — Step 23)
|
||
|
||
| Padrão | De onde | Aplicação no SAR |
|
||
|---|---|---|
|
||
| **Sidebar fixa + área de conteúdo limpa** | Apple, Linear, Notion | Cockpits Sandra/Daniel/Alice (alinha com brand.md topbar 80px + sidebar 260px) |
|
||
| **Tipografia faz hierarquia, não cores fortes** | Apple, Stripe | Plus Jakarta com pesos variando (400/500/600/700/800), já no brand.md |
|
||
| **Único accent color** | Apple, Linear | JCS Blue `#004a99` como único destaque cromático (já no brand.md) |
|
||
| **Densidade + ar respirável** | Linear, Stripe | Sandra precisa de densidade, mas com white space que não cansa |
|
||
| **Animações sutis funcionais** | Linear, Stripe | Real-time entre cockpits com micro-animação suave (não toast intrusivo) |
|
||
| **Dark mode elegante** | Linear, Vercel | Desejável especialmente para Rafael à noite (carro/posto) |
|
||
| **Empty states informativos** | Notion | Já estabelecido em Steps 11/15 ("Sem propostas. Cadastre a primeira...") |
|
||
|
||
---
|
||
|
||
## Implicações estratégicas
|
||
|
||
### Insight de positioning (entra no Brief, refina Step 9)
|
||
|
||
**Adicionar como 6º unfair advantage estrutural:**
|
||
|
||
> **Estética moderna em mercado visualmente medíocre.** Concorrentes (Mercos, Promosoft, módulo TOTVS) têm UI legada de PHP/Java/Delphi — visualmente datada. O SAR tem possibilidade de **diferenciar via design** num mercado onde quase ninguém prioriza isso. Apple-inspired clean + Linear-density + Stripe-data-clarity + Notion-flexibility = produto que parece de outra categoria.
|
||
|
||
**Cuidado:** estética isolada é copiável em 2-3 anos. O moat real é a **combinação** estética + multi-tenant físico + concept "4 cockpits" + velocidade JCS. Mas como porta de entrada, vai brilhar muito na demo.
|
||
|
||
### Implicação para Phase 4 (UX Specs)
|
||
|
||
- Cada cockpit ganha referência primária de inspiração:
|
||
- **Rafael (Rep mobile):** Linear mobile + Apple Notes (foco em ação rápida + offline)
|
||
- **Sandra (Supervisora):** Linear + Stripe Dashboard (densidade + decisão)
|
||
- **Daniel (Dono):** Stripe Dashboard (métricas + insight) + Apple iCloud (calma executiva)
|
||
- **Alice (Admin):** Notion (flexibilidade) + Linear (atalhos)
|
||
|
||
### Implicação para Phase 6 (Design System)
|
||
|
||
- Tokens compartilhados, **mas variantes por cockpit** com inspiração distinta:
|
||
- Mesma paleta JCS
|
||
- Mesma tipografia Plus Jakarta
|
||
- Mas densidades, tamanhos de elementos, espaçamentos variam por persona
|