Frontend Web - Design System

Este documento descreve como o design system está organizado no frontend web.

Estrutura atual

• src/modules/design-system/overview/page.tsx
• src/modules/design-system/colors/page.tsx
• src/modules/design-system/typography/page.tsx
• src/modules/design-system/components/page.tsx
• src/components/ui/* (primitivos reutilizáveis)
• src/styles/* (estilos globais e tokens aplicados)

Rotas públicas de documentação visual

• /design-system
• /design-system/colors
• /design-system/typography
• /design-system/components

Decisão arquitetural

A documentação visual do design system está dentro de src/modules/design-system para seguir a mesma arquitetura modular do restante da aplicação.

Padrões de uso

1. Use componentes de src/components/ui/* como base.
2. Componha componentes de domínio dentro dos submódulos em src/modules/**/components.
3. Evite duplicar tokens/variáveis visuais fora da camada de estilos compartilhados.
4. Centralize variações visuais em componentes reutilizáveis antes de replicar classes em múltiplas views.

Relação com acessibilidade

• Componentes Radix UI são a base de acessibilidade semântica.
• Estados visuais (foco, erro, desabilitado) devem permanecer consistentes entre módulos.
• Novos componentes devem manter navegação por teclado e feedback de foco visível.