// Brandbook

De marca
a gente entende.

// INTRODUÇÃO

Um sistema existe para decidir mais rápido, não para proibir.

A Engenho fala com públicos diversos, muitas vezes na mesma campanha. Por isso, sua identidade precisa ser clara, consistente e reconhecível.

Este documento transforma comportamentos visuais já presentes na marca e no site em critérios de uso.

Três princípios orientam o sistema: a estrutura é fixa, o conteúdo é livre; a marca pode aparecer menos quando o trabalho precisa ser protagonista; e o que não está previsto pode ser criado, desde que respeite os mesmos princípios.

// DNA VISUAL

Cinco princípios que
já governam a marca.

01 Clareza

Comunicação pública é lida por quem tem pressa e pouca paciência. A hierarquia precisa ser óbvia em meio segundo: uma ideia por peça, um nível de destaque, nada competindo.

Consequência prática: no máximo um elemento em cor por composição; título sempre maior que o dobro do corpo; nunca dois pesos de destaque na mesma tela.

[ EXEMPLO ]

Não faltam médicos,
falta estrutura.

Uma frase, um acento, nada mais na peça.

02 Tinta sobre papel

O fundo prioritário é o cinza-papel frio: reduz o brilho e faz o preto parecer impresso. A marca se apresenta com materialidade editorial, não com luminosidade de tela.

Consequência prática: #f2f2f3 é a base prioritária em qualquer mídia, inclusive social. Branco puro é exceção justificada: fotografia, logo de cliente, nosso próprio logo ou peças que pedem esse fundo.

#fff, exceção
#f2f2f3, prioritário
03 Acento único

Um só laranja, usado como sinal e não como superfície. Ele marca o que está vivo: o que se pode clicar, o que está avançando, a palavra que carrega a ideia.

Consequência prática: laranja ocupa até 10% da área da peça. Acima disso, só em peças de convocação: banner de vagas, chamada de evento.

Sinal, não superfície.
90% neutro · 10% acento
04 Método visível

A Engenho vende método, e a identidade mostra isso: numeração tabular, rótulos entre colchetes, comentários com barra dupla. É pontuação de engenharia aplicada a conteúdo editorial.

Consequência prática: toda série ganha número visível. Toda seção abre com [ RÓTULO ] // COMENTÁRIO. É o código que sobrevive à ausência do logotipo.

[ MÉTODO EI ]// CINCO FASES
01Análise e planejamento
02Concepção estratégica
03Modelagem
04Execução
05Avaliação e aprendizado
05 Respiro

Espaço vazio é argumento de credibilidade. Uma peça com folga comunica controle; uma peça cheia comunica pressa. A Engenho fala com instituições, e instituições leem calma como competência.

Consequência prática: margem mínima de 8% da menor dimensão da peça. Linha de texto entre 45 e 65 caracteres. Se não couber com folga, corte conteúdo, não reduza a margem.

8% DA MENOR DIMENSÃO
[ área útil ]

Nada de conteúdo fora desta linha.

// SISTEMA DE CORES

Um acento, dois extremos,
uma rampa de cinzas.

A escala de cinzas da marca coincide com a série Pantone Cool Gray, o que torna a paleta diretamente conversível para impresso sem reinterpretação. O laranja é a única cor saturada do sistema e não admite companhia.

[ PRINCIPAIS ]
Laranja Engenho #ff3800RGB 242 · 92 · 5CMYK 0 · 72 · 100 · 0≈ Pantone 1655 C
Tinta #111113RGB 17 · 17 · 19CMYK 70 · 60 · 55 · 90≈ Pantone Black 6 C
Papel #f2f2f3RGB 242 · 242 · 243CMYK 0 · 0 · 0 · 5≈ Pantone Cool Gray 1 C
[ NEUTROS DE APOIO ]
{{ k.nome }} {{ k.hex }}{{ k.pantone }}{{ k.uso }}
[ PROPORÇÃO OBRIGATÓRIA ]
70% papel e neutros
22% tinta

Medida no site publicado: 74 / 19 / 7. A regra normaliza em 70 / 22 / 8 com tolerância de 5 pontos. Peças de convocação podem inverter para laranja dominante, no máximo uma por campanha.

[ COMBINAÇÕES ]
Aa
{{ c.label }}

Proibido: laranja sobre tinta em texto de corpo; cinza médio sobre cinza claro; qualquer par cuja razão de contraste caia abaixo de 4,5:1 em texto pequeno.

// DEGRADÊ

Luz vindo de baixo, nunca cor derretida.

O degradê é a forma de dar profundidade e atmosfera sem introduzir cor nova. Ele simula uma fonte de luz laranja fora do quadro, subindo pela base da peça e se apagando na tinta.

Serve onde o laranja plano seria agressivo demais e a tinta sozinha seria seca: capa de apresentação, abertura de campanha, fundo de story, arte de evento. Toda peça com degradê é uma peça escura.

Dois tipos

A diferença entre os dois está na curvatura da luz. Radial tem a curva visível e concentra o laranja num ponto. Cortado entra mais fundo na curva e resulta quase linear, por isso trabalha melhor atrás de texto.

01. Radial, para peça em que o degradê é o assunto. 02. Cortado, para fundo que precisa receber frase e rodapé.
Radial. Curva pronunciada, laranja mais quente no centro da base.
Cortado. Curva rasa, transição mais longa e mais espaço legível.

Como se constrói

O degradê nasce de um círculo laranja atrás da peça. O que muda é onde a peça recorta esse círculo: mais alto, a curva aparece; mais baixo, a curva achata. Nada de três ou quatro pontos de cor no mesmo degradê.

Radial
Cortado

Duas cores, sempre

Todo degradê da marca usa só a tinta e o laranja. O laranja entra na base e some antes do topo, que permanece tinta. Nenhuma terceira cor, nenhum branco no meio, nenhuma sobreposição de dois degradês.

Tinta

HEX #111113
RGB 17, 17, 19
CMYK 72 / 63 / 60 / 90

Laranja

HEX #ff3800
RGB 255, 56, 0
CMYK 0 / 90 / 100 / 0

Direção da luz

O laranja vem sempre de baixo, centrado ou levemente deslocado. Degradê de cima para baixo, na diagonal ou em duas pontas não é da marca.

Texto sobre degradê

Texto só na metade superior, em branco. Nada de texto laranja, nada de texto na área quente.

Onde não entra

Documento, apresentação de conteúdo, logotipo, ícone, pattern e qualquer peça sobre papel. O degradê convive com um elemento só: a frase.

// TIPOGRAFIA

Space Grotesk fala.
DM Sans explica.

As duas famílias não se misturam de função. Space Grotesk é voz: título, número grande, palavra de destaque, sempre em peso leve. DM Sans é informação: corpo, rótulo, botão, legenda, interface. Nenhum título em DM Sans; nenhum parágrafo em Space Grotesk.

Space Grotesk · voz
Aa
Pesos autorizados: 300 Light · 400 Regular Tracking: −0.020em a −0.035em, mais fechado quanto maior Entrelinha: 0.90 a 1.15 Sem itálico em nenhuma hipótese. A ênfase é feita por cor, nunca por inclinação.
DM Sans · informação
Aa
Pesos autorizados: 300 · 400 · 500. Nunca 700. Tracking: 0 em corpo, +0.22em em caixa alta Entrelinha: 1.55 em corpo, 1.4 em legenda Números sempre tabulares
{{ dicaTitulo }} {{ dicaTexto }}
[ ESCALA POR FUNÇÃO ] passe o mouse em cada termo
Headline · SG 300 · clamp(40px, 9vw, 128px) · lh 0.98 · −0.03em

De público a gente entende.

Título de seção · SG 300 · clamp(26px, 3.6vw, 52px) · lh 1.06

Da estratégia à entrega, sem lacunas.

Subtítulo · SG 400 · 20–24px · lh 1.15

Concepção estratégica

Texto editorial · DM Sans 400 · 16–18px · lh 1.55 · 45–65 car.

Organizações públicas precisam comunicar com clareza, responsabilidade e agilidade para cidadãos, servidores, imprensa e lideranças.

Eyebrow · DM Sans 400 · 12px · uppercase · +0.22em
[ DIFERENCIAL ] // POR QUE A ENGENHO
Big number · SG 300 · clamp(64px, 12vw, 200px) · tnum · lh 0.85
24+ anos unindo criatividade, método e inteligência aplicada
CTA · DM Sans 500 · 13px · uppercase · +0.14em · raio 999px
Saiba + Vamos conversar Ver cases
// BIG TYPE

A frase é a imagem.

Quando não há fotografia, o texto grande assume o papel gráfico. Isso já acontece no site e passa a ser regra: em peça sem imagem, a headline ocupa no mínimo metade da altura útil e a quebra de linha é decidida por sentido, nunca pela largura da caixa.

[ CASES ]

Estratégia,
criatividade
e método.

Quebra por sentido. Cada linha é uma unidade de significado. Máximo 4 linhas.

público
público
público

Palavra inteira. O texto cresce até a margem e para ali. Nada de corte ou sangria, a palavra é sempre lida por completo.

Pra gente boa sempre tem espaço aqui.

[ TRABALHE CONOSCO ]
Alta intensidade. Fundo laranja inteiro só em convocação. Tipografia em branco puro, nunca em tinta.
Quando usar

Frase curta e autossuficiente. Manifesto, provocação, dado único, convocação. Quando não existe imagem boa disponível.

Quando evitar

Texto acima de 12 palavras. Informação de serviço com data, hora e endereço. Peça que já tem fotografia forte, o big type competiria com ela.

Responsivo

O tamanho acompanha a peça via clamp, mas o número de linhas é fixo por peça. Em vertical, reduza palavras antes de reduzir corpo.

// GRID E COMPOSIÇÃO

Doze colunas. Margem de 8%. Uma decisão por tela.

[ ESTRUTURA ]
Largura máxima de conteúdo1440 px
Margem lateral20 → 64 px
Colunas · gutter12 · 24 px
Ritmo vertical entre seções56 → 120 px
Raio de bloco · de ação14 px · 999 px
[ CINCO COMPOSIÇÕES CANÔNICAS ]
Minimalista. Um bloco de texto ancorado na base, resto vazio.
Editorial. Rótulo, título, coluna de texto estreita. Leitura de cima.
Imagem. Foto sangrada em 2/3, legenda em papel na base.
Big
type
Tipográfica. Texto ocupa metade da altura. Nenhum outro elemento.
87%
Dados. Um número protagonista, contexto em corpo pequeno abaixo.
Ancoragem

Todo conteúdo se alinha à esquerda e ancora em uma borda: base, topo ou centro vertical. Nunca flutua no meio sem referência.

Densidade

Máximo três níveis de informação por peça: rótulo, mensagem, assinatura. Um quarto nível indica que a peça deveria ser duas.

Imagem e texto

Não se sobrepõem por padrão. O texto ocupa área de papel ou tinta ao lado ou abaixo da foto. Sobreposição exige área lisa e marca negativa.

// SISTEMA GRÁFICO

Cinco elementos. Todos derivados, nenhum decorativo.

Estes são os únicos elementos gráficos do sistema. Cada um já existe na marca ou no site e cumpre uma função de leitura. Nada aqui foi inventado para preencher espaço, e nada novo deve ser adicionado sem a mesma justificativa.

Bolinha e fioAbre rótulo e separa itens de série. O ponto é sempre laranja, o fio sempre 1px.
[   ]
ColcheteDelimita rótulo de seção ou categoria. Sempre com espaço interno. Nunca em texto corrido.
//
Barra duplaIntroduz o comentário que qualifica o rótulo. Sempre em cinza, sempre em caixa alta.
01.
Índice tabularDois dígitos com zero à esquerda. Numera fases, serviços, valores, slides e capítulos.
PílulaRaio 999px. Exclusiva de ação e etiqueta. Nunca usada como container de conteúdo.
// SÍMBOLO EM VOLUME

Duas peças para quando a superfície plana não basta.

O símbolo em vidro existe para materiais de marketing que pedem volume e impacto: capa de campanha, abertura de apresentação, card de anúncio, arte de evento. São imagens fechadas, não elementos de sistema: usa-se o arquivo como está, sobre fundo preto, sem recorte, recolorização ou composição com outros grafismos.

Cristal
Cristal↓ PNG

Versão neutra. Primeira escolha quando a peça já tem laranja em outro lugar, ou quando o assunto é técnico.

Âmbar
Âmbar↓ PNG

Versão de convocação. Carrega o laranja da marca e conta como o elemento de destaque da peça, então dispensa outros.

Quando usar

Peça de marketing que precisa de presença imediata e não tem fotografia. Uma por composição.

Quando evitar

No lugar do logotipo, em documento, assinatura de e-mail, avatar ou favicon. Nunca sobre fundo claro ou pattern.

Arquivo

Aqui está a prévia em baixa resolução. O master em alta, cerca de 25 MB por peça, é fornecido sob solicitação.

// PATTERNS

Um padrão, três temperaturas.

A rampa de faixas verticais é o único pattern do sistema. Serve para preencher superfície sem introduzir estética nova: fundo de slide, verso de cartão, lateral de banner, pastilha de story. Vem em três temperaturas, cinza claro, cinza escuro e laranja, e cada uma tem duas intensidades: baixa, para trabalhar atrás de texto, e alta, para ser o assunto da peça.

A. Rampa cinza claro

Faixas verticais na sequência dos cinzas da marca. Sugere método e progressão. Usar em fundo de abertura e divisor de capítulo.

Baixa intensidade
B. Rampa cinza escuro

A mesma rampa invertida, para peças de fundo escuro. Usar em capa de apresentação, story e qualquer superfície em tinta.

Baixa intensidade
C. Rampa laranja

A rampa em um só laranja, variando a cobertura sobre a tinta. Reservada a peças de convocação: uma por campanha, nunca atrás de texto longo.

Baixa intensidade
Regra de coexistência

Uma temperatura por peça. Duas rampas na mesma composição criam textura confusa e derrubam o princípio de clareza.

Sob texto

Em baixa intensidade, o contraste entre pattern e fundo fica abaixo de 1.3:1. Se o texto ficar difícil de ler, o pattern está forte demais.

Sem fotografia

Pattern nunca entra sobre foto. Escolha um dos dois: a imagem é a textura, ou o pattern é.

// FOTOGRAFIA

Preto e branco, luz dura,
trabalho acontecendo.

A fotografia da Engenho é sempre em preto e branco e registra trabalho em andamento, não pessoas posando. Toda produção, própria ou de banco, passa pela mesma receita técnica abaixo. Ela é o que mantém imagens de origens diferentes parecendo do mesmo lugar.

Luz

Uma fonte dominante, lateral ou contra, com a sombra preservada e um recorte de luz no assunto. Ambiente em penumbra, luminária ou janela dentro do quadro quando ajudar a explicar o lugar. Nunca luz plana, flash frontal, luz de teto difusa por toda a cena ou fundo branco infinito.

Preto e branco

Sem cor, em qualquer aplicação. Conversão com contraste médio-alto: preto profundo nas sombras, cinza médio na pele, branco apenas na fonte de luz. Sem virar sépia nem azulado. Roupas e cenário em tons escuros, para o assunto se destacar pela luz e não pelo tom.

Lente e enquadramento

35mm para cena e ambiente, 50mm para grupo, 85mm para gesto e detalhe. Abertura entre f/1.4 e f/2.8: foco curto no assunto, primeiro plano e fundo dissolvidos. Altura de olho ou altura da mesa, câmera na horizontal (16:9), sem plongée, sem contra-plongée e sem grande angular deformando a sala. Espaço negativo de um dos lados para receber texto.

Cena e direção

Gente de perfil ou de três quartos, concentrada, sem olhar para a lente. O objeto do trabalho precisa estar em quadro: tela, painel, papel, peça. Telas com conteúdo verdadeiro. Sem sorriso para a câmera, aperto de mão, braços cruzados, polegar para cima ou mesa arrumada demais.

Acabamento

Preto levantado de leve, alta luz sem estouro de canal, grão fino aceito. Sem HDR, sem vinheta forte, sem nitidez artificial, sem filtro. Entrega em 16:9, com o recorte 4:5 previsto na captação.

No feed

A foto entra em post já em preto e branco e recebe uma das três versões do capítulo seguinte: estouro claro, estouro em tinta ou laranja chapado. O laranja é a única cor que pode aparecer sobre a imagem.

[ EXEMPLOS ]
Designer desenhando em tablet no estúdio, produção ao fundo Dupla diante de um plano estratégico em tela grande Equipe reunida escrevendo em painel de vidro Designer trabalhando em mesa digitalizadora com painéis de dados
// INSTAGRAM

Uma moldura fixa. O conteúdo é que varia.

O perfil tem dois trabalhos: mostrar case e mostrar método. Para os dois, o reconhecimento não vem da arte de cada post, vem da repetição da moldura: mesma margem, mesmo fio vertical, mesma rubrica no alto. Quem passa o dedo reconhece a Engenho antes de ler. Dentro dessa moldura o post pode ser texto, print de notícia, foto de time ou peça de cliente.

[ ANATOMIA DO POST 4:5 ]
// CASE

Uma marca
que para
de pedir
desculpa.

Reposicionamento de uma indústria de 40 anos, do discurso ao ponto de venda.

1. Rubrica

Barra dupla e uma palavra, no alto à esquerda, sempre em laranja. Cinco rubricas apenas: CASE, MÉTODO, NÚMERO, GENTE, NOTÍCIA. Elas substituem hashtag de assinatura.

2. Fio vertical

O fio corre de topo a base, a 12% da direita, na mesma posição em todo post. Ele reserva a faixa da direita: nenhum texto invade esse espaço.

3. Frase grande no alto

Space Grotesk 300, quebrada à mão em até quatro linhas, começando logo abaixo da rubrica. Máximo de doze palavras, nunca em caixa-alta.

4. Linha de apoio

Duas linhas em DM Sans explicam a frase, logo abaixo dela. A arte termina aí: sem site, sem numeral, sem assinatura no pé.

[ TRÊS SUPERFÍCIES, MESMA MOLDURA ]
// MÉTODO

Antes de
desenhar,
a gente
mede.

O diagnóstico é a primeira entrega de qualquer projeto.

Papel. Padrão do perfil. Método, número e notícia nascem aqui.
// GENTE

Quem
assina
o que
entregamos.

Time de atendimento, criação e mídia, em foto de estúdio sobre cinza.

Tinta. Case, gente e qualquer post com imagem escura.
// NÚMERO

19 anos
no mesmo
ofício.

Reservado a anúncio ou marco da agência.

Laranja. Convocação. Um por mês e nunca vizinho de outro laranja.
[ POST COM FOTOGRAFIA ]

Os três posts abaixo estão com uma textura neutra no lugar da foto, só para mostrar o tratamento: arraste uma imagem sua sobre cada um para ver o comportamento real. A foto nunca entra crua. Ela é dessaturada e estourada até virar superfície: perde meio-tom, ganha luz e passa a funcionar como papel ou como tinta. O texto mantém exatamente a mesma posição dos posts sem foto, e é o tratamento da imagem que garante o contraste, não uma tarja escura por baixo da frase.

// GENTE

Time que
atende e
desenha.

Foto clara, estourada até o fundo virar papel.

Estouro claro. Preto e branco, luz em 162% e contraste em 78%. Texto em tinta. Pede foto já clara, com fundo limpo atrás da frase.
// CASE

A loja
mudou
de tom.

Foto rebaixada até o fundo virar tinta.

Estouro em tinta. Preto e branco, luz em 46% e contraste em 108%. Texto em branco. Padrão para case, ponto de venda e foto de ambiente.
// NÚMERO

19 anos
no mesmo
ofício.

Laranja chapado por cima da foto em multiplicar.

Estouro laranja. A mesma foto em preto e branco, com laranja chapado em multiplicar. Texto em branco. Reservado a marco e convocação.
Onde a frase pousa

A frase fica no centro, na mesma faixa dos posts sem foto. A foto é reenquadrada para deixar essa faixa limpa: rosto, produto e horizonte vão para baixo ou para a direita do fio.

Contraste vem do tratamento

Se a frase não estiver legível, aumenta ou reduz a luz da foto. Não usar tarja, caixa, sombra no texto nem gradiente preto no rodapé.

Sempre sem cor

Nenhuma foto entra colorida no feed. A única cor da peça é o laranja, na rubrica ou chapado por cima da imagem inteira.

[ RITMO DO GRID ]

Case

// case

Método

// método

Número

// número

Gente

// gente

Notícia

// notícia

Case

// case

Marco

// número

Método

// método

Case

// case
Leitura de três em três

Nenhuma linha inteira na mesma superfície e nunca dois posts de case colados. Case pede que o post anterior explique método.

Cadência

Três posts por semana bastam: um case, um método e um terceiro livre entre número, gente e notícia.

Legenda

A frase da arte não se repete na legenda. A legenda conta o que a arte não cabe: contexto, resultado, crédito de time.

Stories 9:16
// MÉTODO

A régua
vem antes
da arte.

Uma ideia por tela, três telas por sequência.

Mesma moldura, sem rodapé. A base fica livre para o adesivo de link ou enquete.
Capa de Reels
// CASE

Como
virou
campanha.

Frase no terço superior, fora do recorte do feed.

A capa repete a frase do post. O recorte 4:5 do feed precisa funcionar sozinho.
Destaques
01
02
03
04
Só índice tabular, um por pasta, na ordem em que a agência quer ser lida. O nome da pasta faz o resto.
Foto de perfil
Só o símbolo, em negativo sobre tinta, ocupando 34% do diâmetro. É o único lugar onde ele aparece sozinho. Não usar laranja e não usar a marca completa, que fica ilegível no tamanho do avatar.
O que não entra

Post sem rubrica, frase em caixa-alta, mais de uma cor de destaque na mesma arte, template pronto de banco de imagem e data comemorativa sem assunto.