Padrões
Estatísticas
Tela de insights da coleção. Número hero de discos, distribuição por gênero em barras horizontais, top artistas e mais.
Visão geral
Estatísticas
Anatomia
Estatísticas
1
Número total (hero stat)
font-size:64px font-weight:900 color:#C8F53C line-height:1. Label "discos na coleção" em #888 14px.
2
Barra de distribuição
Track: height:6px bg:#1a1a1a border-radius:3px. Fill: bg:#C8F53C com width em %. Opacidade decresce conforme posição.
3
Item de ranking
Posição em font-weight:700. 1º e 2º: color:#C8F53C. Demais: #888. Nome do artista + contagem à direita.
4
Label de categoria
Nome do gênero em color:#888 font-size:11px width:40px. Percentual à direita em 10px.
Specs
| Elemento | Valor |
|---|---|
| Hero número font-size | 64px |
| Hero número color | #C8F53C |
| Hero número font-weight | 900 |
| Stat card bg | #1a1a1a border:1px solid #2a2a2a border-radius:12px |
| Bar track altura | 6px |
| Bar track bg | #1a1a1a |
| Bar fill color | #C8F53C |
| Ranking #1 e #2 color | #C8F53C |
| Ranking demais color | #888 |
| Artista nome font-size | 12px font-weight:600 |
| Contagem font-size | 11px color:#888 |