Tipografia
Poppins como tipografia única do Uranus — uma família, várias hierarquias.
Uranus adota um sistema de uma única família tipográfica: Poppins. Uma sans-serif geométrica que equilibra sofisticação e utilidade em UI densa, do corpo do texto até os títulos de marca.
Anteriormente o sistema pareava Lexend Exa (display) com Poppins (corpo). A versão atual migrou para Poppins em todas as situações — os contraforma largos da Lexend Exa comprometiam a legibilidade em tamanhos de UI e o ganho de marca não compensava. O token
font-displaycontinua existindo como abstração, apontando hoje para o mesmo stack defont-sans, para que uma futura família display possa ser introduzida sem tocar em nenhum componente.
Poppins é carregada via next/font/google nas apps Next.js e via link de CDN no preview-head.html do Storybook.
Famílias
| Papel | Token | Stack |
|---|---|---|
| Corpo (padrão) | font-sans | Poppins, system-ui |
| Display | font-display | Poppins, system-ui (alias de font-sans) |
| Mono | font-mono | ui-monospace, SF Mono, Menlo… |
<h1 className="font-display text-5xl tracking-tight">Uranus</h1>
<p className="font-sans text-base text-muted-foreground">
Um hub de serviços flexível e escalável.
</p>Escala
| Token | Tamanho | Line height |
|---|---|---|
xs | 0.75rem | 1rem |
sm | 0.875rem | 1.25rem |
base | 1rem | 1.5rem |
lg | 1.125rem | 1.75rem |
xl | 1.25rem | 1.75rem |
2xl | 1.5rem | 2rem |
3xl | 1.875rem | 2.25rem |
4xl | 2.25rem | 2.5rem |
5xl | 3rem | 1.1 |
6xl | 3.75rem | 1.05 |
7xl | 4.5rem | 1 |
Pesos
Poppins entrega seis pesos utilizáveis em produto: 300 (light), 400 (regular), 500 (medium), 600 (semibold), 700 (bold). Use as classes do Tailwind font-light, font-normal, font-medium, font-semibold, font-bold.
Em headings prefira font-semibold ou font-bold — font-medium não cria contraste suficiente com o corpo.
Espaçamento entre letras
Headings usam por padrão -0.02em (apertado) para um tom disciplinado e técnico. Em momentos de marca ou exibições numéricas grandes, permita -0.04em (mais apertado). Em corpo de texto, mantenha normal (0).
Faça / Não faça
- Faça pareamentos dentro da mesma família — variação de peso + tamanho é suficiente para criar hierarquia.
- Faça uso consistente de
font-semiboldem headings para manter a tensão visual. - Não reintroduza Lexend Exa em componentes — se uma nova família display entrar, ela vira o
font-displaytoken de uma vez. - Não misture Poppins com uma segunda família. O sistema é intencionalmente mono-familiar.