11
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