Escolar Documentos
Profissional Documentos
Cultura Documentos
GOL BrandBook Compactado - 240330 - 234910
GOL BrandBook Compactado - 240330 - 234910
identidade visual
2
Logo
O logo é o principal elemento da identidade
da GOL. É fundamental observar as regras
previstas neste manual para preservar sua
integridade e legibilidade em qualquer situação.
03.Versões
11.Sobre fundos
14.Área de proteção
15.Dimensão mínima
16.Usos indevidos
3
Logo
Logo
Versões Versão
Sobre fundos
Área de proteção preferencial sobre
Dimensão mínima
Usos indevidos fundos claros
sobre cores
Dimensão mínima correta para cada fundo. utilizamos a versão negativa,
Abaixo, exemplificamos o exemplificado a seguir.
Usos indevidos
Logo versão preferencial sobre fundos claros Logo versão preferencial sobre fundos escuros
12
Logo
Versões
Logo O mesmo racional se aplica área sem muita complexidade
sobre fotografia. A diferença é visual e/ou manipular a
Versões
que a transparência do elo se imagem de fundo a ponto de
Sobre fundos
Área de proteção preferenciais apropria da transição de cores
do fundo, por isso, devemos
termos total legibilidade do
logo.
sobre fotografias
Dimensão mínima posicionar nosso logo em uma
Usos indevidos
Logo versão preferencial sobre fundos claros Logo versão preferencial sobre fundos escuros
13
Logo
Versões
Logo Para fundos intermediários, em situações restritas, com
utilizamos a versão negativa preferência sempre da versão
Versões
como preferencial. Para todos monocromática branca.
Sobre fundos
Área de proteção monocromáticas os outros casos exemplificados
abaixo só devem acontecer
Dimensão mínima
Usos indevidos sobre cores
Logo versão negativa e monocromática branca Logo versão monocromática preta
14
Logo
Versões
Logo Esses casos devem ser de patrocínios. Portanto, caso
evitados sempre que possível. aconteça, devemos garantir a
Versões
Porém, podem acontecer em legibilidade do logo, aplicando
Sobre fundos
Área de proteção monocromáticas ambientes onde a GOL não
possui total controle sobre
a versão branca para fundos
escuros e a versão preta para
sobre fotos
Dimensão mínima a peça, como em assinatura fundos claros.
conjunta com parceiros ou
Usos indevidos
25mm 10mm
120px 50px
24.Cores
27.Grafismo
33.Pattern
43.Fonte
Preto
24
Elementos básicos
Cores primárias
Grafite
Elementos básicos C 53 M 53 Y 55 K 50
Cores R 55 G 50 B 45
#37322D
Grafismo
PANTONE 2335C
Pattern Essas são as cores primárias.
São as cores principais usadas pela GOL
Fonte
e têm como funcão principal, serem cores
de reconhecimento da marca.
Cinza Escuro
C 53 M 53 Y 55 K 35
A escala Pantone na versão Coated (C) R 101 G 96 B 91
é referência para a escolha de cores #65605B
por aproximação visual. As cores indicadas PANTONE WARM GRAY 11C
em CMYK são válidas para impressão
em quadricromia. Para mídias eletrônicas,
considerar as referências em RGB.
Cinza
C 43 M 43 Y 45 K 0
R 154 G 145 B 135
#9A9187
PANTONE WARM GRAY 7C
Cinza Claro
C 18 M 18 Y 20 K 0
R 218 G 208 B 197
#DADOC5
PANTONE WARM GRAY 2C
Off-white
C 04 M 05 Y 08 K 0
R 252 G 246 B 240
#FCF6F0
Laranja PANTONE 7527C
C 00 M 55 Y 100 K 00
R 255 G 112 B 32
#FF7020
PANTONE 1505C
Branco
25
Elementos básicos
Elementos básicos
Cores Cores secundárias
Grafismo
As secundárias são cores de suporte, Marrom Vinho Musgo Azul Marinho
Pattern
com um papel mais funcional, ainda que C 35 M 45 Y 70 K 20 C 40 M 95 Y 50 K 25 C 100 M 40 Y 50 K 20 C 100 M 60 Y 20 K 25
Fonte R 139 G 115 B 75 R 115 G 40 B 70 R 25 G 90 B 85 R 0 G 50 B 75
importante para criar uma harmonia com #8B734B #732846 #195A55 #00324B
as primárias. PANTONE 871C PANTONE 7642C PANTONE 7476C PANTONE 2955C
Laranja Claro Amarelo Claro Rosa Claro Verde Claro Azul Claro
C 00 M 15 Y 45 K 00 C 00 M 5 Y 40 K 00 C 05 M 20 Y 05 K 00 C 35 M 00 Y 20 K 00 C 20 M 00 Y 05 K 00
R 249 G 199 B 139 R 255 G 224 B 159 R 244 G 209 B 219 R 179 G 219 B 219 R 194 G 219 B 234
#F9C78B #FFE09F #F4D1DB #B3DBDB #C2DBEA
PANTONE 148C PANTONE 7401C PANTONE 2050C PANTONE 7464C PANTONE 290C
26
Elementos básicos Geral
Elementos básicos
Cores Segmentação de
Grafismo
Pattern cores por públicos
Fonte
Espessura de linha
Utilizamos a espessura mínima a ser percebida
pelo nosso público evitando que ocorra erros
de visualização. Por isso, adota-se o mínimo
de 0.75pt de espessura de linha para materiais
impressos e 2px para materiais digitais em
qualquer tamanho de círculo.
Interligação Variações de posição e cores
Os círculos devem se interligar, A relação de posição entre os dois círculos é Para peças grandes, que são vistas de longe
com o mesmo comportamento livre, podendo rotacionar, juntar ou espaçar os pelo público, como, por exemplo, empenas,
do elo do nosso logo. No exemplo círculos para melhor composição na peça, desde paredes e outdoors, a espessura do grafismo
acima, com os destaques em grafite, que mantivermos a interligação das formas. deve se aproximar da espessura das letras
o círculo laranja passa por cima do título da peça no peso Thin. Mesmo que
do círculo cinza na sobreposição O uso de cores da nossa paleta também é livre, a peça não possua um título ou até mesmo
superior, e o contrário ocorre na dando preferência ao uso de duas cores de que não esteja sendo utilizado o peso Thin de
sobreposição inferior, construindo nossa paleta primária. Mas se for necessário, fonte, deve ser feito esse comparativo como
assim, a sensação de interligação podemos considerar o uso da paleta secundária se existisse esse título com completa leitura e
das formas. e até utilizar uma cor para os dois círculos. legibilidade.
29
Elementos básicos
Elementos básicos
Cores Composição
Grafismo
Pattern do grafismo
Fonte
O grafismo ultrapassa as
extremidades da peça, o suficiente
para as duas formas circulares
continuarem sendo reconhecíveis.
Display
Pattern
Fonte
aaaa
A fonte da GOL foi criada exclusivamente para
a marca e é de uso obrigatório para todas as
gggggg
peças possíveis.
Além das variantes aqui apresentadas, usamos GOL Sans Text Bold
a Trebuchet como fonte de sistema em textos GOL Sans Text Medium
longos em interfaces que não suportam a GOL Sans Text Regular
versão webfont da GOL Sans Display e Text. GOL Sans Text Light
44
Elementos básicos
Elementos básicos
Cores Desenho
Grafismo
Pattern
nsfitaePR
Fonte
Elementos básicos
Cores Display x Text 22pt
Grafismo
ciefs
Pattern
Fonte
20pt
18pt ciefs
Display 16pt ciefs
Text 14pt ciefs
ciefs
Para títulos ou textos igual ou acima
de 16pt, utilizamos a versão Display
que possui desenhos com mais 12pt
personalidade. Para textos longos ou
abaixo de 16pt, utilizamos a versão
ciefs
Text que foi desenvolvida para melhor
performance de leitura e legibilidade
em reduções impressas e digitais. 10pt
47
Elementos básicos
Elementos básicos
Cores Alinhamento
Grafismo
Pattern e formatação
Fonte
Iconografia
Um ícone deve ser uma representação gráfica
simples do produto, serviço ou funções como
ações e sinalização. Ele é uma ferramenta
poderosa para a construção de marca.
Os ícones da GOL se dividem em duas famílias,
ou categorias: produtos/serviços e funcionais.
45.Estilo
46.Construção
47.Biblioteca
48.Usos indevidos
49
Iconografia
Iconografia
Estilo Estilo
Construção
Biblioteca
Usos indevidos
Fácil compreensão
Nós criamos ícones que são fáceis de entender.
Eles não devem ser ambíguos e devem ser
claros em sua aparência e significado.
Simplicidade
Ícones devem ser criados usando o mínimo de
elementos possíveis.
Atende ao objetivo
Nossos ícones devem sempre ser desenhados
com sua aplicação final em mente. Pequeno
Mais simples em detalhes,
Abordagem consistente com o mínimo necessário
Para que todos os ícones funcionem juntos, para ser compreendido.
eles devem ter elementos gráficos comuns Voltados para interfaces
que garantam consistência visual. e espaços muito limitados.
50
Iconografia
Iconografia
Estilo Construção
Construção
Biblioteca Raio de cantos
Usos indevidos arredondados: 6px ou 8px
Distância mínima
entre elementos: 4px
Ícone pequeno
Aréa útil: 40px por 32px
Espessura de linha interna e externa: 2px
Raio de cantos arredondados: 4px
Distância mínima entre elementos: 2px
Tamanho de ponto mínimo: 4px
51
Iconografia
Iconografia
Estilo Biblioteca de
Construção
Biblioteca ícones grandes
Usos indevidos
Utilize os ícones
encontrados nos arquivos
originais eletrônicos
52
Iconografia
Iconografia
Estilo Usos indevidos
Construção
Biblioteca
Usos indevidos
Elementos
de apoio
São recursos gráficos que vem para
complentar o universo visual. Ajudam a
apresentar informações de forma mais visual
e trazem mais possibilidades de construir
destaques e hierarquia visual.
03.Selos
11.Gráficos
14.Tabelas
14.Mapas
54
Elementos de apoio
Elementos de apoio
Selos Selos simples
Gráficos
Tabelas
Mapas
Margem
O tamanho da margem é livre, porém, deve
garantir um respiro para todos os elementos
que compõe o selo. Em formas circulares, a
margem acompanha suas curvas, podendo Alinhamento à esquerda
utilizar toda sua área interna, evitando que Sempre alinhamos os textos
textos e ícones ultrapasse apenas essa à esquerda e centralizamos
margem. Compensações visuais sutis podem sua caixa de texto com a
existir para textos com letras maiúsculas e forma interna do selo, com
minúsculas na mesma frase ou palavras com a finalidade de termos a
muita ascendente (letras como h,t, f) e pouca mesma margem em todas as
descendente (g, j, q) ou vice-versa. extremidades.
56
Elementos de apoio
Elementos de apoio
Selos Selos especiais
Gráficos
Tabelas
Mapas
2x x
Composição
de peças
A GOL tem uma meneira própria de construir suas peças de
comunicação visual. Os princípios básicos são totalmente
visuais e independendem do tipo de suporte e de escalas
de medida. A partir dela conseguimos manter uma
grande consistência e unidade visual entre a variedade de
formatos, mídias e volume de comunicação produzido pela
marca. Facilita não só o dia-a-dia da criação, mas também a
adaptação das peças para diferentes contextos.
03.Módulo
11.Grid
14.Alinhamento
16.Dimensões
16.Fotografia
16.Cores
16.Adaptações
16.Exemplos
16.Usos indevidos
65
Composição de peças
Composição de peças
Módulo Módulo
Grid
Alinhamento
Dimensões
Fotografia
Cores
Adaptações
Exemplos
Usos indevidos
Maior
medida
dividida
por 25 Módulo base
A construção de um grid é
importante para termos clareza
nas informações que serão
comunicadas e para consistência
da identidade visual da GOL.
Textos e ícones
Logo Sempre alinhados à esquerda
Precisa estar posicionado e qualquer altura em uma
Inserimos os elementos da em qualquer extremidade coluna do grid. Ícones também Elementos de apoio
identidade visual sobre o da peça, preferencialmente podem estar inseridos dentro Selos e tabelas podem
grid da peça. Os elementos na base do lado direito, do título. Para textos corridos acompanhar o alinhamento
da identidade possuem ou no topo do lado esquerdo. e subtítulos, tente não ocupar Grafismos e ilustrações dos textos ou se posicionar
comportamentos diferentes Quando o logo for o único 100% da largura da peça, Esses elementos tem um nas extremidades. Mapas e
e devem ser respeitados elemento ou acompanhado utilize no máximo 2 colunas comportamento solto na infográficos são elementos
para melhor resultado apenas do grafismo, ele pode em uma peça com grid de peça, podendo ultrapassar soltos, assim como grafismos
e consistência: ser centralizado na peça. 3 colunas. inclusive a margem. e ilustrações.
68
Composição de peças
Composição de peças
Módulo Dimensões
Grid
Alinhamento
Dimensões
Fotografia
Cores
Adaptações
Exemplos
Usos indevidos 2 módulos
1 módulo base
1/2 módulo
1/4 módulo
1 módulo
da informação.
78
Composição de peças
Composição de peças
Módulo Adaptações
Grid
Alinhamento para área útil
Dimensões
Fotografia Adequar à área mínima
Cores indicada para margem.
Adaptações A área mínima de segurança
for muito próxima da
Exemplos
proporção da margem
Usos indevidos original da peça.
Margem mínima
Esses e outros exemplos 1x2 (ex: folder e banner digital) 3x4 (ex: cartaz ou anúncio) 4x5
estão editáveis no
arquivo grid dos originais
eletrônicos e você pode
utilizá-los como base.
80
Composição de peças
Composição de peças
Módulo Exemplos verticais
Grid
Alinhamento
Dimensões
Fotografia
Cores
Adaptações
Exemplos
Usos indevidos
Esses e outros exemplos 1x2 (ex: folder e banner digital) 3x4 (ex: cartaz ou anúncio) 4x5
estão editáveis no
arquivo grid dos originais
eletrônicos e você pode
utilizá-los como base.
81
Composição de peças
Composição de peças
Módulo Exemplos horizontais
Grid
Alinhamento
Dimensões
Fotografia
Cores
Adaptações
Exemplos
Usos indevidos
2 formatos 3x4 (ex: anúncio página dupla) 2 formatos 1x2 (ex: páginas internas de folder)
2 formatos 3x4 (ex: anúncio página dupla) 2 formatos 1x2 (ex: páginas internas de folder)
Placa de publicidade
Placa de publicidade
Cobrand
Orientações de como trabalhar com outras
marcas juntamente com a identidade visual GOL.
16.Assinaturas conjuntas
16.Parceiras
93
Cobrand Cobrand
Assinaturas conjuntas
Parceiras Assinaturas
conjuntas
Orientações
para interface
As regras básicas para quaisquer tipos de
interface são as mesmas que utilizamos em
meios impressos ou peças estáticas, acrescidas
de outras possibilidades específicas para essas
situações e variações dos elementos visuais.
03.Grid
11.Cores
14.Ícones
16.Botões
16.Boxes
103
Orientações Orientações
para interface
para interface
Grid
768px
667px
para interface
para interface
Grid
Cinza 1
Cores primárias
Cores #767676
Ícones A segunda cor a ser usada em fontes sob fundo branco ou cinza.
Dentro da escala de cor, este é o único tom de cinza mais claro aceito
Botões nos parâmetros de acessibilidade da WCAG.
Em interfaces, nossas cores sofrem pequenas
alterações para maior acessibilidade. Portanto,
na criação de qualquer interface, utilize os Cinza 2
hexadecimais aqui descritos. #959595
Este é o tom de cinza oficial para ser usado nas fontes sob fundo preto.
Dentro da escala desta cor, este é o único tom de cinza mais escuro aceito
nos parâmetros de acessibilidade da WCAG.
Cinza 3
#DDDDDD
Este é o tom de cinza alternativo para ser usado em elementos
e componentes que permeiam a estrutura da interface.
Off-white 1
#ECEBE9
Cor usada como demarcação de area em hovers na
interface.
Off-white 2
#F5F4F2
Este é o tom de cinza alternativo para ser usado em fundos de páginas
(exemplo: resumo da compra/carrinho) ou em módulos terciários de páginas.
Laranja
#FF7020
A cor principal da marca GOL. Para manter a relevância,
esta cor deve ser usada com menos frequência. O foco
está em usá-la apenas nos detalhes e interações das Branco
páginas. Exemplo: botões e ícones. #FFF
Os backgrounds são predominantemente brancos. Use esta cor
de fundo de página para os principais módulos. Exemplo: hero.
Feedback Verde
de sistema #30A07C
106
Orientações Orientações Esta cor deve estar sempre atrelada à feedbacks positivos.
Exemplo: telas de ação realizada com sucesso.
para interface
para interface
Grid
Cores de apoio
Cores Amarelo
#F5A623
Ícones Esta cor deve ser usada mensagens para
Botões feedbacks de atenção do usuário. Exemplo: alertas.
Para situações específicas temos cores
específicas. Considere os hexadecimais
ao lado para cores de feedback de sistema Vermelho
e cores de tarifa. #FF4F4F
Use esta cor com cautela. Sua função está impreterivelmente
atrelada a informar erros que possam/devam ser corrigidos
ou recomendar ações importantes.
Tarifas Roxo
#782A85
Tarifa Light
Verde
#068671
Tarifa Promo
Azul
#387697
Tarifa Plus
Laranja
#DB3B00
Tarifa Premium Economy
107
Orientações Orientações
para interface
para interface
Grid
Ícones
Cores
Ícones
Botões
Botões
Cores
Ícones
Botões
Normal
Normal 40px
64px Gol Sans Text Medium 12px 48px Label do botão #FF7020
#FF7020
Hover
Hover #2B2B2B
64px Gol Sans Text Medium 12px 48px Label do botão
#2B2B2B
20px
GOL Smiles
Quando falamos da parceria GOL com Smiles
temos um formato único para essa assinatura
e variações na identidade visual para segmentar
peças de diferentes públicos.
14.Versões
16.Dimensão em peças
16.Segmentação de cores
110
GOL Smiles
GOL Smiles
Versões Versões
Dimensão em peças
Segmentação de cores preferenciais
Aqui, as mesmas regras de contrução de peças A dimensão máxima da É necessário se atentar para
se aplicam. A assinatura GOL Smiles tem o assinatura GOL Smiles a dimensão mínima do logo
mesmo comportamento do logo GOL, porém, é de 3 módulos de altura, tridimensional para não termos
sua dimensão preferencial é de 21/2 módulos. e mínima de 2 módulos. problemas de legibilidade.
115
GOL Smiles
GOL Smiles
Versões Segmentação
Dimensão em peças
Segmentação de cores de cores