☰

Brand Guidelines

Manual de identidade visual — Ambroz.io Martech

ambroz.io @ambroz.io MarTech v2.2
Identidade

Ambroz.io Martech

Une a criatividade das agências de publicidade com a inovação tecnológica por meio de inteligência artificial. Foco em automatizar o marketing e escalar a criatividade — criando sistemas, não apenas conteúdo.

Nome
Ambroz.io
Slogan
Seu marketing inteligente, autônomo e fácil de operar.
Tipo
MarTech
Marketing + Tecnologia
Perfis de Cliente

Público-Alvo

Três perfis de cliente que a Ambroz.io atende, cada um com necessidades distintas de maturidade digital.

Fundação Digital
MVP & Presença
Startups e pequenos negócios que precisam estruturar sua presença digital do zero. Campanhas iniciais, site, marca.
Escala Digital
Crescimento & Otimização
Empresas com presença digital definida que precisam crescer ou escalar. Automação de campanhas, funis, CRM.
Estrutura Digital
Sistemas & Inovação
Empresas maduras que precisam de sistemas inteligentes para operar marketing de forma autônoma e escalável.
Arquétipo

Personalidade da Marca

A Ambroz.io opera na intersecção entre o místico (Mago), o exploratório (Explorador) e o construtor (Criador).

40%
Mago
Transformação por tecnologia. IA como ferramenta mágica que automatiza o complexo. Tom: técnico com personalidade.
40%
Explorador
Novos territórios digitais. Dark UI com pontos de luz, deep navy, glows. Tom: reto, direto, sem rodeios.
20%
Criador
Constrói sistemas, não só conteúdo. Estruturas que escalam. Tom: estrategista, foco em resultados.
Sistema de Cor

Paleta de Cores

14 tokens no espectro azul-preto-branco. Arraste para navegar. A marca vive no azul — nenhuma outra cor sem aprovação.

Tipografia

Fontes & Escala

Syne para títulos, Manrope para corpo. Ambas via Google Fonts com fallback sans-serif.

Famílias
Syne · wght 400, 600, 700, 800 · letter-spacing -0.03em a -0.04em Manrope · wght 300, 400, 500, 600, 700 · line-height 1.5–1.65
Hero Title
Ambroz.io Syne 800 · clamp(42px, 8vw, 72px) · -0.04em · line-height 1.05
Section Title
Design System Syne 800 · clamp(32px, 5vw, 48px) · -0.03em · line-height 1.1
Big Stat
98% Syne 800 · clamp(40px, 6vw, 56px) · -0.03em
Etapa Title
Análise Técnica Syne 800 · 28px · -0.02em · line-height 1.25
Card Head
Componente Canônico Syne 700 · clamp(18px, 3vw, 24px) · line-height 1.3
Body
A Ambroz.io une criatividade das agências de publicidade com inovação tecnológica. Manrope 400 · 16px · line-height 1.65
Body Small
Texto secundário em cards e descrições compactas mantendo legibilidade. Manrope 400 · 14px · line-height 1.65
Button / UI
Call to Action Manrope 700 · 14px · letter-spacing 0.04em · uppercase
Caption
Tags, metadados, notas de rodapé Manrope 500 · 12px
Pill Badge
Section Label Manrope 700 · 11px · letter-spacing 0.12em · uppercase
Gradientes

Paleta Gradiente

Todos os gradientes seguem ângulo 165° — coesão visual entre peças diferentes. Bento Regular usa 135°.

Profundo
#000000 → #003087 → #0000FF
Elétrico
#003087 → #0000FF → #60C3F7
Aéreo
#60C3F7 → #AAB9FF → #FFFFFF
Bento Regular
rgba(0,48,135,0.4) → rgba(0,0,255,0.15)
--grad-deep Hero, dark hero cards, capas
--grad-electric Text gradient, CTAs, step circles dark
--grad-air Step circles light, slogans light
--grad-bento Bento items, service cards, cards dark
Sistema

Bordas, Sombras & Glows

Tokens de borda, sombra e glow organizados por contexto.

12px
20px
28px
pill
--radius-sm: 12px --radius-md: 20px --radius-lg: 28px --radius-pill: 9999px
Sombras
--shadow-dark: 0 40px 80px rgba(0,0,135,0.12)
--shadow-light: 0 40px 80px rgba(0,48,135,0.05)
Glows hover: 0 12px 40px rgba(0,0,255,0.08) etc.
Efeitos

Efeitos de Superfície

Texturas e camadas visuais que criam profundidade sem sair da paleta azul.

Dot Pattern
Radial 16px
Pontos brancos 6% opacity, 1.5px, 16px spacing. Exclusivo de seções dark.
Glassmorphism
Blur Obrigatório
Camadas finas (pills): 8px. Glass cards: 16px. Todo container translúcido precisa.
Glow Radial
Multi-camada
3 camadas: elétrico (60%/10%), céu (90%/5%), royal (20%/80%).
Shine Sweep
Brilho Deslizante
Feixe branco em hover: 0.18 (dark) / 0.30 (light). Easing customizado.
Movimento

Motion & Animações

Curvas de easing, stagger reveal e shine sweep — todo movimento segue um sistema coerente.

Curvas de Easing
--ease-expo cubic-bezier(0.19, 1, 0.22, 1)
99% das animações — cards, reveals, transições
--ease-smooth cubic-bezier(0.4, 0, 0.2, 1)
Hover de elementos sutis
Shine Sweep cubic-bezier(0.25, 0.46, 0.45, 0.94)
Brilho deslizante em hover de botões
Staggered Reveal
Delays: 0s, 0.12s, 0.24s, 0.36s, 0.48s · opacity 0→1 + translateY(10px)→0
Timings
Reveal: 1.1s ease-expo
Cards hover: 0.55s ease-expo
Botões hover: 0.5s ease-expo
Shine Sweep: 0.7s cubic-bezier(0.25,0.46,0.45,0.94)
Table hover: 0.2s
Componentes

Componentes Canônicos

Demonstração ao vivo dos elementos de interface da marca.

Pill Badge
Dark Light
CTA Button
Step Circle (Etapa Number)
1
2
3
Layout

Sistema de Espaçamento

Escala incremental de 4px com tokens semânticos para padding, gap e margin.

4px
8px
16px
24px
32px
48px
64px
80px
120px
Voz

Tom de Voz & Copy

Reto, técnico com personalidade, estrategista.

Reto e direto
  • Sem rodeios, sem linguagem pomposa
  • Frases curtas. Voz ativa.
  • Dados acima de promessas vagas
Técnico com personalidade
  • Domina tecnologia, não é frio nem robótico
  • Arquétipo Mago: IA como ferramenta mágica
  • Easter-egg: Geeenio 🥞
Estrategista
  • Foco em sistemas e resultado
  • Evitar adjetivos genéricos de agência
  • Prefira vírgulas e dois-pontos
MarTech
  • Une criatividade de agência com tech via IA
  • Nunca “agência” sozinha — somos MarTech
  • Automação como filosofia, não feature
Tom por Perfil de Cliente
Fundação Digital
Educativo e acolhedor. Explicar termos técnicos sem sobrecarregar. Transmite segurança e visão de futuro.
Escala Digital
Estratégico e preciso. Orientado a dados e resultados. Dominío técnico e visão de crescimento.
Estrutura Digital
Colaborativo e peer-to-peer. Competência complementar sem competir. Tom técnico direto.
Vocabulário

Léxico Canônico

Palavras que definem e protegem o posicionamento. O que usar e o que evitar em qualquer comunicação.

✓ Palavras-Sim
Sistema Automação Escala Operação Infraestrutura Consistência Inteligência Setup Ecossistema Autônomo Previsível LTV & CAC
✗ Palavras-Não
“Agência”Somos MarTech, não agência
“Estrateginha”Tom barato e incompatível
“Explosivo”Promessa vazia, marketing picareta
“Inovador”Adjetivo genérico sem substância
“Postezinho”Dimunitivo que contradiz o posicionamento
Copy

Estruturas de Frase

Três fórmulas canônicas que funcionam para a Ambroz.io. Toda comunicação comercial deriva de uma delas.

Estrutura A
Diagnóstico + Solução
“A maioria das empresas tem presença digital mas não tem sistema. A gente monta o sistema.”
Estrutura B
Dado + Impacto
“Empresas que automatizam o marketing crescem 2× mais rápido. É o que a infraestrutura da Ambroz.io entrega.”
Estrutura C
Direta + CTA
“Seu marketing funcionando, sem depender do seu tempo. Fala com a gente.”
Calibração

Anti-Modelos

Comparações diretas entre o que a Ambroz.io nunca faria e o que de fato diz. O contraste é a melhor calibração de tom.

✗ Errado
“Somos uma agência criativa apaixonada por resultados!”
✓ Correto
“Construímos infraestruturas de marketing que operam sem depender do seu tempo.”
✗ Errado
“Vamos explodir suas vendas em 30 dias!”
✓ Correto
“Em 90 dias de operação, mapeamos o que funciona e escalamos.”
✗ Errado
“Trabalhamos com soluções inovadoras e disruptivas para o seu negócio.”
✓ Correto
“Setup completo de tráfego pago, automação de atendimento e relatório quinzenal.”
✗ Errado
“Você não vai acreditar no resultado que conseguimos para nossos clientes!!!”
✓ Correto
“Galon Tintas: de 0 a 120 leads qualificados por mês em 90 dias de operação.”
Aplicações

Modelos de Copy por Canal

Templates prontos por canal. Cada um respeita o tom e a estrutura canônica da marca.

WhatsApp — Follow-up
Oi [Nome], tudo certo!

Pra resumir o que discutimos: o maior gargalo hoje é [problema]. A proposta é montar [solução].

Tenho a proposta pronta até [data]. Prefere receber aqui no WhatsApp ou por e-mail?
E-mail Frio — Prospecção
Assunto: Marketing rodando sem precisar de você

[Nome], vi que [empresa] está crescendo em [segmento]. Esse momento exige uma operação que não dependa do seu tempo pessoal.

A Ambroz.io monta essa infraestrutura. Posso mostrar como em 20 minutos. Qual dia funciona?

Matheus — Ambroz.io Martech
Instagram — Social Proof
[Número] leads em [período].
Não foi sorte. Foi sistema.

[Cliente] passou de [estado] para [resultado] em [prazo]. O que mudou: tráfego estruturado + automação de atendimento operando junto.
CTA Final — Proposta
Próximo passo: revisamos a proposta juntos, alinhamos o escopo e você decide.

Sem pressão. Com clareza.

Confirmar reunião
Prova

Data Viz de Prova

Gráficos e números usados como prova de resultado, não como decoração. Toda visualização exige linha de leitura.

Big Number — Anatomia
+40%
em vendas nos primeiros 6 meses
Sistema de tráfego + atendimento. Galon Tintas, MG.
Número em Syne 800 · Unidade na mesma linha · Contexto abaixo · Cliente + local + prazo
Regras de Data Viz
Linha de leituraObrigatória em todo gráfico — contexto textual sempre presente
Número com provaNunca número sem cliente, período e métrica
Decoração vaziaGráfico sem contexto é marketing picareta — não usamos
Cores fora do sistemaGráficos usam apenas a paleta canônica azul
Qualidade

Do's & Don'ts

Regras essenciais para manter a consistência da marca em qualquer material.

✓ Do's
  • Background dark usa #00001A — nunca preto puro
  • Gradientes no ângulo 165° (135° para Bento Regular)
  • Fontes: Syne (título) e Manrope (corpo)
  • Hover: translateY(-3px) + glow azul — sem fundo cinza
  • Transições: 0.55s ease-expo (cards), 0.5s (botões)
  • Staggered delays: reveal-d1 a reveal-d5
  • Text gradient via -webkit-background-clip: text
  • Glassmorphism em todo container translúcido (blur(8px) fino, blur(16px) glass)
  • Dot pattern exclusivo de dark sections
  • Shine Sweep em botões e glass cards (position:relative;overflow:hidden)
  • Imagens em base64 inline + ícone SVG inline
  • Continuous wrapper para seções consecutivas de mesma cor
  • Texto em container translúcido herda cor da seção — nunca color:#fff fixo
✗ Don'ts
  • Nunca #000000 puro como fundo de seção
  • Nunca cores fora do espectro azul
  • Nunca fontes que não sejam Syne ou Manrope
  • Nunca fundo acinzentado sobre card com gradiente
  • Nunca dot pattern em seções light
  • Nunca duplicar dot pattern em card dentro de seção que já tem pattern
  • Nunca travessões longos (—) na copy — prefira vírgulas/dois-pontos
  • Nunca fotografia ou ilustração figurativa
  • Nunca overflow-x: hidden no body (bug iOS) — use clip
  • Nunca ::before para Shine Sweep se já ocupado
  • Nunca assets externos em entregas HTML — sempre base64
  • Nunca color:#fff fixo em container translúcido sem variante light
Verificação

Checklist de Consistência

Antes de publicar qualquer material visual:

Background dark usa #00001A, nunca #000000 puro
Gradientes no ângulo 165° (135° bento)
Fontes Syne (título) e Manrope (corpo)
Hover: translateY(-3px) + glow azul — sem cinza
Transições 0.55s ease-expo (cards) / 0.5s (botões)
Staggered delay em entrada de elementos
Text gradient via -webkit-background-clip: text
Glassmorphism em todo container translúcido
Dot pattern exclusivo de dark sections
Shine Sweep com position:relative;overflow:hidden
Imagens base64 + SVG inline — sem assets externos
Títulos longos: hyphens: auto; -webkit-hyphens: auto;
Continuous wrapper para seções mesma cor
Sem color:#fff fixo em container translúcido
UX

Acessibilidade & Responsividade

Contraste, breakpoints e prevenção de bugs comuns.

Contraste
#FFFFFF sobre #00001A — títulos dark
rgba(255,255,255,0.72) sobre #00001A — corpo dark
#0A0A1A sobre #F8F9FB — corpo light
Regra: cor de texto em container translúcido herda da seção — nunca fixar color:#fff
Responsividade
Breakpoint: 720px
Section gap: 80px → 56px
Grids: 2col → 1col, 3col → 1col, 4col → 2col
Títulos: clamp() garante fluidez
Bug iOS: nunca overflow-x:hidden no body — usar overflow-x:clip
Visual

Estilo Visual & Imagery

Direção abstrata/geométrica — sem fotografia, sem ilustrações figurativas.

Usar
Gradientes Elemento narrativo principal — Deep, Electric, Air
Glows radiais Atmosfera e hierarquia visual
Lucide icons Line icons stroke-width 2–2.5 — sem ícones detalhados
Tipografia gráfica Syne 800 como elemento visual de alto impacto
Evitar
Fotografia Nunca usar fotos de pessoas, ambientes ou objetos
Ilustrações Nada figurativo ou vetores complexos
Mockups Sem mockups de dispositivo com imagens realistas
Texturas orgânicas Nada de madeira, papel ou texturas naturais
Referência

Agent Prompt Guide

Tokens exportáveis para ferramentas de IA gerarem conteúdo on-brand.

Cores
--brand-primary: #0000FF / --brand-sky: #60C3F7 / --brand-royal: #003087 / --brand-soft: #AAB9FF
Superfície
--navy-deep: #00001A / --off-white: #F8F9FB / --text-dark: #0A0A1A
Gradientes
GRADIENT_DEEP / GRADIENT_ELECTRIC / GRADIENT_AIR / GRADIENT_BENTO (165°)
Tipografia
HEADING_FONT = Syne / BODY_FONT = Manrope / Hero: clamp(42px,8vw,72px) 800
Layout
CONTAINER_MAX = 860px / SECTION_GAP = 80px (56px mobile) / Breakpoint: 720px
Identidade
Ambroz.io Martech / Slogan: "Seu marketing inteligente..." / @ambroz.io