Fundação

Tipografia

Inter para todo texto de interface. JetBrains Mono para código. A escala segue os tokens do Tailwind, com o nível Nano exclusivo para labels de nav.

Escala tipográfica

Display text-4xl · font-bold · 36 px

Spinlist

Headline text-2xl · font-bold · 24 px

Dark Side of the Moon

Title text-xl · font-bold · 20 px

Pink Floyd

Body Large text-base · font-normal · 16 px

Um dos álbuns mais importantes da história do rock progressivo, lançado em 1973.

Body text-sm · font-normal · 14 px

Harvest Records · 1973 · Vinil preto

Label text-xs · font-medium · 12 px

★ 4.8 · 132 avaliações

Nano text-[10px] · font-medium · 10 px

Coleção · Início · Perfil

Nível	Tailwind	px	Peso padrão	Contexto
Display	`text-4xl`	36	700 bold	Milestones, celebrações, capa de perfil
Headline	`text-2xl`	24	700 bold	Título de página, nome do álbum em destaque
Title	`text-xl`	20	700 bold	Cabeçalhos de seção, nome do artista
Body Large	`text-base`	16	400 normal	Texto de leitura, comentários, resenhas
Body	`text-sm`	14	400 normal	Metadata, itens de lista, labels secundários
Label	`text-xs`	12	500 medium	Chips, badges, contadores, captions
Nano	`text-[10px]`	10	500 medium	Somente BottomNav, headers de gráfico, Admin

font-normal · 400

Texto de leitura, descrições, comentários

font-medium · 500

Labels de UI, chips, contadores, botões Secondary

font-semibold · 600

Subcabeçalhos, nomes dentro de cards, toast body

font-bold · 700

Títulos de página (h1), botões Filled, valores de destaque

font-black · 900

Reservado para números de celebração (Milestone: "100 discos!")

Não use font-extrabold (800) em nenhum contexto de UI. Não existe mapeamento semântico para ele no DiSco.

animation: spin 1s linear infinite bg-[#C8F53C] text-[#0f0f0f] rounded-xl px-4 py-2

Exclusiva para blocos de código no DiSco. Não é carregada no app Spinlist — só no site do design system.

Elemento <code> ou <pre>. Tamanho 13 px · fundo #111 · rounded-lg.

Fonte

Sempre Inter. Carregada via Google Fonts com os subsets latin e latin-ext.

Line height

Padrão Tailwind (leading-normal = 1.5). Títulos grandes usam leading-tight (1.25). Nunca menor que 1.2.

Letter spacing

Apenas no nível Nano: tracking-[0.08em] + uppercase. Em todos os outros níveis: padrão (0).

Cores de texto

#f5f5f5 primário · #888 secundário · #555 placeholder/desabilitado · #C8F53C destaque/link.

Nano fora do nav

Não use 10 px em contexto de leitura. O nível mínimo para texto corrido é Label (12 px).