Identidade
Tipografia
Todo texto de interface, documento e material da AvvanTI. Manrope é a família inteira, do título à legenda. JetBrains Mono só para código, IDs e números que precisam alinhar (número de processo, CE Mercante, chave de acesso).
Aa
Manrope
200 a 800, uma família para tudo, do título à legenda. JetBrains Mono só para código e números de documento.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ÁÉÍÓÚÃÕÇ
200400600800
display
72px · 800Sem parar
72px · 800Sem parar
h1
48px · 800Para negócios que não podem parar
48px · 800Para negócios que não podem parar
h2
36px · 700Para negócios que não podem parar
36px · 700Para negócios que não podem parar
h3
24px · 700Para negócios que não podem parar
24px · 700Para negócios que não podem parar
h4
18px · 700Para negócios que não podem parar
18px · 700Para negócios que não podem parar
lead
20px · 400Para negócios que não podem parar
20px · 400Para negócios que não podem parar
body
16px · 400Para negócios que não podem parar
16px · 400Para negócios que não podem parar
small
14px · 500Para negócios que não podem parar
14px · 500Para negócios que não podem parar
caption
12px · 600Para negócios que não podem parar
12px · 600Para negócios que não podem parar
eyebrow
12px · 700Infraestrutura gerenciada
12px · 700Infraestrutura gerenciada
mono
14px · 500CE 152605000123456
14px · 500CE 152605000123456
Especificação
Famílias: Manrope, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif (Manrope 200–800) e 'JetBrains Mono', ui-monospace, Menlo, Consolas, 'Liberation Mono', monospace (JetBrains Mono 400/500/700).
| Estilo | Tamanho | Altura de linha | Espaçamento | Peso | Uso |
|---|---|---|---|---|---|
| display | 72px | 1,04 | −0,025em | 800 | Destaque do site. Nunca em tela de sistema |
| h1 | 48px | 1,08 | −0,02em | 800 | Título de página no site |
| h2 | 36px | 1,12 | −0,015em | 700 | Título de seção |
| h3 | 24px | 1,2 | −0,01em | 700 | Título de página em sistema |
| h4 | 18px | 1,3 | −0,005em | 700 | Título de card, bloco ou modal |
| lead | 20px | 1,5 | 0 | 400 | Parágrafo de abertura |
| body | 16px | 1,55 | 0 | 400 | Texto corrido |
| small | 14px | 1,5 | 0 | 500 | Interface: tabela, label, item de menu |
| caption | 12px | 1,4 | 0,02em | 600 | Legenda, metadado |
| eyebrow | 12px | 1,2 | 0,16em | 700 | Rótulo acima do título: maiúsculo, #0466C8 |
| mono | 14px | 1,5 | 0 | 500 | Código, IDs |
Comportamento
- Em sistema, o texto padrão de tela é small (14px); body (16px) fica para texto corrido longo.
- Linha de texto corrido com 60 a 72 caracteres.
- Números em tabela e valores em moeda alinham à direita, com algarismos de largura igual.
Faça
- Títulos longos em sentence case ("Contas a receber deste mês"); Title Case só em rótulos curtos (Serviços, Contato).
- Eyebrow para categorizar uma seção, nunca como título.
- Peso pela hierarquia: 800 só em display e h1.
Não faça
- Segunda família sans (Inter, Space Grotesk…) ou serifada em tela nova.
- Retipografar o logo em Manrope: o logo é sempre o SVG oficial.
- Tamanho fora da escala: use um estilo da escala.
- Itálico para ênfase em interface; use peso.