Aparência
Manual de marca
Tipografia
Três famílias
Todas do Google Fonts, licença SIL OFL 1.1 (uso comercial liberado).
| Papel | Família | Pesos | Uso |
|---|---|---|---|
| Títulos | Bricolage Grotesque | 500, 700, 800 | h1–h3, números de destaque (KPI), chamadas |
| Texto e interface | Figtree | 400–700 | Corpo, labels, botões, tabelas, navegação |
| Dados | IBM Plex Mono | 400, 500 | Datas, valores em tabela, códigos, rótulos em caixa-alta |
Aa Bb Cc 0123
Figtree · ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz · 0123456789
IBM Plex Mono · 05/11/2026 · R$ 2.150,00
html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Figtree:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />Classes Tailwind: font-sans (Figtree, padrão do body), font-display (Bricolage) e font-mono (IBM Plex Mono). h1, h2 e h3 já recebem Bricolage e letter-spacing: -0.02em em styles.css.
Fallback (e-mails, ferramentas de terceiros): Arial ou Helvetica no lugar de Figtree e Bricolage; Courier New no lugar de IBM Plex Mono.
Pesos
Bricolage 800 — h1, números de KPI
Bricolage 700 — h2, h3
Figtree 400 — corpo de texto
Figtree 500 — labels, nav
Figtree 600 — botões, badges
IBM Plex Mono 500 — datas e valores
Hierarquia no portal
Financeiro
H1 — Cobranças de novembro
H2 — Vencimentos próximos
H3 — Título de card
R$ 13.000,00 KPI
Body 14 — texto padrão da interface, em gray-700.
Body-sm 12 — texto auxiliar em gray-500.
VENC. 05/11/2026 · R$ 2.150,00
| Nível | Uso | Tailwind sugerido | Família |
|---|---|---|---|
h1 | Título da página | text-3xl sm:text-4xl font-extrabold text-gray-900 | Bricolage |
h2 | Título de seção ou card grande | text-lg font-bold text-gray-900 | Bricolage |
h3 | Título de card ou bloco | text-base font-bold text-gray-900 | Bricolage |
kpi | Valor principal em card | font-display text-3xl font-extrabold tracking-tight | Bricolage |
body | Texto padrão, células | text-sm text-gray-700 | Figtree |
body-sm | Texto auxiliar, descrições | text-xs text-gray-500 | Figtree |
label | Labels de formulário | text-sm font-medium text-gray-700 | Figtree |
button | Botões | text-sm font-semibold | Figtree |
eyebrow | Rótulo acima do título | classe .eyebrow | Mono |
data | Datas e valores em listas e tabelas | font-mono text-sm font-medium | Mono |
Hierarquia de marketing
Para o site, posts e slides:
| Nível | Tamanho / altura de linha / peso |
|---|---|
| Display | 56 / 1.05 / 800 |
| Título 1 | 40 / 1.1 / 800 |
| Título 2 | 28 / 1.15 / 700 |
| Subtítulo | 20 / 1.4 / 600 |
| Corpo | 16 / 1.6 / 400 |
| Legenda | 13 / 1.5 / Mono 500 |
| Chamada | 16 / 700 |
Eyebrow + título
Toda página abre com eyebrow em mono caixa-alta seguido do título em Bricolage. É a assinatura tipográfica da marca.
Contratos
Contratos a reajustar
html
<p class="eyebrow">Financeiro</p>
<h1 class="mt-2 text-3xl font-extrabold text-gray-900 sm:text-4xl">Cobranças de novembro</h1>.eyebrow = font-mono text-xs font-medium uppercase tracking-[0.12em] text-brand-600. Em fundo claro o eyebrow é Verde Lar — nunca amarelo. Sobre Verde Lar, pode ser amarelo.
Regras
- Títulos com espaçamento de −2% a −3%; corpo com espaçamento normal.
- Caixa-alta só na fonte mono, com espaçamento de +10% a +14%. Nunca frases inteiras em caixa-alta em Figtree ou Bricolage.
- Linha de texto com até 65 caracteres (
max-w-prose). - Alinhamento à esquerda por padrão.
- No máximo duas famílias por tela, além da mono para dados.
- Nunca fonte menor que 12px na interface; corpo com no mínimo 16px no celular em textos longos.