PIRELLI TYRE website GUIDELINES

Draft Version under final approval

 PIRELLI TYRE
[Link]

introduction
This document sets forth and defines the main guidelines
for the [Link] website. Local teams and digital agen-
cies are hereby provided the milestones to define special
projects within Pirelli’s digital properties in the world.

Disclaimer
Text, images and trademarks displayed in the screenshot
shall be considered a sample for layout purposes only.

Draft Version under final approval

 PIRELLI TYRE
[Link]

index

1. BRAND IDENTITY OVERVIEW

1.1 Logo
1.2 Colors and gradients
1.3 Box style
1.4 Fonts

2. DIGITAL IDENTITY ELEMENTs

2.1 Icons and buttons
2.2 Links
2.3 Image style
2.6 Text Style

3. Digital content
3.1 Image type

4. project activation and operations

4.1 Homepage
4.2 Index Auto
4.3 Index Moto
4.4 Special templates
4.5 Newsletter

5. content delivery process

6. contacts

Draft Version under final approval

1. BRAND IDENTITY OVERVIEW

Draft Version under final approval

 PIRELLI TYRE
[Link]

1. BRAND IDENTITY OVERVIEw

1.1 Logo
1.1.1 - Institutional logo
1.1.2 - Logo with payoff
1.1.3 - Brand layout
1.1.4 - Constraints

1.2 Colors and gradients

1.2.1 - Images
1.2.2 - Text

1.3 Box style

1.3.1 - Frames
1.3.2 - Texture and background
1.3.3 - Shadows and effects

1.4 Fonts
1.4.1 - Graphic text, title and Html text
1.4.2 - Title, subtitle and Html title

Draft Version under final approval

 Brand identity overview Logo PIRELLI TYRE
digital guidelines

Institutional logo
Two solid colors: red and jellow.
To be used for all digital communication projects in
compliance with Pirelli’s institutional guidelines.

logo with payoff

This Logo must always be used either on black
background or a background color dark enough to aloow
the white payoff readability.

Draft Version under final approval

6
 Brand identity overview Logo PIRELLI TYRE
digital guidelines

Brand layout Constraints

The Pirelli Brand is made by joining together the red Pirelli logo to a jellow rectangle. Any text and/or graphic element must be plced beyond an ideal frame around
The jellow background surface is the Pirelli brand constraint area. the brandname. Compliance with this constraint allows to avoid any graphic
interference. Sizes are the same for the constraint area for the RED PIRELLI
brandname.

For futher details on the use of the Logo and other Pirelli Identity elements, please refer to the Brand Guidelines official
document.

Draft Version under final approval

7
 Brand identity overview Colors and gradients PIRELLI TYRE
digital guidelines

COLORs and gradients in image and text

The website has a black background and content is mainly placed within gray graphic elements. Other colors such as red and jellow can be used for graphic and functional
elements (diagrams, menues, icons, buttons) while blue and green are mainly used for content related to Pirelli Winter and Green Performance respectively. To guarantee text
readability, the page body is ususally dark and possibily with a slight grey shade. Texts may vry from grey to white and redi s to be used for text links.

This section contains exadecimal values for approved colors.

COLORs

white black Red yellow Blue

#ffffff #000000 #d52b1e #fed100 #0672b0

dark grey grey light grey green

# 1e1e1e #555555 #dddddd #43ad49

GRADIENTs

#ffffff #939393 #fff170 #dbeabf

#bbb7b6 #2b2826 #f7c700 #43ad49

#afafaf #e52125 #a2dbe1

#1b1613 #a10c10 #0672b0

Draft Version under final approval

8
 Brand identity overview Box style PIRELLI TYRE
digital guidelines

frames TexturEs and backgrounds

Content to be fully detailed must always be placed in to a box. Based on how the To make mainly white texts readable, all boxes must have a dark background. If no
content must be highlighted, all boxes may have a frame of a different thickness images are to be placed in the box, the shade of color similar to the one for the frame
(min. 1 px to a max of 5 px) with a gradient ranging from lightest on the left top corner must be used, yet beginning with a darker tone and ending with a lighter.
to darkest on right low corner. To make boxes look threedimensional, some textures can be added.

5px 1px
Bg for viewers Skin section F1 BgTyre Click & Find Hp

frame gradient background gradient

#afafaf #939393
#1b1613 #2b2826

Draft Version under final approval

9
 Brand identity overview Box style PIRELLI TYRE
digital guidelines

shadows and effects

Box must always have a light spot on the top left corner that can be a slanted triangular cut and/or a horizontal strip-like cut alonf the top side of the
box. Content on the lighter area of the box must bear a shde ensuring their readability.

Draft Version under final approval

10
 Brand identity overview Fonts PIRELLI TYRE
digital guidelines

Fonts
Only fonts allowed:
Gotham: Light – Book – Medium
Arial: Regular – Bold
Gotham is used for headlines and calls to action in the graphic elements. Arial must be used for all HTML texts used for indexing on all search engines.

graphic text: Gotham Gotham Light

abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz 1234567890
Used for titles, calls to action and texts present in all
graphic elements. Gotham Book
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz 1234567890

Gotham Medium
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz 1234567890

Gotham Bold
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz 1234567890

Gotham Black
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz 1234567890

title, subtitle and html: Arial Arial Regular

abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz 1234567890
Used for all HTML texts
Arial Bold
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz 1234567890

Draft Version under final approval

11
2. DIGITAL IDENTITY elements

Draft Version under final approval

 PIRELLI TYRE
[Link]

2. DIGITAL IDENTITY elements

2.1 Icons and buttons

2.1.1 - Icon
2.1.2 - Call to action buttons
2.1.3 - Filter buttons

2.2 Links
2.2.1 - Textual
2.2.2 - Graphical

2.3 Image style

2.3.1 - Slip box
2.3.2 - Full image box
2.3.3 - Not allowed style

2.6 Text style

2.6.1 - Section titles
2.6.2 - Viewer titles

Draft Version under final approval

 Digital identity elements Icons and buttons PIRELLI TYRE
digital guidelines

Icons
For new Icons, just follos the three basic rules below to comply with the website look&feel:

1. Icons are ususally into a square box with rounded corners with a ray of 3px and minimum size of 40x40px

2. Background is always a plain color with a slight glossy effect by adding one gradient level from white to transparent

3. Icons must always bear a white image if backgrund is in color

3D Icons cannot be used, except for TRUCK Icons from the tread panel.

The only cases an Icon can be used outside a 40x40px square box is when it is already part of a layout already inside a box.

Draft Version under final approval

14
 Digital identity elements Icons and buttons PIRELLI TYRE
digital guidelines

buttons

All Buttons must have the same graphic style. A change of height/width is possible based on the text length inside the Button.
Two categories are allowed: CALL TO ACTION and FILTERS

CALL TO ACTION BUTTONS can be either black or grey with a glossy effect made by adding one level of white to transparent gradient level cut at half length of the Button.
Corners are always rounded with a 5px ray and the text inside must all be written in capital Gotham Book o Medium 12 pt white (#fffff), except those cases in which the Button is jellow
and text is black (#000000)

Filters are rectangular with an inner grey stroke of 2px (#cececd), colors are grey (inactive filter) and red (active filter). Glossy effect is added with ARIAL Bold max 12px font.

call to action Filter

Fit on your car summer

compare tyres winter

click to add a new tyre

Draft Version under final approval

15
 Digital identity elements Links PIRELLI TYRE
digital guidelines

textual links
All text links are html Arial and always followed by the major symbol written in FS ALBERT.

Symbol size varies based on text size and cannot be smaller than 18px.

graphical links

All graphic links may also be written in Gotham in line with the sizes that best suit the graphics
of the link. Text must all be in capital letters and with a few exceptions, letters must be white
on black background.

This link is usually coupled to an Icon with a content symbol.

Draft Version under final approval

16
 Digital identity elements Image style PIRELLI TYRE
digital guidelines

image style
Objects edges are slightly deckled and placed on a neutral background where other effect,
such as smoke, light beams or thick textures can be added.
“Smoke” may vary according to tones of image.

Box Title + Abstract

Top distance 13 px
Title Gotham Bold 20 pt
Space 10 px

Abstract Arial regular 12 pt

Arrow FS Albert Bold 18pt

Box Title + Subtitle + Abstract

Top distance 13 px
Title Gotham Black 20 pt
Subtitle Gotham Black 13 pt
Space 10 px

Abstract Arial regular 12 pt

Arrow FS Albert Bold 18 pt

Draft Version under final approval

17
 Digital identity elements Image style PIRELLI TYRE
digital guidelines

As an option to declked images, full image boxes

can be used. Main color: black. Color or image
background allowed if not interfering with text.

Draft Version under final approval

18
 Digital identity elements Image style PIRELLI TYRE
digital guidelines

Not allowed style

In major visuals, images must not be

used with raw background cuts.

Background cannot be out of con-

text.

WARNING
No backgound color is allowed.
In the event an image composite is
used, proportions among image ele-
ments must be complied with.

Draft Version under final approval

19
 Digital identity elements Text style PIRELLI TYRE
digital guidelines

section titles
Section titles have a specific graphic style.

Truck & Bus world Select the GRADIENT OVERLAY effect from the LAYER
panel and follow the instructions indicated in the left set-
Gotham Black, 40 pt Gotham Book, 24 pt ting window.
color: #ffffff color: #bbb7b6

Draft Version under final approval

20
 Digital identity elements Text style PIRELLI TYRE
digital guidelines

viewer title

innovation
Titles on two lines can be used in the website.
Gotham Black,
40 -> 50 px // color: # f26969
The second line has a gradient overlay effect different than

By experience Gotham Black,

the section titles.
30 -> 40 px // color: #da1818

There is no standard font size, since it varies according to text

length. The range set should not be exceeded.

Draft Version under final approval

21
3. digital content

Draft Version under final approval

 PIRELLI TYRE
[Link]

3. DIGITAL content
3.1 Image type

Draft Version under final approval

 Digital content Image type PIRELLI TYRE
digital guidelines

Image type
The following are the criteria for creative images without materials connected with promotion and/or event:

orientation file type category colors license type

Portrait x Photo ABSTACT x creative

BACKGROUND x editorial x
AUTOMOTIVE

Business x
ENVIRONMENT

FASHION

landscape illustration x
PEOPLE x

motorsport

action

TRANSPORTS

x No Yes

Draft Version under final approval

24
5. project activation and operation

Draft Version under final approval

 PIRELLI TYRE
[Link]

5. project activation
and operation

3.1 Homepage
3.1.1 - Layout
3.1.2 - Viewer
3.1.3 - Main box

3.2 Index Auto

3.2.1 - Layout
3.2.2 - Main box

3.3 Index Moto

3.3.1 - Layout

3.4 Special template

3.4.1 - Index Promotion
3.4.2 - Promotion page

3.5 Newsletter
3.5.1 - Layout

Draft Version under final approval

 Layouts Special template PIRELLI TYRE
digital guidelines

Layouts and functional elements through which special ac-

tions within the [Link] website can be carried out are he-
reby listed. Actions in areas not heerby specifiedis subject
to approval by Pirelli HQ.

legenda
Areas where actions are allowed

Areas where actions are not allowed

Draft Version under final approval

27
 Layouts Homepage PIRELLI TYRE
digital guidelines

layout homepage
TOOLBAR: Height 37 px Horizontal page layout defining content accor-
MENU: Height 56 px ding to reading levels.

viewer: Height 380 px

main box: Height 260 px

seo text

QUICK LINKS

FOOTER E SEARCH TOOL : Height 62 px

Draft Version under final approval

28
 Layouts Homepage PIRELLI TYRE
digital guidelines

homepage viewer
3 px
Homepage viewer in Html. May contain sta-
tic images in .jpg or .png, Javascript objects
and .swf format.
To produce viewer, a 374x602 px image
is needed with no outer frame. Back visor
thumbnails are inserted into a 56px heigth
darker strip. Each image has a size of
68x42px and covers a space of 80x56px.

The number of thumbnails in the homepage

viewer cannot be less then three and more
380 px 374 px
than five.
Local countries may work on a maximum of
five viewers and must allow for the space of
at least two viewes for worldwide projects
defined by HQ.

56 px

3 px
80 px

3 px 602 px 3 px

608 px

Draft Version under final approval

29
 Layouts Homepage PIRELLI TYRE
digital guidelines

Main box

127 px

260 px

127 px

300 px

918 px

Mai boxes on the Homepage center can be edited.

The central column is made by two boxes positioned one on top of the other and on special Tyre projects.
The functional 300x260px space can be used for a single launch box covering the entire center area.

Draft Version under final approval

30
 Layouts Index Auto PIRELLI TYRE
digital guidelines

layout index auto

The Auto template has a second level Menu se-
lection Header and, if needed, a banner space.
section header: Height 37 px Below it, thre launches in Flash+Html allowing
second level menu: Height 56 px access to the three different catalogue areas
Car, Suv and Van.

LINK CATALOGue areas: Height 260 px An Html carousel highlights the Top Range
launches

Bottom page: area for specific promotion and

special event launches.
box TOP range : Height 86 px

box ADV : Height 305 px

Draft Version under final approval

31
 Layouts Index Auto PIRELLI TYRE
digital guidelines

main box
268 px

top selection box example

The Top Range launch box must always have a dark background. Product logo on the left and must not
62 px
exceed 180x50px. Prodcut deckled image must be placed on the right with a smoke, light beam or fire effect
to make it glow on the back background.

Product logo Prodcut image

max size max size
180×50 px 140×62 px

298 px

promo box example:

Size 298px x 141px
Dark background, title and call to action on the left and the picture on the right.
Background picture shading off in black on the left. In the event of a deckled image, a graphic effect to make
141 px
it glow must be added.

Headline of Promotion image

call to action
The Range and Promotional top boxes in the Auto index can be place in other website sections such as
MOTO, TRUCK, AGRO AND MOTORSPORT.

Draft Version under final approval

32
 Layouts Index Moto PIRELLI TYRE
digital guidelines

layout index MOTO

Moto template with Flash viewer with double sur-
fing mode:
section header: Height 37 px
second level menu: Height 56 px - Automatic slideshow for Adv and Promotions
- Access filter to products catalogue where ac-
cess can be made trough Segment Menu

viewer : Height 404 px

Html carousel with Top range launches.

Bottom page: space for text news and specific

contents, such as FB and Mediagallery info.
box top range : Height 86 px

BOX FACEBOOK: Height 235 px

NEWS: Height 115 px

MEDIAGALLERY: Height 190 px

Draft Version under final approval

33
 Layouts Special Template PIRELLI TYRE
digital guidelines

index promotion 205 px

Promotions template made of Html viewer with vertical

carousel surfing allowing to see all on-going promo-
tions.

Viewr hosts a general image featuring promotional

108 px content in this Section. Layout as follows:
Headline on two lines on the top left corner and de-
scriptive text below. Left corner below, image to be
viewer : Height 470 px
deckled and graphic efects to be added. Lefto-to-right
shadeing off of the image to leave room for carousel
covering the entire spece on the right.

Carousel made by a number of horizontal boxes and

offering a vertical surfing capability to best view all in-
going promotions.
In the evento ne promotion only is active, promotion
can be placed on this space with no carousel.

Draft Version under final approval

34
 Layouts Special Template PIRELLI TYRE
digital guidelines

promotion page
The Promotions Section detail page must have
a static Html viewer highlighting the current pro-
motion, while promotion details must be placed
below.

viewer :
Height min 308 px max 380 px

Sem traffic pages must always have descriptive

Details: text so that Google can doublecheck keywords
Height min 424 px max 454 px coherence with content.

Draft Version under final approval

35
 Layouts Special Template PIRELLI TYRE
digital guidelines

menu di navigazione

Herebelow the definition of the navigation menues through which navigation tools for [Link] can be made (i.e. promotions and events) or for special external programs
(i.e. Partenerships, Canvess App, etc.)

First Level Menu for first navigation level in the event of special actions (i.e. Parteneships
external to the [Link] website)

Second Level menu for navigation in the special section within the [Link] site and in
general during the second navigation level.

Draft Version under final approval

36
 Layouts Special Template PIRELLI TYRE
digital guidelines

promotion page
The detail section is made of tabs. The first tab is
always related to the description of the promotion
and the last tab always to the serach for Pirelli de-
alers.
The tab number varies from three to five accor-
ding to the emount of content to be loaded.

TAB: Height 42 px

Draft Version under final approval

37
 Layouts Newsletter PIRELLI TYRE
digital guidelines

layout newsletter
All newsletters must follow the same layout criteria.
Black background and texts can be either in whi-
HEADER: Height 37 px
te or jellow fonts. The Pirelli logo is on the top left
corner, while the web address is positioned on the
right.
Below the header, a graphic and Html areas.
viewer
In the graphic area a custom viewer with contents,
while the second area conteins text contents and
call to action.

Contents

call to action: Height 190 px

Draft Version under final approval

38
6. CONtent delivery process

Draft Version under final approval

 Content delivery process PIRELLI TYRE
digital guidelines

simple project complex project high impact project

concept concept concept

idea idea idea

HQ HQ

wireframe wireframe wireframe

HQ

Functional Functional Functional

analysis analysis analysis

HQ

graphic graphic graphic

layout layout layout

HQ HQ HQ

online online online

Collaboration with
Project phases HQ approval Online
the local agency

Draft Version under final approval

40
7. contacts

Draft Version under final approval

 Contacts PIRELLI TYRE
digital guidelines

Approving process and contacts

pirelli digital marketing HQ

Ivana Nenna
[Link]@[Link]
tel.:

IT pirelli
Aldo Faifer
[Link]@[Link]
tel.: 02/64424992

nurun
Marco Barbarini
[Link]@[Link]
tel.: 02/83137210

Draft Version under final approval

42
Draft Version under final approval