Digitising Telenor’s Design Guidelines

Global Brand Identity Version 1.0 – Dec. 2017

Digitising Telenor’s Global Brand Identity Design Guidelines 2

Table of contents Introduction 3 Typography 47 Text on image and video 93

Vision 4 Icons 53
Mission 5 Motion 95
Values 6 Layout 58 Introduction 96
Goals 7 Introduction 59 Easing and duration 97
Grid 60 Motion elements 98
Overarching principles 8 Responsive layout 62
Guiding the user 9 Navigational bars 63
Accessibility 10 Menu & Search 67
Communication 11 Secondary menu 72
Legibility 12 Footer 74

Design system 13 Components 77

Overview 14 Buttons 78
Sample screens 15 Text links 80
Breadcrumbs 81
UI kit 19 Navigation tabs 82
Introduction 20 Badges 83
How to use 21 Forms 86
Content dropdown 88
Style 22
Logo & Logosymbol 23 Social media 90
Colours 37 Profile avatar 91
Digitising Telenor’s Global Brand Identity Design Guidelines 3

Introduction
Digitising Telenor’s Global Brand Identity Design Guidelines 4

Vision Empowering societies

Mission
Values We provide the power of digital communication, enabling
Goals everyone to improve their lives, build societies and secure
a better future for all.

Our vision captures the higher purpose of what we do. We bring vital
infrastructure, new services and products that stimulate progress, change
and improvement for all. The opportunities offered by mobile technology
are growing day by day. By remaining focused on our vision, we emphasise
Telenor’s role in realising these opportunities for everyone.
Digitising Telenor’s Global Brand Identity Design Guidelines 5

Vision We’re here to help our customers

Mission
Values We exist to help our customers get the full benefits
Goals of being connected. Our success is measured by how
passionately they promote us.

Our mission describes why we exist. When we get this right Telenor continues
to be a driving force in digital communication and customer satisfaction.
Digitising Telenor’s Global Brand Identity Design Guidelines 6

Vision Be respectful
Mission We acknowledge and respect local cultures and want to be
Values part of local communities wherever we operate.
Goals
Keep promises
We’re about delivery, not overpromising.

Make it easy
We don’t complicate things. Everything we produce should
be simple to understand and use.

Be inspiring
Everything we produce should look attractive, modern and
fresh. We strive to find new ways to improve and create
value for people and for society.
Digitising Telenor’s Global Brand Identity Design Guidelines 7

Vision These guidelines are intended to ensure Telenor’s online presence

consistently delivers frictionless customer journeys for all our customers
Mission
regardless of geography, culture or technology.
Values
Goals Telenor’s overaching design guidelines focus on how the Telenor brand should
appear and communicate across all digital platforms, while at the same time
allowing for a large degree of freedom for individual BUs to create tactical
campaigns that are tailored to their specific customers.

Adhearing to the principles outlined in this document will help us build

consistency across all channels and interfaces – securing frictionless
customer journeys – while creating a visual structure that makes the sharing
of code, assets, knowledge, learnings, etc, increasingly effective.

If after reading the branding requirements

you still haven’t found the answer to your
query, please contact us in one of two ways:

Email the Brand Manager

ask.brand.manager@telenorgroup.com

Telenor Brand Hotline

1-914-249-1326
Digitising Telenor’s Global Brand Identity Design Guidelines 8

Overarching
principles
Digitising Telenor’s Global Brand Identity Design Guidelines 9

Guiding the user Helping our customers is our ultimate goal, which must
Accessibility underpin the choices we make when structuring our digital
Communication communication. The desire to create fresh visual content and
Legibility compelling campaign graphics should never compromise the
way we structure our customer journeys.

Our sites should be easy to navigate and consistent in the way information is
structured. Each customer should be able to discover and purchase the products
they need as easily as possible, time and again.

The three Telenor Blue colours will play key roles in the navigational structure of
the site, establishing blue as the dominant colour for all call-to-action features
and creating a clear and consistent path that runs throughout Telenor’s online
content. Expressive targeted campaigns will be given the freedom they need to
communicate to their regionally and culturally diverse customer groups, while a
clear navigational path will be strongly signposted through the use of the blue
colours, guiding customers to the products and services that are right for them.
Digitising Telenor’s Global Brand Identity Design Guidelines 10

Guiding the user Inclusive design, design for all, digital inclusion, universal
Accessibility usability, and similar efforts address a broad range of
Communication issues and make technology available to – and usable by –
Legibility everyone whatever their abilities, age, economic situation,
education, geographic location, or language. Accessibility
focuses on people with disabilities – people with auditory,
cognitive, neurological, physical, speech and visual
impairments.

All our brand elements have been chosen specifically to

meet WCAG* requirements, which should always be kept in
mind, if any future adjustments are made to our toolkit.

*Our work is based on the Web Content Accessibility Guidelines (WCAG),

which is developed through the W3C process in cooperation with
individuals and organizations around the world, with a goal of providing a
single shared standard for web content accessibility that meets the needs
of individuals, organizations, and governments internationally.

Read the full Web Content Accessibility Guidelines (WCAG)

https://www.w3.org/WAI/intro/wcag
Digitising Telenor’s Global Brand Identity Design Guidelines 11

Guiding the user Telenor’s digital presence has been developed with one core
Accessibility guiding principle in mind: we’re here to help our customers
Communication find the products and services they are looking for as easily
Legibility and as effectively as possible. With that in mind, each design
element should be chosen to build and maintain compelling
and consistently informative customer journeys, regardless
of territory, language or local culture.

The varied and diverse content of tactical campaigns is vital to the way we
communicate with our customers. These campaigns are easily accommodated
and integrated into our online presence but they should always be clearly
separated from the core navigational structure of the site.

The core structure should always be consistent, informative and easy to

navigate, across all territories. A family of carefully selected Telenor colours,
font sizes and many other design elements have been established to maintain
a clear navigational hierarchy of information, from the largest headline to the
smallest footer.
Digitising Telenor’s Global Brand Identity Design Guidelines 12

Guiding the user The guiding principle for the display of information is to
Accessibility keep the number of fonts, character sizes and colours to a
Communication minimum. Once a clear hierarchy has been established it
Legibility should continue and be built upon throughout the site, with
an emphasis on consistency and legibility.

To aid legibility, text should never be placed onto, or reversed out of images of
any kind. Please refer to the Colours and Typography sections of this manual for
details of the tools and rules that will help to optimise legibility throughout the
customer experience.

Of course, all text size options have been chosen specifically to meet WCAG*
requirements. Maintaining this standard is essential to optimising legibility.
Digitising Telenor’s Global Brand Identity Design Guidelines 13

Design system
Digitising Telenor’s Global Brand Identity Design Guidelines 14

Overview The design system for Telenor has been created to provide a
Sample screens solid visual foundation, allowing each BU the tools it needs to
convey every aspect of its online communication, from simple
navigation to tactical campaigns.

The accompanying UI kit contains many assets and examples

that are intended to speed up the process of layout
prototyping, eliminate guesswork and establish a consistent
and clearly defined framework where tactical campaigns
can be used to their greatest effect, promoting positive and
rewarding customer journeys.
Digitising Telenor’s Global Brand Identity Design Guidelines 15

Overview
Sample screens
Digitising Telenor’s Global Brand Identity Design Guidelines 16

Overview
Sample screens
Digitising Telenor’s Global Brand Identity Design Guidelines 17

Overview
Sample screens
Digitising Telenor’s Global Brand Identity Design Guidelines 18

Overview
Sample screens
Digitising Telenor’s Global Brand Identity Design Guidelines 19

UI kit
Digitising Telenor’s Global Brand Identity Design Guidelines 20

Introduction To help our designers build Telenor interfaces as effectively as

How to use possible, we have developed a UI Kit. The kit is made for Adobe XD,
an industry standard UI design tool.

Our UI Kit contains all Telenor core assets, including visual styles,
components, color swatches, iconography, and templates. It also
has a collection of symbols and text styles for rapid design and
layout prototyping.
Digitising Telenor’s Global Brand Identity Design Guidelines 21

Introduction For anyone unfamiliar with Telenor’s online presence, the UI

How to use Kit is the perfect introduction. Apart from containing all of the
necessary assets it also outlines the thinking behind the rules,
as well as offering samples of design for inspiration. The UI Kit
is a living breathing document that acts as the perfect starting
point for anyone designing Telenor’s online content.
Digitising Telenor’s Global Brand Identity Design Guidelines 22

Style
Digitising Telenor’s Global Brand Identity Design Guidelines 23

Symbol & Logotype The Telenor symbol & logotype

The Telenor brand is comprised of two main brand assets:
Colours the logo symbol and the logotype.
Typography
Icons Symbol Logotype
Digitising Telenor’s Global Brand Identity Design Guidelines 24

Symbol & Logotype Versions

On digital surfaces our symbol must always appear in either Telenor Blue or white, depending on the background,
Colours and the logotype must always appear in either black or white, depending on the background.
Typography
Icons

Symbol in Telenor Blue Symbol in White

Logotype in Text black Logotype in White

Digitising Telenor’s Global Brand Identity Design Guidelines 25

Symbol & Logotype Symbol on backgrounds

Our symbol must always appear on one or other of these background types.
Colours
Typography
Icons

Primary: Telenor Blue on White Telenor Blue on Telenor Black

White on Telenor Blue Image as background. Remember to always provide sufficient contrast with the symbol
Digitising Telenor’s Global Brand Identity Design Guidelines 26

Symbol & Logotype Logotype on backgrounds

Our logotype must always appear on one or other of these background types.
Colours
Typography
Icons

Primary: Black on White White on Telenor Black

White on Telenor Link Blue Image as background. Remember to always provide sufficient contrast with the logotype
Digitising Telenor’s Global Brand Identity Design Guidelines 27

Symbol & Logotype Logotype

All the logos within the Telenor family of companies have
Colours been redrawn to create one unifying set of logotypes.
Typography
Icons
Digitising Telenor’s Global Brand Identity Design Guidelines 28

Symbol & Logotype Setting a new logotype

Whenever a new company is added to the Telenor family
Colours the following rules should be followed to create the new
Typography logotype. Each new logotype should always be outlined
to be used as a vector file.
Icons

1. Type in the new company name

2. Choose Telenor Light Opentype
3. Leave the kerning at auto
4. Set the tracking to -30
5. Outline the type
6. Use a telenor ‘e’ for spacing, as shown Kerning: Auto
7. Align new company name to the
Tracking: -30
baseline of the Telenor logotype
8. Save as a vector file format (.ai / .eps)
Digitising Telenor’s Global Brand Identity Design Guidelines 29

Symbol & Logotype Releasing the lock-up

Historically the logo symbol and logotype appeared as a fixed lock-up.
Colours The logo symbol and the logotype have now been released from the lock-up
Typography structure and should be used as separate brand identifiers. On all consumer
facing surfaces the logo symbol should play the role of the primary identifier
Icons and the logotype should be used as a sign-off. The logo symbol and logotype
should never appear as a lock-up.

The main identifier for Telenor, Dtac and Grameenphone’s online presence
on all consumer facing surfaces

The Telenor, Dtac and Grameenphone logotypes are primarily used as a sign-off.
Digitising Telenor’s Global Brand Identity Design Guidelines 30

Symbol & Logotype Hierarchy between the logo symbol and logotype as the brand is introduced.
The Telenor logo symbol is the primary brand identifier on all consumer facing
Colours surfaces and is used alone in the navigation bar on our websites. If both the logo
Typography symbol and logotype are present on the same surface, the logo symbol should
be given position and size prominence.
Icons

Max 50% of symbol height

The logotype should not be larger than

50% of the height of the symbol in cases
where both brand elements are present,
when the brand is introduced.

The logo symbol should be given prominence when the brand is introduced on
consumer facing surfaces.
Digitising Telenor’s Global Brand Identity Design Guidelines 31

Symbol & Logotype Hierarchy between the logo symbol and logotype on sign-offs.
The Telenor logotype should be given prominance on sign-off surfaces,
Colours such as the footer.
Typography
Icons

Max 10% higher

than the height of
the logotype.

The logo symbol should not be more than 10% larger than
the height of the logotype when both brand assets appear in
a sign-off (for example in a footer).

In sign-off situations (for example in the footer) the roles reverse and the logotype is given
more prominence than the logo symbol.
Digitising Telenor’s Global Brand Identity Design Guidelines 32

Symbol & Logotype Minimum sizes & clear space

To ensure legibility of the Telenor logo, follow these minimum size
Colours and clear space specifications (size may depend on screen resolution).
Typography
Icons

Symbol Clear space Minimum size

x
x = 25% of symbol height

x x

x 15 px

Logotype Clear space Minimum size

We use the letter ”e” rotated 90° to 50 px

determine the clear space on each side
Digitising Telenor’s Global Brand Identity Design Guidelines 33

Symbol & Logotype Clear space, symbol

Colours
Typography
Icons

voluptatiumeditatatem qui od quam

con et voluptatium eseque reped
quiam de quorubas iumqui.
voluptatiumeditatatem qui od.
Digitising Telenor’s Global Brand Identity Design Guidelines 34

Symbol & Logotype Clear space, logotype

Colours
Typography
Icons

voluptatiumeditatatem qui od quam

con et voluptatium eseque reped
quiam de quorubas iumqui.
voluptatiumeditatatem qui od.
con et voluptatium eseque
Digitising Telenor’s Global Brand Identity Design Guidelines 35

Symbol & Logotype Common mistakes

Do not alter the Telenor symbol in any way. Always apply the symbol
Colours thoughtfully, carefully, and appropriately. Avoid common mistakes,
Typography such as the examples shown here:

Icons
Symbol

Never use background colours Never recolor Never outline Never rotate
other than the specified brand icon
backgrounds

Never mask with images or graphics Never display or reproduce at Never stretch or compress Never add drop shadows
insufficient resolution
Digitising Telenor’s Global Brand Identity Design Guidelines 36

Symbol & Logotype Common mistakes

Do not alter the Telenor logotype in any way. Always apply the logotype
Colours thoughtfully, carefully, and appropriately. Avoid common mistakes,
Typography such as the examples shown here:

Icons
Logotype

Never adjust the kerning Never stretch or compress Never add extensions Never recolor

Never use background colors other than Never change the typeface Never use the logotype over the symbol Never put the logo on low-contrast
the specified brand icon backgrounds backgrounds
Digitising Telenor’s Global Brand Identity Design Guidelines 37

Symbol & Logotype Colour

Colour is key to establishing hierarchy between elements.
Colours Apart from its use in expressing emotion and tone of
Typography voice, it should always function to delineate information
consistently and clearly, so as to help guide the customer
Icons through online content. Colours should always be chosen
to aid the customer, not merely to decorate.
Digitising Telenor’s Global Brand Identity Design Guidelines 38

Symbol & Logotype Colour palette

Telenor’s family of colours has been chosen to help guide
Colours customers through our online content. The palette has been
Typography divided into four groups. Each group serves different purposes:

Icons

Telenor blues
These ensure that our customers can easily and consistently
navigate to the information they need, across all platforms.

Information colours
These are used sparingly, to highlight and emphasise
specific aspects of content.

Background colours
These are used to contain and delineate content and
to add tonal and colour variation to the site.

Grays
These are used to contain and delineate content and
to add tonal variation to the site.
Digitising Telenor’s Global Brand Identity Design Guidelines 39

Symbol & Logotype Telenor blues

These ensure that our customers can easily and consistently
Colours navigate to the information they need, across all communication.
Typography
Icons

Telenor Blue is the colour of the Telenor Symbol. Telenor Link is our dominant, guiding colour and is Telenor Black is actually a dark blue that
It can also be used as the colour of link text, when it used for most call-to-action features. provides a more pleasing contrast to our
appears out of Telenor Black. blue palette than pure black. It is used to add
contrast, but should be used sparingly.
Digitising Telenor’s Global Brand Identity Design Guidelines 40

Symbol & Logotype Information colours

The Information colour palette is used to give the BUs a tool for guiding
Colours the user towards particular information on the site. Each individual BU is
Typography free to allocate its choice of Information colours to highlight specific kinds
of information, but they should always be used sparingly.
Icons

Information colours are used to steer our customers Here our Information colours are used to signal
towards specific offers, benefits or information remaining and roll-over data values.
Digitising Telenor’s Global Brand Identity Design Guidelines 41

Symbol & Logotype Background colours

These are used to contain and delineate content
Colours and to add tonal and colour variation to the site.
Typography
Icons

Our Background colours are used to delineate content In this example, we use Background colours to divide Using the Background colour palette, a warmer or
and to provide tonal variation to our layouts. sections within a layout. A subtle difference in tone is cooler look & feel can be conveyed.
all that is needed.

Digitising Telenor’s Global Brand Identity
unavailable for a while). Let My Plan
take care of your telecom needs so that
Design
you Guidelines
can spend more time on the things 42
that are important to you. With My
Plan, you are getting

• 1 Paisa/sec
• Star Status
Symbol & Logotype Grays
• 500 SMS/month
These arecommitment
• Monthly used to contain
plan and delineate content
Colours and to add tonal variation to the site.
Typography
Icons

My Plan is the new postpaid solution

Grays are used to steer the user’s attention towards
specific offers, benefits or information
from Grameenphone with the best 3G
network. Any new or existing postpaid
customer can avail this offer. Prepaid
customer can also enjoy this offer by
migrating to My Plan without changing
their number at any Grameenphone
Center (this service is currently
unavailable for a while). Let My Plan
take care of your telecom needs so that
you can spend more time on the things
that are important to you. With My
Plan, you are getting
Here a Gray is used to indicate the current page within
a Breadcrumb.
• 1 Paisa/sec
• Star Status
• 500 SMS/month
• Monthly commitment plan
Digitising Telenor’s Global Brand Identity Design Guidelines 43

Symbol & Logotype Colour palette

Colours
Typography Telenor blues

Icons

Grays

Information colours

Background colours
Digitising Telenor’s Global Brand Identity Design Guidelines 44

Symbol & Logotype Gradients

These gradients are used mainly for campaign pursposes but never to be
Colours used on assets provided in the UI Kit (for example, Buttons, Badges, etc).
Typography The two WCAG gradients are dark enough to have white text reversed out
of them. The Background gradients are for campaign usage and should not
Icons have text reversed out of them.

Our gradients are derived from the blues of our color palette.
Colours pairs can only be blended in gradients in strict colour order:
Telenor Black, Telenor Link, Telenor Blue, Information Blue,
Background Light Blue.

WCAG gradients

Background gradients
Digitising Telenor’s Global Brand Identity Design Guidelines 45

Symbol & Logotype Gradients

These gradients are all constructed from two colours chosen from the three Telenor blue colours
Colours plus Information Blue and Background Light Blue. The first colour choice runs from one corner at
Typography full strength, extending beyond the other corner by 50%, finishing in the second colour choice at
full strength. Colours pairs can only be blended in gradients in strict colour order: Telenor Black,
Icons Telenor Link, Telenor Blue, Information Blue, Background Light Blue.

Defining gradients

x = 50% of shape height

100% Telenor Black 100% Telenor Link 100% Telenor Black 100% Telenor Link
Digitising Telenor’s Global Brand Identity Design Guidelines 46

The new iPhone 8 is coming

to Grameenphone very soon.

Symbol & Logotype Common mistakes

Colours
Typography
Icons
My Plan is the new postpaid solution
from Grameenphone with the best 3G
network. Any new or existing postpaid
customer can avail this offer. Prepaid
customer can also enjoy this offer by
migrating to My Plan without changing
their number at any Grameenphone
Center (this service is currently
unavailable for a while). Let My Plan
take care of your telecom needs so that
you can spend more time on the things
that are important to you. With My
Plan, you are getting

• 1 Paisa/sec
• Star Status
• 500 SMS/month
• Monthly commitment plan
• It’s a monthly commitment product
and subscriber have to pay
commitment amount as minimum
revenue

• There will be no monthly charge if

subscriber use minimum monthly
commitment amount
Never use Telenor Blue for text or as a background Never use information badges for every item on a Never change the colour of buttons or add colours
• SIM price will be TK 400 as security
colour. page, or use Information colours for background. that are not in our colour palette
deposit

• Default plan will be 150Tk and

subscriber can choose plan during
purchase (only from GPC) and higher
security deposit will be applicable in
Digitising Telenor’s Global Brand Identity Design Guidelines 47

Symbol & Logotype Typography is used to establish clear hierarchies and to

purposefully guide our users through online content.
Colours
Typography
Icons

ABCDEFGHIJKLMNO
PQRSTUVWXYZÆØÅ
abcdefghijklmNo
pqrstuvwxyzæøå
AaBbCcDd1234
Digitising Telenor’s Global Brand Identity Design Guidelines 48

Symbol & Logotype Our brand typefaces

The Telenor font remains our primary typeface for conveying our visual
Colours identity within digital communication. Source Sans Pro is our secondary
Typography typeface and is used only for body copy, which is set to a fixed size of 20pt.

Icons
Telenor Light Source Sans Pro Regular
Source Sans Pro Regular Italic
Telenor Regular
Telenor Medium The secondary typeface will be used for body copy
throughout the site. It will be used consistently at 20pt
on 26pt to establish coherence across all of Telenor’s

Telenor Bold
communication.

Telenor Light Italic

Telenor Regular Italic
Telenor Medium Italic
Telenor Bold Italic
Digitising Telenor’s Global Brand Identity Design Guidelines 49

Symbol & Logotype Text styles

Each type style should be chosen carefully to ensure content is clearly
Colours structured and information is clear, effective and consistent.
Typography
Icons
Display Large 1 Subheading 1 Display Large
Telenor Bold 32, 40l Telenor Bold 18pt, 26l

Lorem ipsum dolor sit amet, consectetur

Display Large 2 Subheading 2
adipiscing elit suspendisse.
Telenor Regular 32, 40l Telenor Regular 18pt, 26l

Display Small 1
Telenor Bold 24pt, 32l
Display Small 2
Telenor Regular 24pt, 32l
Caption 1 Elementum mauris tristique ex tincidunt, ut semper arcu rhon-
Telenor Bold 13pt, 20lh cus. In ex nulla, porttitor vel vestibulum ut, volutpat vel est.
a a
Caption 2 a a a a
Telenor Regular 13pt, 20l

Subheading
Heading 1 Body
Telenor Bold 20pt, 28l Source Sans Pro Regular 20pt, 26l
a a a a
Aenean libero mi, consectetur at enim sed, ultrices interdum la-
Heading 2 a a
Telenor Regular 20pt, 28l nisl, nec sagittis diam placerat non. Phasellus rhoncus sagittis
a a

Caption text, about this text

Digitising Telenor’s Global Brand Identity Design Guidelines 50

Symbol & Logotype Hierarchy and consistency

Typographic styles should be chosen
Colours from a selection of predefined styles,
Typography each created to maintain consistency
of information across all platforms.
Icons There is one style for headers, one for
introductions, one for image texts etc.

In this example we use Display Small

for main headlines, Body for body copy
and Subheading for links. These sizes
are then used consistently throughout.

Display Small
Body Med Familjebonus får du extra data
varje månad – utan extra kostnad.

Subheading
Digitising Telenor’s Global Brand Identity Design Guidelines
Symbol & Logotype Line length Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Line lengths Maecenas eget magna id velit egestas mollis. Maecenas id orci
Colours should be kept sapien. Donec sit amet mollis diam. Donec vel velit eleifend,
porta erat non, congue arcu. Nunc vitae erat sed neque luctus
Typography to a maximum of
eleifend. In sed arcu at ex rhoncus auctor vitae sed mi. Nulla
60 characters to
Icons aid legibility on
lobortis nisi id massa euismod, in pulvinar eros luctus.
Pellentesque imperdiet leo non sapien commodo, id eleifend
longer texts.
lacus consectetur. Pellentesque pulvinar porta felis ac mollis.
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Aliquam turpis nibh,
pellentesque non convallis eu, blandit congue mauris. Aliquam
in risus nec velit sodales placerat. Morbi lorem magna, auctor et
laoreet eget, tincidunt eget tellus. Mauris consectetur imperdiet
mi, vel dapibus leo dignissim at. Maecenas fringilla viverra nibh
id feugiat. Proin tristique, arcu vitae tempor pellentesque, eros
odio blandit sem, sit amet bibendum ligula mi et lacus.
Nunc semper lacus ut augue blandit tempor. Pellentesque
viverra, odio et consectetur tincidunt, quam augue pretium
neque, vitae tempor ex nibh vitae ex. Phasellus non nibh purus.
Curabitur sit amet tellus et quam finibus laoreet in sit amet
risus. Morbi accumsan quis leo accumsan lacinia. Nulla facilisi.
In massa risus, lobortis facilisis sapien quis, commodo
consequat ante. Aliquam sed lacus id odio sodales mollis. Nulla
nec nisl lorem. Maecenas auctor, massa vel dapibus scelerisque,
nibh dui pharetra mi, aliquet dictum sapien elit ac arcu. Integer
ornare velit eget justo tempus ullamcorper. Vivamus sed blandit
nisi.
51
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Maecenas
eget magna id velit egestas mollis.
Maecenas id orci sapien. Donec sit
amet mollis diam. Donec vel velit
eleifend, porta erat non, congue arcu.
Nunc vitae erat sed neque luctus
eleifend. In sed arcu at ex rhoncus
auctor vitae sed mi. Nulla lobortis nisi
id massa euismod, in pulvinar eros
luctus. Pellentesque imperdiet leo non
sapien commodo, id eleifend lacus
consectetur. Pellentesque pulvinar
porta felis ac mollis. Pellentesque
habitant morbi tristique senectus et
netus et malesuada fames ac turpis
egestas. Aliquam turpis nibh,
pellentesque non convallis eu, blandit
congue mauris. Aliquam in risus nec
velit sodales placerat. Morbi lorem
magna, auctor et laoreet eget,
tincidunt eget tellus. Mauris
consectetur imperdiet mi, vel dapibus
leo dignissim at. Maecenas fringilla
viverra nibh id feugiat. Proin tristique,
arcu vitae tempor pellentesque, eros
odio blandit sem, sit amet bibendum
ligula mi et lacus.
Digitising Telenor’s Global Brand Identity Design Guidelines 52

Symbol & Logotype Best practices

Colours
Typography
Icons

Limit typographic size and weight options, and stay Clearly separate tactical and navigational ele- Always design with mobile as the primary means of
consistent. ments. communication.
Digitising Telenor’s Global Brand Identity Design Guidelines 53

Symbol & Logotype Iconography

A new icon style has been created for Telenor specifically to accompany the
Colours Telenor font. The icons are used together with annotations to help customers
Typography navigate through content effectively, and should not be used to illustrate or
decorate. When creating new icons, the icon guidelines should be followed.
Icons
Digitising Telenor’s Global Brand Identity Design Guidelines 54

Symbol & Logotype Icon shapes

All icons are designed within a square, which comes in three sizes
Colours (16, 24 & 32 px). The icons don’t have to fill the square but must
Typography not be taller or wider than each of the three available square sizes.

Icons

Geometrical shapes
Each icon is constructed from lines, squares, rectangles
and diagonals. The rounded ends and corners are used to
harmonise with the Telenor font.

Lines with round edges Square Rectangle Triangle Circle Use a circle if you need
to make a curve
Digitising Telenor’s Global Brand Identity Design Guidelines 55

Symbol & Logotype Sizes

Main icons are created within 32 px squares. Button icons are created
Colours within 24 px squares. Glyph icons are created within 16 px squares.
Typography
Icons 32 px - Main icon 24 px - Button 16 px - Glyph

2 px

2 px 2 px

2 px 32 px
2 px 24 px
2 px 16 px
32 px 24 px 16 px

32 px 32 px 24 px 24 px 16 px 16 px

1x 4x 1x 4x 1x 4x

Negative space Clearance

Each icon should be expressed as simply as possbile, Adequate space around each icon is needed
so a rule of thumb is to use as few lines as possbile. to allow for legibility and touch.
Lines are recommended to be no closer than 3 px.

16 px

3 px
3 px

1x 2x 64 px
Digitising Telenor’s Global Brand Identity Design Guidelines 56

Symbol & Logotype Main icons: 32 x 32 px

Colours
Typography
Icons

Button icons 24 x 24 px
Digitising Telenor’s Global Brand Identity Design Guidelines 57

Symbol & Logotype Glyph icons 16 x 16 px

Colours
Typography
Icons

Colour variatons

Black icon on White White icon on Telenor Black Telenor Blue icon on Telenor Black
Digitising Telenor’s Global Brand Identity Design Guidelines 58

Layout
Digitising Telenor’s Global Brand Identity Design Guidelines 59

Introduction The main focus of our design system is to create and maintain a consistent hierarchy
Grid of elements that offer our customers a compelling and rewarding online journey, as
Responsive layout they search for the products and services they need. We encourage consistency across
Navigational bars environments by keeping visual elements, structural grids and spacing consistent
Menu & Search across all platforms and screen sizes. These layouts scale to fit any screen size,
Secondary menu simplifying the process of creating responsive websites and applications.
Footer
Digitising Telenor’s Global Brand Identity Design Guidelines 60

Introduction Grid
All our components are aligned and spaced according to
Grid an 8dp square baseline grid for mobile, tablet, and desktop.
Responsive layout This ensures layout consistency across all our BUs.

Navigational bars
Menu & Search
Secondary menu
Footer

Lorem ipsum dolor sit amet,

consectetur adipiscing elit. Curabitur
porta lectus risus, eget pellentesque
leo finibus sit amet. Sed posuere
maximus elit sed commodo.

Orci varius natoque penatibus et

magnis dis parturient montes, nascetur
Digitising Telenor’s Global Brand Identity Design Guidelines 61

Introduction Spacing guidance

As with our design elements, spacing also
Grid aligns to the 8dp square grid.
Responsive layout
Navigational bars
Menu & Search
Secondary menu
Footer

Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Curabitur
porta lectus risus, eget pellentesque
leo finibus sit amet. Sed posuere
maximus elit sed commodo.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Curabitur
porta lectus risus, eget pellentesque
leo finibus sit amet. Sed posuere
maximus elit sed commodo.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Curabitur
porta lectus risus, eget pellentesque
leo finibus sit amet. Sed posuere
maximus elit sed commodo.

Orci varius natoque penatibus et Orci varius natoque penatibus et Orci varius natoque penatibus et
magnis dis parturient montes, nascetur magnis dis parturient montes, nascetur magnis dis parturient montes, nascetur

8dp grid Example of horizontal spacing Example of vertical spacing

Digitising Telenor’s Global Brand Identity Design Guidelines 62

Introduction Responsive layout

As a principle, we aim to make desktop and mobile feel as similar as possible. Images should
Grid be scaled as necessary but text sizes, icons and buttons generally remain unchanged.
Responsive layout
Navigational bars
Menu & Search
Secondary menu
Footer
Digitising Telenor’s Global Brand Identity Design Guidelines 63

Introduction Navigation bars for consumer facing sites

The Telenor logo symbol is the main identifier of our brand – unifying the online
Grid presense of Telenor, Grameenphone and Dtac across all consumer facing surfaces.
Responsive layout
Navigational bars
Menu & Search
Secondary menu
Footer

Desktop

Mobile
Digitising Telenor’s Global Brand Identity Design Guidelines 64

Introduction Navigation bars for consumer facing sites: Structure

The structure of the navigation bar forms a flexible system where
Grid only the logo symbol’s position is fixed, whereas the menu items are
Responsive layout given a lot of flexiblity within this structure. The navigation bar can
therefore be built to each individual BU’s specific needs.
Navigational bars
Menu & Search
Secondary menu
Footer
Digitising Telenor’s Global Brand Identity Design Guidelines 65

Introduction Navigation bars for consumer-facing sites: Structure

The UI Kit provides more details about the different Navigational bar
Grid options, spacing, etc.
Responsive layout
Navigational bars
Menu & Search
Secondary menu
Footer
Digitising Telenor’s Global Brand Identity Design Guidelines 66

Introduction Navigation bars for Telenor Group and adjacent businesses

Adjacent businesses are clearly defined by the use of dark headers
Grid (Telenor Black). The logotypes are also given a prominent position
Responsive layout within the navigation bar.

Navigational bars
Menu & Search
Secondary menu
Footer

Desktop

Mobile
Digitising Telenor’s Global Brand Identity Design Guidelines 67

Introduction Menu & Search - desktop

On desktop sites the Menu appears as a burger stack icon accompanied by the word Menu.
Grid When activated the menu items appear next to each other with underlining used to denote
Responsive layout the selected menu item. Search is also added below the Menu field when expanded.

Navigational bars
Menu & Search
Secondary menu
Footer
Digitising Telenor’s Global Brand Identity Design Guidelines 68

Introduction Menu & Search - desktop

The UI Kit provides more details about the different
Grid Menu & Search options, spacing, etc.
Responsive layout
Navigational bars
Menu & Search
Secondary menu
Footer
Digitising Telenor’s Global Brand Identity Design Guidelines 69

Introduction Menu & Search - mobile

For mobile the Menu appears as a burger stack icon without the word
Grid Menu. When activated the menu items appear in a stack. The different
Responsive layout sub-categories can be hidden as dropdown sub-menus.

Navigational bars
Menu & Search
Secondary menu
Footer
Digitising Telenor’s Global Brand Identity Design Guidelines 70

Introduction Menu & Search - mobile

Search should always display associated search terms to help
Grid the user find what they are looking for more quickly.
Responsive layout
Navigational bars
Menu & Search
Secondary menu
Footer
Digitising Telenor’s Global Brand Identity Design Guidelines 71

Introduction Menu & Search - mobile

The UI Kit provides more details about the
Grid different Menu & Search options, spacing, etc.
Responsive layout
Navigational bars
Menu & Search
Secondary menu
Footer
Digitising Telenor’s Global Brand Identity Design Guidelines 72

Introduction Secondary menu

The Secondary menu is used to highlight common or promotional menu items.
Grid These appear as icon-plus-text annotation lock-ups. Secondary menu items
Responsive layout should not appear directly beneath the main navigation bar.

Navigational bars
Menu & Search
Secondary menu
Footer
Image container

Bodycopy
Digitising Telenor’s Global Brand Identity Design Guidelines 73

Introduction Secondary menu - padding

The UI Kit provides more details about the different
Grid Secondary menu options, spacing, etc.
Responsive layout
Navigational bars
Menu & Search
Secondary menu
Footer
Image container

Bodycopy
Digitising Telenor’s Global Brand Identity Design Guidelines 74

Introduction Footer
The footer allows each BU to input its own category listing
Grid within a simple fixed grid structure. The mobile version uses
Responsive layout dropdowns to economise on space.

Navigational bars
Menu & Search
Secondary menu
Footer
Digitising Telenor’s Global Brand Identity Design Guidelines 75

Introduction Footer
The footer can also appear with Telenor Black or
Grid Telenor Link as the background colour.
Responsive layout
Navigational bars
Menu & Search
Secondary menu
Footer
Digitising Telenor’s Global Brand Identity Design Guidelines 76

Introduction Footer - paddings

The UI Kit provides more details about the different
Grid Footer options, spacing, etc.
Responsive layout
Navigational bars
Menu & Search
Secondary menu
Footer
Digitising Telenor’s Global Brand Identity Design Guidelines 77

Components
Digitising Telenor’s Global Brand Identity Design Guidelines 78

Buttons Buttons
Buttons are a key part of Telenor’s call-to-action navigation which use the
Text links Telenor blues to guide customers to core Telenor call-to-action items. Outline,
Breadcrumbs Link and List Buttons are used for secondary call-to-action navigation.

Navigation tabs
Badges
Forms
Content dropdowns

Primary Buttons Outline Buttons Link Buttons List Buttons

Primary, Outline Link and List buttons for use on light backgrounds

We are the largest library of We are the largest library of We are the largest library of We are the l
Tunes. Now you can search Tunes. Now you can search Tunes. Now you can search Tunes. Now
Welcome Tune codes directly Welcome Tune codes directly Welcome Tune codes directly Welcome Tu
through our website through our website through our website through our

Primary Buttons Outline Buttons Link Buttons List Buttons

Primary, Outline Link and List buttons for use on Telenor Black backgrounds
Digitising Telenor’s Global Brand Identity Design Guidelines 79

Buttons Buttons
The UI kit contains example buttons and further
Text links instructions for how they are designed.
Breadcrumbs
Navigation tabs
Badges
3px corner radius
48px Subheading 2

Forms
Content dropdowns
32px 32px

Subheading 2

8px
Primary Buttons

We are the largest library of We are the largest library of We are the largest library of We are the l
Tunes. Now you can search Tunes. Now you can search Tunes. Now you can search Tunes. Now
Welcome Tune codes directly Welcome Tune codes directly Welcome Tune codes directly Welcome Tu
through our website through our website through our website through our
Digitising Telenor’s Global Brand Identity Design Guidelines 80

Buttons Text links

Text links should appear in Telenor Link Blue (or Telenor Blue,
Text links depending on the background colour). They should always
Breadcrumbs appear in the same typeface, size and weight as the rest of
the text. The link should be underlined in its hover state.
Navigation tabs
Badges
Forms
Content dropdowns We are the largest library of We are the largest library of
Tunes. Now you can search Tunes. Now you can search
Welcome Tune codes directly Welcome Tune codes directly
through our website through our website Telenor Link Blue

Telenor Link is used on light backgrounds

We are the largest library of We are the largest library of

Tunes. Now you can search Tunes. Now you can search
Welcome Tune codes directly Welcome Tune codes directly
through our website through our website Telenor Blue

Telenor Blue is used on Telenor Black backgrounds

Digitising Telenor’s Global Brand Identity Design Guidelines 81

Buttons Breadcrumbs
Breadcrumbs provide convenient hierarchical navigation and
Text links should appear in Telenor Link Blue (or Telenor Blue, depending on
Breadcrumbs the background colour) with chevrons and the active location text in
Dark Gray (or Light Gray 2, depending on the background colour).
Navigation tabs
Badges
Forms
Content dropdowns
Telenor Link Blue

Dark Gray

Telenor Link is used on light backgrounds

Telenor Link Blue

Light Gray 2

Telenor Blue is used on Telenor Black backgrounds

Digitising Telenor’s Global Brand Identity Design Guidelines 82

Buttons Navigation tabs

Navigation tabs indicate menu items to aid navigation and therefore use
Text links the core Telenor Blue as an underline to indicate a selected menu item.
Breadcrumbs
Navigation tabs
Badges
Dark gray
Forms
Content dropdowns
Telenor Blue

Telenor Link is used on light backgrounds

Light gray 2

Telenor Blue

Telenor Blue is used on Telenor Black backgrounds

Digitising Telenor’s Global Brand Identity Design Guidelines 83

Buttons Badges
Badges are used to highlight specific information on the site. Badge colours can
Text links complement or contrast with Background colours but should always be used
Breadcrumbs sparingly, and on only a few page items at a time. Try to allocate one colour to each
type of information and keep that consistent across all online content.
Navigation tabs
Badges
Badge colour options Size and padding
Forms
Content dropdowns
48px Subheading 2

32px 32px
Digitising Telenor’s Global Brand Identity Design Guidelines 84

Buttons Badges
Information Badges steer our customers to specific products and services most
Text links effectively when they are used sparingly. By consistently allocating one colour to
Breadcrumbs individual topics the Badge colours will become intuitive for our customers over time.

Navigation tabs
Badges
Forms
Content dropdowns
Digitising Telenor’s Global Brand Identity Design Guidelines 85

Buttons Badges
Don’t place Badges over every product. Badges work most effectively
Text links when only a few of them appear within a large group of items.
Breadcrumbs
Navigation tabs
Badges
Forms
Content dropdowns
Digitising Telenor’s Global Brand Identity Design Guidelines 86

Buttons Forms
Forms can appear with input fields or with select menus depending on the nature of the content.
Text links
Breadcrumbs Input field Select

Navigation tabs
Badges
Forms
Default Default & selected

Content dropdowns Focused

Focused

Disabled

Typing

Help message
Successful

Error

Error

Disabled

Forms with input fields on light backgrounds Forms with select menus on light backgrounds
Digitising Telenor’s Global Brand Identity Design Guidelines 87

Buttons Forms

Text links
Breadcrumbs Input field Select

Navigation tabs
Badges
Forms
Default Default & selected

Content dropdowns Focused

Focused

Disabled

Typing

Help message
Successful

Error

Error

Disabled

Forms with input fields on Telenor Black backgrounds Forms with select menus on Telenor Black backgrounds
Digitising Telenor’s Global Brand Identity Design Guidelines 88

Buttons Content dropdowns

Content dropdowns are used when the amount of text is greater
Text links than the available space or when lots of informational items need
Breadcrumbs to be contained within a compact area.

Navigation tabs Dropdown variations

Badges
Forms
Content dropdowns
Digitising Telenor’s Global Brand Identity Design Guidelines 89

Buttons Content dropdowns

The UI Kit provides further instructions
Text links for how to build Content dropdowns.
Breadcrumbs
Navigation tabs Paddings
Badges 24px
Forms
24px
Content dropdowns
24px 24px

24px

24px

24px

24px 24px
Digitising Telenor’s Global Brand Identity Design Guidelines 90

Social media
Digitising Telenor’s Global Brand Identity Design Guidelines 91

Profile avatar Profile avatar

Regardless of BU or social media platform, Telenor’s profile avatar (with the
Text on image and video symbol in Telenor Blue in a white background) should always be used.

Telenor’s profile avatar

Ex 1. Telenor Norway on Instagram Ex 2. Grameenphone on Youtube Ex 3. Telenor Sweden on Facebook

Digitising Telenor’s Global Brand Identity Design Guidelines 92

Profile avatar Profile avatar

Don’t deviate from the approved Telenor profile avatar.
Text on image and video BU individuality is expressed through profile naming only.

Ex 1. Telenor Norway on Instagram Ex 2. Grameenphone on Youtube Ex 3. Telenor Sweden on Facebook

Digitising Telenor’s Global Brand Identity Design Guidelines 93

Profile avatar Text on images and video

Text on images and video should always be placed within a Badge, however these
Text on images and video Badges should be coloured using Telenor Black or one of the Background colours.

Text on video Text on images

White text on Telenor Black Black text on a colour chosen from
our Background palette
Digitising Telenor’s Global Brand Identity Design Guidelines 94

Profile avatar Text on images and video

For consistent legibility across all Telenor SoMe items, don’t place text directly onto videos or
Text on images and video images and don’t alter the shape of Badges or use colours other than a Background colour.

Don’t place text directly onto videos or images. Don’t change the colour or shape of Badges.
Digitising Telenor’s Global Brand Identity Design Guidelines 95

Motion
Digitising Telenor’s Global Brand Identity Design Guidelines 96

Introduction Telenor’s UI motion system is used to bring personality, tone, rhythm and purpose to
Easing & duration our online presence. Motion should always be used with purpose rather than as mere
Motion elements entertainment. When used effectively, UI motion will help guide customers to the
products and services they need, without distracting their attention unnecessarily.

Each of Telenor’s motion elements has been created to emulate the behaviour of
physical objects and familiar expressions, to encourage customer engagement and to
provide visual feedback that acknowledges their online presence.

The use of precise, purposeful, familiar and expressive motion will help strengthen our
connection to customers and encourage sustained and more meaningful engagement.
Digitising Telenor’s Global Brand Identity Design Guidelines 97

Introduction Each UI motion element is created to mimic familiar expressions found in the
Easing & duration physical world. UI motion content should appear and disappear smoothly with
Motion elements subtle and elegant movements that look natural to the eye.

Some motion elements have a fixed duration, while others continue until a system
function has been completed (gathering search data, for example). It’s important
that all of our motion elements convey the right expression, regardless of duration,
to reassure the user that their requests are being acted upon.
Digitising Telenor’s Global Brand Identity Design Guidelines 98

Introduction The three dots

Drawn from the core shape of our iconic Telenor symbol we
Easing & duration have created a three-dot structure that forms the foundation
Motion elements for a friendly and engaging motion system.
Digitising Telenor’s Global Brand Identity Design Guidelines 99

Introduction The three dots

As the three dots move they can extend to form lines with rounded ends. This combination
Easing & duration of visual elements and movement creates a unique look for Telenor’s UI motion system.
Motion elements Several inspirational animations have been made to help guide the creation of Motion
elements. These are available from Telenor Global on request.
Digitising Telenor’s Global Brand Identity Design Guidelines 100

Introduction End frame and Bug animations

Inspirational end frame and bug animations have also been made to help guide the
Easing & duration creation of Motion elements. These are available from Telenor Global on request.
Motion elements
Digitising Telenor’s Global Brand Identity Design Guidelines 101

Copyright © 2017–2018 Telenor Group. All rights reserved.