Manual de marca

O sistema, ligado na tomada.

Tudo o que está aqui é desenhado pelos mesmos tokens que o resto do site usa. O quadrado de cor é pintado por var(--color-…); o hex ao lado é lido do documento no seu navegador, agora; o tamanho de cada degrau é medido do próprio espécime. Se um valor mudar no tokens.css, esta página muda junto — ela não guarda cópia de nada.

Os contrastes são os do MARCA.md, calculados pela fórmula WCAG 2.x e trazidos como dado. AA pede 4,5:1 para texto normal, 3:1 para texto grande e 3:1 para elemento gráfico e anel de foco.

Logo

Quatro arquivos, dois fundos.

O símbolo é a moldura de um carimbo, inclinada −15°, com um check cuja haste rompe a régua de baixo e sai para fora virando o rabinho do balão de fala. É o furo, não a sobreposição — e é o que separa a marca de todo ícone de tarefa do mercado.

currentColor só funciona com SVG embutido. Num <img src> o navegador ignora a cor da página e o wordmark sai preto: importe com ?raw e use set:html.

Horizontal

public/marca/chatmade-horizontal.svg

Símbolo em violeta + wordmark em currentColor.

Header, rodapé, assinatura de e-mail.

Mínimo: 130 px de largura

Sobre papel · Uso padrão — símbolo violeta, wordmark em tinta.

Sobre tinta · Passa — o violeta cheio dá 3,34:1 e vale como elemento gráfico —, mas o mono é o preferido.
Horizontal mono

public/marca/chatmade-horizontal-mono.svg

A mesma, numa cor só, toda em currentColor.

Gravação, uma cor, fundo colorido, parceiro.

Mínimo: 130 px de largura

Sobre papel · Vale, inteira em tinta.

Sobre tinta · É o preferido, em papel. É o que o rodapé do site usa.
Símbolo

public/marca/chatmade-simbolo.svg

Só o carimbo, em traço, em currentColor.

Favicon acima de 24 px, app, avatar, selo, marca d’água.

Mínimo: 24 px

Sobre papel · Em carimbo (4,94:1) — é a cor do símbolo. Em tinta também vale.

Sobre tinta · Em papel. O violeta cheio também passa como elemento gráfico.
Empilhado

public/marca/chatmade-empilhado.svg

Símbolo sobre o wordmark.

Open Graph, capa, adesivo, formato quadrado.

Mínimo: 88 px de largura

Sobre papel · Uso padrão no formato quadrado.

Sobre tinta · Mesma regra da horizontal: passa, mas o mono é o preferido.

Área de respiro

Metade da altura do símbolo, dos quatro lados. Símbolo de 64 px → 32 px livres. Nada entra nessa faixa: nem texto, nem borda, nem foto, nem outro logo.

Abaixo de 24 px entra a versão reduzida

A 16 px a moldura de contorno, o vão da régua e o check disputam três traços num espaço que não comporta três. A reduzida chapa a moldura, engorda o entalhe entre os braços do check até 6,96 de 32 unidades e desenha o bico com base 6,8 e profundidade 6,5 — massa no lugar de detalhe. Ela é currentColor puro, sem <style> e sem hex: quem usa é que dá a cor.

64 px · cheio

64 px · reduzido

24 px · cheio

16 px · reduzido

A reduzida nos quatro tamanhos e nos quatro fundos

Cada quadro abaixo é um dos quatro fundos que o §4 permite. Em cima, a reduzida (favicon.svg); embaixo, o símbolo cheio, no mesmo tamanho, para você ver onde um passa a ser ilegível e o outro ainda lê.

Papel · marca em carimbo

reduzido

cheio

Uso padrão: símbolo violeta sobre papel.
Tinta · marca em papel

reduzido

cheio

Mono em papel — o violeta cheio aqui dá 3,34:1.
Carimbo chapado · marca em papel

reduzido

cheio

Só o mono, em papel.
Protocolo chapado · marca em tinta

reduzido

cheio

Só o mono, em tinta.

Símbolo cheio 24 px
Símbolo reduzido (favicon.svg) 16 px
Horizontal (as duas) 130 px de largura
Empilhado 88 px de largura
Impresso símbolo 6 mm; horizontal 34 mm

Cor

A paleta inteira, com o papel de cada uma.

O hex de cada linha é lido do :root quando a página abre. Se o script não rodar, o nome do token continua sendo a informação que importa — é ele que você escreve na peça, não o hex.

Marca

carimbo é ação; protocolo é número e destaque. Nada mais é acento.

--color-carimbo Ação primária, tinta do símbolo, anel de foco. Não usar como texto sobre tinta (3,34:1). Não usar como fundo de bloco grande.
--color-carimbo-forte Hover e pressionado do primário; link com folga no papel. Não usar como cor de estado.
--color-carimbo-claro Link e texto violeta sobre fundo escuro. Não usar sobre papel (2,13:1).
--color-protocolo Número de protocolo, etiqueta, seleção de texto, carimbo sobre tinta. Nunca como texto sobre papel (1,47:1). Nunca como cor do símbolo. Não é cor de aviso.

Estado

cada estado tem a versão que se lê no escuro e a -forte que se lê no claro. Cor de estado só aparece quando há um estado.

--color-resolvido Sucesso sobre tinta; ponto de status. Não é texto sobre papel (2,51:1). Não serve para “grátis” nem para destacar plano.
--color-resolvido-forte Sucesso em texto sobre papel. Não usar como fundo.
--color-aviso Aviso sobre tinta. Não confundir com protocolo: aviso é laranja, protocolo é amarelo.
--color-aviso-forte Aviso em texto sobre papel. —
--color-erro Erro sobre tinta. Não usar como acento decorativo.
--color-erro-forte Erro em texto sobre papel. —

Superfície escura, e o texto sobre ela

tinta serve de fundo no escuro e de texto forte no claro.

--color-tinta-fundo O mais escuro: rodapé, bloco de código. Não usar como cor de texto.
--color-tinta Fundo escuro padrão e texto forte sobre papel. Não trocar por preto em lugar nenhum.
--color-tinta-relevo Card elevado sobre tinta. Não usar como fundo de seção inteira.
--color-tinta-borda Borda visível no escuro. Não usar como texto.
--color-tinta-fio Divisória sutil no escuro. Fio demais vira jornal.
--color-papel Fundo claro e texto forte sobre tinta. —
--color-papel-suave Subtítulo e corpo secundário sobre tinta. Não usar sobre papel.
--color-papel-fraco Metadado, legenda, placeholder sobre tinta. Não usar em texto longo.

Superfície clara, e o texto sobre ela

o fundo da página é papel, não branco. Branco é card.

--color-papel-relevo Card elevado sobre papel. Não usar como fundo de página.
--color-papel-borda Borda visível no claro. Não usar como texto.
--color-papel-fio Divisória sutil no claro. Fio demais vira jornal.
--color-tinta-suave Subtítulo e corpo secundário sobre papel. Não usar sobre tinta.
--color-tinta-fraca Metadado, legenda, placeholder sobre papel. Não usar em texto longo.

Contraste

As combinações aprovadas, medidas.

Cada linha abaixo é o próprio par, renderizado. As duas reprovadas aparecem como amostra de cor, e não como texto: escrever em 1,47:1 para provar que não se lê deixaria esta página fora do AA.

Sobre tinta

papel 16,48:1 título e corpo
papel-suave 9,64:1 subtítulo, corpo secundário
papel-fraco 6,03:1 metadado, legenda
protocolo 11,20:1 número, etiqueta, carimbo
carimbo-claro 7,75:1 link, anel de foco
resolvido 6,56:1 estado de sucesso
aviso 7,31:1 estado de aviso
erro 7,61:1 estado de erro
3,34:1 carimbo — só elemento gráfico — nunca texto

Sobre papel

tinta 16,48:1 título e corpo
tinta-suave 8,84:1 subtítulo, corpo secundário
tinta-fraca 5,05:1 metadado, legenda
carimbo 4,94:1 link, anel de foco, carimbo
carimbo-forte 6,51:1 link com mais folga, hover
resolvido-forte 5,04:1 estado de sucesso
aviso-forte 5,99:1 estado de aviso
erro-forte 6,30:1 estado de erro
1,47:1 protocolo — proibido como texto e como traço

Chapados

papel sobre carimbo 4,94:1 — botão primário
papel sobre carimbo-forte 6,51:1 — botão primário em hover
tinta sobre protocolo 11,20:1 — etiqueta e selo

As outras superfícies

Sobre tinta-fundo: papel 17,73:1 · papel-suave 10,38:1 · papel-fraco 6,49:1.
Sobre tinta-relevo: papel 14,66:1 · papel-suave 8,58:1 · papel-fraco 5,37:1 · carimbo-claro 6,89:1.
Sobre papel-relevo: tinta 17,20:1 · tinta-suave 9,22:1 · tinta-fraca 5,27:1 · carimbo 5,15:1.
Fio e borda são decorativos e ficam abaixo de 3:1 de propósito (papel-borda sobre papel 1,33:1; tinta-borda sobre tinta 1,53:1). Não use fio para transmitir informação que só existe no fio.

Tipografia

Três famílias, nenhuma a mais.

Todas self-hosted por @fontsource-variable, eixo wght apenas. A família de display entra com restrição: um título por bloco, no máximo dois tamanhos de display na mesma tela. O contraste da página vem do peso e do tamanho, não de mais fontes.

Display

--font-display

Responde certo.

700 (título), 800 (wordmark e manchete de peça)

Só título e o wordmark. Nunca corpo, nunca botão, nunca legenda.
Texto

--font-texto

Chama gente na hora certa.

400 (corpo), 500 (rótulo e botão), 600 (ênfase)

Corpo, UI, formulário, tabela. É a fonte padrão do body.
Mono

--font-mono

PROTOCOLO 4192

400 (dado e código), 600 (carimbo e eyebrow)

Número de protocolo, código, terminal, eyebrow, dado tabular. Nunca frase inteira.

Os nove degraus

Os quatro maiores são clamp(): o número medido muda com a largura da sua janela. Título grande sempre com tracking negativo; corpo nunca leva tracking.

--text-carimbo escala 11 px entrelinha 1 · tracking +0,16 em · eyebrow, selo, rótulo de carimbo (caixa alta, 600)

RESOLVIDO COM PROTOCOLO
--text-etiqueta escala 13 px entrelinha 1,45 · tracking +0,005 em · meta, legenda, rodapé de ficha

Transferido para a Maya às 14h32
--text-corpo escala 16 px entrelinha 1,6 · tracking 0 · corpo padrão e UI

Solte seus documentos dentro e o agente responde a partir dali.
--text-intro escala 19 px entrelinha 1,55 · tracking −0,005 em · linha de apoio do hero e de seção

Responde no widget e no WhatsApp, com o trecho de onde saiu.
--text-destaque escala 24 px entrelinha 1,35 · tracking −0,012 em · citação, número grande dentro de texto

87% das conversas terminam sem passar por uma pessoa.
--text-titulo-p escala 28 → 34 px entrelinha 1,18 · tracking −0,02 em · h3

Arraste, ligue, publique.
--text-titulo escala 34 → 46 px entrelinha 1,1 · tracking −0,025 em · h2 de seção

Não é só chat.
--text-titulo-g escala 42 → 60 px entrelinha 1,05 · tracking −0,03 em · h1 de página interna

Bota pra atender.
--text-manchete escala 48 → 80 px entrelinha 0,98 · tracking −0,035 em · h1 do hero

Resolvido.

Elemento assinatura

O carimbo.

Etiqueta de filete duplo — borda fina por dentro, borda grossa por fora com um vão entre as duas —, inclinada −3°, em mono caixa alta com tracking largo, quase sempre com um número de protocolo ao lado. É o único lugar em que a marca é ousada; tudo em volta fica quieto.

No máximo dois por página. Esta é a exceção do site: são três aqui porque é a folha de amostra e as três variantes precisam aparecer. Em página de verdade, dois.

Sobre papel

Resolvido #4192

.carimbo · violeta, 4,94:1. É a variante padrão. A entrada desce e assenta uma vez, quando o selo aparece — e some sob prefers-reduced-motion.

Sobre tinta

Resolvido #4192 Código aberto

.carimbo--claro (violeta claro, 7,75:1) e .carimbo--protocolo (amarelo, 11,20:1). O amarelo só existe aqui: sobre papel dá 1,47:1.

Onde pode aparecer

No hero, carimbando a afirmação principal.
No plano mais escolhido da tabela de preços.
No fim de uma seção de docs, marcando “isso aqui está resolvido”.
No card de resultado — “RESOLVIDO” com o número ao lado —, quando o número for real.

Quando é errado

Como botão ou link: carimbo é selo, não é controle e não se clica.
Com número inventado. Em tela de produto, é o id da conversa de verdade.
Amarelo sobre papel.
Duas vezes no mesmo bloco, ou repetido em cada card de uma grade.
Em animação que roda em laço.

A numeração sequencial 01 / 02 / 03 só é permitida onde a ordem importa de verdade — os três passos de “como funciona”. Em qualquer outro lugar, o número que aparece é o de protocolo.

Controle

Um botão, três variantes.

Secundário e fantasma trocam de cor sozinhos dentro de uma seção escura: quem envolve marca .sobre-tinta e o componente reage ao ancestral. Quem chama não precisa saber em que fundo está. O rótulo é o que vai acontecer, e o aviso depois repete o verbo.

Os botões abaixo são amostra: eles não levam a lugar nenhum. Passe o teclado por eles para ver o anel de foco — violeta no papel, violeta claro na tinta.

Sobre papel

Sobre tinta

Os três tamanhos

Papel sobre carimbo = 4,94:1; em hover o fundo escurece para carimbo-forte e sobe para 6,51:1. É por isso que o primário vale nos dois fundos sem variação.

Medida

Espaço, raio, sombra e tempo.

O ritmo da página não se inventa por peça. Sombra é de tinta, nunca de preto puro. A coluna de texto corrido não passa de --container-leitura, 34 rem, cerca de 68 caracteres; o conteúdo da página para em --container-conteudo, 74 rem.

Espaço

--spacing Base de 4 px do ritmo miúdo.
--spacing-margem Respiro lateral da página (mínimo 360 px).
--spacing-bloco Entre blocos dentro de uma seção.
--spacing-secao Entre seções.
--spacing-secao-g Antes e depois de hero e CTA final.

Raio

--radius-etiqueta Etiqueta, pastilha, campo miúdo.
--radius-carimbo O raio do símbolo. Toda peça de assinatura usa ele.
--radius-botao Botão.
--radius-ficha Ficha, card, captura de produto.
--radius-selo Selo redondo e pastilha de estado.

Sombra

--shadow-ficha Ficha sobre papel.
--shadow-relevo Card elevado e captura de produto.
--shadow-tinta Ficha sobre tinta.
--shadow-carimbo Botão primário. É sombra de violeta.

Movimento

--tempo-toque O afundar do botão ao clique.
--tempo-padrao Troca de cor, abertura de menu.
--tempo-carimbo O gesto de carimbar, uma vez só.
--ease-carimbo Desce rápido e assenta.
--ease-suave Padrão de transição.
--ease-saida Saída de elemento.

Nenhuma animação roda em laço no viewport, e prefers-reduced-motion: reduce desliga o que sobrou.

Proibido

O que não se faz.

A primeira versão deste símbolo foi rejeitada porque a moldura era fechada e o check ficava dentro dela: virava caixa de seleção genérica. O furo na régua e o vértice do lado de fora não são detalhe — são a marca.

Com o logo

Não estique. Largura e altura mudam juntas, sempre.
Não feche a moldura e não recolha o check para dentro dela. O vão na régua de baixo e o vértice do lado de fora são a marca.
Não troque a cor do wordmark por uma que não é token.
Não pinte o símbolo de amarelo. Protocolo é cor de etiqueta e de número, não de marca.
Não recrie o wordmark digitando o nome numa fonte — nem na própria fonte de display: as curvas do arquivo têm tracking e alinhamento próprios.
Não gire, não incline, não espelhe. A inclinação de −15° já está desenhada no arquivo.
Não converta o traço em contorno e engrosse. As duas espessuras têm relação fixa.
Não ponha sobre foto sem contraste, nem sobre gradiente, nem sobre padrão de fundo.
Não separe o símbolo do wordmark, e não mude o espaço entre eles.
Não acrescente sombra, contorno, brilho ou bisel, e não ponha o logo dentro de um quadrado colorido: o símbolo já é um quadrado.
Não use o logo como bullet, ícone de lista ou marcador de parágrafo.

Com o resto

Nada de foto de banco de imagem: gente de headset, “equipe de atendimento”, mão apontando para holograma azul. No lugar entram mock de interface, bloco de terminal, diagrama ou captura real — com dado brasileiro plausível, nunca lorem ipsum.
Nada de ilustração vetorial decorativa: blob, gradiente, personagem. Se falta imagem, use tipografia grande.
Nada de superlativo vazio: revolucionário, poderoso, solução completa, IA de ponta, inovador, disruptivo.
Nada de chamar a IA de “o robô”, nem de dar a ela nome de pessoa que o cliente não escolheu.
Nada de animação em laço no viewport, e tudo o que sobrar some sob prefers-reduced-motion.
Nada de terceiro carimbo na página. Se você precisa de um, o problema é a página.

Antes de publicar

Os dez itens.

Se a peça não sustenta a frase de essência — resolvido, com protocolo —, ela não é ChatMade.

01 Todo hex da peça é token do tokens.css? Se você digitou “#”, provavelmente é erro.
02 Toda fonte é uma das três, no peso previsto para aquele papel?
03 Título grande com tracking negativo, e o corpo sem tracking?
04 Todo par texto/fundo consta na tabela de combinações aprovadas — e nenhum amarelo virou texto sobre papel?
05 O logo tem meia altura de símbolo de respiro, está acima do mínimo, e não foi esticado, girado nem recolorido? Abaixo de 24 px entrou a versão reduzida?
06 No máximo dois carimbos na página, e o número que aparece é real?
07 O foco de teclado aparece em tudo que recebe foco, com o anel violeta a 3 px?
08 A peça se comporta até 360 px de largura, sem barra horizontal?
09 Nenhuma animação roda em laço, e prefers-reduced-motion desliga o que sobrou?
10 O texto passa nas cinco regras de voz?