Fundações

Tipografia

Inter em toda a UI, número e código inclusive. Uma família só, sem mono. A única serifa é a prévia do contrato, que imita o PDF. A fonte carrega por next/font, sem tag externa e com o fallback ajustado pra o layout quase não mexer.

src/app/layout.tsxnext/font/googletabular-nums

Uma família

O Inter decide o tom da interface e também carrega o que se lê caractere a caractere: número e código pedem só o algarismo tabular.

Inter

Toda a UI: títulos, corpo, rótulos, botões.

ABCDEFGHIJKLM abcdefghijklm 0123456789

--font-inter · variável · subset latin · display swap

+55 11 91234-5678 · 10:30

Telefone, hora, contagem, valor. Com o algarismo de largura igual, a coluna não dança. Letra não muda: o tabular só iguala algarismos.

A7K2M-9QXHB

Neste Inter o I maiúsculo e o l minúsculo se parecem, e o zero não é cortado. Por isso o código de recuperação nasce sem 0, 1, O, I e L, e código longo tem botão de copiar.

tabular-nums · algarismo de largura igual

O acabamento do body

Duas regras no body inteiro. Nenhuma feature estilística (cv11, ss01, zero): o Inter que o next/font baixa do Google vem sem elas, e medido com e sem cada uma, só o algarismo tabular muda o desenho.

Regra	O que faz	Por que importa aqui
-webkit-font-smoothing: antialiased	Traço mais fino no macOS.	O peso 600 dos títulos deixa de parecer 700 em tela Retina.
text-rendering: optimizeLegibility	Pede kerning ao navegador.	Ligadura não existe neste Inter (ele vem sem “fi”); o par de letras fica bem espaçado nos títulos grandes.

src/app/globals.css

body {
  font-family: var(--font-inter), system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

A escala

Títulos com tracking negativo; corpo sem tracking nenhum. Tamanhos em px na tabela porque é assim que se conferem — no código, as classes do Tailwind.

Display

56 / 800 / 1.04 / -0.02em

Sua clínica no seu melhor

Display φ

text-phi-display · clamp 1.618→2.058rem / 700 / 1.1

Pacientes

40 / 700 / 1.1 / -0.02em

Relatório da clínica

32 / 700 / 1.15 / -0.01em

Bloco de seção

24 / 700 / 1.2

Subtítulo de área

20 / 600 / 1.25

Título de painel

H5 · título de card

16 / 600 / 1.3

Ocupação da agenda

Título de barra

15 / 600 / tracking-tight

Cadastros

Body Lg

17 / 400 / 1.6

Parágrafo de abertura, lead de página.

Body

15 / 400 / 1.6

Texto padrão de leitura em cards e painéis.

Body Sm

13 / 400 / 1.5

Nota, texto auxiliar, célula de tabela densa.

Caption

12 / 500 / fg-subtle

vs mês anterior · atualizado há 2 min

Overline

11–12 / 600 / CAIXA ALTA / 0.14em

Operação · Agenda · Crescimento

Numérico XL

36 / 800 / tabular-nums

1.284

cada linha é o estilo REAL aplicado, não uma imagem

O título fluido

O único tamanho de texto que é token: text-phi-display.

globals.css — @theme inline

/* 0.786rem × φ² ≈ 2.058rem. Fluido: ~26px no celular → 33px no desktop
   (teto a ~1024px de viewport). */
--text-phi-display: clamp(1.618rem, 1.42rem + 1vw, 2.058rem);
--text-phi-display--line-height: 1.1;

Ele veste o título do palco de tela e o de páginas editoriais (legal, convite, erro). Telas sem sub-telas usam a barra de tela, cujo título é 15px/600 — bem menor, porque ali o cabeçalho é uma faixa de 56px que cola no topo, não um palco.

Pesos

Cinco pesos em uso. Cada um tem um trabalho; não existe “um pouco mais forte”.

Peso	Classe	Onde
400	font-normal	Todo texto corrido, descrição, hint.
500	font-medium	Rótulo de campo, item de nav, botão, caption, valor em destaque dentro de frase.
600	font-semibold	Título de card, título de barra, overline, cabeçalho de tabela.
700	font-bold	Título de tela (display φ), H1–H3.
800	font-extrabold	Número grande de KPI e o display de 56px. Só aí.

NotaNegrito não é ênfase de parágrafo

Dentro de prosa, <strong> marca o termo que muda a decisão — um por parágrafo, no máximo dois. Frase inteira em negrito não destaca nada, e itálico não é usado na UI (só em citação de nome próprio de outra marca).

Números tabulares

A regra que aparece em mais telas: todo número que pode ser comparado com outro usa dígitos de largura fixa.

1.111.111

8.888.888

R$ 12.480,00

R$ 9.310,50

tabular-nums: as colunas alinham, a leitura de métrica é confiável

1.111.111

8.888.888

R$ 12.480,00

R$ 9.310,50

proporcional: os dígitos dançam — proibido em métrica, contador, telefone, valor

as duas formas — a utility do Tailwind e o helper do repo

<span className="tabular-nums">124</span> {/* utility */}
<span className="tabular">124</span> {/* helper: .tabular { font-variant-numeric: tabular-nums } */}

Vale pra: métrica, contador, telefone, valor em reais, percentual, ocupação, duração, quantidade de sessões, número de linha, código de erro. Não vale pra número dentro de frase corrida (“foram três consultas”) — ali o número é palavra.

Medida de leitura e quebra

Texto longo tem largura máxima. Sem isso, num monitor de 1840px a descrição de um card atravessa a tela inteira e a leitura desmonta.

A base de conhecimento é o que o agente sabe sobre a sua clínica. Cada documento vira contexto na hora de responder um paciente — quanto mais específico, menos ele inventa. O orçamento no topo mostra quanto do limite já está em uso.

max-w-[62ch] — a medida de prosa do produto

sem teto — a mesma frase atravessando o card

Situação	Receita
Descrição de card / bloco	max-w-[62ch]
Lead de página	max-w-[62ch] (aqui no guia) · max-w-2xl no app
Texto de estado vazio	max-w-xs — é uma frase curta, centralizada
Título de tela	text-balance — equilibra as linhas em vez de deixar uma órfã
Nome que pode ser longo (paciente, clínica)	min-w-0 + truncate no contêiner flex
Célula de tabela com nome	font-medium + truncate; o telefone ao lado em tabular-nums

Armadilha já pagatruncate sem min-w-0 não trunca

Dentro de um flex, o item tem min-width: auto por padrão e se recusa a encolher abaixo do conteúdo — o texto vaza em vez de cortar. min-w-0 no item (não no pai) é o que destrava. É a regra 11 do checklist, e ela morde em toda linha de lista com nome de paciente.

Regras de escrita na tela

Forma, não conteúdo — o conteúdo tem página própria em Voz & escrita.

Sim

Confirmar consulta

Operação

+55 11 91234-5678

Sentence case no rótulo. Caixa alta só no overline, com tracking aberto. Telefone em tabular-nums.

Não

Confirmar Consulta

OPERAÇÃO

+55 11 91234-5678

Title Case não existe em pt-BR de interface. Caixa alta sem tracking fecha as letras. Telefone sem tabular-nums perde o alinhamento entre linhas.

Regra	Detalhe
Sentence case em tudo	Botão, rótulo, título, item de menu. Só nome próprio ganha maiúscula.
Caixa alta pede tracking	Overline é 11–12px / 600 / tracking-[0.14em]. Sem o tracking, versalete vira bloco.
Título negativo, corpo neutro	tracking-tight (-0.01 a -0.02em) só a partir de ~20px. Em corpo, tracking negativo cansa.
Entrelinha cresce quando o texto encurta	Título 1.04–1.25 · corpo 1.5–1.6. Linha única de rótulo pode ir a leading-none.
Número e código pedem tabular-nums	Número que se compara entre linhas (telefone, hora, valor, código numérico) pede tabular-nums. Código com letra que alguém transcreve nasce sem caractere ambíguo ou ganha botão de copiar: nenhuma classe resolve I e l neste Inter.
Nada de segunda família	Sem mono e sem display decorativa. O utilitário font-mono não existe (--font-mono: initial), e code, kbd e pre herdam o Inter. Exceção única: font-serif na prévia do contrato, porque ela imita o PDF. Na primeira carga o texto pinta no fallback ajustado ao Inter (display swap) e troca quase sem mexer no layout.