Fundação
Cores
Paleta mínima com papéis claros. Cada cor tem um único propósito e não deve ser usada fora dele.
Paleta principal
Spinlist Green
#C8F53C
text-[#C8F53C] · bg-[#C8F53C]
Ações primárias, destaques, likes ativos
Background
#0f0f0f
bg-[#0f0f0f]
Fundo de toda a aplicação
Content Primary
#f5f5f5
text-[#f5f5f5]
Texto principal, títulos
Content Secondary
#888888
text-[#888]
Metadados, labels, placeholders
Superfícies
Surface 1
#1a1a1a
bg-[#1a1a1a]
Cards, inputs, elementos interativos
Surface 2
#2a2a2a
bg-[#2a2a2a] · border-[#2a2a2a]
Divisores, bordas, separadores
Surface 3
#333333
bg-[#333]
Drag handles, elementos inativos
Semânticas
Error
red-400
text-red-400
Erros de validação, mensagens críticas
Success
green-500
text-green-500
Confirmações, importações concluídas
Gradientes de gênero
Usados nos cards de gênero do carrossel da home. Cada gradiente representa um parent_genre do Discogs.
Subgêneros herdam a cor do pai via campo parent_genre do record.
Rock
#1a0a2e → #6b0080
Electronic
#050a2e → #0a2a8e
Jazz
#051a2e → #0a4a6e
Classical
#0a1a12 → #0a4a2e
Latin
#2e1000 → #8e3a00
Blues
#070714 → #0a2a50
Funk / Soul
#2e0e00 → #8e2a00
Pop
#2e0028 → #8e0068
Reggae
#06200a → #0a5a1a
Hip Hop
#141400 → #3e3e00
Folk, World & Country
#1a0e00 → #5a2e00
Stage & Screen
#00142e → #00346e
Regras de uso
- Nunca use
#C8F53Ccomo cor de texto sobre fundo claro. Use apenas sobre#0f0f0fou#1a1a1a. - Quando
#C8F53Cfor o fundo (botão filled), o texto deve ser sempre#0f0f0f. - Não crie tons intermediários entre as superfícies. Se precisar diferenciar, use opacidade sobre o fundo.
- Nos gradientes de gênero, o texto sobre o card deve ser sempre branco (
#ffffff). Usartext-shadowou overlay escuro quando necessário.