Atualizado em dezembro de 2023
Diretrizes da
marca Punto
Estas orientações cobrem 7 elementos centrais do nosso sistema de marca: logotipo, cor, tipografia, composição, iconografia, fotografia e tom de voz.
Recursos frequentes
Logo
A logo da Punto é um elemento valioso da nossa identidade visual. Os seguintes exemplos demonstram como usar o logotipo em uma variedade de situações para garantir que esteja sempre presente com o melhor contraste e ser reconhecível.
Marca Nominativa
O logo da Punto é reconhecido instantaneamente através de seu tipo de letra único e com o ponto vermelho, que sempre deve ser usado junto com o logotipo da Edenred nas comunicações.
Monograma
O monograma é uma abreviação do visual da marca. Está desenhado para uso digital: ícones para aplicações móveis, ícones de redes sociais, sites etc. Também pode ser usado em itens promocionais ou comunicação interna.
Slogan
Os pontos depois de cada palavra conectam o nome com a proposta da marca, as palavras escolhidas estão focadas nas áreas que ajudamos os nossos clientes a melhorar o seu negócio.
Marcas Associadas
Quando damos as boas-vindas a uma nova empresa, devemos associar fortemente a sua logo com a nossa. A melhor opção é definida de acordo com fatores locais e reconhecimento da marca.
Espaço Livre
Usamos o círculo vermelho de nossa logo para definir uma área final de espaçamento.
Cor e Escala
Cor
A logo da Punto deve aparecer em azul e vermelho sempre que for possível para fortalecer o reconhecimento da nossa marca. Também pode utilizar em branco, gelo e em todas as cores claras da nossa paleta de cores.
A versão branca e vermelha deve ser utilizada sempre sobre um fundo azul ou caso o contraste não garanta boa qualidade.
Escala
Para manter a legibilidade, a logo e o monograma nunca devem ser menores do que estes tamanhos mínimos.
Uso incorreto
O êxito de uma marca depende de que a logo da Punto mantenha uma aparência uniforme em todas suas comunicações.
Para preservar a integridade da logo, os seguintes exemplos ilustram como não deve ser utilizado.
Estas regras também se aplicam ao monograma e a logo do produto:
- Não altere a cor do logotipo ou elementos do logotipo.
- Não estique ou manipule o logotipo.
- Não corte o logotipo.
- Não use o logotipo online.
- Não gire o logotipo.
- Não coloque o logotipo em cores de baixo contraste.
- Não coloque o logotipo em fundos preenchidos ou com imagens.
- Não adicione efeitos ao logotipo.
Para resumir
01
Construa confiança através da consistência
02
Adapte-se ao ambiente
Nosso DNA
Nosso sistema gráfico é exclusivo da Punto e torna cada comunicação identificável, mesmo quando nossa logo não esteja visível. Um conjunto de duas formas nos permite brincar com diferentes composições.
Formas de círculo e ribbon
O círculo lembra o ponto final da logo e a ribbon é uma extensão do círculo. O traço pode ser utilizado tanto na horizontal quanto na vertical.
Como usar o círculo e o ribbon?
Os círculos e as o ribbon podem ser utilizados de muitas maneiras. Como tipografia, como recipiente, fundo ou como elemento chave da composição.
Aqui estão algumas orientações sobre como usá-los ↓
Os ribbons e os círculos podem ser combinados com a tipografia para dar balanço aos seus títulos. A altura das formas deve estar alinhada com a altura das letras minúsculas. A largura pode ser determinada livremente, desde que a composição permaneça harmoniosa. Use-os com moderação: 1, 3 ou 5, dependendo do tamanho do seu título.
Os ribbons e os círculos podem conter fotos e ilustrações. Certifique-se de aderir a uma proporção mínima de 2:3 para construir suas linhas.
Visão geral de um design para e-mail.
Os ribbons e os círculos podem conter texto, ícones e figuras chave. Para garantir que sua composição fique bem distribuída quanto mais texto você colocar dentro de um ribbon ou em um círculo, maiores devem ser às margens internas.
Outra forma de compor nossos ribbons é misturar com recortes e, seguindo o conceito da nossa marca. Você pode usá-lo com elementos grande ou apenas formas.
As faixas e os círculos também são visíveis através dos elementos editoriais e de navegação. Botões, etiquetas e pequenos pontos adicionam consistência ao nosso design.
Uso Incorreto
- Não deforme ou aumente os ribbons. Certifique-se de que as pontas estejam sempre perfeitamente redondas.
- Não deforme ou aumente o círculo.
- A forma do ribbons deve ser reconhecível. Certifique-se de manter uma proporção mínima de 2:3 (ou 3:2).
Para resumir
01
Nossas formas são uma extensão de nossa logo
02
Construir consistência
Paleta de Cor
Nossa paleta de cores consiste em duas cores principais e um sistema secundário que dá maior flexibilidade e garante acessibilidade na web.
Cores Primárias
Vermelho, azul e branco são nossas cores principais. Eles são feitos para que nossa marca seja clara, icônica e reconhecível. O uso intencional dessas duas cores funciona para gerar consistência e gerar valor em todos os tipos de execuções.
Azul
Branco
RGB 255 255 255
CMYK 0 0 0 0
HEX #FFFFFF
RGB 22 32 86
CMYK 100, 95, 0, 50
HEX #162056
Vermelho
RGB 247 39 23
CMYK 0 100 100 0
HEX #F72717
PMS 485 C
Cores Secundárias
A paleta de cores secundárias consiste em 14 cores, incluindo o preto. Estas cores oferecem flexibilidade para que nossa comunicação se adapte a qualquer tema e questão ergonômica. Eles são feitos para iluminar as cores primárias. Elas são feitas para iluminar as cores primárias e devem ser usadas com moderação.
Nossa paleta secundária funciona em um eixo brilhante para claro. Cada cor brilhante tem um tom claro.
Rosa
Rosa Claro
rgb 255 89 120
cmyk 0 85 30 0
hex #FF5978
pms 191 C
rgb 254 208 200
cmyk 0 21 14 0
hex #FED0C8
pms 4032 C
Branco Frio
Cobalto
Cobalto Claro
rgb 241 247 255
cmyk 10 2 0 0
hex #F1F7FF
pms 656 C
rgb 13 138 255
cmyk 90 44 0 0
hex #0D8AFF
pms 2174 C
rgb 176 239 255
cmyk 40 0 0 5
hex #B0EFFF
pms 2905 C
Violeta
Violeta Claro
rgb 113 28 255
cmyk 73 68 0 0
hex #711CFF
pms 2725 C
rgb 200 195 255
cmyk 29 23 0 0
hex #C8C3FF
pms 270 C
Preto
Cinza
Cinza claro
rgb 0 0 0
cmyk 0 0 0 100
hex #000000
pms Black C
rgb 109 119 135
cmyk 58 45 26 17
hex #6D7787
pms 4129 C
rgb 213 216 221
cmyk 16 6 0 0
hex #D5D8DD
pms 650 C
Como usar a paleta de cores?
Proporções de uso
1. O azul é a cor principal da paleta. É uma comunicação cruzada.
2. O branco também tem um papel muito importante na comunicação da nossa marca. Você deve fornecer equilíbrio com azul e vermelho.
3. O preto está dedicado a textos e ícones: nunca deve ser usado como planos de fundo ou tonalidades.
4. A paleta secundária deve ser usada de forma sensata para realçar detalhes ou informações na composição, sem afetar as cores principais. É construído com uma tonalidade clara para cada cor.
Cores vivas devem ser usadas para texto, formas, ícones e pequenas tonalidades planas (como fitas e círculos). Sua densidade nos permite destacar detalhes ou informações. Eles não devem ser usados em planos de fundo e grandes cores exatas.
As cores claras são usadas para ícones, pequenas tonalidades planas e planos de fundo. Eles nos ajudam a manter uma composição leve.
Variações de Cor
Às vezes, você pode precisar de contraste de cor extra em seu design.
Quando necessário, você pode reduzir a opacidade das cores brilhante seguindo as regras abaixo ↓
Essas cores diluídas devem ser usadas para dados como gráficos, figuras ou planos, para ilustrações e para fins de UI/UX.
As cores devem ser usadas apenas com 10% de opacidade e 5% para fundos.
Acessibilidade Web
O guia a seguir ajudará você a usar as cores de forma a garantir a acessibilidade na web. Nosso padrão de referência é o RGAA (sigla para Référentiel Général d'Accessibilité pour les Administrations).
"AA" é o nível de acessibilidade que devemos fornecer aos nossos usuários na web.
Importante :
- Cores frias, brancas e claras não devem ser usadas nos textos.
- Texto em fundo colorido – Sem tamanho mínimo ou peso
- Texto em fundo colorido – Tamanho mínimo 24px Peso mínimo Regular Fundo Branco ou Gelo.
- Texto aprovado para AA
Uso incorreto
01 Não use cores que não sejam da marca.
02 Não use proporções de cores incorretas.
03 Não crie efeitos de cor ou novas cores.
04 Não use alto contraste de cores.
05 Não use gradientes.
06 Não use preto nos fundos.
Para resumir
01
O azul, vermelho e o branco nos tornam icônicos
02
Nossas cores secundárias devem ser usadas com moderação
Tipografia
O uso constante da tipografia é essencial para dar vida a uma marca. Nosso sistema combina uma fonte personalizada, Edenred, com uma fonte secundária mais condensada, mas geometricamente semelhante, Ubuntu.
Edenred
Edenred é uma fonte única projetada especificamente para nós. Isso nos ajuda a expressar nossa personalidade e torna nossa marca única. Esta é a fonte do logotipo do Punto.
Você pode usá-lo para títulos ou parágrafos curtos.
Ubuntu
Ubuntu é uma fonte do Google. Oferece um ótimo equilíbrio com Edenred redondo e grande, pois é um pouco mais condensado. Seus ângulos também transmitem o visual da Punto.
Você pode usá-lo apenas para parágrafos ou pequenos subtítulos.
Century Gotic
Century Gothic usado apenas para modelos de escritório.
Como usar a tipografia?
Combinações
A combinação da Edenred e Ubuntu destacam nosso tipo de letra principal, enquanto oferece melhor legibilidade para os parágrafos.
Ao combinar, procure sempre o contraste através do tamanho, procure o equilíbrio através do peso e uma boa hierarquia.
CTA's
Para criar e identificar CTA’S para as comunicações da marca, pode optar por um botão com forma de ribbon, um cursor redondo personalizado ou um link.
Importante :
Os textos dos CTA’S devem ser sempre escritos com a tipografia da Edenred.
Uso incorreto
01 Não faça diferentes níveis de texto com o mesmo tamanho de fonte.
02 Não faça com que diferentes níveis de texto tenham o mesmo peso.
03 Não ajuste o
04 Não escreva em letras maiúsculas.
05 Não use Ubuntu em títulos.
06 Não escreva textos em cores claras. Seu texto deve estar sempre legível.
Para resumir
01
Nossa tipografia é um elemento central de nossa marca
02
Aponte para o contraste no tamanho
Iconografia
A iconografia é uma boa forma de trazer novas formas de imagens para a marca. Nosso sistema é baseado em uma ampla gama de ícones que nos permitem falar universalmente para vários tipos de clientes e segmentos.
Ícones
Dos fundamentos da interface aos mais ilustrados, nosso conjunto oferece uma ampla gama de ícones.
Os ícones podem ser representados em qualquer cor da paleta da marca, desde que legível.
Para resumir
01
Os ícones acompanham os textos
02
Arredondamento é a chave
Fotografia
A fotografia tem um papel fundamental na representação da nossa marca no dia a dia e nos hábitos. Nossas fotografias devem ser autênticas e positivas.
Pessoas
Somos uma rede humana: por trás de cada conexão e de cada transação, existe uma pessoa. Aqui estão algumas dicas sobre como enaltecer as pessoas em nossas comunicações.
01 Opte por uma pausa natural e autêntica.
02 Capture a diversidade étnica e de gênero sempre que possível.
03 Os temas devem ser identificáveis. Opte por funcionários ou usuários reais.
04 Brinque com a nossa cor azul nas roupas ou no ambiente. Deve parecer sutil.
05 Use iluminação natural e busque um bom balanço de branco.
06 Capture visualizações diferentes, de close-ups a vistas panorâmicas, na mesma foto.
07 Use a profundidade de campo para adicionar contraste.
Tendências e conceitos
Se você precisa de uma foto de estoque, para evidenciar uma tendência de mercado ou para ilustrar um conceito, aqui estão algumas dicas sobre como escolher uma foto ou ilustração de estoque.
01 Iluminação. Certifique-se de que a luz esteja uniforme.
02 Escolha cores naturais. Não use fotos supereditadas. #Semfiltro
03 Opte por um enquadramento correto e amplo.
Para resumir
01
Faça da biblioteca de fotos da Edenred sua primeira escolha
02
Opte por imagens naturais e positivas
Tom de voz
A voz e o tom expressam a essência de uma marca, revelando quem somos e o que defendemos. É fundamental nos diferenciarmos e definirmos nossa personalidade, escolhendo as palavras, frases e características certas em todas as nossas comunicações. Isso é o que claramente nos torna “Point”.
Essência
Simples e direto
Sabemos que é difícil manter as coisas simples. Por isso, vamos ser diretos e sempre promover a simplicidade e a transparência em tudo o que dizemos.
Sincero
Existem seres humanos por trás de cada atividade em que estamos envolvidos. Por isso, procuramos dar um toque humano a tudo o que fazemos. Nossa linguagem é autêntica, honesta e sincera.
Caloroso
Somos curiosos, de mente aberta, atenciosos e animados para compartilhar nossa inovação. É por isso que nosso tom é sempre amigável, mas nunca sarcástico.
↓
01 Escolha palavras claras e verbos fortes.
02 Elimine os advérbios.
03 Converta a voz passiva em voz ativa.
↓
01 Use evidências concretas.
02 Limite o uso de pontos de exclamação.
↓
01 Transforme afirmações negativas em positivas.
02 Foque sempre nas soluções e não nos problemas.
03 Use perguntas retóricas.
Para resumir
01
Fale como uma pessoa sincera e empática
02
Direto e fácil de entender
2023 © Punto