Files
Rafael MelgaçoandClaude Opus 4.7 03b6ec1b79 feat(design): lock design system v1.0 — Sage + Atkinson + Aerada + Phosphor
Design system tokens materialized to production:
- app/globals.css rewritten with Sage palette (light + dark drawn separately)
  - 11 stops accent, 11 stops greige neutral, states (success/warning/error/info)
  - WCAG validated: AAA body text, AA muted, AA accent UI
  - dark mode designed not inverted (dark accent-400 = #82a077, light 500 = #67885d)
- tailwind.config.ts extended with var(--color-*) references + dark via [data-theme]
- app/layout.tsx loads Atkinson Hyperlegible + IBM Plex Mono via next/font/google
  + anti-FOUC inline script + ThemeProvider wrapping children
- lib/theme.tsx: ThemeProvider + useTheme() with light/dark/system + localStorage
- components/ui/button|card|input|textarea|badge rewritten to consume Sage tokens
  (other shadcn components keep working via shadcn-compat aliases)

Showcase preserved at /design (5 palettes, 4 typography pairs, 3 densities,
motion samples, 4 icon styles compared) for future variant exploration.

Documentation (11 files, ~10.4k words) at docs/design-system/:
- 00-overview, 01-foundation-tokens, 02-palette-sage, 03-typography,
  04-density-aerada, 05-iconography-phosphor, 06-components, 07-motion-language,
  08-voice-and-tone, 09-anti-patterns, README

Screen flow (9 files, ~13.8k words) at docs/design-system/screen-flow/:
- 00-personas (5 personas with JTBD/frustrations/metrics)
- 01-sitemap (94 routes with persona/auth/priority)
- 02-journeys (5 critical journeys: BPO attends, super-admin triage, AI handoff,
  onboarding, LGPD data_request)
- 03-screen-inventory (94 screens with states/realtime/components)
- 04-clickflows (8 Mermaid flowcharts)
- 05-state-machines (9 stateDiagram-v2: conversation, lead, channel_session,
  bot mode, LGPD request, attendant presence, etc.)
- 06-empty-states-and-errors (10 empty + 16 errors with PT-BR copy)
- 07-responsive-strategy (desktop/laptop/tablet/mobile breakpoints)
- 08-accessibility (keyboard nav, shortcuts, ARIA, focus visible, reduced motion)

Anti-patterns enforced: zero Inter/Geist/Space Grotesk, zero purple gradient,
zero zinc-900, zero glassmorphism, zero Sparkle for AI, zero rounded-md
defaults. Each component has ≥3 of 5 explicit constraints (shape/color/typo/
motion/layout).

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-28 18:28:36 -03:00

3.9 KiB

DeskcommCRM — Workflow de Construção

Ordem definida pelo Rafael: PRD → Regras de Negócio → Specs → Epics → Stories → Plano com Tasks.


Fase 0 — Brainstorming (em andamento)

  • Entender demanda e confirmar com o usuário
  • Decidir tenancy model (multi-tenant clássico desde dia 1)
  • Decidir escopo MVP (Opção B — com IA core)
  • Decidir integração e-commerce (Nuvemshop only)
  • Decidir perfil do primeiro tenant (PME médio)
  • Ler material de referência da Aula CRM Nichado WAHA
  • Decidir adoção da arquitetura de referência (integral, opção A)
  • Criar skeleton de docs do projeto
  • Preservar síntese da referência em docs/research/

Fase 1 — PRD-Mestre + sub-PRDs

  • Escrever PRD-Mestre (docs/prd/00-prd-master.md) — visão, problema, escopo, stakeholders, métricas, restrições — v0.1 escrito, em revisão pelo Rafael
  • Sub-PRD 01: Plataforma Base (auth, multi-tenant, RBAC, audit, LGPD framework) — v0.1 escrito
  • Sub-PRD 02: Customer 360° + Identity Resolution determinística — v0.1 escrito
  • Sub-PRD 03: Canal WhatsApp (WAHA + anti-banimento + janela 24h + multi-atendente) — v0.1 escrito
  • Sub-PRD 04: Pipeline Kanban + Atendimento + Tickets + Handoff — v0.1 escrito
  • Sub-PRD 05: IA Conversacional (chatbot + RAG por tenant + sentiment detection) — v0.1 escrito
  • Sub-PRD 06: Integração Nuvemshop + LGPD webhooks — v0.1 escrito
  • Revisão final do PRD-Mestre + sub-PRDs — spot-check de consistência cross-doc passou

Fase 2 — Regras de Negócio

  • Regras de tenancy e isolamento (T-01 a T-08) — em docs/business-rules/00-business-rules-catalog.md
  • Regras LGPD (L-01 a L-10) — idem
  • Regras WhatsApp (W-01 a W-12) — idem
  • Regras de pipeline (P-01 a P-08) — idem
  • Regras de atendimento (AT-01 a AT-08) — idem
  • Regras de IA (IA-01 a IA-11) — idem
  • Regras de billing/uso (B-01 a B-05) — idem

Fase 3 — Specs Técnicas — COMPLETA (8 specs, ~60k palavras)

  • Spec 01 Plataforma Base (auth, RLS templates, audit, LGPD framework, API conventions)
  • Spec 02 Customer 360 + Identity Resolution
  • Spec 03 WhatsApp via WAHA Plus
  • Spec 04 Pipeline Kanban + Atendimento (UI 3 colunas)
  • Spec 05 IA + RAG + Sentiment + Handoff
  • Spec 06 Nuvemshop + LGPD
  • Spec 07 Event Log + Workers + Crons (transversal)
  • Spec 08 Deploy + Observability (transversal)
  • 15 diagramas Mermaid em docs/research/architecture-diagrams.md

Fase 3.5 — Design System + Screen Flow (extra) — COMPLETA

  • Showcase navegável /design com 5 paletas + 4 tipografias + 3 densidades + componentes + motion
  • Direção locked: Sage + Atkinson Hyperlegible + Aerada + Phosphor
  • Tokens materializados em tailwind.config.ts + app/globals.css + app/layout.tsx
  • <ThemeProvider> com light/dark/system + persistência localStorage
  • shadcn components reescritos pra Sage (button/card/input/textarea/badge)
  • Documentação em docs/design-system/ (11 arquivos, ~10.4k palavras)
  • Screen flow em docs/design-system/screen-flow/ (9 arquivos, ~13.8k palavras)
  • 94 telas inventariadas + 5 jornadas + 8 clickflows + 9 state machines

Fase 4 — Epics

  • Epic E1: Plataforma Base
  • Epic E2: Conexão WhatsApp + Inbox Live
  • Epic E3: Customer 360° + Identity Resolution
  • Epic E4: Pipeline Kanban + Atendimento Humano
  • Epic E5: IA Conversacional + Handoff
  • Epic E6: Integração Nuvemshop + LGPD
  • Epic E7: Hardening + Observability + Deploy

Fase 5 — Stories

  • Detalhar stories de cada epic com ACs
  • Estimativas relativas (T-shirt sizing)
  • Priorizar por Now/Next/Later

Fase 6 — Plano de Tasks

  • Quebrar stories em tasks técnicas
  • Sequenciar com dependências explícitas
  • Cronograma e marcos