Files

T

AyronSantos 12d419de7c feat: comprehensive design system overhaul

Applied impeccable design critique, audit, harden, layout, distill, and polish across all pages.

DESIGN SYSTEM:
- Created PRODUCT.md (5 design principles, WCAG 2.1 AA target)
- Created DESIGN.md (34 color tokens, 6 radius scale, full component spec)
- Created .impeccable/design.json (sidecar with tonal ramps, shadows, motion)

ACCESSIBILITY:
- 33 aria-labels across 7 pages (was ~13)
- 63 <label> elements (was ~30)
- 6 <main> landmarks + role=navigation on all sidebars
- Esc to close modals on 4 pages
- Keyboard shortcuts (Ctrl+J/K, Ctrl+F) on chat

THEMING:
- 216 hardcoded colors replaced with var() references
- 449 !important removed from dark-mode.css
- Dark mode script unified (was duplicated 9x inline)
- All modals converted to .modal-overlay + .modal design system classes

CHAT:
- Error states for messages (.msg.erro, .msg.enviando)
- Connection status indicator
- Confirmation modal before finalizar
- Input bar reorganized (3 visible actions, + menu)
- Right panel accordions
- Send button disabled when empty
- Touch targets 44px on mobile

CLIENT DETAIL:
- Tabs/badges/sub-tabs use CSS classes instead of inline styles
- 'Iniciar Conversa' button now primary action
- alert() replaced with inline feedback
- Modal converted to design system classes

CLIENT LIST:
- Modal moved inside <body> (was HTML-invalid)
- alert() replaced with inline feedback
- Modal uses .show pattern

SETTINGS:
- 4 modals converted to design system classes
- 14 alert() calls replaced with inline feedback
- fecharModal() uses classList instead of style.display

ROUTES:
- border-radius normalized, hardcoded colors fixed

Score progression:
  Chat:        23 → 32/40
  Client List: 32 → 35/40
  Client Detail: 26 → 30/40
  Settings:     29 → 35/40
  Routes:       37 → 38/40
  Audit (project): 14/20 → 17/20

2026-06-23 16:58:12 +00:00

2.8 KiB

Raw Blame History

target, total_score, p0_count, p1_count, timestamp, slug

target	total_score	p0_count	p1_count	timestamp	slug
src/public/chat.html	23	0	3	2026-06-23T14-35-01Z	src-public-chat-html

Design Critique: Chat — Chatc2

Target: src/public/chat.html Score: 23/40 (Acceptable)

Design Health Score

#	Heuristic	Score	Key Issue
1	Visibility of System Status	3	Sem indicador de digitando, sem status de conexão, sem feedback de erro visível
2	Match System / Real World	3	Padrão WhatsApp familiar; termos como associar precisam de contexto
3	User Control and Freedom	3	Cancel em modais; sem undo em mensagens; sem reabertura direta
4	Consistency and Standards	2	30+ violações de design system (cores/radii fora do DESIGN.md)
5	Error Prevention	2	Botão enviar ativo sem texto; sem confirmação ao finalizar
6	Recognition Rather Than Recall	3	Tabs com contagens; ícones ambíguos sem labels
7	Flexibility and Efficiency	2	Sem atalhos de teclado; zero ações em lote
8	Aesthetic and Minimalist Design	3	Visual limpo; painel direito pode sobrecarregar
9	Error Recovery	1	Zero indicadores visuais de erro em toda a interface
10	Help and Documentation	1	Sem tooltips, ajuda contextual ou onboarding
Total		23/40	Acceptable

Anti-Patterns Verdict

NAO parece gerado por IA. Interface com identidade própria (padrão WhatsApp). Detector: 34 advisories de drift de design system, 2 warnings (single-font = falso positivo intencional, dark-glow merece atenção).

Overall Impression

Tela de chat funcionalmente sólida, WhatsApp-style bem executado, dark mode completo, mobile responsivo. Problema crítico: resiliência — zero feedback de erro. Mais drift de design system e falta de atalhos para uso intensivo.

Priority Issues

[P1] Design system drift — 30+ valores fora do DESIGN.md. Cores e raios do chat precisam ser incorporados ou consolidados. [P1] Zero visibilidade de erro — mensagem falhou, upload quebrou, conexão caiu: atendente fica no escuro. [P1] Chat input com 5 botões competindo — ícones ambíguos, sem labels, peso visual similar. [P2] Painel direito sobrecarregado — todas as seções visíveis, scroll excessivo. [P2] Zero atalhos de teclado — 8h+/dia sem atalhos gera fadiga.

Persona Red Flags

Alex (Power User): Sem atalhos, sem notificação de novas conversas, 5 botões sempre visíveis. Jordan (First-Timer): Ícones sem texto, toggle privada ambíguo, sem onboarding. Sam (Accessibility): Botões emoji sem aria-label, enviar sem nome acessível, sem trap de foco em modais.

Minor Observations

Padrão SVG do fundo é toque WhatsApp autêntico
Botão Finalizar sem confirmação
Drag-overlay excelente affordance
border-radius: 22px vs 50% inconsistente
Empresa-tag com border-radius inline

2.8 KiB Raw Blame History