Tipografia
Fontes
| Função | Família | Uso |
|---|---|---|
font-sans | Inter | Toda a interface — títulos, corpo, labels |
font-mono | JetBrains Mono | Código, snippets, dados técnicos |
Escala de tamanhos
Display (headlines, heroes)
| Token | Tamanho | Line height | Uso |
|---|---|---|---|
text-display-2xl | 4.5rem / 72px | 1.1 | Hero principal, acima do fold |
text-display-xl | 3.75rem / 60px | 1.1 | Headline primária de seção |
text-display-lg | 3rem / 48px | 1.15 | H1 de páginas internas |
text-display-md | 2.25rem / 36px | 1.2 | H2, títulos de seção |
text-display-sm | 1.875rem / 30px | 1.25 | H3, subtítulos |
Corpo
| Token | Tamanho | Line height | Uso |
|---|---|---|---|
text-xl | 1.25rem / 20px | 1.75 | Lead, parágrafos de destaque |
text-lg | 1.125rem / 18px | 1.75 | Corpo principal |
text-md | 1rem / 16px | 1.625 | Corpo secundário |
text-sm | 0.875rem / 14px | 1.5 | Labels, metadata, captions |
text-xs | 0.75rem / 12px | 1.5 | Tags, badges, eyebrow text |
Pesos
| Token | Valor | Uso |
|---|---|---|
font-regular | 400 | Corpo de texto |
font-medium | 500 | Labels, navegação |
font-semibold | 600 | Subtítulos, botões secundários |
font-bold | 700 | Títulos, CTAs |
font-extrabold | 800 | Display de impacto |
Regras de uso
- Display sizes sempre com
tracking-tight(letter-spacing negativo) - Corpo de texto: nunca abaixo de
text-smpara texto de leitura - Nunca usar mais de 2 pesos diferentes no mesmo componente
- Hierarquia visual: título → subtítulo → corpo → metadata