Fundações

Tipografia

Inter em toda a UI e JetBrains Mono pra ID, telefone, métrica e token. Sem serif, sem terceira família. As fontes carregam por next/font — nada de tag externa, nada de FOUT.

src/app/layout.tsxnext/font/googlefeatures cv11 ss01 ss03

As duas famílias

Uma decide o tom da interface; a outra existe pra tudo que precisa ser lido caractere a caractere.

Inter

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

ABCDEFGHIJKLM abcdefghijklm 0123456789

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

JetBrains Mono

Telefone, ID, código, nome de token, legenda técnica.

+55 11 91234-5678 · #1284

--font-jetbrains · variável · usada como font-mono

As features do body

Três features tipográficas ficam LIGADAS no body inteiro. Não são enfeite: mudam a forma de letras que aparecem o dia todo numa clínica.

Feature	O que faz	Por que importa aqui
cv11	Alternativa de “a” e “g” de um andar só.	Deixa nome próprio e texto corrido menos “geométrico”, mais legível em tamanho pequeno.
ss01	Conjunto estilístico do Inter.	Ajusta desenho de alguns glifos pra leitura em interface densa.
ss03	Formas alternativas de pontuação e cifrão.	O R$ da tela de valores fica melhor desenhado.
-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	Liga ligaduras e kerning.	Títulos grandes com “fi”, “ffi” param de abrir buraco.

src/app/globals.css

body {
  font-family: var(--font-inter), system-ui, sans-serif;
  font-feature-settings: "cv11", "ss01", "ss03";
  -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 mono

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 mono.

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 em Inter 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.
Mono é semântico	Se o valor é lido caractere a caractere (ID, telefone, token, código de erro), é mono. Se é lido como palavra, é Inter.
Nada de terceira família	Sem serif, sem display decorativa, sem fonte de sistema misturada — o fallback só entra se o next/font falhar.