Sapo

Official Websites

• https://www.sapo.pt
• https://mail.sapo.pt
• https://login.sapo.pt
• https://ajuda.sapo.pt

Brand Guidelines

2014

Brand Summary

Mission

• Existimos para tornar a vida mais simples, informar, inovar, divertir e promover a identidade nacional dos países onde estamos presentes. Queremos ser relevantes no dia a dia das pessoas. [^1]

Core Values

• inovação
• disrupção
• liderança
• abrangência

Target Audience

• Utilizadores de internet em todo o mundo, incluindo um público fiel de utilizadores que reconhece no SAPO uma referência em conteúdos de informação, entretenimento, lifestyle e serviços digitais multiplataforma. [^2]

Personality Traits

• criativos
• irreverentes
• flexíveis
• próximos
• credíveis

Visual Identity Overview

• A identidade visual é geométrica, minimalista e inovadora, com um logo composto por um símbolo estilizado (chameleon/frog) em tons de verde, tipografia moderna (Proxima Nova), e uma paleta de cores principal baseada em três verdes, preto e branco, complementada por cores secundárias. O visual enfatiza formas poligonais, simplicidade, flexibilidade e aplicação multiplataforma. [^3]

Categories

Brand Voice

• O TOM DA COMUNICAÇÃO DO SAPO ENQUANTO MARCA
• É ESSENCIALMENTE IRREVERENTE, CRIATIVO E PRÓXIMO.
• NÃO OBSTANTE, POR SER UMA MARCA AGREGADORA DE CONTEÚDOS E NOTÍCIAS, A COMUNICAÇÃO DEVE SER CREDÍVEL E ASSERTIVA.
• UMA UNICA MARCA, UM LOGO, UMA VOZ.

Brand Imagery

• Criou-se um padrão poligonal repetível para utilizações diversas. Deve sempre recorrer-se a arte final original, podendo o padrão ser cortado, aplicado parcialmente, na totalidade ou repetido, encaixando em qualquer um dos quatro lados.
• Pode optar-se por colorir as linhas e/ou os polígonos de forma adequada à aplicação desejada. Sugere­-se que se recorra à paleta de cores SAPO (pág. 28), na secção de apresentação deste manual, podem ver-se aplicações criativas do padrão, com múltiplas cores (pág. 4).
• O exemplo de t-shirt ao lado recorre ao logo e a parte do padrão adicional para passar a imagem de marca.

Color Palette

• As cores oficiais são aplicadas ape­nas no símbolo, com a seguinte lógica: Cor A: Verde SAPO Claro Cor B: Verde SAPO Médio Cor C: Verde SAPO Escuro
• Branco e Preto, no olho.
• O verde é a cor do SaPO, que se mantém na nova marca. Três verdes, preto e branco são as cores principais.
• Verde SaPO claro Pantone: 376c c: 59 M: 0 Y: 100 K: 0 R: 122 g: 184 B: 0 Hex: 7aB800
• Verde SaPO Médio Pantone: 369c c: 73 M: 0 Y: 100 K: 0 R: 105 g: 166 B: 24 Hex: 69a618
• Verde SaPO Escuro Pantone: 370c c: 66 M: 1 Y: 100 K: 25 R: 91 g: 143 B: 34 Hex: 5B8f22
• Preto Pantone: c: 0 M: 0 Y: 0 K: 100 R: 0 g: 0 B: 0 Hex: 000000
• Branco Pantone: c: 0 M: 0 Y: 0 K: 0 R: 255 g: 255 B: 255 Hex: ffffff
• Existem oito cores complementares, para fundos e ambientes, sobre as quais o logo pode ser aplicado com bom contraste.
• Vermelho Pantone: 484 c c: 10 M: 90 Y: 100 K: 27 R: 150 g: 35 B: 25 Hex: 962319
• laranja Pantone: 166 c c: 9 M: 77 Y: 100 K: 7 R: 190 g: 75 B: 25 Hex: BE4B19
• Rosa Pantone: 7647 c c: 30 M: 92 Y: 5 K: 0 R: 170 g: 55 B: 115 Hex: aa3773
• Violeta Pantone: 7447 c c: 76 M: 79 Y: 12 K: 3 R: 90 g: 70 B: 120 Hex: 5a4678
• azul Pantone: 7477 c c: 93 M: 51 Y: 36 K: 29 R: 15 g: 75 B: 95 Hex: 0f4B5f
• Verde azulado Pantone: 7734 c c: 83 M: 23 Y: 76 K: 32 R: 25 g: 100 B: 70 Hex: 196446
• Verde Pantone: 363 c c: 70 M: 23 Y: 100 K: 26 R: 65 g: 110 B: 20 Hex: 416E14
• cinza Pantone: 423 c c: 0 M: 0 Y: 0 K: 70 R: 110 g: 110 B: 110 Hex: 6E6E6E
• a utilização de cor na iconografia e no grafismo de aplicações multiplataforma, deve recorrer-se à paleta de cores complementares, com a adição de uma variante mais clara e uma mais escura para definição de pormenores, marcas gráficas ou construção de degradés. Estas cores poderão ser utilizadas para quaisquer outras aplicações, apesar da sua génese estar na multiplataforma.

Typography

• Para a construção do logotipo, bem como todas as restantes expressões da marca em qualquer suporte, o tipo de letra utilizado é o Proxima nova. Este tipo de letra deve também ser utilizado para texto corrido e títulos em suporte de impressão, televisão e outros suportes em que seja possível criar uma impressão da tipografia (ie, não recorrendo ao software base do tipo de letra), em todo o tipo de comunicação institucional ou comercial da marca SaPO.
• Para texto corrido, em minúsculas ou maiúsculas, deve optar-se por Proxima Nova Alt Regular, usando outros pesos onde necessário conforme o conteúdo. Para itálicos não deve recorrer-se à variante Alt, mas sim a Proxima Nova Italic, e suas variantes de peso.
• Para aplicações corporativas em que o recurso a tipografia específica é difícil ou impossível, deve recorrer-se a uma fonte comum de sistema operativo, como tipografia secundária. neste caso, optou-se pela fonte arial.
• A tipografia secundária nunca pode ser usada para compor o logotipo ou qualquer das suas formas.
• Para uma maior flexibilidade em termos de licenciamento, na web, o tipo de letra recomendado é Roboto, que é também o tipo de letra fornecido com a framework de desenvolvimento do SaPO, o ink.
• independentemente desta recomendação, a pluralidade de projectos do SaPO não permite que se crie uma regra tipográfica rígida, ficando, em vez disso, ao critério de cada projecto seleccionar a tipografia que melhor se adequa a este, quer na web, quer em aplicações nativas para multiplataforma.
• A tipografia web nunca pode ser usada para compor o logotipo ou qualquer das suas formas.

Logo Usage

• O logo deve ser sempre reproduzido a partir da arte final original.
• O diâmetro de um olho do SAPO determina a área de proteção a toda a volta do logo. Não é per­mitida a interferência de nenhuma imagem, texto ou outro elemento gráfico desta margem para dentro.
• O logo deve ser sempre redimen­sionado mantendo as proporções originais até um mínimo de 24 px de altura em ecrãs de baixa den­sidade e 48 px em ecrãs de alta densidade. Não há limite superior.
• Nos casos em que a forma horizontal não seja adequada ou a composição gráfica não favoreça essa aplicação, deve optar-se pela forma vertical.
• Tal como na forma horizontal, o diâmetro de um olho do SAPO determina a área de proteção a toda a volta do logo. Não é permitida a interferência de nenhuma imagem, texto ou outro elemento gráfico desta área para dentro.
• O logo deve ser sempre redimensionado mantendo as proporções originais até um mínimo de 42 px de largura em ecrãs de baixa densidade e 84 px em ecrãs de alta densidade. Não há limite superior.
• Para algumas aplicações é aceitável a utilização apenas do símbolo, sem o logotipo SAPO. Nestes casos, pode optar-se por assentar a figura na linha inferior, como acontece na Barra de Navegação SAPO (pág. 64).
• Nos restantes lados, a área de proteção é idêntica à do logo: Com uma margem igual ao diâmetro do olho.
• Não existindo uma linha para assentar o símbolo, deve respeitar-se uma margem inferior igual às restantes.
• O símbolo deve ser sempre redimensionado mantendo as proporções ori­ginais até um mínimo de 40 px de largura em ecrãs de baixa densidade e 80 px em ecrãs de alta densidade. Não há limite superior.
• Havendo situações de limitação de espaço ou técnicas que não permitam a representação do logo, pode usar-se apenas o logotipo, escrito na fonte Proxima Nova Bold, como representado à esquerda.
• No entanto, esta aplicação deve ficar reservada para situações pontuais em que não exista outra opção, sobretudo em merchandising.
• Sempre que possível, quando se recorrer à aplicação apenas do logotipo, o logo, padrão adi­cional ou o símbolo devem estar incluídos algures na peça.
• Em aplicações em que seja necessário referir determinado país onde o SAPO tem presença, deve-se aplicar o indicador de país -exempli­ficado aqui com a palavra “internacional” -escrito em Proxima Nova Regular, sempre em caixa alta, com as medidas e alinhamentos em relação ao Logo definidos acima. Esta aplicação restringe-se às homepages de cada país.
• As regras que se seguem aplicam-se às diversas formas do logo mencionadas anteriormente -horizontal, vertical e símbolo -pelo que são apresentadas apenas as variantes necessárias e suficientes para exemplificar cada regra.
• Existem duas versões monocromáticas do logo que devem ser aplicadas tendo em conta o fundo: a versão a preto deve ser aplicada sobre fundos claros e a versão a branco sobre fundos escuros. Ambas as versões podem assumir outra cor, conforme necessário, devendo o logotipo manter-se a preto ou branco. Na aplicação do logo, o objectivo é garantir o maior contraste na sua apresentação.
• Existe uma diferença de desenho no olho do símbolo, pelo que não é suficiente usar uma das versões e invertê-la, deve sempre usar-se ou a arte final para fundo claro ou a arte final para fundo escuro.
• Em casos em que a aplicação em cor não seja possível, pode optar-se pela versão em escala de cinza, conforme representado acima. A forma vertical assume os mesmos tons. Como para todas as outras versões, a versão em escala de cinza deve ser reproduzida a partir de artes finais originais.
• Dada a enorme variedade de meios em que a marca SAPO necessita de ser aplicada, prevê-se que a aplicação possa ser feita sobre fundos co­loridos, sem recurso a uma caixa. Deve sempre verificar-se que o logo faz suficiente contraste com a cor de fundo. A única alteração possível no logo é a escolha entre texto a branco ou a preto consoante o fundo.
• O logo também pode aplicar-se sobre fundos fotográficos, cumprindo os mesmos requisitos que para fundos coloridos.
• Em casos extremos, em que nenhuma aplicação do logo crie suficiente contraste sobre a fotografia, deve recorrer-se a algum mecanismo gráfico sobre a foto que permita melhorar esse contraste, como o clareamento/escurecimento da área de aplicação.
• As regras constantes deste manual devem ser seguidas em todas as ocasiões em que se aplique a marca SAPO, ele contém todas as variantes e inclui uma diversidade enorme de possibilidades de aplicação, tornando-a flexível e adaptável à maioria das situações.
• Quebrar as regras é desfigurar a marca e implica uma má representação da mesma, acarretando uma percepção de pouco profissionalismo e consistência perante os consumidores que devemos evitar a todo o custo. Abaixo, estão alguns exemplos do que não fazer com a marca SAPO, em circunstância alguma.
• Deformação das proporções
• Alteração do desenho do símbolo
• Uso do símbolo em 3D
• Alteração da relação entre elementos
• Aplicação de sombras e efeitos visuais
• Alteração de alinhamento de elementos
• Alteração da tipografia
• Alteração da cor da tipografia
• Aplicação sobre fundo sem contraste
• As cores oficiais são aplicadas ape­nas no símbolo, com a seguinte lógica: Cor A: Verde SAPO Claro Cor B: Verde SAPO Médio Cor C: Verde SAPO Escuro. Branco e Preto, no olho.
• O verde é a cor do SaPO, que se mantém na nova marca. Três verdes, preto e branco são as cores principais.
• Para a construção do logotipo, bem como todas as restantes expressões da marca em qualquer suporte, o tipo de letra utilizado é o Proxima nova. Este tipo de letra deve também ser utilizado para texto corrido e títulos em suporte de impressão, televisão e outros suportes em que seja possível criar uma impressão da tipografia (ie, não recorrendo ao software base do tipo de letra), em todo o tipo de comunicação institucional ou comercial da marca SaPO.
• Para texto corrido, em minúsculas ou maiúsculas, deve optar-se por Proxima Nova Alt Regular, usando outros pesos onde necessário conforme o conteúdo. Para itálicos não deve recorrer-se à variante Alt, mas sim a Proxima Nova Italic, e suas variantes de peso.
• Para aplicações corporativas em que o recurso a tipografia específica é difícil ou impossível, deve recorrer-se a uma fonte comum de sistema operativo, como tipografia secundária. neste caso, optou-se pela fonte arial.
• A tipografia secundária nunca pode ser usada para compor o logotipo ou qualquer das suas formas.
• Para uma maior flexibilidade em termos de licenciamento, na web, o tipo de letra recomendado é Roboto, que é também o tipo de letra fornecido com a framework de desenvolvimento do SaPO, o ink.
• A tipografia web nunca pode ser usada para compor o logotipo ou qualquer das suas formas.

Tone And Messaging

• O TOM DA COMUNICAÇÃO DO SAPO ENQUANTO MARCA É ESSENCIALMENTE IRREVERENTE, CRIATIVO E PRÓXIMO. NÃO OBSTANTE, POR SER UMA MARCA AGREGADORA DE CONTEÚDOS E NOTÍCIAS, A COMUNICAÇÃO DEVE SER CREDÍVEL E ASSERTIVA.

Brand Values

• OS PILARES QUE NOS NORTEIAM VALORES INOVAÇÃO A inovação está presente na conduta da nossa marca. Pensamos a internet numa lógica multiplataforma, multimercado e apostamos em negócios de grande crescimento e através de projetos de internet estratégicos transversais, temos reforçado ao longo dos anos o nosso ADN inovador e tecnológico. Antecipamos tendências e capitalizamos a tecnologia de vanguarda que temos ao nosso dispor. DISRUPÇÃO Transformamos as ideias em realidade renovadora, capaz de satisfazer necessidades. Aproveitamos a vantagem de ser uma marca com notoriedade e uma love brand para proporcionar e manter uma relação sempre ativa, surpreendente e irreverente com os nossos stakeholders. Somos criativos e reinventamo-nos constantemente. LIDERANÇA Somos uma referência de pioneirismo e inovação ligados à internet e tecnologia nos mercados onde atuamos. Temos provas dadas que conseguimos gerir e criar de forma assertiva e com êxito conteúdos, serviços, e-commerce e novos produtos tecnológicos. ABRANGÊNCIA Somos uma marca global, com uma nova estratégia que promete potenciar o caráter constantemente evolutivo e abrangente da internet. Somos uma marca de todos para todos. Respeitamos e entendemos a diferença entre as várias áreas e mercados que visamos, sendo flexíveis e ágeis relativamente às necessidades que detetamos.
• TEMOS DE SER… PERSONALIDADE CRIATIVOS, IRREVERENTES, FLEXIVEIS, PROXIMOS E CREDIVEIS.
• O novo logo do SAPO encerra os valores da marca e transmite-os numa rotura clara com o passado. É geométrico, simples e inovador, com uma flexibilidade enorme de aplicação nos inúmeros meios onde o SAPO se movimenta. É um polígono matemático, mas também uma forma curiosa que convida a mais investigação e conhecimento aprofundado.

Visual Style

• O logo deve ser sempre reproduzido a partir da arte final original.
• O diâmetro de um olho do SAPO determina a área de proteção a toda a volta do logo. Não é per­mitida a interferência de nenhuma imagem, texto ou outro elemento gráfico desta margem para dentro.
• O logo deve ser sempre redimen­sionado mantendo as proporções originais até um mínimo de 24 px de altura em ecrãs de baixa den­sidade e 48 px em ecrãs de alta densidade. Não há limite superior.
• Nos casos em que a forma horizontal não seja adequada ou a composição gráfica não favoreça essa aplicação, deve optar-se pela forma vertical.
• Tal como na forma horizontal, o diâmetro de um olho do SAPO determina a área de proteção a toda a volta do logo. Não é permitida a interferência de nenhuma imagem, texto ou outro elemento gráfico desta área para dentro.
• O logo deve ser sempre redimensionado mantendo as proporções originais até um mínimo de 42 px de largura em ecrãs de baixa densidade e 84 px em ecrãs de alta densidade. Não há limite superior.
• Para algumas aplicações é aceitável a utilização apenas do símbolo, sem o logotipo SAPO. Nestes casos, pode optar-se por assentar a figura na linha inferior, como acontece na Barra de Navegação SAPO (pág. 64).
• Nos restantes lados, a área de proteção é idêntica à do logo: Com uma margem igual ao diâmetro do olho.
• Não existindo uma linha para assentar o símbolo, deve respeitar-se uma margem inferior igual às restantes.
• O símbolo deve ser sempre redimensionado mantendo as proporções ori­ginais até um mínimo de 40 px de largura em ecrãs de baixa densidade e 80 px em ecrãs de alta densidade. Não há limite superior.
• Em aplicações em que seja necessário referir determinado país onde o SAPO tem presença, deve-se aplicar o indicador de país -exempli­ficado aqui com a palavra “internacional” -escrito em Proxima Nova Regular, sempre em caixa alta, com as medidas e alinhamentos em relação ao Logo definidos acima. Esta aplicação restringe-se às homepages de cada país.
• Existem duas versões monocromáticas do logo que devem ser aplicadas tendo em conta o fundo: a versão a preto deve ser aplicada sobre fundos claros e a versão a branco sobre fundos escuros. Ambas as versões podem assumir outra cor, conforme necessário, devendo o logotipo manter-se a preto ou branco. Na aplicação do logo, o objectivo é garantir o maior contraste na sua apresentação.
• As cores oficiais são aplicadas ape­nas no símbolo, com a seguinte lógica: Cor A: Verde SAPO Claro Cor B: Verde SAPO Médio Cor C: Verde SAPO Escuro
• Branco e Preto, no olho.
• O verde é a cor do SaPO, que se mantém na nova marca. Três verdes, preto e branco são as cores principais.
• Verde SaPO claro Pantone: 376c c: 59 M: 0 Y: 100 K: 0 R: 122 g: 184 B: 0 Hex: 7aB800
• Verde SaPO Médio Pantone: 369c c: 73 M: 0 Y: 100 K: 0 R: 105 g: 166 B: 24 Hex: 69a618
• Verde SaPO Escuro Pantone: 370c c: 66 M: 1 Y: 100 K: 25 R: 91 g: 143 B: 34 Hex: 5B8f22
• Preto Pantone: c: 0 M: 0 Y: 0 K: 100 R: 0 g: 0 B: 0 Hex: 000000
• Branco Pantone: c: 0 M: 0 Y: 0 K: 0 R: 255 g: 255 B: 255 Hex: ffffff
• Existem oito cores complementares, para fundos e ambientes, sobre as quais o logo pode ser aplicado com bom contraste.
• Para a construção do logotipo, bem como todas as restantes expressões da marca em qualquer suporte, o tipo de letra utilizado é o Proxima nova. Este tipo de letra deve também ser utilizado para texto corrido e títulos em suporte de impressão, televisão e outros suportes em que seja possível criar uma impressão da tipografia (ie, não recorrendo ao software base do tipo de letra), em todo o tipo de comunicação institucional ou comercial da marca SaPO.
• Para texto corrido, em minúsculas ou maiúsculas, deve optar-se por Proxima Nova Alt Regular, usando outros pesos onde necessário conforme o conteúdo. Para itálicos não deve recorrer-se à variante Alt, mas sim a Proxima Nova Italic, e suas variantes de peso.
• Para aplicações corporativas em que o recurso a tipografia específica é difícil ou impossível, deve recorrer-se a uma fonte comum de sistema operativo, como tipografia secundária. neste caso, optou-se pela fonte arial.
• A tipografia secundária nunca pode ser usada para compor o logotipo ou qualquer das suas formas.
• Para uma maior flexibilidade em termos de licenciamento, na web, o tipo de letra recomendado é Roboto, que é também o tipo de letra fornecido com a framework de desenvolvimento do SaPO, o ink.
• A tipografia web nunca pode ser usada para compor o logotipo ou qualquer das suas formas.
• O SaPO é SEMpRE MASCULiNo E ESCRiTo EM CAixA ALTA
• Em todos os títulos, subtítulos ou textos, o nome SaPO é sempre escrito com maiúsculas, seguindo a lógica de formação representada no logo
• A assinatura do SAPO é “Dá o salto”. Pode ser grafada a maiúsculas e minúsculas, em texto corrido, ou toda em maiúsculas em títulos e outras referências, conforme necessário.
• A assinatura deve ser escrita em Proxima Nova Re­gular e ter a mesma largura que o logotipo “SAPO”, sendo que o corpo de texto deve ser o necessário para respeitar esta largura.
• Em ambas as formas, a assinatura surge por baixo do logotipo “SAPO” e a distância entre ambos é igual ao diâmetro do olho.
• Existe ainda uma terceira forma, em que a assinatura pode ser colocada em linha com o logotipo, sendo, neste caso, centrada verticalmente com o mesmo.
• Toda a comunicação SAPO deve passar pela marca SAPO. Como tal, o logo deve assinar todas as peças de comunicação comercial ou instituicional pro­duzidas.
• O logo SAPO tem obrigatoriamente que surgir na peça, seja na forma vertical ou horizontal, conforme a composi­ção gráfica da mesma e respeitando as regras de aplica­ção sobre fundos e a área de proteção do logo definidas neste manual.
• Criou-se um padrão poligonal repetível para utilizações diversas. Deve sempre recorrer-se a arte final original, podendo o padrão ser cortado, aplicado parcialmente, na totalidade ou repetido, encaixando em qualquer um dos quatro lados.
• Pode optar-se por colorir as linhas e/ou os polígonos de forma adequada à aplicação desejada. Sugere­-se que se recorra à paleta de cores SAPO (pág. 28), na secção de apresentação deste manual, podem ver-se aplicações criativas do padrão, com múltiplas cores (pág. 4).

Iconography

• Com uma presença cada vez mais marcada no universo mobile, o SAPO oferece uma multiplicidade de aplicações e websites responsive que são represen­tados em diversos sistemas operativos por via de ícones. A coerência desta iconografia, entre si, bem como com a marca SAPO é essencial para solidificar a nossa imagem junto dos utilizadores.
• Assim, foram criadas regras que devem ser seguidas na criação de novos ícones, tal como todas as restantes regras de aplicação de marca presentes neste manual. Para criar novos ícones é essencial recorrer aos templates originais fornecidos.
• Os ícones seguem a seguinte estrutura gráfica: 1. Uma base de degradé numa das sete cores se­cundárias, de acordo com o definido nos templa­tes fornecidos.
• A cor deve ser escolhida de acordo com o tom dominante usado no interface da aplicação.
• 2. Um padrão triangular monocromático, aplicado sobre o degradé, em modo de overlay, obtendo-se assim cada um dos sete tons secundários.
• 3. Um pictograma simples, representativo da prin­cipal funcionalidade da aplicação que se preten­de representar, aberto a branco e o logotipo SAPO para sublinhar a marca.
• Para criar as imagens que representarão a funcionalidade de cada aplicação, deve utilizar-se a grelha abaixo definida. Uma vez mais, é obrigatório utilizar o ficheiro template original, para garantir a qualidade final do ícone.
• Os pictogramas devem ser simples e representativos da funcionalidade da aplicação. Devem ser desenhados com formas geométricas simples, a branco, com áreas abertas onde se veja o fundo, caso beneficie a leitura da imagem.
• Exemplo de construção do pictograma do SAPO Cinema sobre a grelha de construção de ícones.
• Exemplo do ícone do SAPO Cinema finalizado, com todos os ele­mentos de construção de ícones.
• Os cantos surgem arredondados ou não consoante as regras espe­cíficas de cada sistema operativo.
• a utilização de cor na iconografia e no grafismo de aplicações multiplataforma, deve recorrer-se à paleta de cores complementares, com a adição de uma variante mais clara e uma mais escura para definição de pormenores, marcas gráficas ou construção de degradés. Estas cores poderão ser utilizadas para quaisquer outras aplicações, apesar da sua génese estar na multiplataforma.

Layout And Composition

• O diâmetro de um olho do SAPO determina a área de proteção a toda a volta do logo. Não é per­mitida a interferência de nenhuma imagem, texto ou outro elemento gráfico desta margem para dentro.
• O logo deve ser sempre redimen­sionado mantendo as proporções originais até um mínimo de 24 px de altura em ecrãs de baixa den­sidade e 48 px em ecrãs de alta densidade. Não há limite superior.
• Nos casos em que a forma horizontal não seja adequada ou a composição gráfica não favoreça essa aplicação, deve optar-se pela forma vertical.
• Tal como na forma horizontal, o diâmetro de um olho do SAPO determina a área de proteção a toda a volta do logo. Não é permitida a interferência de nenhuma imagem, texto ou outro elemento gráfico desta área para dentro.
• O logo deve ser sempre redimensionado mantendo as proporções originais até um mínimo de 42 px de largura em ecrãs de baixa densidade e 84 px em ecrãs de alta densidade. Não há limite superior.
• Para algumas aplicações é aceitável a utilização apenas do símbolo, sem o logotipo SAPO. Nestes casos, pode optar-se por assentar a figura na linha inferior, como acontece na Barra de Navegação SAPO (pág. 64).
• Nos restantes lados, a área de proteção é idêntica à do logo: Com uma margem igual ao diâmetro do olho.
• Não existindo uma linha para assentar o símbolo, deve respeitar-se uma margem inferior igual às restantes.
• O símbolo deve ser sempre redimensionado mantendo as proporções ori­ginais até um mínimo de 40 px de largura em ecrãs de baixa densidade e 80 px em ecrãs de alta densidade. Não há limite superior.
• Em aplicações em que seja necessário referir determinado país onde o SAPO tem presença, deve-se aplicar o indicador de país -exempli­ficado aqui com a palavra “internacional” -escrito em Proxima Nova Regular, sempre em caixa alta, com as medidas e alinhamentos em relação ao Logo definidos acima. Esta aplicação restringe-se às homepages de cada país.
• As regras que se seguem aplicam-se às diversas formas do logo mencionadas anteriormente -horizontal, vertical e símbolo -pelo que são apresentadas apenas as variantes necessárias e suficientes para exemplificar cada regra.
• Acima, o logotipo aplicado em policromia a negativo.
• Existem duas versões monocromáticas do logo que devem ser aplicadas tendo em conta o fundo: a versão a preto deve ser aplicada sobre fundos claros e a versão a branco sobre fundos escuros. Ambas as versões podem assumir outra cor, conforme necessário, devendo o logotipo manter-se a preto ou branco. Na aplicação do logo, o objectivo é garantir o maior contraste na sua apresentação.
• Existe uma diferença de desenho no olho do símbolo, pelo que não é suficiente usar uma das versões e invertê-la, deve sempre usar-se ou a arte final para fundo claro ou a arte final para fundo escuro.
• Em casos em que a aplicação em cor não seja possível, pode optar-se pela versão em escala de cinza, conforme representado acima. A forma vertical assume os mesmos tons. Como para todas as outras versões, a versão em escala de cinza deve ser reproduzida a partir de artes finais originais.
• Dada a enorme variedade de meios em que a marca SAPO necessita de ser aplicada, prevê-se que a aplicação possa ser feita sobre fundos co­loridos, sem recurso a uma caixa. Deve sempre verificar-se que o logo faz suficiente contraste com a cor de fundo. A única alteração possível no logo é a escolha entre texto a branco ou a preto consoante o fundo.
• O logo também pode aplicar-se sobre fundos fotográficos, cumprindo os mesmos requisitos que para fundos coloridos.
• Em casos extremos, em que nenhuma aplicação do logo crie suficiente contraste sobre a fotografia, deve recorrer-se a algum mecanismo gráfico sobre a foto que permita melhorar esse contraste, como o clareamento/escurecimento da área de aplicação.
• As regras constantes deste manual devem ser seguidas em todas as ocasiões em que se aplique a marca SAPO, ele contém todas as variantes e inclui uma diversidade enorme de possibilidades de aplicação, tornando-a flexível e adaptável à maioria das situações.
• Quebrar as regras é desfigurar a marca e implica uma má representação da mesma, acarretando uma percepção de pouco profissionalismo e consistência perante os consumidores que devemos evitar a todo o custo. Abaixo, estão alguns exemplos do que não fazer com a marca SAPO, em circunstância alguma.
• Deformação das proporções
• Alteração do desenho do símbolo
• Uso do símbolo em 3D
• Alteração da relação entre elementos
• Aplicação de sombras e efeitos visuais
• Alteração de alinhamento de elementos
• Alteração da tipografia
• Alteração da cor da tipografia
• Aplicação sobre fundo sem contraste

Digital Guidelines

• A barra de navegação universal do SAPO (BSU) está presente em todas as propriedades web do SAPO e nos sites de parceiros, servindo para comunicar a marca SAPO, bem como para oferecer uma navegação universal na Rede SAPO.
• A barra deve ter as dimensões acima descritas, com o símbolo SAPO sempre como primeiro item e surgir no topo de todas as páginas.
• Para parceiros ou quaisquer propriedades SAPO em que o nome do produto não inclua o logotipo “SAPO” (e.g. GameOver), deve recorrer-se à barra com o logo, como descrita acima.
• Nas barras de navegação SAPO deve recorrer-se a uma tipografia sans-serif genérica para evitar problemas técnicos na sua implementação, uma vez que surge em inúmeros contextos nem sempre controláveis.
• O cabeçalho da homepage do SAPO e outras páginas que requeiram o uso do logo, deve respeitar as regras acima descritas, sendo livre a escolha de cores quer para o cabeçalho, quer para o menu, bem como de tipografia para o menu. Nalguns casos, será necessário utilizar o espaço do cabeçalho para outros elementos, o que é possível, sempre respeitando a área de protecção do logo (pág. 14)
• O cabeçalho das páginas de produtos SAPO deve respeitar as regras acima descritas, sendo livre a escolha de cores quer para o cabeçalho, quer para o menu, bem como de tipgrafia para o menu. Em alguns casos, será necessário utilizar o espaço do cabeçalho para outros elementos, o que é possível, sempre respeitando a área de protecção do logo (pág. 14)
• No caso de homepages SAPO internacionais, deve respeitar-se o mesmo cabeçalho que para a homepage de Portugal, tal como definido anteriormente (pág. 65). Para aplicação do nome do país, deve seguir-se a regra de construção do logo com indicador de país (pág. 19)
• O cabeçalho das páginas de produtos SAPO com sub-áreas verticais deve respeitar as regras acima descritas, que são iguais aos cabeçalhos para páginas de produto (pág. 66), exceto que é o nome da sub-área que assume 36 px de altura, sendo o resto do nome da sub-área construída de acordo com as regras definidas (pág. 47).
• Com uma presença cada vez mais marcada no universo mobile, o SAPO oferece uma multiplicidade de aplicações e websites responsive que são represen­tados em diversos sistemas operativos por via de ícones. A coerência desta iconografia, entre si, bem como com a marca SAPO é essencial para solidificar a nossa imagem junto dos utilizadores.
• Assim, foram criadas regras que devem ser seguidas na criação de novos ícones, tal como todas as restantes regras de aplicação de marca presentes neste manual. Para criar novos ícones é essencial recorrer aos templates originais fornecidos.
• Os ícones seguem a seguinte estrutura gráfica: 1. Uma base de degradé numa das sete cores se­cundárias, de acordo com o definido nos templa­tes fornecidos. 2. Um padrão triangular monocromático, aplicado sobre o degradé, em modo de overlay, obtendo-se assim cada um dos sete tons secundários. 3. Um pictograma simples, representativo da prin­cipal funcionalidade da aplicação que se preten­de representar, aberto a branco e o logotipo SAPO para sublinhar a marca.
• Para criar as imagens que representarão a funcionalidade de cada aplicação, deve utilizar-se a grelha abaixo definida. Uma vez mais, é obrigatório utilizar o ficheiro template original, para garantir a qualidade final do ícone.
• Os pictogramas devem ser simples e representativos da funcionalidade da aplicação. Devem ser desenhados com formas geométricas simples, a branco, com áreas abertas onde se veja o fundo, caso beneficie a leitura da imagem.
• Exemplo de construção do pictograma do SAPO Cinema sobre a grelha de construção de ícones.
• Exemplo do ícone do SAPO Cinema finalizado, com todos os ele­mentos de construção de ícones.
• Os cantos surgem arredondados ou não consoante as regras espe­cíficas de cada sistema operativo.
• A utilização de cor na iconografia e no grafismo de aplicações multiplataforma, deve recorrer-se à paleta de cores complementares, com a adição de uma variante mais clara e uma mais escura para definição de pormenores, marcas gráficas ou construção de degradés. Estas cores poderão ser utilizadas para quaisquer outras aplicações, apesar da sua génese estar na multiplataforma.

Print Guidelines

• Logo com dimensão mínima para impressão.
• O logo deve ser sempre redimen­sionado mantendo as proporções originais até um mínimo de 24 px de altura em ecrãs de baixa den­sidade e 48 px em ecrãs de alta densidade. Não há limite superior.
• O logo deve ser sempre redimensionado mantendo as proporções originais até um mínimo de 42 px de largura em ecrãs de baixa densidade e 84 px em ecrãs de alta densidade. Não há limite superior.
• Símbolo com dimensão mínima para impressão.
• O símbolo deve ser sempre redimensionado mantendo as proporções ori­ginais até um mínimo de 40 px de largura em ecrãs de baixa densidade e 80 px em ecrãs de alta densidade. Não há limite superior.
• No caso de um nome de produto o tamanho mínimo para impressão é de 10 pontos e para ecrã, 16 px.
• Para manter a legibilidade, a dimensão mínima desta compo­sição é necessariamente maior do que a de nome de produto simples.
• Para impressão de nomes de sub-área, a dimensão mínima é de 24 pontos, ficando o nome do produto-pai com 9 pontos.
• A utilização horizontal e vertical dos produtos com sub-área deve respeitar uma dimensão mínima de impressão de 10 pontos.
• Devem respeitar-se as dimensões mínimas acima descritas para que se garanta a legibilidade do selo. Em certos sistemas de im­pressão de menor qualidade poderá ser necessário recorrer a um tamanho maior, decisão que deve ser tomada caso se perca a leitura da expressão “Made by SAPO”.

Naming Conventions

• Na web, os nomes de produtos devem surgrir apenas na tipografia principal e são sempre acompanhados do símbolo inserido na Barra de Navegação SAPO (ver pág. 64).
• Em contextos em que o nome não surja acompanhado da Barra de Navegação SAPO, deverá sempre existir o logo na sua forma horizontal ou vertical, algures na composição.
• O nome do produto é composto na horizontal com o nome SAPO em Proxima Nova Bold, e com o descritor do serviço em Proxima Nova Light, sempre em maiúsculas e sem espaços. O nome SAPO pode funcionar como prefixo ou sufixo.
• Os produtos sem sub-área seguem sempre esta composição, não havendo lugar a excepções ou variantes.
• No caso de um produto conter uma sub-área verticalizada, surge a necessidade de passar esta sub-área com destaque suficiente, mas sem se perder nem a marca, nem o nome do produto.
• Assim, o logotipo deve ser construído com base na versão horizontal, surgindo o nome da sub-área com a di­mensão maior e o nome da marca e produto-pai acima desta, com 40% do tamanho de letra.
• A relação de pesos tipográficos mantém-se: o nome principal a bold e o secundário a light, introduzindo-se um espaço entre a marca e o nome do produto, para não se comprometer a legibilidade.
• Esta construção deve ser usada apenas no digital, havendo uma construção alternativa para comunicação, por questões de legibilidade e destaque.
• Na construção de um produto com uma sub-área para aplicação no digital, o nome do produto-pai sur­ge inteiramente a Proxima Nova Bold, usando-se um espaço para separar a palavra SAPO do restan­te; em segunda linha, surge o nome da sub-área em Proxima Nova Li­ght.
• O texto da primeira linha deve ser 40% do tamanho da segunda, por exemplo: 40 pt e 100 pt.
• A entrelinha é igual a duas vezes a espessura da perna do “P” na pa­lavra SAPO.
• Para alinhamentos em que a pala­vra na segunda linha comece porC, G, O, Q ou S, a primeira linha deve avançar 1.5 vezes a espessura da perna do “P” na palavra SAPO.
• Na construção de um produto com uma sub-área para aplicação em comunicação, por questões de otimização de legibilidade, pode optar-se por uma disposição horizontal, com o nome do produto pai em Proxima Nova Bold e o nome da sub-área em Proxima Nova Light, sempre com espaços entre as palavras, ou por uma disposição vertical com as mesmas características, mas em que o produto pai surge por cima da sub-área, com a mesma relação de pesos e o mesmo corpo de letra, entrelinha igual ao corpo de texto e alinhado à esquerda.
• A margem de segurança para nomes de produ­tos é igual a duas vezes a espessura da perna do “P” na palavra SAPO, em toda a volta.
• Estas margens são iguais para produtos com sub-área nas versões para comunicação, hori­zontal ou vertical.
• Para nomes de produtos com sub-área em meios digitais a margem de segurança é igual à altura da tipografia do nome do produto-pai.
• No caso de um nome de produto o tamanho mínimo para impressão é de 10 pontos e para ecrã, 16 px.
• Para manter a legibilidade, a dimensão mínima desta compo­sição é necessariamente maior do que a de nome de produto simples.
• Para impressão de nomes de sub-área, a dimensão mínima é de 24 pontos, ficando o nome do produto-pai com 9 pontos.
• No ecrã, deve usar-se 12 e 32 px, respectivamente.
• A utilização horizontal e vertical dos produtos com sub-área deve respeitar uma dimensão mínima de impressão de 10 pontos.
• Não existem dimensões mínimas para ecrã, pois esta compo­sição não é usada no digital.
• no caso em que vários nomes de produtos SaPO precisem de conviver, os mesmos devem ser alinhados horizontalmente, pela linha de base do nome de produto e sub-área, mantendo-se entre cada produto, um espaço equivalente à altura da tipografia.
• Em casos de alinhamento vertical, o mesmo deve fazer-se igualmente com espaços iguais ao tamanho da tipografia do nome de produto ou sub-área e encostado à esquerda.
• No caso de produtos com sub-área na versão para comunicação vertical, a composição deve fazer-se da mesma forma: o espaço entre cada produto deve ser igual ao tamanho de letra.
• A regra de espaçamento vertical montem-se no caso de produtos com sub-área na versão de comunicação.
• No caso de produtos com sub-área na versão para comunicação vertical que precisem de conviver com nomes de produto sem sub­-area, o alinhamento deve fazer-se pelo nome do produto-pai.
• ATENÇÃO: deve ter-se sempre o cuidado de verificar para que meio se está a produzir peças e nunca misturar as duas versões de produtos com sub-área. Em baixo, à esquerda, versão vertical para comunicação não-digital, à direita, versão para digital. Nunca misturar os dois.
• O sistema de composição de nomes de produtos SaPO é extremamente complexo e foi construido para lidar com inúmeras incógnitas, nomeadamente, desenvolvimentos futuros que devem ficar sob alçada da marca e encaixar nas regras de construção anteriormente apresentadas.
• no entanto, seguindo algumas orientações, será possível criar novos nomes que sirvam a marca e ao mesmo tempo respeitem o sistema de construção. 1. oS NoMES Não DEVEM TER MAiS Do qUE UMA pALAVRA, NEM iNCLUiR SíMBoLoS
• a introdução de espaços nos nomes dos produtos destrói a construção gráfica e consequentemente, a identidade visual da marca. Simultaneamente, a representação de um produto com espaços no nome, em termos de uRl, torna-se complicada, sendo preciso juntar todas as palavras ou recorrer a uma simplificação do nome.
• oS NoMES Não DEVEM SER DEMASiADo LoNgoS
• Um nome demasiado longo não favorece a repetição e memorização rápidas. Além disso, graficamente, cria um desequilíbrio, comprometendo a identidade visual da marca. Sempre que possível, deve optar-se por nomes claros, mas sucintos.
• SEMpRE qUE poSSíVEL, DEVE EViTAR-SE A UTiLizAção DE pALAVRAS ACENTUADAS
• A acentuação cria inúmeros problemas, nomeadamente em termos de URL, uma vez que os carateres acentuados não são utilizáveis em URL (apesar de não ser impossível, não é corrente, nem prático), pelo que o nome no URL ficará sempre descaracterizado. Além destes problemas, a acentuação cria desequilíbrios visuais inconciliáveis com o sistema de construção apresentado, especialmente no que diz respeito a sub-áreas.
• A UTiLizAção DE SUB-áREAS ESTá RESERVADA A SiTES CoM LógiCA DE NEgóCio
• apesar de estar prevista a construção de sub-áreas, como “SaPO Voucher Restaurantes”, estas devem ser reservadas para necessidades muito específicas de negócio e não para criar secções de sites que não acrescentam nada ao utilizador final e podem prejudicar a navegação.
• o NoME DE SUB-áREA DEVE SER MAioR Do qUE o pRoDUTo-pAi
• O sistema de construção não suporta nomes para sub-áreas cujo comprimento seja menor do que a menção do produto-pai, pelo que deve optar-se por um nome de sub-área comprido o suficiente para não destruir o equilíbrio gráfico da composição.
• Caso surja necessidade de aplicar uma exceção a esta regra, o naming deve ser sempre decidido pela Unidade SAPO, com o acompanhamento da equipa de Gestão Estratégica de Marca.

Additional Properties