Uranus® Design System

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-display continua existindo como abstração, apontando hoje para o mesmo stack de font-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

PapelTokenStack
Corpo (padrão)font-sansPoppins, system-ui
Displayfont-displayPoppins, system-ui (alias de font-sans)
Monofont-monoui-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

TokenTamanhoLine height
xs0.75rem1rem
sm0.875rem1.25rem
base1rem1.5rem
lg1.125rem1.75rem
xl1.25rem1.75rem
2xl1.5rem2rem
3xl1.875rem2.25rem
4xl2.25rem2.5rem
5xl3rem1.1
6xl3.75rem1.05
7xl4.5rem1

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-boldfont-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-semibold em 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-display token de uma vez.
  • Não misture Poppins com uma segunda família. O sistema é intencionalmente mono-familiar.