Cachet — Guia de Marca
Referência oficial de identidade visual do Cachet: logotipo, cores, tipografia e regras de uso.
Todos os valores aqui são extraídos diretamente do código de produção (app/globals.css,
tailwind.config.ts, components/icons.tsx) — não são
aproximações, é exatamente o que está no ar.
01 Logotipo
A marca Cachet é construída em torno de uma estrela de cinco pontas estilizada ("mark"), que representa destaque/nível de cachê artístico. Ela existe em três formatos: só a marca (ícone), a marca + wordmark, e a versão reduzida usada como favicon.
Marca (mark) — sozinha
Wordmark (marca + nome)
Favicon
02 Área de proteção & tamanho mínimo
Mantenha ao redor da marca um espaço livre equivalente à altura de um dos "braços" da estrela (aprox. 25% da altura total do símbolo). Não posicione texto, bordas ou outros elementos dentro dessa área.
| Contexto | Tamanho mínimo |
|---|---|
| Mark isolado (digital) | 16 × 16px |
| Favicon de aba do navegador | 16 × 16px |
| Wordmark completo | 88px de largura |
| Impressão (mark) | 8mm de altura |
03 O que não fazer
Erros comuns que quebram a consistência da marca — evite:
04 Paleta de cores
O Cachet usa tokens de cor via CSS custom properties, com valores diferentes para tema claro, escuro e alto contraste — todos calibrados para atingir AAA (7:1) de contraste de texto contra o fundo (ver seção de acessibilidade).
Tema claro (padrão)
Tema escuro
Alto contraste (modo de acessibilidade)
Marca (mark) — hex fixo
O símbolo da estrela usa um roxo fixo (#6D28D9), independente de tema —
é essencialmente o mesmo tom do Accent claro, só que travado para o logo nunca mudar de cor com
dark mode ou alto contraste (identidade visual consistente em qualquer superfície).
05 Tipografia
Duas famílias, cada uma com um papel bem definido — nunca misturadas dentro do mesmo elemento.
| Token | Família | Uso |
|---|---|---|
font-display | Space Grotesk 500/600/700 | Wordmark, h1–h3, valores monetários |
font-sans | Inter 400/500/600/700 | Texto corrido, formulários, navegação |
06 Acessibilidade
A paleta foi recalibrada (a partir da versão original, que batia ~4.6–6.8:1) para atingir WCAG AAA — contraste mínimo de 7:1 para texto normal contra o fundo — em todos os temas.
| Combinação | Contraste | Nível |
|---|---|---|
| Foreground #1A1A1A sobre Background #FAF9F8 | 16.4:1 | AAA |
| Muted #515661 sobre Background #FAF9F8 | 7.1:1 | AAA |
| Accent #6A27D4 sobre Background #FAF9F8 | 7.2:1 | AAA |
| Foreground #F5F3F0 sobre Background #12110F (dark) | 15.8:1 | AAA |
| Accent #A88CFB sobre Background #12110F (dark) | 7.4:1 | AAA |
Não use a marca (roxo #6D28D9) como única forma de transmitir informação (ex: "sucesso" vs
"erro") — sempre acompanhe de ícone e/ou texto, para usuários com daltonismo. Ver também o menu
de acessibilidade do produto (components/AccessibilityMenu.tsx):
aumento de fonte, alto contraste e redução de movimento.
07 Arquivos exportados
Todos os arquivos ficam em docs/brand/, versionados no git.
- logo-mark.svg Marca, roxo #6D28D9 — vetor mestre
- logo-mark-white.svg Marca em branco, para fundos escuros
- logo-mark-1024.png 512 256 192 Raster da marca, fundo transparente
- logo-mark-white-512.png Raster da marca branca, fundo transparente
- logo-wordmark.svg Marca + "Cachet", tema claro
- logo-wordmark-dark.svg Marca + "Cachet", tema escuro
- logo-wordmark-2x.png dark-2x.png Raster do wordmark, alta resolução
- favicon.svg Idêntico ao usado em produção (app/icon.svg)
- favicon-16.png 32 48 Favicon raster, múltiplos tamanhos
- apple-touch-icon-180.png Ícone iOS, com fundo sólido (Apple ignora transparência)
