DEBRITTO

Fazemos	Evitamos
Linguagem clara e objetiva com exemplos concretos e dados reais	Jargões vazios, promessas vagas ou linguagem inflada sem substância
Apresentamos problemas com contexto e solução prática apontada	Compartilhar problemas sem apontar causa ou oferecer saída
Citamos métricas que impactam o resultado financeiro do cliente	Destacar métricas de vaidade: alcance, impressões, curtidas isoladas
Dizemos "não funciona" quando os dados indicam isso claramente	Validar estratégias sem resultado por medo de desagradar o cliente
Tom direto, técnico e respeitoso em todas as comunicações	Excesso de informalidade ou formalidade exagerada fora de contexto
Excelência nos detalhes — escrita revisada, apresentações impecáveis	Entregas com erros, sem revisão ou sem atenção à qualidade visual

07 — Elemento Gráfico

As linhas de fluxo.
Sentidas, não gritadas.

Elemento Gráfico de Fluxo — Navy Light #C8CCE0 — Traço fino e uniforme

"As linhas de fluxo representam o movimento contínuo, a interconexão entre estratégia e resultado — crescimento não é linear, é um processo que se entrelaça, converge e se expande ao mesmo tempo."

Significado Estratégico

Entrelaçamento

Estratégia e execução nunca são separadas na DEBRITTO — sempre se cruzam e se influenciam mutuamente.

Continuidade

O crescimento do cliente é um processo contínuo, não um projeto com início e fim definidos.

Fluidez

Adaptamos a estratégia ao movimento do mercado — sem rigidez, sem templates fixos para qualquer cliente.

Convergência

Todas as ações convergem para um único ponto: resultado financeiro real e mensurável para o cliente.

Regras de Uso

Aplicar

Logo principal — canto superior direito do wordmark
Assinatura do fundador — elemento de fundo suave
Papel timbrado — rodapé ou canto da página
Fundos de apresentações — 15 a 30% de opacidade
Capas de documentos — elemento decorativo secundário
Cor exclusiva: Navy Light #C8CCE0
Traço fino e uniforme — sem variação de espessura

Evitar

Nunca como elemento principal ou dominante
Nunca em cor diferente de Navy Light #C8CCE0
Nunca com variação de espessura ou estilo de traço
Nunca sobre fundos que reduzam o contraste das linhas
Nunca ocupando mais de 30% da área visual total
Nunca recortado ou parcialmente visível por acidente
Nunca como único elemento visual em uma composição

09 — Tipografia

Sistema tipográfico.
Hierarquia intencional.

Cormorant Garamond

Display · Títulos · Destaques · Citações

Google Fonts · Pesos: 300–700 · Regular + Italic

Aa Gg

A força de uma marca reside na clareza de sua comunicação — e na beleza silenciosa de sua identidade visual.

Display / H1	DEBRITTO	36–48pt · Light 300
Heading / H2	Posicionamento Estratégico	24–28pt · Regular 400
Sub-heading / H3	Diferencial Competitivo	18–20pt · Medium 500
Citação	"Resultado é o que importa."	16–18pt · Italic 400

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 . , : ; ! ? — " "

EB Garamond

Números · KPIs · Métricas · Dados de destaque

Google Fonts · Pesos: 400–800 · Regular + Italic

0 1 2 3 4 5

Números comunicam resultado. EB Garamond empresta a precisão do Garamond clássico à linguagem dos dados — sem o excesso de emoção do Cormorant.

KPI Grande	1.284	36–48pt · Regular 400
KPI Médio	R$ 48.900	24–28pt · Regular 400
Percentual	+12,4%	18–20pt · Medium 500
Tabela / Dado	3.847 sessões · ROAS 4,2x	11–14pt · Regular 400

0 1 2 3 4 5 6 7 8 9
+ − × ÷ % R$ . , : —

DM Sans

Corpo · Interface · Labels · Dados

Google Fonts · Pesos: 300, 400, 500, 600 · Regular

Clareza e legibilidade em qualquer tamanho. DM Sans é a voz funcional da DEBRITTO — direta, moderna e precisa.

Body Text	Texto de parágrafo — relatórios, apresentações e documentos.	11–12pt · Light 300 · LH 1.85
Body Strong	Destaque e ênfase dentro do corpo de texto.	11–12pt · SemiBold 600
Caption	Legendas, notas de rodapé e referências auxiliares	9–10pt · Light 300
Label / Tag	IDENTIFICADOR DE SEÇÃO	8–9pt · Bold 700 · CAPS · LS .22em

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 . , : ; ! ? — " "

Sistema de Design

Grid &
Espaçamento

Todo espaço em um entregável DEBRITTO é intencional. A unidade base é 8px — todas as margens, paddings e gaps são múltiplos dela. Isso garante consistência visual entre propostas, relatórios, dashboards e peças digitais, independente de quem os produziu.

01 — Unidade Base

px · xs

px · base

px · sm

px · md

px · lg

px · xl

px · 2xl

px · 3xl

02 — Tokens de Espaçamento

--space-xs

Separação mínima entre ícone e label, badge e borda, elemento inline e seu contexto.

4px

--space-base

Unidade fundamental. Gap entre itens de lista, padding interno de chips e tags.

8px

--space-sm

Padding interno de cards e células de tabela. Gap entre campos de formulário.

16px

--space-md

Separação entre grupos de elementos. Margem lateral em mobile (≤375px).

24px

--space-lg

Separação entre seções de cards. Padding de sidebar e painéis laterais.

32px

--space-xl

Separação entre blocos de conteúdo distintos dentro de uma seção.

48px

--space-2xl

Padding interno de seções em documentos HTML. Margens A4 laterais (≈22mm).

64px

--space-3xl

Separação entre seções principais de página. Margem superior/inferior de documento.

96px

03 — Escala Tipográfica

Valores exatos para cada nível hierárquico. Letter-spacing e line-height são tão obrigatórios quanto o tamanho — são eles que criam o ritmo visual DEBRITTO.

Nível	Preview	Font-size	Font-weight	Line-height	Letter-spacing	Uso
Display	DEBRITTO	clamp(3rem, 8vw, 7rem)	300	0.9–1.0	0.04em	Covers, hero, nome da marca
H1	Título principal	clamp(2.2rem, 4.5vw, 4rem)	300	1.15	0.01em	Títulos de seção principal
H2	Subtítulo de seção	clamp(1.5rem, 2.5vw, 2.2rem)	400	1.25	0.01em	Subtítulos, blocos de destaque
H3	Título de card	1rem – 1.2rem	600	1.3	0.02em	Títulos de card, tabela, bloco
Body	Texto corrido padrão	1rem (18px base)	300	1.75 – 1.85	0	Parágrafos, análises, relatórios
Label	SISTEMA DE DESIGN	0.6rem – 0.65rem	700	1.4	0.25em – 0.35em	Eyebrows, seção labels, tags
Caption	Nota de rodapé · Fonte de dados	0.75rem – 0.8rem	300 – 400	1.6	0.05em	Rodapés, fontes, notas, datas

04 — Grid de Colunas (HTML)

Todos os entregáveis HTML da DEBRITTO usam o mesmo grid de 12 colunas com gutter de 24px e largura máxima de 1280px. A visualização abaixo representa o grid em escala.

Colunas

Gutter

24px

Max-width

1280px

Padding lateral

80px

Padding mobile

24px

05 — Breakpoints Responsivos

Mobile

360–767px

4 colunas · gutter 16px · padding 24px

Tablet

768–1023px

8 colunas · gutter 20px · padding 40px

Desktop

1024–1279px

12 colunas · gutter 24px · padding 64px

Wide

1280px+

12 colunas · gutter 24px · max-width 1280px

"Se um espaço não é múltiplo de 8, está errado.
Consistência não é detalhe — é o que diferencia um entregável premium de um bem-feito."

Sistema de Design

Contraste &
Acessibilidade

Toda combinação de cor usada em texto deve atingir contraste mínimo de 4.5:1 (WCAG AA). Abaixo estão os pares aprovados, os pares condicionais e as combinações proibidas para texto — válidos para todos os entregáveis DEBRITTO.

01 — Combinações Principais

Texto sobre Navy

White #FFFFFF sobre Navy #1B2451

12.6:1

✓ WCAG AAA

Combinação primária da marca. Uso irrestrito para qualquer tamanho de texto, incluindo captions e labels pequenos.

Gold sobre Navy

Gold #B8996C sobre Navy #1B2451

4.6:1

✓ WCAG AA

Aprovado para texto normal (≥16px) e texto bold (≥14px bold). Não usar em captions ou labels abaixo de 12px.

Navy sobre White

Navy #1B2451 sobre White #FFFFFF

12.6:1

✓ WCAG AAA

Combinação primária em fundos claros. Uso irrestrito. Padrão para todo texto de corpo em documentos e relatórios.

Navy sobre Off-White

Navy #1B2451 sobre Off-White #F7F8FC

11.9:1

✓ WCAG AAA

Combinação de fundo padrão em seções claras. Uso irrestrito. Preferível ao branco puro para leitura prolongada.

Gold sobre Off-White

Gold #B8996C sobre Off-White #F7F8FC

2.1:1

✗ Reprovado

Falha em qualquer tamanho de texto. Gold sobre fundo claro é uso decorativo apenas — nunca para texto informativo.

Gray sobre White

Gray #6B7280 sobre White #FFFFFF

4.6:1

✓ WCAG AA

Aprovado para texto de corpo (≥16px). Uso padrão para texto secundário, descrições e parágrafos de suporte.

02 — Tabela Completa de Pares

Par de cores	Amostra	Ratio	Nível WCAG	Uso permitido
White sobre Navy #FFFFFF / #1B2451	Aa	12.6:1	AAA	Irrestrito. Qualquer tamanho, qualquer peso.
Navy sobre White #1B2451 / #FFFFFF	Aa	12.6:1	AAA	Irrestrito. Padrão para texto corrido em documentos.
Navy sobre Off-White #1B2451 / #F7F8FC	Aa	11.9:1	AAA	Irrestrito. Preferível para leitura longa.
Gold sobre Navy #B8996C / #1B2451	Aa	4.6:1	AA	Texto ≥16px ou bold ≥14px. Não usar em captions.
Gray sobre White #6B7280 / #FFFFFF	Aa	4.6:1	AA	Texto ≥16px. Padrão para texto secundário.
Gray sobre Off-White #6B7280 / #F7F8FC	Aa	4.4:1	AA Large	Apenas texto grande (≥18px normal ou ≥14px bold).
Navy Light sobre Navy #C8CCE0 / #1B2451	Aa	6.1:1	AA	Texto secundário sobre Navy. Labels, notas, captions em fundo escuro.
Gold sobre White #B8996C / #FFFFFF	Aa	2.2:1	✗ Falha	Proibido para texto. Uso decorativo exclusivamente.
Gold sobre Off-White #B8996C / #F7F8FC	Aa	2.1:1	✗ Falha	Proibido para texto. Erro comum — evitar sempre.

03 — Regras Práticas

✓ Permitido

White sobre Navy — uso irrestrito, qualquer tamanho

Navy sobre White ou Off-White — padrão para corpo de texto

Gold sobre Navy — labels e eyebrows (≥14px bold)

Navy Light sobre Navy — texto secundário em fundos escuros

Gray sobre White — texto de suporte e descrições (≥16px)

Gold como cor decorativa sobre qualquer fundo — linhas, bordas, ícones

✗ Proibido

Gold sobre White como texto — ratio 2.2:1, falha WCAG

Gold sobre Off-White como texto — ratio 2.1:1, falha WCAG

Gray sobre Off-White em captions (abaixo de 18px normal)

Navy Light como texto sobre White ou Off-White

Qualquer cor clara sobre Off-White para texto pequeno

Gold sobre Gold-pale (#f5ede0) — diferença mínima, invisível

"Gold é sotaque — nunca estrutura.
Todo texto que precisa ser lido deve estar em Navy ou White. Gold existe para guiar o olho, não para carregar informação."

Sistema de Design

Tipografia
em Contexto

Os valores exatos estão documentados na seção de Grid. Esta seção mostra como as duas famílias se comportam juntas — os pesos disponíveis, os pares aprovados e as regras de combinação que criam o ritmo visual DEBRITTO.

01 — Cormorant Garamond

Cormorant Garamond — Display & Títulos Google Fonts · Serif · Uso: display, H1, H2, citações, números grandes

Clareza é o ativo mais escasso.

300 · Light

Clareza é o ativo mais escasso.

400 · Regular

Growth by conviction.

300 Italic · preferido para taglines

Growth by conviction.

500 Italic · citações de destaque

DEBRITTO

600 · logo e nome da marca

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9 — R$ % ×

02 — DM Sans

DM Sans — Corpo & Interface Google Fonts · Sans-serif · Uso: body, labels, UI, tabelas, captions

A análise de cohort revela que o CAC médio caiu 18% no segundo ciclo de otimização.

300 · body padrão

A análise de cohort revela que o CAC médio caiu 18% no segundo ciclo de otimização.

400 · body secundário

Resultado: crescimento de 34% em receita recorrente no trimestre.

500 · destaque em corpo

ANÁLISE DE PERFORMANCE · MARÇO 2026

700 · labels e eyebrows

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9 — R$ % ×

03 — Pares em Contexto Real

Proposta Comercial

Diagnóstico &
Recomendações

O custo por aquisição subiu 18% em março. O motivo: saturação do público principal após 6 semanas de veiculação contínua. A recomendação é expandir para lookalike de compradores dos últimos 90 dias.

Cormorant 300 Italic + DM Sans 300

Relatório Executivo

Resultados
do Trimestre

Crescimento de 34% em receita recorrente. Redução de 22% no churn. CAC estabilizado abaixo do benchmark do setor pelo segundo mês consecutivo.

Cormorant 300 Italic + DM Sans 300

Dashboard de KPIs

R$ 284K

Receita gerada no período. Variação de +18,4% em relação ao mês anterior. Meta atingida em 94% do ciclo.

Cormorant 300 + DM Sans 300/500

Growth Audit

Três gaps críticos
identificados

Ausência de rastreamento pós-clique, fragmentação de audiência entre campanhas e ausência de teste A/B sistematizado nas criativos de topo de funil.

Cormorant 400 Italic + DM Sans 300

04 — Regras de Combinação

Cormorant para hierarquia visual

Use Cormorant Garamond exclusivamente para títulos, citações e o nome da marca. Nunca para texto corrido acima de 3 linhas — a leitura se torna difícil em corpo longo. Nunca para números: use EB Garamond.

✓ Título de seção, KPI em destaque, tagline, pull quote
✗ Parágrafo de análise, tabela de dados, instrução de uso

EB Garamond para números

Todos os números de destaque — KPIs, métricas, percentuais, valores monetários — usam EB Garamond. É o Garamond clássico: mais sóbrio e preciso que o Cormorant, ideal para dados que comunicam resultado.

DM Sans para tudo funcional

Todo texto que precisa ser lido, processado ou seguido usa DM Sans. Corpo, labels, captions, tabelas, formulários, legendas, notas de rodapé. É a fonte de trabalho da marca.

✓ Corpo de proposta, linha de tabela, caption de gráfico
✗ Nome da marca, número de destaque, citação de manifesto

Itálico como voz editorial

O itálico do Cormorant Garamond é o elemento mais característico da identidade DEBRITTO. Use-o em taglines, complementos de título e citações diretas. Nunca em mais de uma linha de cada bloco — perde o impacto.

✓ "Growth by conviction." · "Resultados do Trimestre"
✗ Parágrafos inteiros em itálico · subtítulos em itálico regular

05 — Nunca Fazer

Combinações proibidas — qualquer uma delas quebra a identidade

Arial ou Roboto

Substituição por fontes do sistema. Sempre carregar as Google Fonts.

Cormorant em body longo com mais de três linhas de texto corrido seguido.

Legibilidade comprometida em leitura prolongada.

TÍTULO PRINCIPAL EM LABEL STYLE

Labels em caps são para eyebrows. Títulos usam Cormorant.

Bold 700 em Cormorant

Pesos acima de 600 distorcem o desenho da fonte. Máximo: 600.

"Cormorant diz o que importa.
DM Sans explica como.
Nunca inverta essa hierarquia."

Identidade Visual

Logo &
Variações Completas

A DEBRITTO opera com dois ativos de marca: o wordmark — nome completo em Cormorant Garamond — para contextos institucionais e documentos, e o monograma DB para contextos compactos, digitais e físicos. Cada um tem versões e regras de uso específicas.

01 — Wordmark

DEBRITTO

Marketing & Growth

Principal — Fundo Branco

DEBRITTO

Marketing & Growth

Secundária — Fundo Off-White

DEBRITTO

Marketing & Growth

Invertida — Fundo Navy

Área de Proteção Mínimo: altura da letra "D" em todos os lados — nenhum elemento deve invadir essa zona. Tamanho mínimo digital: 120px largura

02 — Monograma DB

Principal

Documentos, papel timbrado, fundos claros

Invertida

Capas navy, fundos escuros, favicon

Mono Preto

Bordado claro, tampografia, P&B, carimbos

Mono Branco

Bordado escuro, tampografia fundo navy

03 — Wordmark vs Monograma

Critério de uso — nunca use os dois ao mesmo tempo no mesmo documento

Use o Wordmark quando

O contexto permite leitura completa do nome — propostas, relatórios, apresentações

É o primeiro contato do cliente com a marca — capa de documento, assinatura de email

O espaço horizontal é suficiente para pelo menos 120px de largura

Materiais de comunicação institucional — LinkedIn, site, rodapé de PDF

Use o Monograma quando

O espaço é quadrado ou compacto — favicon, ícone de app, perfil de rede social

Aplicações físicas com restrição de detalhe — bordado, tampografia, relevo seco

Elemento decorativo secundário em layout onde o wordmark já aparece

Materiais internos e operacionais onde o contexto já identifica a marca

04 — Regras de Uso

✓ Sempre permitido

→ Wordmark em Navy sobre fundos brancos e off-white

→ Wordmark em branco sobre fundo Navy

→ Monograma DB nas quatro versões nos contextos especificados

→ Wordmark sem o subtítulo "Marketing & Growth" em espaços muito reduzidos

→ Área de proteção sempre respeitada em todos os formatos

✗ Nunca fazer

→ Alterar as cores do wordmark — nunca Gold, nunca cinza, nunca gradiente

→ Distorcer, esticar ou comprimir proporcões do wordmark ou monograma

→ Adicionar sombra, glow ou qualquer efeito sobre qualquer versão da logo

→ Usar o monograma e o wordmark no mesmo espaço visual simultâneamente

→ Colocar a logo sobre fundos coloridos que não sejam White, Off-White ou Navy

"O monograma DB é o presente.
As Linhas de Fluxo como símbolo autônomo são o futuro —
quando a marca não precisar mais do nome para ser reconhecida."

Sistema de Design

Vocabulário
de Marca

As palavras que a DEBRITTO usa — e as que nunca usa — são parte da identidade tanto quanto as cores e a tipografia. Este glossário garante consistência de linguagem em todos os documentos, apresentações e comunicações, especialmente ao usar IA para gerar conteúdo.

01 — Termos Preferenciais

Pessoas & Relações

cliente

Não "parceiro" — direto, sem romantismo desnecessário

equipe do cliente

Não "time" ou "squad" — linguagem executiva

stakeholder

Aceitável em contexto executivo; evitar em comunicação direta

decisor

Prefira a "responsável pela decisão" em documentos formais

Entregáveis

Executive Report

Não "relatório mensal" — posiciona o documento como executivo

Proposal

Não "orçamento" ou "cotação" — proposta é diagnóstico, não preço

Growth Audit

Diagnóstico estruturado de crescimento — não "análise" genérica

Briefing

Documento de direcionamento criativo ou estratégico

Resultados & Performance

crescimento

Expansão mensurável de receita, base ou alcance

performance

Eficiência das ações em relação ao investimento e objetivo

resultado

Sempre acompanhado de número — "resultado" sem dado não existe

escala

Crescimento sustentável com estrutura — não apenas volume

Processo & Método

diagnóstico

Análise estruturada antes de qualquer recomendação

recomendação

Não "sugestão" — a DEBRITTO recomenda com convicção

hipótese

O que ainda não foi testado — sempre rotulado como tal

evidência

Dado ou fato que suporta uma recomendação — base de toda análise

02 — Usar vs. Evitar

Contexto	Use	Evite	Por quê evitar
Referência ao cliente	cliente	parceiro	Soa informal e genérico. "Cliente" é direto e respeita a natureza da relação.
Relatório mensal	Executive Report	relatório	Posiciona o entregável como documento executivo, não operacional.
Proposta comercial	Proposal	orçamento / cotação	Orçamento comunica preço. Proposal comunica diagnóstico e solução.
Conclusão de análise	recomendação	sugestão	"Sugestão" é opcional. "Recomendação" carrega convicção e responsabilidade técnica.
Valor gerado	resultado	entrega de valor	Jargão vazio. Resultado é sempre acompanhado de número específico.
Oportunidade detectada	gap / lacuna	insight	"Insight" virou commodity de agência. Gap é preciso e acionável.
Apresentar o trabalho	diagnóstico + recomendação	estratégia robusta	"Robusto" é adjetivo de preenchimento. A estratégia fala por si.
Crescimento sustentado	escala	sinergia / alavancagem	Jargão corporativo sem significado específico no contexto de marketing.
Início de análise	o dado indica / a evidência mostra	acreditamos que / sentimos que	A DEBRITTO opera com dados. Crenças e sentimentos não têm lugar em análises.
Encerramento de documento	próximo passo: [ação concreta]	fico à disposição	Fecha passivamente. Todo documento DEBRITTO termina com uma ação específica.

03 — Sobre Co-responsabilidade

A posição da DEBRITTO

A DEBRITTO não usa "parceiro" porque o termo ficou genérico. Mas opera com a convicção de co-responsabilidade — nos resultados do cliente, nas decisões estratégicas, nos números que apresentamos.

Essa co-responsabilidade é comunicada pelo comportamento, não pelo vocabulário. Pela profundidade do diagnóstico. Pela franqueza das recomendações. Pelo que dizemos quando os números são ruins.

Na prática

— Não dizemos "entregamos campanhas". Dizemos "geramos R$ X em receita atribuída".

— Não dizemos "o cliente aprovou". Dizemos "a recomendação foi implementada".

— Não dizemos "dependemos de dados do cliente". Dizemos "precisamos de acesso a X para continuar".

— Quando os resultados são ruins, dizemos o que mudamos — não o que aconteceu.

"Clareza é o ativo mais escasso do mercado.
Cada palavra que escolhemos ou evitamos
é uma decisão sobre quem somos." — Princípio de linguagem DEBRITTO

Sistema de Design

Data
Visualization

A DEBRITTO entrega análise de performance como produto central. Este sistema define como dados são apresentados — cores de séries, estilo de gráficos, formatação de números e componentes de KPI. Consistência visual em dados não é estética: é legibilidade e credibilidade.

01 — Paleta de Séries

Série 01

#1B2451

Métrica principal, receita, linha de tendência

Série 02

#B8996C

Métrica secundária, meta, benchmark

Série 03

#C8CCE0

Série terciária, período anterior, comparativo

Série 04

#6B7280

Dados neutros, outros canais, fundo de barras

Positivo

#1E8449

Crescimento, variação positiva — sempre com ícone

Negativo

#C0392B

Queda, variação negativa — sempre com ícone

Regra de sequência: usar sempre nessa ordem — nunca pular séries ou inventar cores fora da paleta. Verde/vermelho: nunca usar isolados para positivo/negativo — sempre acompanhar com seta ou label textual.

02 — KPI Cards

Receita MRR

R$ 284K

↑ +18,4%

vs. mês anterior

CAC Médio

R$ 142

↓ −12,1%

vs. mês anterior

Churn Rate

3,2%

↑ +0,4pp

vs. mês anterior

ROAS Médio

4,8×

→ estável

vs. mês anterior

Estrutura obrigatória

Label (DM Sans caps) → Valor (Cormorant) → Delta (badge colorido) → Período (DM Sans light)

Delta de queda

Para CAC, Churn e CPL: queda é positiva. Usar ↓ em verde. Deixar a seta comunicar — não inverter a cor.

03 — Estilo de Gráfico

Receita & Meta — Jan–Jun 2026

Evolução de Receita Mensal

Receita Real

Canal	Investimento	Receita Atrib.	ROAS	CAC	Var. MoM
Meta Ads	R$ 12.400	R$ 68.200	5,5×	R$ 118	↑ +14,2%
Google Ads	R$ 8.800	R$ 39.600	4,5×	R$ 142	↑ +8,7%
E-mail	R$ 1.200	R$ 18.400	15,3×	R$ 34	↑ +22,1%
Orgânico	—	R$ 24.800	—	R$ 0	↓ −3,4%
Total	R$ 22.400	R$ 151.000	6,7×	R$ 96	↑ +11,8%

Sistema de
Iconografia

Todos os entregáveis DEBRITTO usam a mesma biblioteca de ícones, com o mesmo estilo e tamanho. Misturar estilos de ícones em um documento é equivalente a misturar fontes — quebra a coerência visual imediatamente.

01 — Biblioteca Oficial

Lucide Icons

lucide.dev · Open source · MIT License · 1.400+ ícones
Linha fina, geométrica, consistente — alinhada ao posicionamento premium da DEBRITTO

✓ Biblioteca oficial

Bar Chart

Trend

Clock

Users

Revenue

Growth

Package

Report

Grid

Check

Alert

Message

Target

Star

Hover para ver o estado ativo (Navy + Gold). Todos os ícones acima fazem parte da biblioteca Lucide — disponíveis em SVG, React e Web Component.

02 — Tamanhos Padrão

16×16px
stroke-width: 1.5

Labels de tabela, captions, tags inline

SM — padrão

20×20px
stroke-width: 1.5

KPI cards, listas, navegação, botões

24×24px
stroke-width: 1.5

Headers de seção, ícones de destaque

32×32px
stroke-width: 1.5

Cards de feature, ilustrações de seção

Stroke-width: sempre 1.5 em todos os tamanhos — nunca aumentar para compensar tamanho pequeno, nunca diminuir para parecer mais leve.

03 — Cores por Contexto

Fundo Branco ou Off-White

Navy #1B2451 — padrão

Gold #B8996C — destaque

Gray #6B7280 — secundário

Fundo Navy

White #FFFFFF — padrão

Gold #B8996C — destaque

Navy Light — secundário

Estados semânticos

Positivo / Concluído

Negativo / Erro

Atenção / Alerta

04 — Regras de Uso

✓ Sempre

→Usar exclusivamente Lucide Icons em todos os entregáveis

→Manter stroke-width: 1.5 em qualquer tamanho

→Alinhar ícone ao centro vertical do texto ao lado

→Gap de 8px entre ícone e label em qualquer tamanho

→Estados semânticos sempre acompanhados de texto — nunca só cor

✗ Nunca

→Misturar Lucide com Font Awesome, Material Icons ou outros

→Usar ícones preenchidos (filled) — apenas outline

→Alterar stroke-width para qualquer outro valor

→Usar ícones decorativos sem função — cada ícone comunica algo

→Cores fora das definidas por contexto acima

"Um ícone que precisa de tooltip para ser entendido é um ícone errado.
Ícones DEBRITTO comunicam imediatamente — ou são substituídos por texto."

Identidade de Marca

Tom de Voz
por Canal

A voz da DEBRITTO é sempre direta, técnica e precisa — mas o tom varia por canal. Um Executive Report e um WhatsApp com cliente compartilham os mesmos valores, mas diferem em densidade, formalidade e comprimento. Esta seção documenta essas variações.

01 — Matriz de Tom por Canal

LinkedIn Institucional

Formalidade

80%

Densidade

55%

Assertividade

90%

Editorial e de autoridade. Sem hashtags excessivas. Números reais quando possível. Nunca entusiasmo vazio.

WhatsApp com Cliente

Formalidade

45%

Densidade

30%

Assertividade

85%

Direto e humano. Frases curtas. Sem formalismo excessivo, mas sem informalidade que dilua autoridade técnica.

Executive Report

Formalidade

95%

Densidade

90%

Assertividade

100%

Máxima precisão técnica. Cada afirmação suportada por dado. Recomendações explícitas. Zero adjetivos de preenchimento.

Proposal

Formalidade

85%

Densidade

75%

Assertividade

95%

Diagnóstico antes da solução. Linguagem que ecoa o cliente. Confiante sem arrogância. Fecha com ação concreta.

Post em Redes

Formalidade

60%

Densidade

40%

Assertividade

85%

Factual, sem euforia. Resultado com contexto. Nunca "incrível" ou "surpreendente" — o número fala.

Email de Entrega

Formalidade

70%

Densidade

45%

Assertividade

80%

Objetivo e orientado à ação. O que foi entregue, o que requer atenção, próximo passo. Sem rodeios.

Follow-up Comercial

Formalidade

65%

Densidade

25%

Assertividade

75%

Curto e com propósito claro. Nunca pressionar — avançar. Oferece valor antes de pedir resposta.

Análise & Diagnóstico

Formalidade

90%

Densidade

95%

Assertividade

100%

Hipótese clara, evidência explícita, conclusão direta. Nunca "pode ser que" sem dado. Nunca conclusão sem recomendação.

Estratégia

Formalidade

85%

Densidade

80%

Assertividade

95%

Raciocínio visível, não só conclusão. Mostra o porquê antes do como. Opções com trade-offs explícitos.

02 — Exemplos por Canal

Executive Report — Abertura de seção Análise de performance

✓ Voz DEBRITTO

"O CAC médio subiu 18% em março. A causa é saturação de audiência — o mesmo conjunto de criativos rodando há 6 semanas contra o mesmo público. A recomendação é expandir para lookalike de compradores dos últimos 90 dias e introduzir pelo menos 3 novos ângulos criativos antes do dia 10."

Dado → causa → recomendação com prazo. Sem rodeios.

✗ Evitar

"Tivemos um mês desafiador em março, mas acreditamos que com alguns ajustes estratégicos conseguiremos reverter a tendência. O mercado tem estado bastante competitivo e isso pode ter impactado nossa performance."

Sem dado, sem causa, sem ação. "Acreditamos" sem evidência.

WhatsApp com Cliente — Atualização rápida Comunicação direta

✓ Voz DEBRITTO

"Oi [nome]. Identifiquei um problema nas campanhas — o pixel está disparando duas vezes no checkout. Isso está inflando o número de conversões reportadas. Vou corrigir hoje. Te mando confirmação quando estiver resolvido."

Direto, assume responsabilidade, informa prazo.

✗ Evitar

"Olá! Tudo bem? Só passando para informar que identificamos uma possível inconsistência nos dados que pode estar afetando os relatórios. Estamos investigando e em breve traremos mais informações!"

Vago, sem causa, sem prazo, exclamações desnecessárias.

Proposal — Abertura de diagnóstico Comercial

✓ Voz DEBRITTO

"Com base no que você compartilhou: o problema não é volume de tráfego — é conversão pós-clique. Sua taxa de adição ao carrinho está em 4,2%, abaixo dos 6–8% esperados para o ticket médio de R$ 280. O diagnóstico aponta para três gaps específicos na jornada de compra."

Ecoa a linguagem do cliente, nomeia o problema com dado, abre o raciocínio.

✗ Evitar

"A DEBRITTO é uma agência especializada em performance e growth marketing. Temos uma metodologia exclusiva que já ajudou diversas empresas a crescerem. Nossa proposta é levar sua empresa ao próximo nível através de estratégias personalizadas."

Genérico, centrado na agência, sem diagnóstico, sem dado do cliente.

LinkedIn — Post de resultado Institucional

✓ Voz DEBRITTO

"ROAS de 6,4× em e-commerce de moda. Não pela criatividade dos anúncios — pela estrutura de audiência. Três ajustes técnicos em 30 dias: exclusão de compradores recentes, lookalike de LTV alto, e separação de campanha por temperatura. O criativo não mudou."

Resultado + causa técnica. Desfaz o mito do "criativo mágico".

✗ Evitar

"Mais um resultado incrível para nosso cliente! 🚀 Superamos todas as expectativas e alcançamos números surpreendentes! Isso só é possível graças ao nosso time dedicado e à confiança dos nossos parceiros! #growth #marketing #resultados"

Euforia sem substância. Hashtags em excesso. Sem dado real.

Email de Entrega — Subject + abertura Operacional

✓ Voz DEBRITTO

"Subject: Executive Report — Fevereiro 2026 | [Nome do Cliente]

Segue o Executive Report de fevereiro. Ponto de atenção na página 4: o CPL do Google subiu 22% — identificamos a causa e a correção está descrita na seção de recomendações."

Subject descritivo. Abertura sinaliza o que requer atenção sem suspense.

✗ Evitar

"Subject: Relatório do mês

Espero que esteja bem! Segue em anexo o relatório referente ao mês de fevereiro. Qualquer dúvida fico à disposição. Abraços!"

Subject genérico. "Espero que esteja bem" é protocolo vazio. Fecha sem ação.

Follow-up Comercial — Após proposta enviada Comercial

✓ Voz DEBRITTO

"Oi [nome]. Enviei a Proposal na última quarta. Queria saber se faz sentido marcar 30 minutos esta semana para percorrer juntos o diagnóstico — especialmente a seção de gaps de conversão, que tem implicação direta no que você me contou sobre o Q2."

Referência específica ao conteúdo da proposta. Propõe ação concreta, não pergunta genérica.

✗ Evitar

"Oi [nome], tudo bem? Só passando para saber se você teve a oportunidade de analisar nossa proposta. Qualquer dúvida pode me chamar! Estou à disposição para o que precisar."

Pressão disfarçada de gentileza. Sem ancoragem ao conteúdo. Fecha passivamente.

03 — Invariantes — Valem em Todos os Canais

Dado antes de opinião Toda afirmação sobre performance começa com número. Opinião sem evidência não existe na DEBRITTO.

Causa antes de solução Nunca recomendar sem diagnosticar. O cliente precisa entender o porquê antes de aceitar o como.

Ação concreta no fechamento Todo documento, email ou mensagem termina com um próximo passo específico — nunca com "fico à disposição".

Zero euforia "Incrível", "surpreendente", "robusto", "de alto impacto" — adjetivos que não têm dado por trás são cortados. Sempre.

"O canal muda o tom.
A convicção nunca muda.
Em qualquer contexto, a DEBRITTO diz o que precisa ser dito — com o dado certo, na hora certa, sem rodeio."

Sistema de Design

Polimento
do Sistema

Os detalhes que separam um sistema de design funcional de um sistema de design completo — motion, fotografia, templates catalogados, regras de impressão e adaptação para fundos escuros.

01 — Motion & Animação

Easing Padrão DEBRITTO

cubic-bezier(.16, 1, .3, 1)

Entrada rápida, saída suave. Usado em todos os elementos que entram na viewport — seções, cards, modais. Transmite energia controlada.

Easing de Saída

cubic-bezier(.4, 0, .2, 1)

Transições de hover, estado ativo, feedback de clique. Material Design standard — familiar e previsível para o usuário.

Entradas de seção

opacity: 0 → 1
transform: translateY(24px) → 0
filter: blur(4px) → 0
duration: 700ms
easing: cubic-bezier(.16,1,.3,1)

Aplicar em todas as seções e cards com classe .reveal. Stagger de 70ms entre elementos do mesmo grupo (r1, r2, r3...).

Hover de card

transform: translateY(-3px)
box-shadow: aumenta profundidade
duration: 300ms
easing: cubic-bezier(.4,0,.2,1)
background: muda levemente

Feedback sutil de elevação — nunca escala (scale) em hover. Cards não crescem, apenas sobem levemente. Transmite leveza sem distorção.

Transições de cor

color, background, border-color
duration: 150–200ms
easing: linear ou ease

Links e textos: 200ms
Backgrounds: 150ms

Transições de cor são sempre mais rápidas que transições de posição. O olho percebe mudança de cor imediatamente — rápido é correto aqui.

Nunca animar: conteúdo de dados (números, tabelas) — distrai da leitura. Texto em parágrafos longos — provoca náusea. Loaders desnecessários. prefers-reduced-motion: todas as animações devem ser desabilitadas quando o sistema operacional solicitar. Já implementado no brandbook.

02 — Fotografia & Imagery

✓ Editorial / Abstrata

Texturas, dados visuais, ambientes de trabalho premium, composições geométricas. Temperatura fria, contraste alto.

✓ Dados Visuais

Gráficos, dashboards, interfaces técnicas. Transmite o core da DEBRITTO: análise, precisão, resultado mensurável.

🤝

✗ Banco Genérico

Aperto de mãos, pessoas sorrindo em reunião, escritório com planta. Genérico, sem personalidade, comunica o oposto de premium.

Temperatura: fria (azulada) como padrão. Nunca imagens quentes (laranja/dourado dominante) — conflita com o Gold da paleta. Banco recomendado: Unsplash (filtro: dark, minimal, technology). Evitar Getty e iStock — muito corporativo e genérico. Alternativa: preferir não usar imagem a usar imagem ruim — o sistema tipográfico e as Linhas de Fluxo funcionam sozinhos.

03 — Templates Documentados

Template	Tipo	Skill / Referência	Status	Descrição
Proposal	HTML + PDF	/mnt/skills/user/debritto-proposta/	● Pronto	Diagnóstico + solução + investimento. Responsivo. Export PDF via Playwright.
Executive Report	HTML + PDF	brandbook → padrão HTML	● Pronto	Relatório executivo mensal. KPI cards, gráficos, seção de recomendações.
Growth Audit	HTML + PDF	brandbook → padrão HTML	● Pronto	Diagnóstico estruturado de crescimento. 9 dimensões, scoring, roadmap.
CRM Strategy	HTML	brandbook → padrão HTML	● Pronto	Estratégia CRM com fluxos, lead scoring, calendário de régua e KPIs.
Briefing de Criativos	HTML + PDF	brandbook → padrão HTML	● Pronto	Direcionamento de produção criativa para campanhas pagas.
Dashboard KPIs	HTML	app.debritto.com.br	● Pronto	9 abas. Multi-tenant. Next.js + Supabase + shadcn/ui.
Planilha de Eventos	XLSX	/mnt/skills/public/xlsx/	● Pronto	Planejamento e projeção para eventos com venda de ingressos. Cenários.
Papel Timbrado	DOCX	/mnt/skills/public/docx/ + brandbook	◐ Em build	A4, cabeçalho Navy, rodapé Off-White. Specs documentadas neste brandbook.

04 — Regras de Impressão

Conversão de Cores — RGB para CMYK

Navy #1B2451

CMYK: C89 M79 Y19 K8
Pantone: 289 C (mais próximo)
Uso impresso: cor principal, bordas, texto

Gold #B8996C

CMYK: C24 M37 Y57 K4
Pantone: 7508 C (mais próximo)
Uso impresso: acentos, labels, linhas

Off-White #F7F8FC

CMYK: C2 M1 Y0 K1
Uso impresso: fundos de seção, rodapé
Alternativa: papel creme 90g/m²

Navy Light #C8CCE0

CMYK: C16 M11 Y4 K1
Uso impresso: divisores, linhas sutis
Pode aparecer como cinza em P&B

Especificações de Impressão

Papel recomendado

Documentos: Couché fosco 150g/m²
Cartão de visita: Triplex 300g/m²
Papel timbrado: Offset 90g/m²

Acabamento

Laminação: fosca (não brilho)
Verniz localizado: apenas no logo
Relevo seco: aceito no monograma DB

Perfil de cor para PDF

Gráfica offset: PDF/X-1a ou PDF/X-4
Digital (Toner): PDF padrão RGB
Sangria: 3mm em todos os lados

Versão P&B

Navy #1B2451 → Preto #000000
Gold #B8996C → Cinza #888888
Off-White → Branco puro #FFFFFF

05 — Modo Escuro (Dark Mode)

Os entregáveis HTML da DEBRITTO já usam fundos Navy em seções específicas — essa é a implementação de dark mode da marca. O sistema não tem um "modo escuro" separado: tem seções claras e seções escuras que coexistem no mesmo documento.

Seção Clara (padrão)

Fundo#F7F8FC ou #FFFFFF

Texto principal#1B2451

Texto secundário#6B7280

Bordas#C8CCE0

Acento#B8996C

UsoManifesto, Sobre, Cores, Tipografia

Seção Escura (alternada)

Fundo#1B2451 ou #141a3d

Texto principal#FFFFFF

Texto secundáriorgba(200,204,224,.65)

Bordasrgba(200,204,224,.12)

Acento#B8996C

UsoCover, Posicionamento, Vocabulário

Regra de alternância: seções escuras e claras se alternam para criar ritmo visual. Nunca duas seções Navy consecutivas sem seção clara entre elas. Gold em fundos escuros: aprovado para texto (ratio 4.6:1). Em fundos claros: apenas decorativo. Nunca para texto sobre Off-White.

"Um brandbook não é um documento de regras.
É um sistema de convicções —
documentado para que qualquer pessoa
possa agir com a voz e a precisão da marca."

DEBRITTO Marketing & Growth — Brand Book v1.2

12 — Stack Tecnológico

As tecnologias que sustentam a operação.

Frontend & Interfaces

Next.js 15

Framework Principal

App Router, React Server Components, TypeScript. Deploy via PM2 + Nginx no VPS próprio.

shadcn/ui

Componentes UI

Biblioteca de componentes sobre Radix UI + Tailwind CSS v4. Customizados com a paleta DEBRITTO.

Tailwind v4

Estilização

CSS utility-first com variáveis customizadas para a identidade DEBRITTO. Radius mínimo, estética premium.

Backend & Dados

Supabase

Banco de Dados & Auth

PostgreSQL gerenciado, autenticação, storage e RLS. Base do sistema multitenant do portal DEBRITTO.

N8N

Automações

Orquestrador de fluxos em modo queue. Self-hosted em VPS próprio. Integrado com WhatsApp API e clientes.

VPS

Infraestrutura

Servidor próprio com Nginx + Certbot SSL. PM2 para gerenciamento de processos Node.js.

Projetos Ativos

debritto.com.br

Site institucional da agência

HTML puro com CSS customizado. Migração planejada para Next.js 15 + shadcn/ui.

brandbook.debritto.com.br

Guia visual da marca

HTML puro. Referência de identidade visual para IAs e equipe. Este documento.

app.debritto.com.br

Portal multitenant de clientes

Em desenvolvimento. Next.js 15 + Supabase + shadcn/ui. Dashboard de KPIs, área do cliente, autenticação.

n8n.debritto.com.br

Automações de clientes

N8N self-hosted em modo queue. Fluxos de WhatsApp, CRM e integrações para clientes da agência.

Quem
somos.

O espaço entre a agência genérica e a consultoria de gestão.

Quatro atributos que definem quem somos.

Confiante, não arrogante.
Claro, não simplório.

Identidade tipográfica.
Precisão em cada uso.

Área de proteção

Especificações & regras

As linhas de fluxo.
Sentidas, não gritadas.

Cada cor tem
uma função precisa.

Sistema tipográfico.
Hierarquia intencional.

Grid &
Espaçamento

Contraste &
Acessibilidade

Tipografia
em Contexto

Logo &
Variações Completas

Vocabulário
de Marca

Data
Visualization

Sistema de
Iconografia

Tom de Voz
por Canal

Polimento
do Sistema

A marca em uso real.

A identidade da DEBRITTO é o reflexo do nosso rigor.

As tecnologias que sustentam a operação.

Cada detalhe
importa.
Cada resultado
também.

DEBRITTO

Quemsomos.

O espaço entre a agência genérica e a consultoria de gestão.

Quatro atributos que definem quem somos.

Confiante, não arrogante.Claro, não simplório.

Identidade tipográfica.Precisão em cada uso.

Área de proteção

Especificações & regras

As linhas de fluxo.Sentidas, não gritadas.

Cada cor temuma função precisa.

Sistema tipográfico.Hierarquia intencional.

Grid &Espaçamento

Contraste &Acessibilidade

Tipografiaem Contexto

Logo &Variações Completas

Vocabuláriode Marca

DataVisualization

Sistema deIconografia

Tom de Vozpor Canal

Polimentodo Sistema

A marca em uso real.

A identidade da DEBRITTO é o reflexo do nosso rigor.

As tecnologias que sustentam a operação.

Cada detalheimporta. Cada resultadotambém.

Quem
somos.

Confiante, não arrogante.
Claro, não simplório.

Identidade tipográfica.
Precisão em cada uso.

As linhas de fluxo.
Sentidas, não gritadas.

Cada cor tem
uma função precisa.

Sistema tipográfico.
Hierarquia intencional.

Grid &
Espaçamento

Contraste &
Acessibilidade

Tipografia
em Contexto

Logo &
Variações Completas

Vocabulário
de Marca

Data
Visualization

Sistema de
Iconografia

Tom de Voz
por Canal

Polimento
do Sistema

Cada detalhe
importa.
Cada resultado
também.