Fundamentos

Tipografia

Sora decide, Inter explica, mono registra. Três vozes, nunca uma quarta.

Três famílias#

Sora

Decide: título, número, marca.

--font-sora · 400 · 500 · 600 · 700

Inter

Explica: corpo, controle, ajuda.

--font-inter · variável

JetBrains Mono

Registra: ID, código, rótulo, custo.

--font-mono · 400 · 500

Papéis#

Oito papéis. Cada texto da interface cabe em um deles. O tamanho vem da escala type.*.

Display

Sora 600 · clamp(32→44px) · −0.035em

Título de página e herói. Um por tela.

text-hb-display

O dinheiro, com lastro.

Título

Sora 600 · 16 · −0.015em

Cabeçalho de cartão, diálogo e seção.

font-sora text-hb-title font-semibold

A cobrança nasce pendente e só liquida com confirmação

Subtítulo

Sora 600 · 14

Linha de apoio sob o título. O código já usava; agora tem nome.

font-sora text-hb-body font-semibold

Condição da proposta

Métrica

Sora tabular · 26/30

Número grande de cartão. 30 quando é o herói da área.

font-sora text-hb-metric tabular-nums

R$ 809.412,90

Número

Sora tabular · −0.02em

Valor, contagem, dinheiro. Alinha em coluna.

hb-num

R$ 809.412,90

Corpo

Inter 15 · 1.55

Texto corrido, descrição, ajuda.

text-hb-lead leading-relaxed

As colunas e os estados vêm da operação publicada. Estorno e cancelamento continuam pedindo motivo.

Máquina

JetBrains Mono 12

ID, código, hash, modelo, custo.

font-mono text-hb-small

PG-24A7-BAAEBC · gpt-6-luna · $0.0090

Rótulo

JetBrains Mono 500 · 11 · +0.12em · caixa alta

Cabeçalho de tabela, rótulo de campo, índice de seção.

hb-label

Valor · últimos 30 dias

Escala#

Dez passos. O componente usa a classe; não escolhe o pixel.

Amostra	Token	Valor	Tailwind
Aa	type.caption	11px	text-hb-caption
Aa	type.small	12px	text-hb-small
Aa	type.compact	13px	text-hb-compact
Aa	type.body	14px	text-hb-body
Aa	type.lead	15px	text-hb-lead
Aa	type.title	16px	text-hb-title
Aa	type.titleLg	18px	text-hb-title-lg
Aa	type.metric	26px	text-hb-metric
Aa	type.metricLg	30px	text-hb-metric-lg
Aa	type.display	clamp(32px, 2.2vw + 24px, 44px)	text-hb-display

Números#

Algarismos tabulares alinham em coluna. Proporcionais dançam.

hb-num · tabular

R$ 1.111,11

R$ 9.808,40

R$ 70.121,00

Inter proporcional · evite

R$ 1.111,11

R$ 9.808,40

R$ 70.121,00

Carregar as fontes#

O sistema espera três variáveis CSS. Em Next.js, use next/font.

app/layout.tsx

import { Inter, JetBrains_Mono, Sora } from "next/font/google";

const sora = Sora({ subsets: ["latin"], weight: ["400", "500", "600", "700"], variable: "--font-sora" });
const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
const mono = JetBrains_Mono({ subsets: ["latin"], weight: ["400", "500"], variable: "--font-mono" });

<html className={`${sora.variable} ${inter.variable} ${mono.variable}`}>

Regras#

Faça

Um Display por tela.
Valor em hb-num.
ID, hash e código em mono.
Rótulo de campo e cabeçalho de tabela em hb-label.

Evite

Uma quarta família.
Título em caixa alta.
Mono para texto que a pessoa precisa ler com calma.
Peso 700 em corpo de texto.