Autos & Margem
v2
Manual de marca · Treinamento IA Jurídica · Edição 02

Autos &
Margem

A identidade nasce de onde o trabalho acontece: o papel do processo, a tinta do protocolo e a anotação que alguém escreveu na lateral da folha, à mão, para o próximo que fosse ler.

Instrutores
Dr. Pablo Chaer · Carolina Belei
Produto
Capacitação para Escritórios em IA
Emissão
31 de julho de 2026
Marca
Margem · aprovada
A tese estética

Uma marca que só pode ter vindo do processo

Um adjetivo não é uma ideia. Sofisticado, moderno e confiável descrevem qualquer escritório do país e não decidem uma única linha de layout. O que decide é a colisão entre dois mundos concretos — e essa marca nasce de uma colisão que nenhum concorrente pode pegar emprestada sem parecer cópia.

A tese, em uma frase

Os autos físicos de um processo brasileiro — papel almaço creme, tinta de protocolo, numeração de folha, rubrica na lateral — aplicados a um produto de inteligência artificial, com uma inversão: a IA nunca reescreve o documento, ela vive na margem.

A inversão é o produto inteiro traduzido em imagem. A regra que o próprio método repete em todo material é que o Claude não conversa com o lead, ele ajuda o advogado a responder; a revisão humana fica no centro, como recomenda a OAB. A identidade diz a mesma coisa antes de qualquer texto: o corpo do documento continua pertencendo ao advogado, e tudo o que a máquina acrescenta entra recuado, ao lado, marcado por um filete — do jeito que um parecerista anota a folha de outro.

Daí vem a decisão cromática que já existia e que este manual apenas aprofunda: o creme não é um fundo bonito, é papel; o marinho não é uma cor corporativa, é tinta; o ouro é o filete gravado da capa dura; e o terracota é a única coisa da paleta que tem temperatura de mão humana. A tensão entre o institucional e o quente é a assinatura. Diluir essa tensão devolve a marca ao lugar de onde ela precisa sair.

O acabamento sai do mesmo lugar. Pasta que passou por dez mãos tem o canto gasto e redondo; folha recém-cortada tem o canto vivo. Papel apoiado projeta sombra curta com a cor da mesa, nunca um borrão cinza. A folha 06 transforma essa observação em token — raio, elevação e movimento deixam de ser gosto do dia e viram sistema, com escala, regra de aplicação e demonstração ao lado.

Teste da tese

Cubra o logo de qualquer peça. Alguém do meio jurídico consegue dizer de qual projeto ela é apenas pela linguagem visual?

Sim — nenhum curso de IA para advogados usa o vocabulário dos autos. O mercado inteiro usa o vocabulário do software.

O que a marca se recusa a fazer

Parecer empresa de tecnologia. É a recusa que define o posicionamento: o expert se diferencia publicamente de quem vende IA sem entender de Direito, e uma identidade de startup contradiria em silêncio tudo o que a copy afirma em voz alta.

As três direções que foram para a mesa

Nenhuma delas é variação da outra. Vieram de mundos de origem diferentes, e a escolha foi decidida pelo comprador — sócio de escritório, quase sempre acima dos quarenta, desconfiado de automação agressiva e sensível a risco disciplinar — e não por gosto.

Direção A · escolhida

Autos & Margem

Mundo de origem: os autos físicos do processo brasileiro do século XX — papel almaço, carimbo de protocolo do fórum, numeração de folha, rubrica na lateral.

Por que vende: traduz a promessa central de compliance em imagem, sem precisar escrever a palavra compliance em lugar nenhum.

Risco: se o filete e a numeração forem aplicados sem contenção, o material vira pastiche de cartório.

Direção B · descartada

Placa de Bronze

Mundo de origem: a placa gravada na fachada da repartição — simetria axial, letra gravada em metal, luz raspante, brasão.

Por que caiu: é a estética que todo escritório tradicional já usa. Autoridade sem diferença é autoridade que ninguém enxerga.

O que ficou dela: o filete de ouro como gravação, nunca como brilho.

Direção C · descartada

Arquivo Morto

Mundo de origem: o subsolo do fórum às nove da noite — prateleira de metal, pasta amarrada com barbante, ficha datilografada, luz de sódio âmbar.

Por que caiu: lindíssima e desconfortável. Vende a dor do passado com força, e vende o futuro com dificuldade.

O que ficou dela: a luz com uma única direção e o grão que dá corpo a toda superfície.

Marca

Quatro propostas, uma escolhida

Quatro esqueletos diferentes foram à mesa: um cabeçalho de documento, um símbolo, uma barra e um selo. Cada um passou pelas mesmas quatro provas — positivo sobre papel, monocromia de uma tinta só, negativo sobre campo escuro e redução ao tamanho de uma moeda. A decisão está tomada e registrada abaixo. As outras três continuam na folha como histórico, não como alternativa em aberto.

Decisão · 31 de julho de 2026

A marca é a Margem, proposta 03

Ela venceu porque é a única que não precisa ser explicada: a barra de anotação já aparece em toda peça do sistema, e o logo passa a ser a versão intensificada de um elemento que o material repete cem vezes. Marca e gesto de assinatura viram a mesma coisa — economia rara, e o oposto de um símbolo que só existe no canto superior esquerdo.

O que a decisão obriga: a barra terracota nunca é decorativa em peça alguma, porque agora ela é marca. Onde a barra aparece sozinha, sem o nome ao lado, ela precisa estar em contexto que já identifique o emissor — caso contrário, entra a versão com nome.

Arquitetura antes do desenho

O núcleo da marca é IA JURÍDICA, a guarda-chuva. O descritor abaixo dele é intercambiável e identifica a linha: Capacitação para Escritórios em IA para o treinamento in-company de alto valor, e na Prática para o curso on-line. Isso preserva a nomenclatura que o próprio expert passou a usar a partir de novembro de 2025, sem obrigar dois logos concorrentes a disputar a mesma memória.

Proposta 03

Margem

Marca aprovada

A marca é o próprio gesto de assinatura da identidade: a barra vertical de anotação lateral, com o nome recuado ao lado dela. A vantagem é a economia — toda peça já usa esse filete, e o logo passa a ser a versão intensificada de um elemento que aparece cem vezes. A limitação conhecida, e aceita na decisão: uma barra sozinha não é distintiva o bastante para funcionar como símbolo isolado sem o nome ao lado, o que restringe o uso do ícone a contextos onde o emissor já está identificado.

IA JURÍDICA CAPACITAÇÃO PARA ESCRITÓRIOS Principal
IA JURÍDICA CAPACITAÇÃO PARA ESCRITÓRIOS Uma tinta
IA JURÍDICA CAPACITAÇÃO PARA ESCRITÓRIOS Negativo
IA IA
Teste da moeda

Histórico · as três propostas arquivadas

Ficam registradas pelo raciocínio, não como plano B. Nenhuma delas volta à mesa sem uma decisão nova e datada.

Proposta 01

Chancela

Arquivada

O nome deixa de ser um título e vira o cabeçalho de um documento oficial: dois filetes com terminação em pé, o nome centralizado entre eles e o descritor em registro de protocolo. Era a proposta mais sóbria e a mais fácil de carimbar em qualquer canto de qualquer peça. Caiu por centralização: o sistema inteiro é alinhado à esquerda, e a marca puxava a composição para o eixo central.

IA JURÍDICA CAPACITAÇÃO PARA ESCRITÓRIOS Principal
IA JURÍDICA CAPACITAÇÃO PARA ESCRITÓRIOS Uma tinta
IA JURÍDICA CAPACITAÇÃO PARA ESCRITÓRIOS Negativo
IA IA
Teste da moeda
Proposta 02

Colchete

Arquivada

O colchete pertence aos dois mundos ao mesmo tempo: na citação jurídica ele marca a intervenção de quem transcreve, e na engenharia de prompt ele delimita o comando. A abertura em tinta e o fechamento em terracota carregavam o argumento do método. Caiu por concorrência interna: dois sinais gráficos fortes — colchete e barra de margem — disputariam a mesma memória em toda peça.

IA JURÍDICA CAPACITAÇÃO EM IA Principal
IA JURÍDICA CAPACITAÇÃO EM IA Uma tinta
IA JURÍDICA CAPACITAÇÃO EM IA Negativo
IA IA
Teste da moeda
Proposta 04

Protocolo

Arquivada

Um selo retangular com o canto superior direito chanfrado, como a folha que já passou pela autuação. Era a proposta com mais personalidade e a mais arriscada: o contorno fechado exige área de proteção generosa e perde definição quando reduzido demais. O chanfro sobreviveu à decisão em outro lugar — virou o canto vivo da etiqueta, documentado na folha 07.

IA JURÍDICA CAPACITAÇÃO EM IA · ESCRITÓRIOS Principal
IA JURÍDICA CAPACITAÇÃO EM IA · ESCRITÓRIOS Uma tinta
IA JURÍDICA CAPACITAÇÃO EM IA · ESCRITÓRIOS Negativo
IA IA
Teste da moeda
Área de proteção e tamanho mínimo

A área livre ao redor da marca equivale à altura da letra I do nome em todos os quatro lados. Nada entra nesse perímetro — nem texto, nem filete, nem borda de foto.

Tamanho mínimo: 140 px de largura para a versão horizontal em tela, 32 mm em impresso, e 24 px para o símbolo isolado. Abaixo disso, use apenas o símbolo.

Usos proibidos
  • Distorcer, inclinar ou condensar a marca para caber em um espaço — o espaço é que muda
  • Aplicar sombra, contorno, brilho ou qualquer efeito sobre a marca
  • Arredondar a barra de anotação ou trocar a espessura dela: a barra é reta, cheia e da altura do nome
  • Recolorir fora dos três esquemas aprovados nesta página
  • Assentar sobre fotografia sem um campo de cor sólido por baixo
  • Reescrever o descritor com nome de produto que não exista na documentação
Nota de produção

As marcas nesta folha são desenhadas com texto vivo em Fraunces para permitir avaliação em tela. Com a escolha feita, o passo seguinte é converter o traçado da Margem em curvas e entregar em SVG, EPS e PNG com fundo transparente, nas quatro versões e nos três esquemas de cor. As três arquivadas não entram nessa entrega.

Sistema de cor

Quatorze tintas com papel definido

A paleta é elenco, não catálogo. Cada cor tem uma função dramática e uma matéria de origem — se não dá para nomear de onde a cor veio, ela veio de um seletor de cor, e cor de seletor é a marca d'água mais barata que existe. Clique em qualquer chapa para copiar o valor.

Dominante e superfície

Ocupam de 60 a 75 por cento de qualquer peça

Suporte

De 15 a 30 por cento — hierarquia dentro do texto

Acento

De 5 a 10 por cento — acento espalhado é acento morto

Cor que não é preenchimento: luz e sombra

Nenhuma cor nova entra aqui. Estas são as mesmas quatorze tintas com opacidade baixa, cumprindo duas funções que separam material caro de material apressado: iluminar o canto de uma superfície e tingir a sombra do que está apoiado nela.

Três luzes · sempre do alto à esquerda
  • --luz-ouro — a entrada de luz padrão de toda superfície clara. Ouro a 14 por cento, elipse ampla, canto superior esquerdo
  • --luz-ouro-fraca — a mesma luz a 9 por cento, para superfície pequena, onde a luz forte vira mancha
  • --luz-tinta — o adensamento no canto oposto, com a tinta a 9 por cento. É o que impede a superfície de parecer plana
--luz-ouro: radial-gradient( 130% 120% at 6% -10%, rgba(201,162,74,.14), transparent 56%);

Por que em porcentagem: elipse medida em pixel encolhe junto com o elemento e vira bolha em superfície pequena. Medida em porcentagem, a mesma receita serve à página inteira e a uma etiqueta de 100 px.

Sombra tingida · a cor diz o que a peça é
  • Sombra neutra — tinta profunda #0f1a2b em opacidade baixa. O padrão de tudo que é conteúdo
  • Sombra de ouro — reservada ao que é regra: selo, bloco de norma, marca aprovada
  • Sombra de terracota — reservada ao que é anotação: item ativo do índice, etiqueta de alerta
--e-ouro: inset 0 0 0 1px rgba(201,162,74,.30), 0 3px 8px -3px rgba(166,126,46,.22), 0 18px 40px -20px rgba(201,162,74,.55);

Proibido: sombra em preto puro e sombra cinza. Preto sobre creme suja o papel e entrega o material como feito no automático.

Pares de contraste medidos · critério WCAG 2.1
Arraste a tabela para o lado
ParRazãoTexto normalTexto grandeOnde vale
Tinta sobre Papel Almaço13,15:1Passa AAAPassa AAAPar principal de leitura — todo corpo de texto
Tinta Suave sobre Papel6,57:1Passa AAPassa AATexto secundário e legenda
Papel sobre Tinta13,15:1Passa AAAPassa AAACampo escuro e botão primário
Ouro Claro sobre Tinta8,76:1Passa AAPassa AARótulo de destaque em campo escuro
Terracota Clara sobre Tinta5,53:1Passa AAPassa AAAcento em campo escuro
Terracota sobre Papel4,48:1ReprovaPassa AASó a partir de 24 px, ou 19 px em peso alto
Tinta Apagada sobre Papel3,50:1ReprovaPassa AANunca em informação essencial
Ouro Profundo sobre Papel3,25:1ReprovaPassa AATítulo acima de 24 px, nunca corpo
Ouro sobre Papel2,09:1ReprovaReprovaFilete, luz e preenchimento apenas — jamais texto
Combinações aprovadas
  • Papel Almaço com Tinta e um único filete de Terracota
  • Campo de Tinta com Papel Almaço, acento em Ouro Claro
  • Papel Almaço com Tinta e selo em Ouro, sem Terracota na mesma peça
  • Gradação entre Tinta e Tinta Profunda, sempre no mesmo tom e sempre a 165 graus
Combinações proibidas
  • Ouro e Terracota disputando o mesmo nível de destaque na mesma peça
  • Qualquer gradação que atravesse o círculo cromático — roxo, violeta, ciano de software
  • Terracota como cor de corpo de texto
  • Branco puro cobrindo mais de um quinto da área de uma peça de marca
  • Neon, luz de tela e cor de alta saturação em qualquer posição
  • Sombra preta ou cinza em qualquer elemento, sobre qualquer fundo
Sistema tipográfico

Serifa para o que persuade, sans para o que informa

Duas famílias, três registros. Fraunces carrega o eixo óptico variável, o que permite dela extrair duas vozes distintas — alta e afiada nos tamanhos grandes, encorpada e legível nos pequenos. Manrope informa e organiza. O terceiro registro, o de protocolo, sai de Manrope tratada com caixa alta, entrelinhamento aberto e números tabulares, sem introduzir uma terceira família.

Fraunces · display

Território: serifa de alto contraste, do lado da autoridade editorial. Nos tamanhos grandes vai a opsz 144, com WONK 1 ligado — as alternativas irregulares do desenho são o que impede a marca de soar corporativa.

Entrelinhamento entre 1,02 e 1,08. Entreletra negativa de 0,014em a 0,036em conforme o corpo cresce.

Manrope · texto e protocolo

Território: grotesca neutra de sistema. Corpo em 17 px com entrelinhamento 1,62 e linha nunca acima de 70 caracteres.

No registro de protocolo: 10 a 11 px, peso 700, caixa alta, entreletra de 0,14em a 0,26em conforme o corpo diminui, e números tabulares sempre ligados.

D1 · capaFraunces 500 · 56 a 104 px · alt 1,02 · entre -0,036em
Teoria não resolve
D2 · aberturaFraunces 600 · 34 a 56 px · alt 1,06 · entre -0,024em
O andar de cima do que você já usa
T3 · título de blocoFraunces 600 · 25 px · alt 1,20 · entre -0,014em
Comandos validados por área do Direito
CorpoManrope 400 · 17 px · alt 1,62 · máximo de 70 caracteres
O treinamento é conduzido de mesa em mesa, com os processos reais da equipe abertos na tela. Cada participante trabalha o próprio caso, e o material sai do dia com o nome do escritório na capa.
Corpo menorManrope 400 · 14,5 px · alt 1,55
Usado em legenda de tabela, nota de rodapé, descrição de componente e texto de apoio dentro de bloco de margem.
ProtocoloManrope 700 · 11 px · caixa alta · entre 0,20em
Capacitação para escritórios em IA · edição 02 · folha 04
CitaçãoFraunces itálico 400 · 21 a 30 px · WONK 1 · máximo de 26 caracteres por linha
O advogado que segue no manual compete em condição desigual com a máquina
NúmeroFraunces 600 · tabular · versal · entre -0,03em
1.000 · 70 · 14

Entreletra por registro

O ajuste que mais separa material caro de material apressado, e o menos visível quando está certo. A regra é simples de decorar: quanto maior o corpo, mais fechada a entreletra; quanto menor e mais alta a caixa, mais aberta.

Arraste a tabela para o lado
RegistroTokenValorPor quê
Display 56 a 104 px--tr-d1-0,036emNo corpo grande, o espaço entre letras cresce sozinho e abre buracos dentro da palavra
Display 34 a 56 px--tr-d2-0,024emTítulo de seção — fecha o suficiente para o bloco ler como uma massa só
Título 20 a 28 px--tr-d3-0,014emAjuste leve: mais que isso começa a colar as serifas
Corpo 14 a 17 pxzero0Manrope já vem calibrada para leitura em tela. Mexer aqui é regressão
Número tabular--tr-num-0,030emDígito ocupa mais largura que letra: fechar impede o número de parecer solto
Protocolo 10 a 11 px--tr-caps+0,20emCaixa alta pequena sem abertura vira mancha cinza em tela pequena
Etiqueta 9 a 10 px--tr-caps-l+0,26emQuanto menor o corpo em caixa alta, maior a abertura necessária
Rótulo dentro de peça--tr-caps-m+0,14emEm criativo, a abertura cai um pouco porque a distância de leitura é maior
Regra do salto

Entre o display e o nível seguinte de uma mesma composição, o salto mínimo é de três vezes. Uma capa de 96 px conversa com um apoio de 17 px, nunca com um de 64. Hierarquia tímida é a assinatura mais fácil de reconhecer em material feito às pressas.

Números

Todo número que possa ser comparado — valor, quantidade, data, folha — usa números tabulares em Fraunces ou Manrope. Separador de milhar com ponto e decimal com vírgula. Número grande sempre acompanhado da unidade em registro de protocolo, nunca solto.

Citação

Fala do expert ou de cliente entra em Fraunces itálico, sem aspas curvas, com o colchete de abertura em terracota no lugar da aspa. Atribuição sempre no registro de protocolo, com nome e origem — voz de cliente jamais aparece sem dono.

Sistema de fundo

Nenhuma superfície desta marca é chapada

Fundo liso é o que faz uma peça parecer renderizada por software em vez de impressa. Toda superfície daqui em diante carrega três coisas: grão, uma entrada de luz vinda do alto à esquerda e pelo menos uma segunda camada tonal. As quatro receitas abaixo cobrem todos os casos, estão demonstradas aqui mesmo e podem ser copiadas direto para o código.

01 Papel Almaço

SUP-01 · Papel Almaço

A superfície-mãe. Creme com fibra horizontal de um pixel a cada cinco, luz fraca de ouro entrando pelo canto e o grão global por cima. Fundo de leitura longa, documento e slide de conteúdo.

background-color: var(--bg); background-image: var(--luz-ouro-fraca), repeating-linear-gradient(0deg, rgba(21,39,63,.022) 0 1px, transparent 1px 5px);
02 Luz de Ábside

SUP-02 · Luz de Ábside

Creme com a entrada de luz dourada aberta no alto à esquerda e o adensamento de tinta no canto oposto. Elipses em porcentagem, para a receita servir da página inteira a uma vitrine de 200 px. Uso: capa, abertura de seção e criativo claro.

background-image: radial-gradient(120% 100% at 10% -4%, var(--gold-20), transparent 58%), radial-gradient(110% 100% at 98% 102%, var(--ink-06), transparent 56%);
03 Campo de Tinta

SUP-03 · Campo de Tinta

Marinho em gradação de 165 graus, da tinta para a tinta profunda, com o halo de ouro no mesmo canto de luz. O grão inverte de multiplicar para clarear, porque grão escuro sobre campo escuro desaparece. Uso: peça de peso, criativo de contraste, rodapé.

background-color: var(--ink); background-image: radial-gradient(120% 110% at 10% -8%, rgba(201,162,74,.16), transparent 58%), linear-gradient(165deg, var(--ink) 0%, var(--ink-deep) 68%); /* grão: mix-blend-mode: screen; opacity: .055 */
04 Pauta de Protocolo

SUP-04 · Pauta de Protocolo

A pauta do formulário, com dissolução nas duas pontas para nunca virar grade fechada, e a mesma luz fraca por baixo. Uso: bloco técnico, tabela de dados, grade de tokens e qualquer área que precise soar como registro.

background-image: var(--luz-ouro-fraca), repeating-linear-gradient(180deg, transparent 0 27px, var(--ink-10) 27px 28px); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
Sobreposição · Fólio Fantasma

Uma letra ou número em Fraunces itálico, em corpo colossal, sangrando o canto inferior direito com opacidade entre 4 e 6 por cento. É o que dá escala e sensação de página numerada a uma peça sem acrescentar nenhum elemento novo. Está rodando agora mesmo na capa deste manual.

Limite: uma por peça. Duas marcas d'água ao mesmo tempo cancelam uma à outra e viram textura sem intenção.

font-family: var(--serifa); font-style: italic; font-weight: 300; font-size: 70cqw; line-height: .7; opacity: .055; user-select: none;
Como combinar
  • SUP-01 com SUP-04 em blocos vizinhos, para separar leitura de registro
  • SUP-02 na abertura, SUP-01 no corpo — a luz anuncia, o papel sustenta
  • SUP-03 no máximo duas vezes por documento ou por lote de criativos

Nunca: duas superfícies com luz vindo de direções diferentes na mesma peça. A luz da marca vem do alto à esquerda, sempre, e as sombras caem para baixo.

Grade, raio, elevação e movimento

O canto gasto do processo

Pasta que passou por dez mãos tem o canto redondo. Folha recém-cortada tem o canto vivo. Papel apoiado na mesa projeta uma sombra curta com a cor da mesa, nunca um borrão cinza. Esta folha transforma essas três observações em token, com escala, regra de aplicação e demonstração ao lado — e é o que substitui o contorno de um pixel que endurecia o material anterior.

A ordem de tentativa
  1. Respiro. Aumente o espaço acima e abaixo antes de qualquer outra coisa. Espaço vazio é o material mais caro da peça e o que mais comunica valor.
  2. Escala. Se o bloco precisa se destacar, ele fica maior ou menor que o vizinho. Diferença de tamanho resolve noventa por cento dos casos.
  3. Filete único. Um traço de dois pixels, em um único lado, e no lado que significa algo: à esquerda quando é anotação, no topo quando é cabeçalho.
  4. Campo de cor com luz. Diferença tonal suave com a entrada de luz no alto à esquerda.
  5. Elevação. O bloco sobe do papel com sombra em três camadas e contorno interno. É isto que agrupa — não a borda.
  6. Caixa com borda. Só quando o conteúdo é tabular ou quando itens comparáveis precisam de limite físico. Nunca por hierarquia.
A regra do lado vivo

O arredondamento nunca corta a assinatura. O canto arredonda em todo lado livre e permanece vivo no lado em que o filete de margem encosta. É o que mantém a barra de anotação com a mesma leitura de antes, agora apoiada num bloco que respira.

/* bloco de margem, assinatura, item de índice */ border-radius: 0 var(--r-3) var(--r-3) 0; /* bloco de código */ border-radius: 0 var(--r-1) var(--r-1) 0;

Regra do encaixe: raio de dentro igual ao raio de fora menos a folga entre os dois. Um painel de 16 px com 4 px de folga hospeda um bloco de 12 px; com folga maior, o bloco interno cai para 10 ou 8. Dois raios iguais encaixados denunciam a mão apressada.

Grade de doze colunas

Contêiner de 1180 px, calha entre 16 e 32 px, margem lateral em clamp(1.25rem, 4vw, 2.5rem).

A mecânica de composição é assimétrica por princípio: o conteúdo vive nas colunas 1 a 7 ou 8, e a coluna livre à direita é a margem — o lugar onde entram nota, dado e comentário. É a tese aplicada à escala da página.

Uma quebra por peça. Um elemento sangra a margem, ou avança sobre a calha, ou gira dois graus. Uma quebra é gesto. Três são bagunça. Nenhuma é modelo pronto.

Escala de espaço

Base de 8 px, com passos em 8, 16, 24, 40, 64 e 104. Entre seções, clamp(4.5rem, 8vw, 7.5rem). Peça apertada não pertence a esta marca — a generosidade de espaço é parte do que sustenta o valor cobrado.

O que continua vivo

Régua de tabela, filete de cabeçalho, barra da marca, sangria de peça e o arquivo final de todo criativo exportado. O arredondamento é da moldura do manual e da interface — o que sai para o feed sai com o canto do formato, sem moldura nenhuma.

Escala de raio

Seis degraus, cada um amarrado a um peso de elemento. O erro que a escala existe para impedir é o mais comum de todos: o mesmo raio no botão, no painel e na etiqueta, como se os três tivessem a mesma importância.

0
--r-vivo · lado do filete, régua, sangria
8 px
--r-1 · detalhe e bloco de código
10 px
--r-2 · controle: botão e campo
12 px
--r-3 · superfície de conteúdo
16 px
--r-4 · peça e painel largo
pílula
--r-pil · selo e etiqueta, com o canto da autuação
Arraste a tabela para o lado
TokenValorOnde se aplica
--r-vivo0O lado em que o filete de margem encosta · régua de tabela · barra da marca · sangria de peça · todo criativo exportado
--r-18 pxDetalhe: bloco de código, ícone em caixa, chip pequeno dentro de outro bloco
--r-210 pxControle: botão primário e secundário, campo de formulário, item de navegação
--r-312 pxSuperfície: bloco de margem, campo, vitrine de superfície, assinatura, cabeçalho de documento
--r-416 pxPeça: palco de componente, quadro de tabela, grade de marca, bloco de DNA, moldura de mockup
--r-pil999 pxPílula: selo, etiqueta, marcador de lista, aviso flutuante, item ativo da barra em tela pequena

Elevação

Toda sombra desta marca tem três camadas — linha de contato de um pixel, sombra curta de apoio e sombra longa de ambiente — e nenhuma delas é preta. A tinta profunda tinge o que é conteúdo, o ouro tinge o que é regra e o terracota tinge o que é anotação. Passe o ponteiro sobre as amostras.

--e-contato
Contorno interno de 1 px. Agrupa sem cercar — substitui a borda externa
--e-1
Papel apoiado: bloco de margem denso, assinatura, quadro de tabela
--e-2
Papel destacado: campo, palco de componente, vitrine, grade de marca
--e-3
Elevação longa: mockup de aplicação e a marca aprovada
--e-ouro
O que é regra: selo, bloco de norma, decisão registrada
--e-terra
O que é anotação: etiqueta de atenção, item ativo do índice
--e-fundo
Depressão: bloco de código e campo de entrada afundam um pixel
--e-noite
A mesma lógica sobre campo escuro, com a luz de contato invertida
A receita da elevação
--e-2: 0 1px 0 rgba(21,39,63,.06), /* contato */ 0 6px 14px -6px rgba(15,26,43,.14), /* apoio */ 0 26px 52px -26px rgba(15,26,43,.38),/* ambiente */ inset 0 1px 0 rgba(255,255,255,.6); /* luz no topo */

A quarta linha é o detalhe que a maioria pula: uma luz branca de um pixel na aresta superior, porque a fonte de luz do documento vem de cima. Sem ela, o bloco parece recortado e colado; com ela, parece apoiado.

O que a elevação aposentou
  • Contorno de um pixel nos quatro lados para separar conteúdo
  • Sombra de uma camada só, difusa e cinza
  • Sombra em preto puro sobre fundo creme — suja o papel
  • Cartão com borda e sombra ao mesmo tempo: escolha um, e o escolhido é a sombra
  • Elevação sem função, aplicada a tudo igualmente — três blocos vizinhos no mesmo nível não têm hierarquia nenhuma

Movimento

Uma curva só para o sistema inteiro, e ela desacelera na chegada: sai rápido e assenta devagar, como papel que encosta na mesa. Três durações cobrem tudo o que a marca precisa animar.

Tokens de movimento
--mov: cubic-bezier(.16, 1, .3, 1); --t-toque: 200ms; /* cor, contorno, estado de passagem */ --t-elev: 250ms; /* subida e sombra */ --t-revela: 480ms; /* entrada de bloco na primeira aparição */

Anima: translação vertical curta, opacidade e sombra. Nunca anima: escala de texto, giro, salto elástico, brilho ou piscada.

Acessibilidade: quem pede menos movimento no sistema operacional recebe a página parada. A regra prefers-reduced-motion está ligada nesta folha e é obrigatória em qualquer implementação.

Demonstração · passe o ponteiro
Conteúdo
Regra
Anotação

Seis pixels de subida, sombra trocando de nível em 250 ms. O gesto é o mesmo nos três; o que muda é a cor da sombra, e é ela que informa o papel do bloco antes de qualquer texto ser lido.

Componentes

Sete peças que montam qualquer material

Todos demonstrados renderizados, cada um com o raio e a elevação da folha anterior já aplicados. Quem construir uma tela nova só com o que está abaixo chega ao mesmo resultado sem precisar perguntar qual cinza usar nem quanto arredondar.

Botão · três níveis

Raio de 10 px nos dois primeiros. O primário carrega o maior contraste da peça, a gradação de 165 graus da tinta, uma base gravada em ouro profundo que acende no toque e a luz de contato interna no topo. O secundário troca a borda por contorno interno de um pixel. O terciário é texto com sublinhado de dois pixels em terracota, deslocado seis pixels — a única sublinha da marca. Passagem do mouse: dois pixels de subida em 250 ms. Foco de teclado: anel de terracota quente com folga de três pixels.

Bloco de margem · substitui o cartão
Dia 2 · gestão e captação

O andar de cima do sistema que o escritório já usa

O software jurídico continua cuidando de processo, prazo e financeiro. O sistema entregue cobre o que ele não cobre: pré-cliente, operação administrativa e comunicação repetida.

Filete à esquerda, canto vivo do lado do filete e 12 px nos três lados livres. Na versão densa entram a luz fraca no canto, o banho tonal da cor do filete e a elevação de papel apoiado. Terracota quando o bloco é anotação; ouro quando é regra, com a sombra tingida junto; tinta quando é apenas agrupamento.

Campo · agrupamento sem contorno

Diagnóstico prévio

O escritório responde a um formulário antes do dia. Os primeiros trinta minutos devolvem contradições encontradas nas respostas dele — não uma abertura genérica.

Luz no canto superior esquerdo, gradação diagonal curta, elevação de papel destacado e contorno interno de um pixel. Raio de 12 px. Zero borda externa. É o que ocupa o lugar do cartão quando itens precisam parecer irmãos.

Citação
A maioria dos cursos de IA para o Direito é teórica. E teoria não resolve petição nenhuma.
Dr. Pablo Chaer · Instagram · maio de 2026

O colchete de abertura em terracota substitui a aspa. Atribuição obrigatória com nome e origem: fala de cliente nunca é apresentada como fala do expert, e o contrário também vale.

Destaque numérico
14 Escritórioscapacitados entre agosto de 2025 e julho de 2026
2 Instrutoresum para a equipe, outro para o negócio

Número em Fraunces tabular com entreletra fechada, unidade em protocolo terracota e a explicação em corpo menor com no máximo 22 caracteres por linha. O número é o elemento de escala dramática da peça — só um por composição.

Selo e etiqueta
Turma de até 10 In-company Folha 07

Pílula com o canto inferior esquerdo vivo — o canto que a autuação carimbou, herdado da proposta 04 e a única liberdade geométrica da identidade. Ouro para informação de programa, com sombra de ouro; terracota para o que exige atenção; tinta apagada para registro neutro. Nunca mais de dois selos visíveis ao mesmo tempo.

Tabela · a caixa legítima
BlocoInstrutorFormatoDuração
Letramento e comandos por áreaDr. Pablo ChaerPresencial, com opção on-line1 dia
Gestão, captação e marketingCarolina BeleiOn-line, ao vivo1 dia
Suporte direto pós-treinamentoAmbosGrupo30 dias

Sem filete vertical em lugar nenhum. O quadro de 16 px segura a tabela inteira com elevação de papel apoiado; dentro dele, cabeçalho em protocolo sobre régua de 1,5 px, linhas separadas por régua clara de canto vivo, alternância marcada por diferença tonal e não por contorno, números sempre tabulares. Em tela pequena, a tabela rola dentro do próprio quadro — a página nunca rola de lado.

Aplicações

O sistema saindo do papel

Cinco superfícies onde a marca vive todo dia. Cada uma mantém os dois gestos de assinatura — o filete de margem e o registro de protocolo — e nenhuma repete a composição da outra. As três primeiras aparecem em moldura elevada: o arredondamento da moldura é deste manual, o arquivo exportado sai com o canto vivo do formato.

Criativo estático · 1080 × 1080
Pablo Chaer · IA Jurídica

Teoria não resolve petição nenhuma

Capacitação para escritórios 01

Campo de tinta com a gradação de 165 graus e o halo de ouro no canto de luz. Registro de protocolo no topo, filete de margem sangrando a lateral inteira e um algarismo de fólio ao fundo. Texto ocupa entre 20 e 60 por cento do quadro, sempre.

Capa de carrossel · 1080 × 1350
Pablo Chaer · IA Jurídica

A melhor IA para peticionamento não é a mais popular

Arraste Folha 01 de 08

Capa clara para contrastar com o criativo escuro no mesmo feed. Filete curto no lugar da barra lateral, numeração de folha no rodapé e a headline ocupando o terço central. Uma ideia por folha, como o template atual já faz.

Slide · 16 × 9
Bloco 2 · captação 14

O Claude não conversa com o lead

Ele ajuda você a responder. A revisão humana fica no centro do método.

Cabeçalho de protocolo sobre filete de ouro, numeração à direita, título alinhado à esquerda com apoio em no máximo duas linhas. Sem caixa, sem ícone, sem lista de tópicos.

Cabeçalho de documento
IA JURÍDICA CAPACITAÇÃO PARA ESCRITÓRIOS Proposta · folha 01
Capacitação para Escritórios em IA
Dois dias, dois instrutores, turma de até dez pessoas
Emitido em 31 de julho de 2026

Papel branco é permitido aqui, porque documento é documento — mas com a luz de ouro no canto e a elevação de papel destacado, nunca chapado. Marca à esquerda, protocolo à direita, régua de 1,5 px separando cabeçalho e corpo.

Assinatura de e-mail
Dr. Pablo Chaer Defensor Público · instrutor do primeiro dia IA Jurídica · capacitação para escritórios
Carolina Belei Gestão, captação e marketing · instrutora do segundo dia IA Jurídica · capacitação para escritórios

A barra vertical da marca no lugar de foto ou logotipo, com o canto vivo do lado dela e 12 px nos outros três. Terracota para Pablo, ouro para Carolina — o mesmo gesto identificando duas vozes. Sem ícone de rede social, sem imagem anexada, sem aviso legal de rodapé.

Lei visual

O que reprova uma peça

Cada par abaixo está renderizado de verdade, lado a lado. O lado esquerdo é uma peça que qualquer gerador produziria em segundos, e é exatamente por isso que ela não pode sair com esta marca.

Não

Mesmo raio em tudo, borda cinza nos quatro lados e sombra sem cor nem direção

Programa do treinamentoDois dias, dois instrutores
Turma de até 10 Quero a proposta
Sim

Raio por peso do elemento, contorno interno no lugar da borda e sombra tingida

Programa do treinamento

Dois dias, dois instrutores

Turma de até 10 Quero a proposta
Não

Fundo chapado, sem grão, sem luz, sem segunda camada

Capacitação em IA

Para escritórios de advocacia que querem mais produtividade

Sim

Papel com fibra, luz entrando pelo alto à esquerda e sombra com cor de tinta

Capacitação para escritórios

O operacional consome o seu dia

Com método, ele vira receita.

Não

Três cartões idênticos, ícone de biblioteca e ritmo uniforme

Segurança
Produtividade
Resultado
Sim

Filete único à esquerda, ritmo desigual e nenhum ícone de biblioteca

Compliance

Revisão humana obrigatória em todo texto que sai com a assinatura do advogado

Tempo

Qualificar um lead cai de quinze para cerca de três minutos

Não

Gradação de software atravessando o círculo cromático

Inteligência artificial para advogados A tecnologia que está mudando o Direito
Sim

Campo de tinta em 165 graus, com halo de ouro na direção de luz do resto

Dr. Pablo Chaer

Não somos mais um vendendo IA para advogados

O método foi construído na prática, com processos reais.

Não

Tudo centralizado, sans genérica, hierarquia tímida e botão arredondado igual ao painel

Aprenda a usar IA no seu escritório

Um treinamento completo e prático para toda a equipe jurídica

Saiba mais
Sim

Alinhamento à esquerda, salto de escala real e um acento só

Dois dias · dois instrutores

O primeiro dia transforma a equipe

O segundo transforma o negócio

Marcar a apresentação
Não

Número tratado como texto comum, sem unidade e sem contexto

Mais de 1.000 profissionais treinados

E mais de 100 comandos validados por área do Direito

Sim

Um número em escala dramática, com unidade em protocolo e a ressalva junto

1.000 Profissionaisformados pelo Dr. Pablo Chaer ao longo da carreira como formador
Lista de reprovação imediata
  • Emoji, ícone de biblioteca ou vetor de banco em qualquer posição
  • Gradação roxa, violeta, ciano de software ou qualquer neon
  • Fonte fora de Fraunces e Manrope, especialmente as genéricas de sistema
  • Fundo chapado sem grão, sem luz e sem segunda camada tonal
  • Contorno de um pixel nos quatro lados usado para criar hierarquia
  • Sombra preta, cinza, difusa ou de uma camada só
  • Mesmo raio aplicado a botão, painel e etiqueta, como se pesassem igual
  • Canto arredondado no lado em que o filete de margem encosta
  • Composição espelhada, com tudo centralizado e espaçamento uniforme
  • Ilustração tridimensional, personagem de desenho e figura isométrica
  • Foto de banco de imagem com pessoa sorrindo para o computador
  • Peça que repita a mesma diagramação de outra do mesmo lote com o texto trocado
  • Número sem unidade, sem fonte e sem a ressalva de estimativa quando for estimativa
Retrato e imagem

O rosto da marca é um

A hierarquia de retrato tem dois níveis e não é paridade. O Dr. Pablo Chaer é o rosto principal e o sujeito de toda peça; Carolina Belei é presença secundária, creditada nominalmente e nunca sozinha no quadro. As regras abaixo valem para fotografia própria; nenhuma delas autoriza o uso de rosto gerado por software.

Nível 1 · rosto principal · Dr. Pablo Chaer
  • É o sujeito da peça. Quando há um rosto só no quadro, o rosto é o dele. É ele quem assina
  • Escala dominante e posição de comando na composição: ocupa o terço de maior peso e nunca divide o eixo principal com outro rosto
  • Olhar para a câmera em peça de autoridade. Quando a composição precisa de seta, o olhar dirige-se à headline ou ao chamado
  • Ancora peça de autoridade técnica, demonstração de ferramenta e prova de bastidor
  • Enquadramento de meio-corpo ou plano fechado, com testa, olhos e queixo inteiros dentro da área segura — enquadramento que corta o rosto reprova a peça
  • Fundo é personagem: sala de treinamento, mesa com processos, escritório real. Parede vazia é preguiça de direção
  • Texto jamais sobre o rosto. A tipografia ocupa o lado oposto ao olhar
Nível 2 · presença secundária · Carolina Belei
  • Presença, não sujeito. Entra em imagem e em composição de dupla, sempre em escala menor que o rosto principal
  • Nunca sozinha no quadro e nunca como rosto isolado de peça
  • Crédito nominal em texto é a forma correta de citá-la: "conduzido por Pablo Chaer e Carolina Belei", "com a presença dos dois"
  • Fora: ela como protagonista da narrativa e ela falando em primeira pessoa no criativo
  • Mesma grade de cor e mesma luz do rosto principal. Duas fotos com temperaturas diferentes na mesma peça denunciam colagem

Trava com data: nenhuma peça promete a disponibilidade pessoal dela em data específica — chamados do tipo "fale com a Carol" e menção a turma com data e presença dela ficam suspensos até confirmação direta com a equipe.

Linha vermelha, para os dois
  • Depoimento da AMG Advocacia, em peça paga ou orgânica — sem autorização de uso, confirmado em 31 de julho de 2026
  • Nenhuma menção, foto ou detalhe do filho dela
  • Luto e perda familiar fora de qualquer peça de venda
  • Resultado financeiro de outro negócio dela apresentado como resultado deste produto
  • Rosto de cliente sem autorização por escrito para aquela peça específica
  • Rosto gerado por software no lugar de fotografia real dos dois
Diagrama de luz aprovado ROSTO PRINCIPAL REBATE CONTRA LUZ VEM DO ALTO À ESQUERDA · 45 GRAUS · MEIO-DURA
Grade de cor da marca · receita nomeada

Uma foto bem tratada é gosto pessoal. Dez fotos com o mesmo tratamento são identidade. A receita abaixo é a mesma para fotografia e para vídeo, e é replicável em qualquer programa:

  • Temperatura puxada 180 K para o quente, para o branco da camisa encostar no creme do papel
  • Pretos elevados em 6, com o ponto mais escuro parando no marinho da paleta — preto esmagado não pertence a esta marca
  • Altas luzes protegidas, sem estouro: papel e tela nunca queimam
  • Saturação global reduzida em 12, com terracota e ouro preservados em saturação plena — o acento é a única cor que mantém força
  • Grão em 4 por cento, o mesmo do sistema de superfícies, para unificar fotos de sessões diferentes

Prova do lote: as peças lado a lado numa prancheta única antes de exportar. Se uma destoa de temperatura ou de contraste, ela volta para tratamento — depois de publicada, o custo é outro.

Design DNA

O bloco que viaja com toda delegação

A destilação executável desta identidade. Quem produzir página, vídeo, deck ou criativo recebe este bloco inteiro junto com o briefing e não precisa reler o manual para acertar a estética.

DESIGN DNA — Treinamento IA Jurídica · v2 TESE ESTÉTICA: os autos físicos de um processo brasileiro — papel almaço, tinta de protocolo, numeração de folha, rubrica na lateral — aplicados a um produto de inteligência artificial, com a inversão de que a IA nunca reescreve o documento, ela vive na margem. MARCA: Margem, proposta 03, aprovada em 31 de julho de 2026 — barra vertical de anotação em terracota com o nome recuado ao lado. As propostas 01, 02 e 04 estão arquivadas e não voltam à mesa sem decisão nova e datada. PALETA (papel de cada cor): dominante Papel Almaço #f5efe2, matéria de folha envelhecida sob luz de janela · suporte Tinta #15273f e Tinta Suave #4a5568, matéria de tinta permanente azul-preta · acento Terracota #a05c3e, matéria de lacre e carimbo gasto, presente na barra da marca, no filete de margem e no chamado · dissonante Ouro #c9a24a, matéria de filete gravado em capa dura, usado como gravação e como luz de canto, nunca como brilho. TIPOGRAFIA: display Fraunces, território de serifa de alto contraste, opsz 144 e WONK 1 · texto Manrope 400 em 17 px · detalhe Manrope 700 em 11 px, caixa alta e números tabulares, sem terceira família · entreletra por registro: -0,036em no display grande, -0,024em no título de seção, -0,014em no título de bloco, zero no corpo, -0,030em no número, +0,20em no protocolo, +0,26em na etiqueta · salto mínimo de três vezes entre display e o nível seguinte. COMPOSIÇÃO: margem viva, com filete de 2 px à esquerda e conteúdo recuado, no lugar do cartão · grade assimétrica de doze colunas com o conteúdo em 1 a 8 e a coluna livre à direita como margem de anotação · um número ou palavra em escala desproporcional por peça, com contenção no resto · quebra de grade permitida: um elemento sangrando a margem esquerda, uma vez por peça. RAIO: escala de seis degraus — 0 no lado do filete, na régua de tabela, na barra da marca e em todo criativo exportado · 8 px no detalhe e no bloco de código · 10 px no controle (botão, campo) · 12 px na superfície de conteúdo · 16 px na peça e no painel largo · pílula 999 px no selo e na etiqueta, com o canto inferior esquerdo vivo. Regra do lado vivo: arredonda o lado livre, mantém vivo o lado em que o filete encosta. Regra do encaixe: raio de dentro igual ao de fora menos a folga. ELEVAÇÃO: três camadas sempre — linha de contato de 1 px, sombra curta de apoio, sombra longa de ambiente — mais luz branca de 1 px na aresta superior. Nenhuma sombra é preta nem cinza: tinta profunda #0f1a2b tinge o conteúdo, ouro tinge o que é regra, terracota tinge o que é anotação. Contorno interno de 1 px substitui a borda externa. Depressão de 1 px em bloco de código e campo de entrada. MATÉRIA E LUZ: grão fractal em 5 por cento, multiplicando sobre papel e clareando sobre campo escuro · luz sempre do alto à esquerda, em elipse medida em porcentagem para servir da página inteira a uma etiqueta · campo escuro em linear-gradient(165deg, #15273f, #0f1a2b 68%) com halo de ouro no canto de luz · fibra horizontal de 1 px a cada 5 no papel · pauta de protocolo com dissolução nas pontas. Superfície chapada é reprovação. GESTO DE ASSINATURA: (1) a margem viva — filete de 2 px à esquerda com recuo de 24 a 30 px, canto vivo do lado do filete e 12 px nos três lados livres, terracota quando é anotação, ouro quando é regra; executável em qualquer formato em trinta segundos. (2) o registro de protocolo — Manrope 700, 11 px, caixa alta, entreletra 0,20em, sobre um filete de ouro em gradação, carregando referência de edição, bloco ou folha. MOTION: curva única cubic-bezier(.16, 1, .3, 1) · 200 ms para estado de passagem, 250 ms para elevação, 480 ms para revelação de entrada · anima translação vertical curta, opacidade e sombra · nunca anima escala de texto, giro, salto elástico ou brilho · prefers-reduced-motion obrigatório em toda implementação. ANTI-REFERÊNCIAS: (1) startup de inteligência artificial — gradação violeta, neon, ilustração tridimensional. (2) escritório de advocacia genérico — martelo, balança, coluna grega, foto de aperto de mão. (3) infoproduto de internet — contagem regressiva, seta desenhada à mão, texto gritado em amarelo sobre preto. (4) painel de software — cartão com borda cinza de 1 px, mesmo raio em tudo e sombra difusa sem cor.
O que ainda depende de decisão
  • Conversão da marca Margem em curvas e entrega dos arquivos em SVG, EPS e PNG, nas quatro versões e nos três esquemas de cor
  • Sessão fotográfica própria dos dois instrutores, com o diagrama de luz da folha 10, para substituir o acervo de bastidor em peça paga
  • Confirmação da data de retorno da Carolina antes de qualquer peça que dependa da presença dela
valor copiado