Pesquisa aplicada · Edição 2026
Inovação que mostra resultado.
Pesquisa, design e tecnologia que aceleram a transformação de negócios complexos — do laboratório ao mercado, sem intermediários.
- Programas
- +120
- Empresas
- 38
- Setores
- 7
03 · Marca
Tipografia em contexto
Cada degrau da régua aplicado em situações reais: peças de marca,
interfaces, cards e kickers. Use estes exemplos como referência ao montar
novos materiais.
Hierarquia em peças de marca
Em peças institucionais (capas, hero, campanha), Afacad Flux é o display e Inter o subtítulo e corpo. Abaixo, o exemplo canônico — uma seção de landing page no esquema Carvão + Brasa, com hierarquia, prova social e CTA.
O hero acima compõe o esquema institucional dark com os utilitários
do sistema: text-display em Afacad Flux para o
headline, text-title em Inter para o subtítulo,
text-eyebrow nos kickers e text-heading
em Afacad Flux nos números. Brasa aparece como
acento — palavra grifada, CTA primário e glow de fundo.
Cada tamanho em contexto
Os seis utilitários tipográficos com texto-exemplo no tamanho real e
uma nota sobre onde cada um cai bem. Para variações de peso, combine
com font-medium ou font-semibold.
| Utility | Tamanho | Peso | Exemplo |
|---|---|---|---|
text-display | 32px → 45px
lh 1.15 · ls -0.02em | 700 | Inovação que mostra resultado. Hero, abertura de campanha, h1 editorial. Apenas uma vez por tela. |
text-heading | 24px → 32px
lh 1.22 · ls -0.01em | 600 | Como funciona o programa Innova h2 — divisões principais da página. |
text-title | 19px
lh 1.4 · ls 0 | 600 | Próximos passos h3 / h4, títulos de cards, modais e listas. |
text-body | 16px
lh 1.6 · ls 0.005em | 400 | A Innova combina pesquisa aplicada e tecnologia para acelerar a transformação de negócios. Parágrafo padrão da UI. |
text-small | 13px
lh 1.5 · ls 0 | 400 | Texto secundário, descrições compactas e captions. Texto secundário, descrições compactas, captions, tooltips. |
text-eyebrow | 12px
lh 1.4 · ls 0.15em | 400 | Manual de marca Kicker uppercase em capas de seção e cards. |
Eyebrow · o kicker da página
text-eyebrow é um utilitário fora da régua para
kickers — pequenas legendas em caixa alta que aparecem antes
de um título ou no topo de um card, anunciando a categoria do bloco
("Cor de assinatura", "02 · Marca"). 12px,
uppercase, letter-spacing 0.15em. Para variar
a presença, combine com text-base-content/60 (uso comum)
ou /40 (caption discreto).
Cor de assinatura
Brasa
Eyebrow no topo de um card. Anuncia a categoria.
02 · Marca
Tipografia
Eyebrow numerado, mais discreto, em /40.
Para ver no código
Os utilitários, a responsividade fluida (clamp()) e as
cores de texto estão documentados em
Sistema. Para princípios de uso e o
que evitar, ver Boas práticas.