03 · Marca

Sistema tipográfico

Camada técnica: utilitários Tailwind, responsividade fluida e cores de texto. Esta é a camada que você consome no código.

Os utilitários

Cinco classes na régua + text-eyebrow fora dela. Cada uma reúne família, tamanho, peso, line-height e letter-spacing em um único nome — combine com font-medium ou font-semibold para variações de peso. Definidos em src/styles/global.css via @utility.

Utility	Tamanho	Peso	Uso
`text-display`	32px → 45px lh 1.15 · ls -0.02em	700	Hero, abertura de campanha, h1 editorial. Apenas uma vez por tela.
`text-heading`	24px → 32px lh 1.22 · ls -0.01em	600	h2 — divisões principais da página.
`text-title`	19px lh 1.4 · ls 0	600	h3 / h4, títulos de cards, modais e listas.
`text-body`	16px lh 1.6 · ls 0.005em	400	Parágrafo padrão da UI.
`text-small`	13px lh 1.5 · ls 0	400	Texto secundário, descrições compactas, captions, tooltips.
`text-eyebrow`	12px lh 1.4 · ls 0.15em	400	Kicker uppercase em capas de seção e cards.

Uso rápido

<h1 class="text-display">Inovação que mostra resultado.</h1>
<h2 class="text-heading">Como funciona</h2>
<h3 class="text-title">Próximos passos</h3>
<p  class="text-body">Texto padrão da UI.</p>
<p  class="text-small">Caption ou descrição compacta.</p>
<span class="text-eyebrow">Manual de marca</span>

Em .prose, os tamanhos de h1–h4 e p já replicam a régua automaticamente — não precisa acrescentar utilitários nesses elementos.

Responsividade fluida

text-display e text-heading usam clamp(min, preferred, max) no font-size: o tamanho cresce proporcionalmente à largura da viewport, sem media query e sem saltos.

text-display

clamp(2rem, 3vw + 1.25rem, 2.8125rem)

Mobile 32px → Desktop 45px

text-heading

clamp(1.5rem, 1.5vw + 1rem, 2rem)

Mobile 24px → Desktop 32px

Tamanhos abaixo de text-title não são fluidos. Em UI compacta (botões, badges, captions) variar com a viewport prejudica densidade e alinhamento de grid.

Cores de texto

A cor de texto não vem embutida nos utilitários — fica desacoplada para seguir o tema ativo. Use o idiom do daisyUI 5: text-base-content com modificadores de opacidade. A opacidade é ortogonal aos utilitários tipográficos — combine livremente (text-eyebrow text-base-content/60, text-body text-base-content/60).

Uso	Classe	Exemplo
Corpo de texto, headings	`text-base-content`	Texto principal — máxima legibilidade.
Texto auxiliar, descrições, parágrafos secundários	`text-base-content/60`	Texto auxiliar — descrições, intros, metadados.
Eyebrows, prefixos, captions discretos	`text-base-content/40`	Texto discreto — kickers e captions.
Estado desabilitado	`text-base-content/30`	Texto desabilitado — inativo.

Esse padrão segue automaticamente o tema ativo (light/dark): basta o daisyUI trocar --color-base-content ao alternar data-theme. Não criar tokens custom (text-muted, text-tertiary) nem escalas Tailwind diretas (text-neutral-500). Cores de marca seguem usando os tokens daisyUI: text-primary, text-success, text-error, etc.