MINI GUIA

LOGO SÍMBOLO CORES TIPOGRAFIA ÍCONES FOTOGRAFIA ILUSTRAÇÕES GRAFISMOS CORES PARA UX/UI INSPIRAÇÕES

Versão Principal Versão Negativa

Aplicação sobre fundos Área de segurança Redução

A área de
segurança é
igual a altura
da letra “P”
do logo.

Impressos: X=10mm
Digital: X=70px
 LOGO SÍMBOLO CORES TIPOGRAFIA ÍCONES FOTOGRAFIA ILUSTRAÇÕES GRAFISMOS CORES PARA UX/UI INSPIRAÇÕES

Versão Principal Versão Negativa

Aplicação sobre fundos Área de segurança Redução

A área de segurança
é igual a duas vezes
a altura do pixel.
x

Impressos: X=8mm
Digital: X=40px
 LOGO SÍMBOLO CORES TIPOGRAFIA ÍCONES FOTOGRAFIA ILUSTRAÇÕES GRAFISMOS CORES PARA UX/UI INSPIRAÇÕES

Códigos Proporções

CINZA CINZA CLARO AZUL CORAL

Cuidado!
Usamos o coral
apenas para
pequenos detalhes.

Seguindo essa
proporção não
tem erro ;)

Pantone: Cool Gray 11 C Pantone: Cool Gray 9 C Pantone: 306 C Pantone: Warm Red C
C.44 M.34 Y.22 K.77 C.30 M.22 Y.17 K.57 C.75 M.0 Y.5 K.0 C.0 M.83 Y.80 K.0

R.65 G.65 B.65 R.97 G.97 B.97 R.0 G.197 B.255 R.255 G.86 B.48
#414141 #616161 #00C5FF #FF5630
 LOGO SÍMBOLO CORES TIPOGRAFIA ÍCONES FOTOGRAFIA ILUSTRAÇÕES GRAFISMOS CORES PARA UX/UI INSPIRAÇÕES

Pesos Como usar

Monserrat Títulos
Para títulos usamos a
Monserrat Extra Bold.
AQUI SEU
CARRO NOVO
EXCLUSIVAMENTE EM
CAIXA ALTA!

Thin
Não usamos assim:

DA PÉ.
Aqui seu
Light carro novo
da pé.
Regular
Medium Sub Títulos
Concorra a 12.457 carros 0Km
Bold Para subtítulos usamos caixa
alta e baixa normalmente, em
qualquer peso da Montserrat.*
toda semana.
Extrabold *Usamos a Montserrat Bold
para os destaques.

Texto corrido Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinci-

Para textos corrido usamos

dunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
caixa alta e baixa exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
normalmente, em qualquer
Tipografia para sistema (Apresentações em PPT) peso da Montserrat.* eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat

*Usamos a Montserrat Bold

nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
para os destaques. delenit augue duis dolore te feugait nulla facilisi.

Verdana
Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tinci-
dunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tint
 LOGO SÍMBOLO CORES TIPOGRAFIA ÍCONES FOTOGRAFIA ILUSTRAÇÕES GRAFISMOS CORES PARA UX/UI INSPIRAÇÕES

Inspirador Para o dia a dia

Nosso ícone inspirador é mais proprietário e simpático. Nosso ícone do dia a dia é mais prático e direto.
Ele é construido combinando o pixel do logo junto com um Ele é construido em outline e deve ter o ângulo
detalhe de cor. resperentando perspectiva.

Onde usamos? Onde usamos?

Ele é indicado para peças institucionais. Ele é exclusivo para materiais de UX/UI
Exp.: Anúncios, folhetos, mídia exterior, etc. Exp.: Menu de app, botões do site, etc.

Pixel medindo Ângulo/

24x24px Perspectiva

Espessura da
linha: 12pt
Espessura da
linha: 8pt

Área de Área de
segurança segurança

O grid é formado por 16 módulos de largura Cada módulo O grid é formado por 16 módulos de largura Cada módulo
por 16 módulos de altura tem 24x24px por 16 módulos de altura tem 24x24px

Aplicação sobre fundos Aplicação sobre fundos

 LOGO SÍMBOLO CORES TIPOGRAFIA ÍCONES FOTOGRAFIA ILUSTRAÇÕES GRAFISMOS CORES PARA UX/UI INSPIRAÇÕES

Nosso estilo fotográfico

retrata pessoas
determinadas, inseridas em
diversos contextos.

O olhar na câmera enfatiza

essa coragem de seguir em
frente e enfrentar os
desafios da vida.
 LOGO SÍMBOLO CORES TIPOGRAFIA ÍCONES FOTOGRAFIA ILUSTRAÇÕES GRAFISMOS CORES PARA UX/UI INSPIRAÇÕES

Cores para ilustrações Exemplo

Nossa ilustração ajuda a Temos cores exclusivas apara ilustrações que exigem tom sobre tom e
comunicação a ser variações de opacidade. elas são variações da paleta institucional.

entendida facilmente.

Veja como é: #000000 #202020 #292929 #414141

#616161 #858585 #B8B8B8 #E2E2E2

#003F6C #0072A6 #0097CE #00C5FF #59D9FF #8EE6FF #CAF3FF

#FF5630 #FF5630 #FF5630 #FF5630 #FF5630 #FF5630 #FF5630

Diretrizes conceituais Diretrizes técnicas Como construir

O Pixel é obrigatório na ilustração e deve ser

Elegante _Nosso desenho é Flat;
usado de duas formas:
_Shapes simples;
Minimalista _Deve ter ação / movimento; 1# Como base da ilustração
Próxima _Mostramos a experiência do usuário;
(ele deve ter uma tonalidade sutil)

Autêntica _Usamos cantos arredondados; 2# Ou interagindo com a ilustração

_Usamos até 8 combinações de tons cores;

_Não mostramos muitos detalhes

_Não usamos contorno

_Não mostramos os olhos;

_Não usamos sombra.

_Não usamos degradê +

 LOGO SÍMBOLO CORES TIPOGRAFIA ÍCONES FOTOGRAFIA ILUSTRAÇÕES GRAFISMOS CORES PARA UX/UI INSPIRAÇÕES

Exemplos no fundo branco

Exemplos no fundo cinza

 LOGO SÍMBOLO CORES TIPOGRAFIA ÍCONES FOTOGRAFIA ILUSTRAÇÕES GRAFISMOS CORES PARA UX/UI INSPIRAÇÕES

Nosso grafismo nasce do pixel.

Ele é o ponto de partida para novas perspectivas.
Veja como funciona:

A perspectiva é construida por linhas diagonais com ângulo de 45° Com as linhas traçadas, podemos ver as perspectivas
Pixel a partir do centro até fora do pixel, passando pelas quatro quinas. saindo do pixel.

É OBRIGATÓRIO
estar alinhado à
45° quina do pixel.

As linhas
se iniciam
no centro
do pixel.
 LOGO SÍMBOLO CORES TIPOGRAFIA ÍCONES FOTOGRAFIA ILUSTRAÇÕES GRAFISMOS CORES PARA UX/UI INSPIRAÇÕES

Nossa identidade possui 5 tipos de grafismos:

Perspectiva Flexível Flexível como Box Linhas Pattern

Para peças inspiradoras Para peças promocionais Para peças promocionais Para peças comunicaçõa interna Para parelaria, brindes ou ambientação.

Usamos em peças Institucionais mais Usamos em peças institucionais ou promocionais Usamos em peças institucionais ou promocionais Usamos em peças de comunicação interna. Usamos em brindes que precisam de estampas
inspiradoras, com pouco conteúdo de texto. com grande conteúdo de texto. com grande conteúdo de texto. ou materiais de ambientação
 LOGO SÍMBOLO CORES TIPOGRAFIA ÍCONES FOTOGRAFIA ILUSTRAÇÕES GRAFISMOS CORES PARA UX/UI INSPIRAÇÕES

Códigos Onde usamos?

Ela deve ser usada apenas em elementos da

As cores restritras são interface digital, exemplo: Botões, Textos, Links, Boxes

para uso exclusivo em

interfaces digitais.
Elas atendem as normas
técnicas de acessibilidade.
ENTRAR ENTRAR SALDO

ENTRAR ENTRAR SALDO

Onde não usamos?

Nunca usamos Nunca usamos Nunca usamos

em nossos Grafismos: no logo: como cor principal na
estrutura da peça:

OLÁ,
VAMOS
COMEÇAR?
Pular

#00000 #00000
 LOGO SÍMBOLO CORES TIPOGRAFIA ÍCONES FOTOGRAFIA ILUSTRAÇÕES GRAFISMOS CORES PARA UX/UI INSPIRAÇÕES

LEVANTA AQUI SEU

PEGA CARRO NOVO
FAZ DA PÉ.
OLHAR PARA

OLHAR PARA
O PLANO DE
COMPRAR
SEU CARRO
E VER
QUE DÁ PÉ. O PONTO DE
Concorra a
100 carros 0Km
+ ÔNIBUS
E VER UM
toda semana. Milhares de prêmios

PONTO
#novoolharpan Lorem ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et

DE PARTIDA.
Olhar para
OLHAR PARA LEVANTA
PEGA
o plano de
AS METAS E
comprar seu VER AS
CONQUISTAS
FAZ
carro e ver
SE TORNANDO

QUE DÁ PÉ
REALIDADE

#novoolharpan
#novoolharpan
 LOGO SÍMBOLO CORES TIPOGRAFIA ÍCONES FOTOGRAFIA ILUSTRAÇÕES GRAFISMOS CORES PARA UX/UI INSPIRAÇÕES

Fred Galo

#novaculturapan
Fatura atual Próximas faturas

R$ 350 R$ 120
Limite disponível

R$ 1230

OLHAR PARA Fev

CA SAR O FIM DO MÊS

E VER O INÍCIO
CPF

DE UMA OLÁ,
VAMOS
Auto posto Brasil R$ 320

MUDANÇA
a 2 dias
Entrar

COMEÇAR? Bazar da Ana

a 7 dias
R$ 30

Bifarma R$ 212
Cadastrar Esqueci a senha a 9 dias
Pular

Camila Lorem ipsum dolor sit amet,

consecLorem ipsum dolor sit
Lorem ipsum dolor sit amet,
consecLorem ipsum dolor sit

Souza amet, consectetuer

adipiscing elit, sed diam
nonummy nibh euismod
amet, consectetuer
adipiscing elit, sed diam
nonummy nibh euismod
tincidunt ut laoreet Lorem tincidunt ut laoreet Lorem
ipsum dolor sit amet, ipsum dolor sit amet,
consectetuer adipiscing elit,
sed diam nonummy nibh
euismod tincidunt ut laoreet

PLANEJAR OLHAR PARA O

CARTÃO DE CRÉDITO
É BOM. MAS E VER CARTA
REALIZAR É BRANCA PARA
MELHOR AINDA. UMA NOVA VIDA.

Pagar seu apê, trocar de carro, viajar nas férias: o

Banco PAN tem as soluções perfeitas pra transformar
sua vontade em realidade.

LEVANTA O Banco PAN acredita que os desafios

diários podem ser transformados em

PEGA
conquistas. É por isso que criamos um
cartão cheio de vantagens e facilidades

FAZ
de pagamento para você.

FINANCIAMENTO
SIMULE SEU
EMPRÉSTIMO
PAGUE
SUAS CONTAS
CONSULTE
SUA FATURA
DE VEÍCULOS Planejar suas próximas
conquistas, é com você.
O que faltava para você
fazer as compras do dia

BAIXE O APP a dia sem se preocupar,

deixa com a gente.

Peça já o seu !

#novoolharpan