Pular para o conteúdo

Marca

A marca Alameda, do jeito certo.

Logo, cores, letras e tom de voz: o que usar e o que evitar.

01

Conceito

Uma alameda é um caminho ladeado de árvores. É assim que a Alameda vê o marketing de uma empresa: um caminho percorrido em etapas (aparecer, atrair, converter, crescer), sempre no mesmo ritmo e com alguém do lado.

O símbolo é um "A" feito de uma fita dobrada. A dobra abre uma passagem no meio da letra, como o arco no fim da alameda, e é por ela que entra a luz âmbar. A fita é cor de pedra: o chão, firme e calmo. O âmbar é a luz no fim do caminho, por isso aparece pouco: no símbolo, no botão, numa palavra.

A logo anterior já era um "A" de fita dobrada, em laranja. A nova mantém a fita e troca o resto: as cores passam a ser as do site, a dobra ganha volume e o nome passa a usar as mesmas letras dos títulos e dos textos do site.

02

Versões da logo

A logo tem quatro composições. Use sempre um dos arquivos prontos; não remonte o símbolo e o nome.

  • Horizontal é a principal: o símbolo à esquerda e o nome em duas linhas. Use quando houver espaço, a partir de 64 px de altura.
  • Em uma linha é para espaços baixos: o rodapé do site, a assinatura de e-mail, o rodapé de um documento.
  • Empilhada é para espaços quadrados ou em pé: capa, cartão, abertura de vídeo.
  • Só o símbolo é para quando o nome já aparece por perto: o cabeçalho do site, foto de perfil, ícone da aba, marca-d'água.

Cada composição existe em duas versões com volume: para fundo escuro (a fita em pedra) e para fundo claro (a fita em carvão). A luz âmbar por dentro da dobra é a mesma nas duas.

A versão em uma cor só entra quando a peça tem uma tinta só ou quando o degradê não pode ser reproduzido: bordado, carimbo, gravação, impressão em preto. Nela, as dobras viram cortes finos.

03

Área de respiro

Logo da Alameda Marketing com a área de respiro marcada em volta
A área de respiro mede uma perna em toda a volta.

Deixe em volta da logo um espaço livre de uma perna. A perna é a largura da base de uma das pernas da fita, cerca de um quarto da largura do símbolo. Dentro desse espaço não entra texto, borda de página, outra marca nem a margem de uma foto.

A regra vale para as quatro composições. No ícone da aba e na foto de perfil, a margem já está no arquivo.

04

Tamanho mínimo

As quatro versões da logo no menor tamanho permitido
O menor tamanho de cada versão.

Abaixo destes tamanhos o nome deixa de ser lido. Se o espaço for menor, troque de composição em vez de reduzir.

VersãoAltura mínima na telaAltura mínima no papel
Horizontal64 px11 mm
Em uma linha28 px6 mm
Empilhada104 px26 mm
Só o símbolo24 px6 mm
Ícone16 pxnão se aplica

Abaixo de 24 px, use o ícone: é o mesmo símbolo, sem os cortes das dobras, dentro de um bloco carvão.

05

Cores

Carvão--carvao#0D1210
Verde-escuro--verde#1F3A2E
Pedra--pedra#E6E1D6
Âmbar--ambar#FFB54A
Cobre--cobre#9A5210

São cinco cores principais. O carvão e o verde-escuro são os fundos. A pedra é a cor da fita e dos textos sobre fundo escuro. O âmbar é a luz: aparece pouco. O cobre acompanha o âmbar nas sombras da dobra e nos fundos claros.

CorHexRGBCMYK
Carvão#0D121013, 18, 1628, 0, 11, 93
Verde-escuro#1F3A2E31, 58, 4647, 0, 21, 77
Pedra#E6E1D6230, 225, 2140, 2, 7, 10
Âmbar#FFB54A255, 181, 740, 29, 71, 0
Cobre#9A5210154, 82, 160, 47, 90, 40

Cores de apoio do site: carvão 2 #141B18, verde-escuro 2 #17291F, pedra 2 #D8D2C4, papel #F6F3EC, claro #EFEAE0, âmbar 2 #FFC878 e cobre de texto #8F4C0E.

Contraste dos pares mais usados (quanto maior, mais fácil de ler; texto normal pede 4,5 ou mais):

TextoFundoContrasteServe para
PedraCarvão14,50Texto normal
PedraVerde-escuro9,46Texto normal
ÂmbarCarvão10,76Texto normal
ÂmbarVerde-escuro7,02Texto normal
Carvão 2Pedra13,42Texto normal
Carvão 2Papel15,80Texto normal
Cobre de textoPedra5,02Texto normal
Cobre de textoPapel5,91Texto normal
CobrePedra4,49Só texto grande e ícones
ÂmbarPedra1,35Não usar como texto

Regras:

  • O âmbar não é cor de texto em fundo claro. Em fundo claro, links e destaques usam o cobre de texto.
  • O âmbar não é cor de fundo de página. Ele aparece no símbolo, no botão principal e em palavras de destaque.
  • Na versão em uma cor, a logo inteira vai em pedra (fundo escuro), em carvão (fundo claro), em preto ou em branco. Nunca em âmbar.

Paleta completa no design system

06

Tipografia

Fraunces

Alameda Marketing

ABCDEFGHIJKLM
abcdefghijklm 0123456789

Manrope

Alameda Marketing

ABCDEFGHIJKLM
abcdefghijklm 0123456789

A marca usa duas famílias de letra, as mesmas do site.

  • Fraunces, com serifa, é a letra dos títulos e de "Alameda" na logo.
  • Manrope, sem serifa, é a letra dos textos, dos botões e de "Marketing" na logo.

Na logo, o nome já vem desenhado: não redigite "Alameda Marketing" ao lado do símbolo.

Como as letras se organizam:

PapelLetraPesoTamanho no site
Título de aberturaFraunces360de 46 a 132 px
Frase de apoio do títuloFraunces itálica, em âmbar300de 25 a 56 px
Título de seçãoFraunces380de 34 a 76 px
TextoManrope40017 px, com entrelinha de 1,6
Botão e rótuloManrope600 a 70014 a 15 px

Os títulos são grandes, de peso leve e com as letras um pouco juntas. A palavra de destaque de um título vai em itálico e na cor de realce. O texto nunca vai em Fraunces, e os títulos nunca vão em negrito.

As duas famílias são distribuídas sob a SIL Open Font License 1.1, que permite o uso comercial. Fraunces: © 2020 The Fraunces Project Authors. Manrope: © 2019 The Manrope Project Authors.

Todos os estilos de letra no design system

07

Usos certos e errados

Certo:

  1. A versão principal sobre fundo escuro.
  2. A versão para fundo claro sobre pedra, papel ou branco.
  3. A versão em uma cor quando a peça tem uma tinta só.

Errado:

  1. Esticar ou achatar a logo.
  2. Trocar as cores.
  3. Girar ou inclinar.
  4. Usar a versão de fundo escuro sobre fundo claro: a fita some.
  5. Trocar a letra do nome ou redigitar o nome ao lado do símbolo.

Também não: pôr sombra, contorno ou brilho; cortar um pedaço do símbolo; usar o símbolo como letra dentro de uma palavra.

Certo

Logo principal sobre fundo carvão
Certo: a versão principal sobre fundo escuro.
Logo para fundo claro sobre fundo pedra
Certo: a versão para fundo claro.
Logo em uma cor sobre fundo verde-escuro
Certo: uma cor, quando há uma tinta só.

Errado

Logo esticada e achatada
Errado: esticar ou achatar.
Logo com as cores trocadas para azul e vermelho
Errado: trocar as cores.
Logo inclinada
Errado: girar ou inclinar.
Logo de fundo escuro aplicada sobre fundo claro, quase invisível
Errado: a versão errada para o fundo.
Símbolo com o nome escrito em outra letra
Errado: trocar a letra do nome.

08

Marca sobre foto e vídeo

Sobre foto ou vídeo, use a versão para fundo escuro e garanta que atrás dela haja escuro.

  • Ponha a logo sobre uma área escura da imagem, ou sobre um véu escuro (carvão com transparência) por cima da imagem.
  • O nome precisa de contraste de 4,5 ou mais contra o ponto mais claro que fica atrás dele.
  • Em vídeo, confira em mais de um momento: a luz muda.
  • Não ponha a logo sobre céu, névoa clara ou reflexo de sol sem véu.

Nos dois exemplos, o véu fez o contraste do nome passar de 1,29 para 6,07 na foto, e de 2,69 para 10,64 no quadro do vídeo.

Logo da Alameda sobre a foto da alameda ao sol, com um véu escuro do lado esquerdo
Sobre foto: véu escuro do lado em que a logo fica.
Logo da Alameda no canto de baixo de um quadro do vídeo de abertura, sobre um véu escuro
Sobre vídeo: véu escuro na base, logo em uma linha.

09

Ícones

Os ícones do site são de traço, não de preenchimento.

  • Traço de 1,6 sobre uma grade de 24, com pontas e cantos arredondados.
  • Uma cor só: a do texto ao lado. O âmbar só entra quando o ícone faz parte de um destaque.
  • Tamanho: 1,15 vez a altura do texto que acompanham.
  • O ícone acompanha uma palavra; sozinho, só em botão que tenha nome para leitor de tela.
  • Não misture ícones cheios com ícones de traço, e não use emoji no lugar de ícone.

Quando for preciso um ícone novo, desenhe na mesma grade, com o mesmo traço.

10

Estilo de imagem e de vídeo

As imagens da Alameda mostram dois mundos, com a mesma luz.

A alameda. Um caminho de pedra entre árvores, na névoa do amanhecer, com um arco ao fundo e a luz âmbar vindo de trás dele. Tons de verde-escuro e carvão, pedra molhada, luz quente. Câmera lenta e firme, como em filme de arquitetura. É o cenário da abertura, dos capítulos e da chamada final.

A mesa de trabalho. Um estúdio ao anoitecer: mesa escura, luz quente de luminária, telas e objetos do serviço (notebook, celular, câmera, caderno). É o cenário das páginas de serviço.

Regras para as duas:

  • Sem pessoas reconhecíveis.
  • Sem marcas, logotipos ou interfaces de terceiros; telas mostram interfaces genéricas.
  • Sem texto legível dentro da imagem.
  • Verde-escuro, carvão e âmbar dominam. Nada de cores saturadas, de azul frio ou de fundo branco de banco de imagem.
  • Vídeos curtos, em laço, sem corte no meio, com imagem de capa.
  • Toda imagem que recebe texto por cima leva véu escuro.

Para a página de saúde vale a exceção já usada no site: ambiente claro e calmo, com luz natural, sem pessoas, sem equipamento e sem símbolos.

11

Aplicações

Quatro exemplos de como a marca aparece no dia a dia.

Símbolo da Alameda em recortes redondos de quatro tamanhos
Foto de perfil: só o símbolo, sobre carvão ou verde-escuro.
Assinatura de e-mail com o símbolo, o nome, o cargo, o site e o e-mail
Assinatura de e-mail: símbolo para fundo claro, nome em Fraunces.
Capa de proposta em fundo carvão com a logo em uma linha no alto
Capa de proposta: logo em uma linha no alto, título em Fraunces.
Post quadrado com a logo no alto e a frase "Marketing parado custa caro." sobre uma foto com véu escuro
Post: foto com véu, logo no alto, uma frase só.

12

Tom de voz

Como a Alameda escreve, no site, nas peças e nas propostas.

Princípios

  1. Comece pelo problema do cliente. A primeira frase fala do dia a dia dele, não da agência.
  2. Frase curta, palavra comum. Escreva como quem explica a um dono de empresa no balcão: sem jargão e sem inglês quando existe palavra em português.
  3. Número só quando está no contrato. Quantidade, prazo e preço aparecem sempre com o número que a Alameda cumpre.
  4. Prometa o trabalho, não o resultado. A gente promete o que controla: entrega, quantidade e prazo. Venda, seguidor e posição no Google, não.
  5. Fale direto com a pessoa. Use "você" para o cliente e "a gente" ou "a Alameda" para a agência.

Escrevemos assim / não escrevemos assim

Escrevemos assimNão escrevemos assim
Marketing parado custa caro.Soluções inovadoras de marketing para alavancar o seu negócio.
12, 16 ou 20 posts por mês, escritos no contrato.Conteúdo de qualidade com a frequência ideal.
Primeiras peças em até 5 dias úteis depois do briefing.Agilidade e rapidez em todas as entregas.
Não prometemos vendas, seguidores nem posição no Google.Resultados garantidos.
Você aprova. A gente entrega.Nossa equipe de especialistas cuida de tudo para você.
Pedir propostaSaiba mais

A coluna da esquerda vem do site. A da direita junta exemplos do que evitar.

Palavras

  • Usamos: proposta, pacote, por mês, contrato, prazo, entrega, a partir de, você, a gente.
  • Evitamos:
    • grátis e gratuito, porque a Alameda não oferece serviço grátis;
    • garantido, resultado garantido, o melhor, líder, número 1, revolucionário;
    • alavancar, 360°, disruptivo.

Formato

  • pt-BR com acentos.
  • Datas em DD/MM/AAAA (13/11/2026).
  • Valores com "R$" e espaço: R$ 1.000. Use "a partir de" quando o preço varia.
  • Números em algarismo.
  • O botão principal é sempre "Pedir proposta", com um nome e um destino só em toda página.
  • Não prometa prazo de resposta ao formulário.
  • Nada de número, cliente, depoimento ou citação inventados. As provas são só as que já estão publicadas.

Saúde

Toda peça que fala de saúde, de clínica ou de médico passa pela revisão de compliance antes de ser publicada (Resolução CFM nº 2.336/2023). Nela não entram:

  • promessa de resultado;
  • antes e depois;
  • sensacionalismo;
  • pergunta que sugira que o leitor tem uma doença.

13

Baixar a marca

O pacote traz a logo pronta para uso:

  • as quatro composições em vetor (SVG), cada uma em oito versões: para fundo escuro, para fundo claro, duas cores sem degradê, uma cor clara, uma cor escura, preto e branco;
  • as versões principais em PNG com fundo transparente;
  • o ícone para tamanhos pequenos;
  • as licenças das duas letras do nome.

Parceiros, clientes e imprensa podem usar estes arquivos para citar a Alameda ou indicar um trabalho feito com ela, sem alterar o desenho. Não use a marca de forma que sugira sociedade, patrocínio ou recomendação que não existe. Em caso de dúvida, escreva para contato@alamedamarketing.com.br.

Baixar o pacote da marca

Arquivo ZIP, 3,0 MB.

Pedir proposta