Introdução
O sistema de design do Spinlist. DiSco define as decisões visuais e de interação que tornam o Spinlist reconhecível, consistente e agradável de usar.
Para quem é?
Designers e desenvolvedores que criam ou evoluem o Spinlist. O DiSco é a referência única para decisões de produto.
Baseado em
Estrutura inspirada no Material Design 3. Adaptado para a identidade visual do Spinlist: dark-first, compacto, para colecionadores.
Stack
React + Tailwind CSS v4. Os tokens aqui são as classes Tailwind que devem ser usadas no código.
Princípios
O que guia o DiSco
Coleção em foco
O conteúdo do usuário (suas capas, artistas, avaliações) é sempre o protagonista. A interface recua para dar espaço ao acervo.
Dark-first
O tema escuro não é uma opção: é a identidade. Cada token de cor é definido para funcionar em fundo #0f0f0f.
Feedback imediato
Toda interação tem resposta visual: active:opacity-70 active:scale-[0.98]. O usuário nunca deve duvidar se tocou em algo.
Navegue pelo DiSco
Fundação
Cores
Fundação
Tipografia
Fundação
Iconografia
Fundação
Espaçamento
Fundação
Border Radius
Fundação
Motion
Fundação
Elevação
Componentes
Botão
Componentes
Campo de Texto
Componentes
Chip
Componentes
Card
Componentes
Header
Componentes
Feed Card
Componentes
Star Rating
Componentes
Toast
Componentes
Avatar
Componentes
Bottom Sheet
Componentes
Navegação
Componentes
Feedback
Padrões
Estados
Padrões
List Item
Padrões
Skeleton
Padrões
Estados Vazios
Referência
Tokens W3C