Tipografia
Três famílias, cada uma com um trabalho:
- Poppins (
--ob-font) é a base: interface, títulos e corpo. - Playfair Display (
--ob-font-serif) é o acento editorial, em itálico, usada com parcimônia. - JetBrains Mono (
--ob-font-mono) é para código, tokens e rótulos pequenos.
Carregando…
<div style={{ display: 'grid', gap: 8, padding: 16 }}> <div style={{ fontFamily: 'var(--ob-font)', fontSize: 32, fontWeight: 800, letterSpacing: '-0.03em' }}>Poppins, o texto da interface</div> <div style={{ fontFamily: 'var(--ob-font-serif)', fontSize: 28, fontStyle: 'italic' }}>Playfair Display, o acento editorial</div> <div style={{ fontFamily: 'var(--ob-font-mono)', fontSize: 14 }}>JetBrains Mono: --ob-blue: #0a4ee4;</div> </div>
Famílias
| Token↕ | Valor (claro) | Valor (escuro) |
|---|---|---|
--ob-font | 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif | — |
--ob-font-serif | 'Playfair Display', 'Iowan Old Style', 'Apple Garamond', Georgia, serif | — |
--ob-font-mono | 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace | — |
Pesos
| Token↕ | Valor (claro) | Valor (escuro) |
|---|---|---|
--ob-w-light | 300 | — |
--ob-w-regular | 400 | — |
--ob-w-medium | 500 | — |
--ob-w-semibold | 600 | — |
--ob-w-bold | 700 | — |
--ob-w-black | 800 | — |
Escala de tamanhos
| Amostra | Token↕ | Valor (claro) | Valor (escuro) |
|---|---|---|---|
| Aa | --ob-fs-xs | 12px | — |
| Aa | --ob-fs-sm | 14px | — |
| Aa | --ob-fs-base | 16px | — |
| Aa | --ob-fs-md | 18px | — |
| Aa | --ob-fs-lg | 22px | — |
| Aa | --ob-fs-xl | 28px | — |
| Aa | --ob-fs-2xl | 36px | — |
| Aa | --ob-fs-3xl | 48px | — |
| Aa | --ob-fs-4xl | 64px | — |
| Aa | --ob-fs-5xl | 88px | — |
Entrelinhas e espaçamento entre letras
| Token↕ | Valor (claro) | Valor (escuro) |
|---|---|---|
--ob-lh-tight | 1.05 | — |
--ob-lh-snug | 1.2 | — |
--ob-lh-normal | 1.45 | — |
--ob-lh-relaxed | 1.6 | — |
--ob-tracking-tight | -0.02em | — |
--ob-tracking-snug | -0.01em | — |
--ob-tracking-wide | 0.04em | — |