Fundamentos
Tipografia
betaTrês famílias com papéis fixos, mais a escala de tela que os componentes não cobrem.
Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.
Famílias
Geist
--font-heading
utilitário font-heading
Aprender é mudar de ideia
Títulos, display e rótulos de seção. Sempre com peso médio.
fallback: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif
Inter
--font-sans
utilitário font-sans
Texto corrido, rótulos e interface. É onde o produto passa a maior parte do tempo.
Corpo, rótulos e interface. O peso 500 é o cavalo de batalha para ênfase.
fallback: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif
Geist Mono
--font-mono
utilitário font-mono
turma-7b · 32 alunos · 84,5%
Código, identificadores e dígitos que precisam alinhar.
fallback: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace
O app consumidor só hospeda os arquivos, declarando as variáveis-gancho --font-heading-loaded, --font-sans-loaded e --font-mono-loaded — no site, via next/font. Sem esse passo o DS cai no fallback declarado acima, nunca na fonte padrão do navegador.
Escala de tela
--text-hero
Vox Mente
--text-metric
84,5%
--text-page
Turma 7º ano B
--text-section
Alunos com pendência
| Token | Tamanho | Exemplo |
|---|---|---|
| --text-hero | 2.25rem | Só no site institucional |
| --text-metric | 1.875rem | Número grande de indicador |
| --text-page | 1.5rem | Título da página — um por tela |
| --text-section | 1.125rem | Título de seção dentro de uma página |
Cada papel tem entrelinha própria, declarada junto do tamanho: section 1.4, page 1.3, metric 1.15, hero 1.1.