Famílias e pesos

3

Duas famílias do Google Fonts e a mono do sistema. Nenhuma outra fonte. Máximo de 3 estilos de Sora por tela.

Aa

Títulos · nomes · números

Sora

Aa Bb Cc 0123300--peso-subtitulo · subtítulo logo abaixo de um título
Aa Bb Cc 0123450--peso-titulo · padrão de títulos, nomes e números
Aa Bb Cc 0123600só destaque ou caixa alta (nome do sistema na marca)

Aa

Texto · interface

Inter

Aa Bb Cc 0123400texto de conteúdo
Aa Bb Cc 0123500interface: botão, chip, aba, menu
Aa Bb Cc 0123600--peso-destaque · rótulo e negrito no texto

{}

Código · tokens

Mono

--t-codigo: 12px;500ui-monospace, SFMono-Regular, Menlo, monospace (fonte do sistema, sem download)

Carregar e declarar

--font-display · --font-body · --font-mono

Sora vem variável (100 a 800); Inter só em 400, 500 e 600: não use 700.

Carregar as fontes (<head>)

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@100..800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">

Escala de 16 estilos

16

Uma escala só. Nome, peso, entrelinha e tracking valem em qualquer formato; só o tamanho muda. A coluna px é o formato Sistema (os tokens --t-*); a última traz Apresentação 1920 · Post 1080 · Impresso.

Ao vivo	Estilo	Classe	Token	Tamanho	Entrelinha	Tracking	Fonte e peso	1920 · 1080 · impresso
Impulso	Display 1Capa de apresentação e post. Não existe no sistema.	sem classe	—	—	0,98	−.055em	Sora 450	120 · 96 · 48 pt
Plataforma de Marca	Display 2Título-marca-d'água, cifra grande.			40px	1	−.05em	Sora 450	96 · 76 · 36 pt
Cores e tokens	Título 1`h1`: título da tela.			34px	1,05	−.045em	Sora 450	72 · 60 · 28 pt
Resumo do trimestre	Título 2`h2`: título de seção grande.			26px	1,08	−.04em	Sora 450	56 · 48 · 22 pt
Propostas abertas	Título 3`h3`: seção, nome de item.			21px	1,15	−.035em	Sora 450	40 · 36 · 16 pt
Equipe do projeto	Título 4`h4`: título de cartão.			17px	1,2	−.03em	Sora 450	28 · 28 · 13 pt
1.284.590	Número 1Métrica principal da tela.			34px	1	−.05em	Sora tabular 450	96 · 88 · 36 pt
86,4%	Número 2Número de cartão indicador.			26px	1	−.05em	Sora tabular 450	64 · 56 · 24 pt
12 / 48	Número 3Número em lista e pílula (`.num`).			20px	1	−.04em	Sora tabular 450	44 · 40 · 16 pt
Uma frase de abertura que explica a tela em uma linha.	Texto GDescrição principal, abertura.			15px	1,5	−.02em	Inter 400	26 · 30 · 12 pt
Texto corrido de conteúdo, em tinta 82%, até 76 caracteres por linha.	Texto MTexto de conteúdo padrão (o `body`).			13px	1,5	−.015em	Inter 400	20 · 24 · 10 pt
Texto pequeno de apoio dentro de um cartão.	Texto PNota, texto de apoio pequeno.			12px	1,45	−.01em	Inter 400	17 · 20 · 9 pt
Salvar alterações	InterfaceBotão, chip, aba, menu, campo.			12,5px	1,2	−.01em	Inter 500	18 · 22 · —
Situação do projeto	RótuloRótulo acima de título, cabeçalho de tabela.			10,5px	1,2	+.12em	Inter CAIXA ALTA 600	14 · 18 · 7,5 pt
Atualizado em 27 out 2026	LegendaLegenda de gráfico, data, metadado.			11,5px	1,4	−.01em	Inter 400	14 · 18 · 7,5 pt
var(--t-texto-m)	CódigoToken, classe, trecho de código (`.codigo`).			12px	1,45	0	Mono 500	14 · — · 8 pt

h1 a h4 já saem como Título 1 a 4 pelo base.css. O body é Texto M. Display 1 não tem token nem classe no sistema: existe só em apresentação, post e impresso. Formato novo = multiplicar a escala inteira por um fator.

Títulos

h1–h4 · .t-display-2 · .t-titulo-1…4

Sora 450, tracking negativo que aumenta com o tamanho.

Display 2

Título 1

Título 2

Título 3

Título 4

Números

.t-numero-1…3 · .num

Sora 450 com algarismos tabulares: colunas de números alinham.

1.284.590 86,4% 12 / 48 R$ 3.200

Texto, interface, rótulo, legenda e código

.t-texto-g · -m · -p · .t-interface · .t-rotulo · .t-legenda · .t-codigo

Inter para tudo que se lê; mono para código.

Texto G: a frase de abertura que explica a tela.

Texto M: o texto de conteúdo padrão, com negrito nos trechos-chave.

Texto P: apoio pequeno dentro de um cartão.

Interface: Salvar alterações Rótulo em caixa alta Legenda: atualizado em 27 out 2026 var(--t-texto-m)

Tokens e classes

tokens.css · base.css

O CSS exato da escala e dos pesos.

Tokens (tokens.css)

:root {
  --font-display: "Sora", Arial, sans-serif;  /* títulos, nomes, números · peso 450 (600 só destaque/caixa alta) */
  --font-body: "Inter", Arial, sans-serif;    /* texto 400 · interface 500 · rótulo 600 */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* escala tipográfica · formato SISTEMA (os outros formatos multiplicam a escala — ver LEIA-PRIMEIRO) */
  --t-display-2: 40px;  /* Sora 450 · lh 1    · ls -.05em  */
  --t-titulo-1: 34px;   /* Sora 450 · lh 1.05 · ls -.045em */
  --t-titulo-2: 26px;   /* Sora 450 · lh 1.08 · ls -.04em  */
  --t-titulo-3: 21px;   /* Sora 450 · lh 1.15 · ls -.035em */
  --t-titulo-4: 17px;   /* Sora 450 · lh 1.2  · ls -.03em  */
  --t-numero-1: 34px;   /* Sora 450 tabular · lh 1 · ls -.05em */
  --t-numero-2: 26px;   /* Sora 450 tabular · lh 1 · ls -.05em */
  --t-numero-3: 20px;   /* Sora 450 tabular · lh 1 · ls -.04em */
  --t-texto-g: 15px;    /* Inter 400 · lh 1.5  · ls -.02em  */
  --t-texto-m: 13px;    /* Inter 400 · lh 1.5  · ls -.015em */
  --t-texto-p: 12px;    /* Inter 400 · lh 1.45 · ls -.01em  */
  --t-interface: 12.5px;/* Inter 500 · lh 1.2  · ls -.01em  */
  --t-rotulo: 10.5px;   /* Inter 600 CAIXA ALTA · lh 1.2 · ls +.12em */
  --t-legenda: 11.5px;  /* Inter 400 · lh 1.4  · ls -.01em  */
  --t-codigo: 12px;     /* Mono 500 · lh 1.45 · ls 0 */

  /* pesos: a hierarquia vem do tamanho E do traço (27/10/2026) */
  --peso-titulo: 450;      /* Sora: título, nome, número */
  --peso-subtitulo: 300;   /* Sora: subtítulo/manchete logo abaixo de um título (mais fino que ele) */
  --peso-destaque: 600;    /* Inter: <strong> em texto de conteúdo */
}

Classes (base.css)

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 450; }
h1 { font-size: var(--t-titulo-1); line-height: 1.05; letter-spacing: -.045em; }
h2 { font-size: var(--t-titulo-2); line-height: 1.08; letter-spacing: -.04em; }
h3 { font-size: var(--t-titulo-3); line-height: 1.15; letter-spacing: -.035em; }
h4 { font-size: var(--t-titulo-4); line-height: 1.2; letter-spacing: -.03em; }
.t-display-2 { font: 450 var(--t-display-2)/1 var(--font-display); letter-spacing: -.05em; }
.t-titulo-1 { font: 450 var(--t-titulo-1)/1.05 var(--font-display); letter-spacing: -.045em; }
.t-titulo-2 { font: 450 var(--t-titulo-2)/1.08 var(--font-display); letter-spacing: -.04em; }
.t-titulo-3 { font: 450 var(--t-titulo-3)/1.15 var(--font-display); letter-spacing: -.035em; }
.t-titulo-4 { font: 450 var(--t-titulo-4)/1.2 var(--font-display); letter-spacing: -.03em; }
/* subtítulo: Sora no tamanho que couber, sempre com traço mais fino que o título acima */
.subtitulo { font-family: var(--font-display); font-weight: var(--peso-subtitulo); letter-spacing: -.03em; }
/* negrito em texto de conteúdo: palavras/trechos importantes, mais escuros que o texto */
:where(p, li, dd, td, blockquote, figcaption) :where(strong, b) { font-weight: var(--peso-destaque); color: var(--tinta); }
.num, .t-numero-1, .t-numero-2, .t-numero-3 { font-family: var(--font-display); font-weight: 450; font-variant-numeric: tabular-nums; }
.t-numero-1 { font-size: var(--t-numero-1); line-height: 1; letter-spacing: -.05em; }
.t-numero-2 { font-size: var(--t-numero-2); line-height: 1; letter-spacing: -.05em; }
.t-numero-3, .num { font-size: var(--t-numero-3); line-height: 1; letter-spacing: -.04em; }
.t-texto-g { font: 400 var(--t-texto-g)/1.5 var(--font-body); letter-spacing: -.02em; }
.t-texto-m { font: 400 var(--t-texto-m)/1.5 var(--font-body); letter-spacing: -.015em; }
.t-texto-p { font: 400 var(--t-texto-p)/1.45 var(--font-body); letter-spacing: -.01em; }
.t-interface { font: 500 var(--t-interface)/1.2 var(--font-body); letter-spacing: -.01em; }
.t-rotulo { font: 600 var(--t-rotulo)/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.t-legenda { font: 400 var(--t-legenda)/1.4 var(--font-body); letter-spacing: -.01em; }
.t-codigo, .codigo { font: 500 var(--t-codigo)/1.45 var(--font-mono); letter-spacing: 0; }

Hierarquia por peso

5

Hierarquia = tamanho + traço. Título e subtítulo não se distinguem só pelo tamanho: nunca dois níveis seguidos com o mesmo peso.

Título + subtítulo

.subtitulo

O subtítulo logo abaixo de um título é Sora 300, no tamanho que couber; o título fica em 450. Combine com uma classe de tamanho.

Plataforma de Marca

Um ponto de partida, vários destinos possíveis.

Negrito no conteúdo

<strong> · --peso-destaque

Em todo parágrafo, item, célula ou citação, os trechos importantes vão em <strong>: Inter 600, cor --tinta. 1 a 3 por parágrafo, até ~6 palavras cada, no máximo um terço do texto.

A proposta foi enviada na segunda e o cliente tem até sexta para responder. Se aprovar, o projeto começa com a reunião de diagnóstico.

Faça

Quem só passa o olho entende o essencial pelos negritos.
Trechos curtos: prazo, decisão, nome da coisa.

Não faça

A frase inteira em negrito, ou mais de um terço do texto.
Negrito em título, chip, rótulo ou peça de marca para copiar (slogan, fala de exemplo).

Rótulo em caixa alta

.t-rotulo

Inter 600, 10,5px, +.12em. Escreva o texto normal: a classe põe em caixa alta. Com .estrela dentro, símbolo e texto ficam centrados.

Situação do projeto Rótulo de apoio Pergunta de checagem

Números tabulares

.num · font-variant-numeric: tabular-nums

Todo algarismo tem a mesma largura: valores empilhados alinham pela casa decimal. As classes de número já aplicam.

1.111,10 9.808,45 417,00

Código

.t-codigo · .codigo · .tecla

Mono 500, 12px, tracking 0. Para token, classe e atalho de teclado; nunca para texto de conteúdo.

.cartao.destaque Buscar ⌘ K

Composição

4

Os estilos juntos: rótulo › título › subtítulo › texto. Três estilos de Sora no máximo por tela.

Cabeça de seção

.t-rotulo + h2 + .subtitulo + p

Rótulo em cima, título 450, subtítulo 300, texto M com negrito.

Personalidade de marca

Valores

O que a marca faz e o que se recusa a fazer.

Cada valor sustenta um comportamento observável e protege a marca de uma leitura que ela rejeita.

Citação em destaque

blockquote.citacao

Frase-chave da marca (propósito, manifesto, fala de cliente). Aspa clara ao fundo, à esquerda; texto alinhado à esquerda, Sora 300, trecho-chave em negrito. Sem fundo e sem aspas no texto.

A Impulsamos existe para que cada empresa trabalhe com mais eficiência: ouvir primeiro e entregar uma solução completa, pensada para aquela operação.

Cartão de métrica

.cartao · .t-rotulo · .t-numero-1 · .t-legenda

O número é o maior elemento; o rótulo diz o que ele é.

Receita do trimestre R$ 1.284.590 Atualizado em 27 out 2026

Destaque Ardósia

.cartao.destaque

A mesma composição no cartão escuro: o base.css passa títulos, texto e rótulo para branco.

Plano do mês

Entregar o diagnóstico

Faltam duas entrevistas para fechar o mapa da operação.

Faça × não faça

4

As regras que mantêm a tipografia igual em todos os sistemas.

Peso entre níveis

Faça

Projetos ativos

Doze em andamento, três aguardando.

Não faça

Projetos ativos

Doze em andamento, três aguardando.

Destaque por peso, não por tamanho

Faça

ParceriaResultadoMestria

Não faça

ParceriaResultadoMestria

Faça

Use só as classes .t-* e os tokens --t-*; h1–h4 já vêm prontos.
Texto longo em Texto M, cor --tinta-82, até 76 caracteres por linha.
Subtítulo em Sora 300 (.subtitulo) logo abaixo do título 450.
Números em Sora tabular (.num, .t-numero-*).

Não faça

Outra fonte, Inter 700 (não é carregada) ou tracking inventado.
Dois níveis seguidos com o mesmo peso, ou mais de 3 estilos de Sora na tela.
Chip ou tag maior para destacar: chip tem um tamanho só (12px).
Negrito em título, rótulo, chip ou na frase inteira.

Tipografia

Famílias e pesos

Sora

Inter

Mono

Escala de 16 estilos

Título 1

Título 2

Título 3

Título 4

Hierarquia por peso

Plataforma de Marca

Composição

Valores

Entregar o diagnóstico

Faça × não faça

Projetos ativos

Projetos ativos