Sta Travel Rebrand Style Guide

Digital Brand and Style Guidelines

Prepared by

Introduction

Guidelines are created to promote consistency across communications and protect brand equity
by illustrating how the values of the brand can be communicated through every aspect of its
visual language.

Brand Guidelines unify philosophy and ideology of the brand to promote internal understanding
and motivation to communicate the brand meaning in the appropriate manner. Style Guidelines
then go on to provide visual and organizational implementation guides for communicating the
brand meaning in the most efficient way.

Consumers measure the credibility and commitment of a brand through how consistently it
communicates its values. This document acts as the single authoritative point of reference to
develop specific digital communications in line with the values of STA Travel.

Digital style guide Commercial in Confidence

Contents

1.0 STA Digital Proposition
2.0 Digital Users
3.0 Visual Language
4.0 Logo
5.0 Branded Touchpoints
6.0 Modules
7.0 Teaser Blocks
8.0 HTML Styling
9.0 3rd Party Template
10.0 Background Image
11.0 Typography
12.0 Colours
13.0 Country Navigation


1.0 STA Digital Proposition

Vision
The STA Travel Digital Proposition is purposefully designed as a platform on
which to develop meaningful user relationships, digital brand communications To shape the STA Travel brand into a single, integrated organization able to
and online sales. profitably dominate the world student and young adult travel market and
become the leading brand of global travel to this audience.
Key areas of focus are:
• Develop deeper levels of personalization.
Mission Statement
• Encourage credible user contributions.
• Maintain relevance and purpose throughout the user journey on STA Travel creates opportunities for students and young adults and enables
and offline. them to make the most of their time and experience the world face-to-face, in
• Channel meaningful traffic. any way they choose.
• Meet emerging user expectations, both technologically and emotionally.
• Communicate and confirm values beyond price.
Brand Values
• Contextualize the brand’s purpose.
• Consolidate STA Travel content into a single voice. Ultimately, STA Travel offers Global Citizens (and Free Spirits and Inertia Breakers
• Extend the brand visual identity across digital functionality. who would classify themselves as such) encouragement and confidence to
experience the world face-to-face, over and over again.

Values Digital translation
New experiences Encourage aspirations, inspire and enable access
Collaborations Familiar and intelligent connectivity
Individuality User opted personalisation
Expertise Shared technology, knowledge and accessibility
Responsibility Open commitment


2.0 Digital Users

STA Travel’s target market breaks down into three key groups: Key Brand Pillars
Global - images from anywhere on the planet
• Free Spirits who experience something different all the time In the know - insiders viewpoint, authentic rather than tourist
• Global Citizen’s who absorb other cultures and are open to influence Face-to-face - 1st person viewpoint
• Inertia Breakers who do something different and look for reinvigoration It’s all about you - experience rather than documentation

These groups share certain commonalities that focus digital attention: Personality
Upbeat and radiating energy
• Aspiring - an experience greater than the physical act of travelling itself Quirky and confident
• Expressive - willingly interact and openly share experiences With a point of view and sense of purpose
• Inclusive - want to get involved, contribute and take on responsibilities Welcoming and interested in others
• Unfamiliar - look for reassurance and confirmation
• Driven - both by emotion and a sense of purpose
• Digital - technology is integrated in their lives, second nature Tone of voice
Familiar – warm and human – not sales talk
Responsible – informative and advisory – not flippant
Open – honest and transparent – not hidden agenda
Simple – direct and explanatory – not lingo
Inclusive – collaborative dialogue – not forced


3.0 Visual Language

The STA Travel visual language stems from and revolves around the brand’s values:

New experiences, Collaborations, Individuality, Expertise
and Responsibility
The overall approach for brand communications in the digital space is a balance of user
expectations, inspiring functionality and a visual experience. These elements reinforce the
brand’s position as a positive and worthy enabler with values tightly interwoven with those
of its target users.

Impacting first impressions primarily differentiates the brand from price driven web
destinations and instantaneously communicates the values of the brand and its emotional
connectivity. The 1st person viewpoint inspires, encourages and challenges the user to think
bigger, investigate further and get more involved. Driving these emotions will increase the
amount of time users spend on the site and therefore help the brand to build deeper and
stronger relationships with users.


4.0 Logo

It’s important to keep the logo clear of any other graphic elements. To ensure
this we’ve established an exclusion zone around our logotype.

See below for an example
treatment of the logo on the
website.


5.0 Branded Touchpoints

Primary navigation as brand assets created out of the sites functionality communicates a unique
user journey that reflects the brand’s commitment to functionality and usability. Owning
functionality in this way becomes a direct expression of the brand’s commitment towards
enabling users to make the most of their time whilst understanding their mind states.

Three key user mind states:

1. Search and book – focused approach with a clear idea of where, when and with who. As the
primary activity module this communicates a streamlined path to getting what the user wants,
meeting their expectations and the brand delivering on its promises.

2. Be inspired – open-minded approach that is focused on research and free-wheeling through
experiences and possibilities rather than clicking through options and alternatives.

3. Explore the world – investigative approach to accessing information via specific key criteria.

4. Share your adventure – Module that allows visitors to view user generated content.


Branded touchpoints cont’d


6.0 Modules

Activity modules compartmentalize user mind states
in much the same way as travel is planned and carried
out by the brand’s user groups. This promotes and
delivers increased usability through simplified choices
and distinctive activities communicated through
Share your adventure
accentuated visual clarity. Key modules module allows the
allows local users to view the
countries to input
Semi-transparent activity modules help to illustrate latest traveller’s blogs,
own content reviews and videos
the brand’s seamless integration with actual
travel experiences, helping to confirm trust and
accountability. Practically, the tinted effect provides
texture and movement to the activity modules
without over complicating, distracting from or Footer and language
diluting information. selector to appear
across all pages


6.1 Opacity 90% opacity
90% opacity
70% opacity
Cachet Std 21pt
Bold 100%

Panel: 301x408pix
90% opacity

100% opacity

Arial 12pt /# ffcc00
# 545454 100% opacity

Icon: 37x37px

2px gap
5px gap

Cachet Std 38pt Bold

Panel: 301x151px

Arial 12pt Bold


6.2 Font sizes
Cachet Std 12pt
Bold


# 0065bd

Arial 12pt Bold
#ffcc00


Arial 12pt Bold


Cachet Std 16 Bold

Arial 12pt Bold
Arial 12pt Bold
#0066cc

Arial 12pt Bold


2px gap 2px gap
2px gap

Commercial in Confidence
15px gap

5px gap
14px gap
15px gap
15px gap
5px gap
5px gap
2px gap
8px gap
14px gap
Image 300x139px
5px gap
12px gap

5px gap
12px gap
Image 300x250px

17px
12px gap

17px
6px gap
40px
10px gap

10px gap
22px gap

22px gap
6.3 Gaps

Digital style guide

180x180px

192x110px
38x 38px

180x120px
Image 300x139px

301x131px

90x90px Image 300x250px

180x120px

194x124px
6.4 Image size

Digital style guide

7.0 Teaser Blocks
TEA 01

Promotional elements

TEA 03

TEA 04

TEA 06


8.0 HTML Styling
Breadcrumb 11pt
15px gap
Main header
Arial 30pt
Secondary nav
Arial 12/15pt Bold
15px gap

All prices 20pt Bold
Header 17pt
Body copy
Arial 12pt/15pt

10px gap

5px gap
Column width
300px width

Column width
645px width

Arial 11/13pt


Overview of templates

Digital style guide

Mandatory Mandatory
header block header block

3rd party area 3rd party area
Base CSS Base CSS
styling styling

Mandatory
footer block

Mandatory
footer block


Mandatory
header
block

3rd party
area Base
CSS styling

Mandatory
footer block

Digital style guide

Mandatory
header
block

Arial 33pt
Bold
70% Opacity

Arial 13pt
Regular
5px gap

Arial 13pt
Bold #ffcc00

90%
Opacity

Image:
300x113px

Arial 13pt
Bold

Image:
210x120px

Arial 17pt

Mandatory
footer block

Digital style guide

Mandatory
header block

3rd party area
Base CSS
styling

Mandatory
footer block

Digital style guide

Mandatory
header block

70% Opacity
Arial 31px
Bold

Arial 13px
Bold

7px
90%
Opacity
Cachet Std
25pt Bold

Arial 13pt
Bold

Arial 12pt

Mandatory
footer block

Digital style guide

10.0 Background Image
Individual and powerful visual content puts the brand immediately into an emotional context
whilst providing an exhilarating platform to support user functionality of the site. Choice of
content should follow 4 simple guidelines:

• Inspiring and provocative – but also achievable and realistic
• 1st person experience – but also engaging to a broad audience
• Challenging – but also accessible
• Positive and safe – but also authentic and real

Images need to be chosen carefully in order to work as a background image for the site. Each image Avoid overly busy images.
must be no larger than 80k (recommended). The resolution should be no less than 1600px wide.


A central focal point works best in order to draw the eye to the promotion whilst keeping the
image on the left and right edge simple. (Image size 1584x924)


The promotional text is white (Cachet Std font) and need to read well over the background
image – avoid white text over white areas of the image


11.0 Typography
Brand messaging Body copy

Cachet italic is the STA Travel typeface. Any weight of this typeface can be used. Arial is the chosen system font for online activity.
See HTML styling page for more detail.
The type should always appear in UPPERCASE ITALICS, except within the body
copy where lowercase/sentence case italics should be used for readability.

Cachet bold italics Arial

ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz 0123456789

0123456789 Arial Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
Cachet book italics
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789


12.0 Colours
This is the STA Travel colour palette. No other colours should be used apart from these. Tints of
colours can be used. Choose the right colour reference for your design need. RGB and Hex colour
values are supplied below.

Colour palette
R0
R 240
R0
R 66
G 173
G 77
G 101
G 20
B 208
B 152
B 189
B 95

Hex # 00ADD0
Hex #F04D98
Hex # 0065BD
Hex # 42145F

R 251 R 182
R 174 R 242
G 79 G 18
G 164 G 175
B 20 B 52
B 68 B0

Hex # FB4F14 Hex # B71234
Hex # AEA444 Hex #F2AF00

R 190
R 146
R 130 R 161
G 214
G 139
G 75 G 222
B0
B 129
B 176 B 233

Hex # BED600
Hex # 928B81
Hex # 824BB0 Hex # A1DEE9


13.0 Country Navigation variations

UK

Germany

Australia

USA


Sta Travel Rebrand Style Guide

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (13)

Ähnlich wie Sta Travel Rebrand Style Guide

Ähnlich wie Sta Travel Rebrand Style Guide (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Sta Travel Rebrand Style Guide