Padrões

Perfil

Tela de perfil de usuário. Hero com avatar, nome, bio e stats clicáveis. Tabs para Coleção, Listas e Atividades.

Visão geral

Perfil

Alessandro Faria

@ale_faria

Colecionador de vinil em SP. Jazz, MPB e rock progressivo.

124

discos

seguidores

seguindo

Coleção

Listas

Atividades

Perfil

Alessandro Faria

@ale_faria

Jazz, MPB e rock progressivo.

124

discos

seguidores

seguindo

Coleção

Listas

Atividades

Header

Back button + título "Perfil" + ícone de overflow (···). Segue o padrão de Header do design system.

Avatar + info

Avatar w-20 h-20 rounded-full. Nome font-size:16px font-weight:700. @username e bio em #888.

Stats

Números em font-size:18px font-weight:700 #f5f5f5. Labels em 11px #888. Divisores verticais. Todos os 3 blocos são clicáveis.

Tabs

3 tabs: Coleção, Listas, Atividades. Ativa: color:#f5f5f5 border-bottom:2px solid #C8F53C. Inativa: color:#888.

Grid de coleção

grid-cols-3 gap-px. Capas quadradas. Segue o padrão do componente Grid Cell.

Elemento	Valor
Avatar tamanho	`80×80px`, `border-radius:50%`
Nome font-size	`16px font-weight:700`
Stat número	`18px font-weight:700 #f5f5f5`
Stat label	`11px #888`
Tab ativa borda	`2px solid #C8F53C`
Grid capas	`grid-template-columns: repeat(3, 1fr)`, `gap:1px`