Tipografia
A escala de tipo completo - 13 estilos de Large Title (64px) para baixo até a legenda 2 (11px), cada um em quatro pesos, definido em Inter e mapeado 1:1 para os estilos de texto Figma.
Como funciona o sistema
Cada estilo é um token composto: uma classe, como text-body-medium define o tamanho da fonte, a altura da linha, o espaçamento de letras e o peso juntos, definidos em styles/typography.cssTu nunca combinas text-sm com font-medium e leading-5 à mão - um único token garante as métricas exatas que o estilo de texto Figma especifica.
O nome é text-{family}-{weight} - 13 famílias × 4 pesos (Regular 400, Médio 500, Semibold 600, Negrito 700). A cor é aplicada separadamente com as fichas de texto semântico, de modo que uma etiqueta típica lê text-body-medium text-text-secondary: uma classe para as métricas, uma para a cor.
Porque estas aulas vivem no text-* namespace, eles estão registrados com cx() (o nosso invólucro de mistura de caudas) como utilitários de tamanho de fonte - caso contrário, uma mesclagem com uma classe de cores iria deixá- los cair silenciosamente. Se adicionar ou renomear um estilo, espelha- o em utils/cx.ts.
Título Grande
64px / 80pxHero numerals and marketing-scale headings.
Visualização 1
56px / 72pxFull-page hero headings.
Tela 2
48px / 64pxLarge section heroes.
Tela 3
40px / 54pxProminent stats and page heroes.
Tela 4
32px / 44pxPage titles; the largest style used inside the app shell.
Título 1
24px / 34pxCard headline figures (step totals, earnings).
Título 2
20px / 26pxSection headings inside pages and panels.
Título 3
18px / 24–26pxSub-section headings, calendar month titles.
Cabeçalho
16px / 22pxEmphasized body copy and lead paragraphs.
Corpo
14px / 20pxThe default UI text: labels, table cells, nav items.
Corpo 2
13px / 18pxDense contexts: compact tables, secondary descriptions.
Legenda 1
12px / 16px · tracking 0.15pxAxis labels, unit suffixes, timestamps.
Legenda 2
11px / 15px · tracking 0.2pxThe smallest legible annotations (badges, fine print).