Visual
Tipografia
Nossa voz tipográfica é a Plus Jakarta Sans — geométrica na estrutura (precisão de oficina), de terminais suaves (simpatia de bairro). Uma única família resolve tudo, do outdoor ao aplicativo. Gratuita no Google Fonts, com português completo.
A fonte
Visão limpa,
viagem segura.
Plus Jakarta Sans · ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz áâãéêíóôõúç 0123456789
Pesos e funções
ExtraBold 800 é o peso de display da marca — é ele que o site usa em manchete, número e botão. Peso é a nossa ênfase: quando um trecho precisa gritar, ele engorda, nunca inclina.
Escala — superfície MARCA (site e peças)
A escala do site é FLUIDA (clamp), não degraus fixos: o mesmo título encolhe no celular e cresce no desktop sem breakpoint. Os valores abaixo são os que estão no código de components/site-alemao/home.tsx — não uma escala teórica.
| Papel | Especificação real | Onde aparece |
|---|---|---|
| Display / H1 | clamp(2.6rem, 7.5vw, 5.2rem) → 41,6–83,2 px · 800 · tracking −0.03em | Manchete do hero da home |
| H1 de landing | clamp(2.2rem, 5.5vw, 4rem) → 35,2–64 px · 800 · tracking −0.02em | CTA final e heros de landing |
| H2 | clamp(2rem, 4.5vw, 3.2rem) → 32–51,2 px · 800 · tracking-tight | Título de seção (o mais frequente: 5 usos) |
| Número editorial | clamp(2rem, 4vw, 3rem) → 32–48 px · 800 · leading-none | Contadores e a faixa de números |
| Citação | clamp(1.3rem, 2.6vw, 1.9rem) → 20,8–30,4 px · 700 | Depoimento em destaque |
| Lead | clamp(1rem, 1.6vw, 1.15rem) → 16–18,4 px · 400 · leading-relaxed | Parágrafo de apoio do hero |
| Corpo | 14,5–16 px · 400 · leading-relaxed | Texto corrido. Máx. ~65 caracteres por linha |
| Label / eyebrow | 12–13 px · 800 · CAIXA ALTA · tracking 0.2em (+20%) | Kicker acima de todo H2 |
O peso de display aqui é 800, não 600. Esta superfície é a voz do Alemão — manchete, número e botão são ExtraBold. O cap de peso 600 do tailwind.config.ts vale para a superfície de PRODUTO (abaixo), não para a marca.
Escala — superfície PRODUTO (admin e app)
No produto a escala é por TOKEN, não por clamp: cada papel é uma classe do tailwind.config.ts, com tamanho, entrelinha, tracking e peso já embutidos. Use o token; não redefina tamanho à mão.
| Token | Tamanho · entrelinha · peso | Papel |
|---|---|---|
| text-display-xl | 40 px · 1.0 · 600 · tracking −0.035em | Título de página do admin |
| text-display | 30 px · 1.15 · 600 · tracking −0.025em | Título de bloco grande |
| text-display-sm | 23 px · 1.2 · 600 · tracking −0.015em | Título de seção |
| text-heading | 19 px · 1.3 · 600 | Título de cartão |
| text-heading-sm | 16 px · 1.3 · 600 | Subtítulo e rótulo forte |
| text-body-lg | 15 px · 1.5 · 500 | Corpo com ênfase |
| text-body | 14 px · 1.55 · 400 | Corpo padrão do admin |
| text-caption | 12 px · 1.4 · 500 | Legenda e microtexto |
| text-tiny | 11 px · 1.4 · 600 · tracking 0.06em | Eyebrow e chip |
Qual escala usar: a peça é da marca (site, post, capa, apresentação)? Use a fluida, com 800. É produto (admin, app do funcionário, painel)? Use os tokens, com 600. As duas usam a mesma fonte e as mesmas cores — o que muda é o peso e a densidade, porque uma grita de longe e a outra é lida por oito horas.
Contraste de peso é a nossa manchete: metade Regular, metade ExtraBold na mesma frase — “Muito mais que um vidro. Uma escolha de segurança.” Nunca inclinando: ênfase aqui é peso, nunca itálico.
Itálico é banido
A marca inteira não usa itálico. Nenhum. Não é “evite”, não é “só em citação”: é regra fechada, decidida pelo cliente, e o site não tem uma única ocorrência. Vale pra site, sistema, peça, apresentação, legenda de vídeo e post.
A razão técnica ajuda, mas não é o motivo: a Plus Jakarta Sans não tem itálico verdadeiro, então o navegador inclina a fonte reta na marra e entrega uma falsificação torta. O motivo de verdade é de marca — a nossa ênfase é peso (400 → 800) e cor (amarelo sobre azul). Nunca inclinação.
Precisa destacar? Engorde a palavra. Precisa de um nome de veículo, um termo técnico ou uma citação? Também é peso, não itálico.
Na prática: nada de italic, <i> ou <em> com estilo inclinado. Onde a semântica pedir ênfase, use <strong> ou <em className="not-italic font-[700]"> — o significado fica pro leitor de tela, a inclinação não aparece pra ninguém.
Fica de olho
O que mantém a marca inteira — e o que a quebra.
Sempre
- Uma família só: Plus Jakarta Sans em tudo
- ExtraBold 800 como peso de display: manchete, número, botão
- Manchete com contraste de peso (400 + 800)
- Ênfase por peso e cor — as duas únicas que a marca tem
- Tracking levemente negativo em títulos grandes
- Fallback: system-ui / Arial / sans-serif
Nunca
- Itálico, em qualquer peça, em qualquer tamanho — banido na marca inteira
- Montserrat — descontinuada na v2.0 (não usar em peça nova)
- Caixa alta em texto corrido
- Mais de dois pesos na mesma composição
Recursos
Use sempre os arquivos oficiais — nunca redesenhe.