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
Componentes
Spinner
Componentes
Tabs
Componentes
Badge
Componentes
Search Bar
Componentes
Carousel
Componentes
Grid Cell
Componentes
Grouped Feed Card
Componentes
Wishlist Button
Componentes
Milestone Sheet
Componentes
Stars
Componentes
Splash Screen
Componentes
Onboarding
Padrões
Perfil
Padrões
Buscar
Padrões
Notificações
Padrões
Estatísticas
Padrões
Listas
Padrões
Estados
Padrões
List Item
Padrões
Skeleton
Padrões
Estados Vazios
Padrões
Layouts
Referência
Marca
Referência
Tokens W3C
Referência
WCAG
Referência
Changelog