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

..

todo.md

feat(design): lock design system v1.0 — Sage + Atkinson + Aerada + Phosphor

2026-04-28 18:28:36 -03:00