Design System
Diversidade SA
Sistema de design do webapp Diversidade SA. Construído em torno do roxo e do teal, com coral e amarelo como apoios. Navegue pelas categorias para ver fundamentos, componentes e padrões.
Comece por aqui
Fundamentos visuais
Toda a paleta de cores com escalas 50→900, tipografia Poppins + Open Sans e os tokens base do produto.
Ver fundamentosCategorias
Estrutura inspirada em Polaris, Carbon e Material 3, adaptada a um webapp.
Fundamentos
Cores, tipografia, espaçamento, grid, raios, sombras, ícones, motion e acessibilidade.
Tokens
Camadas primitive → semantic → component. Light e dark mode.
Componentes
Biblioteca de UI: botões, inputs, navegação, feedback, dados e layout.
Padrões
Formulários, autenticação, filtros, estados de página e onboarding.
Conteúdo
Voz da marca, microcopy e linguagem inclusiva.
Branding
Logo, símbolo, co-branding e download de assets.
Para devs
Instalação, convenções de código e changelog.