03 · Marca

Tipografia da marca

Duas famílias formam a voz visual da Innova: Afacad Flux em momentos editoriais, e Inter em texto corrente e UI. A régua segue uma progressão Fibonacci a partir de 16px.

Famílias

Self-hosted em public/fonts/ (latin + latin-ext, woff2 variável). Quatro pesos por família: 400 (Regular), 500 (Medium), 600 (Semibold) e 700 (Bold).

Display

Afacad Flux

Títulos editoriais, hero, capas. Personalidade da marca em momentos institucionais.

Pesos: 400, 500, 600, 700

Baixar →

Texto

Inter

UI, parágrafos, formulários, navegação. Otimizada para leitura em tela.

Pesos: 400, 500, 600, 700

Baixar →

A intervenção custom no I da palavra-marca é exclusiva do logotipo — em qualquer outro uso de Afacad Flux, a letra fica na sua forma original. Detalhes em Logotipo · Palavra-marca.

A régua Fibonacci

A sequência de Fibonacci (1, 1, 2, 3, 5, 8, 13, 21…) cresce somando cada termo ao anterior. Aqui ela serve como tabela de incrementos: a partir do corpo em 16px, cada degrau acima soma o próximo número da sequência. O salto entre níveis aumenta progressivamente (3 → 5 → 8 → 13), o que cria uma hierarquia visual clara só pelo tamanho — sem precisar reforçar com peso.

tag	papel	cálculo	tamanho	rem
p	Corpo	base	16px	1rem
h4	Subtítulo	16 + 3	19px	1.1875rem
h3	Título	19 + 5	24px	1.5rem
h2	Heading	24 + 8	32px	2rem
h1	Display	32 + 13	45px	2.8125rem

Um sexto degrau, Small (13px), fica abaixo do corpo com incremento −3 — mantém a mesma lógica simétrica e cobre captions, descrições compactas e tooltips. Fora da régua, um eyebrow de 12px em caixa alta cobre os kickers.

Como navegar a documentação

Exemplos de uso — specimens de cada tamanho em contexto, hierarquia em peças institucionais e o eyebrow em ação.
Sistema — utilitários Tailwind (text-display, text-heading…), responsividade fluida com clamp() e cores de texto.
Boas práticas — princípios de uso e o que evitar.