Design system e componentes reutilizáveis

O design system e os componentes reutilizáveis definem a linguagem visual e os blocos de interface usados em todo o FootSim. Isso inclui botões, cards, tabs, tabelas, badges, modais, drawers, inputs, menus, tooltips, indicadores, layouts, tipografia, estados visuais e padrões de interação.

Esse item é importante porque o FootSim tem muitas telas densas em dados. Sem componentes consistentes, o jogo fica confuso, cada página parece diferente e a manutenção fica mais difícil. O sistema atual já possui uma base moderna e ampla de componentes, além de padrões de tipografia e diálogos, mas ainda precisa consolidar adoção transversal, documentação interna e padronização de estados como vazio, loading e erro.

Escopo incluído

• Botões
• Inputs
• Selects
• Checkboxes
• Sliders
• Cards
• Tabs
• Badges
• Modais
• Dialogs
• Drawers
• Dropdowns
• Tooltips
• Tabelas
• Layouts de página
• Cabeçalhos de página
• Componentes de lista
• Estados de loading
• Estados vazios
• Estados de erro
• Estados de sucesso
• Componentes de ação
• Componentes de status
• Componentes de navegação
• Padrões de espaçamento
• Padrões de tipografia
• Tokens visuais
• Componentização reutilizável
• Padrões para confirmações
• Padrões para prompts simples
• Documentação interna mínima de UI quando aplicável

Fora de escopo

• Biblioteca pública de componentes
• Documentação externa para modders
• Tema visual totalmente customizável por usuário
• Design system multi-produto
• Editor visual de interface
• Sistema de plugins visuais
• Marketplace de temas
• Controle total de layout por drag-and-drop
• Versão mobile completa
• Redesign completo a cada release
• Adoção perfeita de todos os componentes em todas as telas legadas imediatamente
• Primitivos globais finalizados para todos os estados de empty/loading/error se ainda estiverem ad hoc

Critérios de conclusão

• Telas diferentes usam padrões visuais consistentes.
• Componentes principais são reutilizáveis.
• Botões, tabs, cards, modais e tabelas têm comportamento previsível.
• Estados de loading, vazio, erro e sucesso são tratados de forma consistente.
• A UI mantém coerência entre áreas do jogo.
• Novas telas podem ser construídas sem reinventar componentes básicos.
• A densidade de informação continua legível.
• Classes, tokens e tipografia seguem padrões internos definidos.
• Componentes antigos ou especiais são migrados gradualmente para os padrões comuns.
• O design system facilita manutenção e evolução do jogo.
• O jogador percebe o FootSim como um produto coeso, não como telas desconectadas.