Início / Identidade visual

Manual de identidade · v2

Autoridade na forma, rigor no detalhe.

Serifa editorial fina e filetes trazem autoridade; grade, rótulos em mono e luz que segue o mouse trazem o lado tecnológico. O bordô é o único acento forte.

I · Paleta

Bordô, marfim e tinta.

Bordô terroso, puxado para o marrom e nunca para o rosa: é o tom de autoridade e autenticidade. Neutros de marfim e cinza quente. Latão só em fios e pontos de luz.

Bordô#4f1519
Marca, botões, destaques

Bordô escuro#380e12
Hover e ativo

Bordô médio#6e2228
Bordas em foco, linhas

Bordô noturno#1a0c0c
Seções escuras e console

Latão claro#c9a96e
Destaque sobre escuro

Latão#a98a55
Fios e pontos de luz

Papel#fbfaf6
Fundo principal

Papel 2#f3f0e9
Seções alternadas

Tinta#171514
Texto

II · Tipografia

O letreiro do jornal, com rigor técnico.

Instrument Serif nos títulos e na marca: condensada, de alto contraste e fios finos, a opção gratuita mais próxima do letreiro do Wall Street Journal. Newsreader no texto corrido. JetBrains Mono só em rótulos e números.

Títulos e marca · Instrument Serif

Nome Lab

Títulos diretos, com o essencial em bordô.

Texto · Newsreader

Serifa de leitura com eixo óptico, confortável em parágrafos longos, no papel do Exchange do WSJ.

Rótulos · JetBrains Mono

01 / SEO

caixa-alta, espaçamento 0,1–0,14 em

III · Elementos

Peças que se repetem.

Passe o mouse nos cartões: o brilho e a sombra seguem o cursor.

Cartão com brilho e sombra reativos

glowtilt

Classes .glow e .tilt. Só em mouse; no toque fica estático.

Botões

Primário →Secundário

Brilho que atravessa no hover e leve atração magnética.

Selos de estado

conectadorevisaraguardandodestaque

Mono, caixa-alta, borda fina.

Selo da marca

Anel de texto girando devagar. Para redes sociais e materiais.

Divisor de circuito

Se desenha conforme a página rola.

IV · Movimento

Animações com propósito.

Curva padrão cubic-bezier(.33,1,.68,1): sai rápido e assenta devagar. Com “reduzir movimento” ativado no sistema, tudo fica estático.

panel-in

Entrada de painéis e linhas.

lamp-in

Acender: selo e destaques.

bar-grow

Sublinhados e progresso das trilhas.

slide

Troca de trilha no carrossel.

Contador

1.240

Números sobem quando entram na tela.

spin

Envio do formulário.

Efeitos de página

Título em palavras que sobem (data-split) no topo de cada página.
Rótulos que “decodificam” (data-scramble) ao entrar na tela.
Barra de progresso de leitura no topo, em vinho e latão.
Rede de pontos no hero que se afasta do cursor e liga linhas de latão até ele.
Console digitando o diagnóstico (sempre rotulado como simulação).
Linha do método que preenche conforme a rolagem e acende cada etapa.
Cascata (data-stagger): cartões entram um após o outro.

V · Uso

Regras de ouro.

Faça

Bordô só como acento, em poucos pontos por tela.
Muito espaço em branco e filetes finos.
Títulos diretos, com a parte importante na cor bordô (sem itálico e sem negrito).
Rotule demonstrações como “ilustrativas”.

Evite

Qualquer tom rosado ou arroxeado; e fontes além das três definidas.
Animação longa, em loop sem pausa, ou que esconda conteúdo.
Fundos bordô fora das seções escuras previstas.
Números, casos e depoimentos que não sejam reais.