Typography
Pulso v3 usa tipografia como assinatura. A identidade deve sobreviver em monocromático: escala, peso, mono e tracking carregam reconhecimento mesmo sem cor.
Famílias
| Família | Variável | Uso |
|---|---|---|
| Manrope | --font-pulso-sans / --font-sans | Texto geral, títulos, navegação |
| IBM Plex Mono | --font-pulso-mono / --font-mono | Métricas, timestamps, código, kickers |
Escala de tokens
| Token | Valor | Uso |
|---|---|---|
--text-display-lg | 34px | Hero titles e telas críticas |
--text-display-lg-v2 | 28px | Alias temporário de migração |
--text-display | 24px | Título de página |
--text-h1 | 18px | Header de seção |
--text-h2 | 15px | Título de card |
--text-body | 14px | Texto principal |
--text-support | 13px | Descrições |
--text-label | 12px | Labels e badges |
--text-micro | 11px | Kicker e metadados |
Piso tipográfico
11px (--text-micro) é o menor tamanho de texto de UI — inclusive kickers, badges e chips sm. Abaixo disso a leitura falha para baixa visão e telas densas.
Exceções documentadas (e apenas elas):
| Exceção | Mínimo | Por quê |
|---|---|---|
| Rótulos de eixo em gráficos SVG | 9–10px | Convenção de data-viz; o dado tem redundância textual fora do gráfico |
| Contadores numéricos em micro-badges ≤16px | 10px | Ex.: contador de pendências em AvatarGroup compacto; o número tem rótulo acessível equivalente |
Qualquer nova exceção precisa ser registrada aqui — não no componente.
Line-height e tracking
| Token | Valor | Uso |
|---|---|---|
--leading-tight | 1.2 | Títulos |
--leading-normal | 1.45 | Corpo |
--leading-relaxed | 1.6 | Texto longo |
--tracking-tight | -0.02em | Displays |
--tracking-normal | -0.005em | Texto padrão |
--tracking-kicker | 0.12em | Kicker uppercase mono |
Numerais tabulares
A v3 torna numerais tabulares default em .mono e [data-numeric].
<strong className="mono text-[56px] font-bold" data-numeric>
87
</strong>Reverta com font-variant-numeric: normal apenas quando o mono for usado para texto corrido.
Signature shapes tipográficas
- Kicker: uppercase mono com
--tracking-kicker. - Numeral display: mono grande, tabular, com contexto textual próximo.
- Meta separator dot:
·entre itens em mono. - Inline markers:
[Fato],[Inferência],[Recomendação]para conteúdo de análise.
Diretrizes
- Use no máximo 3 níveis hierárquicos por seção.
- Números críticos sempre usam mono + tabular.
- Kicker é assinatura, não decoração.
- Texto de decisão deve priorizar clareza e consequência sobre ênfase visual.
Last updated on