Issue 1.0
Our brand experience
Style Guidelines 2017 Issue 1.0 1
Contents
Issue 1.0
The purpose of this document is to provide guidelines and usage specifications for third parties such as stakeholders and affiliates amongst
For assistance, queries or approvals, please contact:
many others. These guidelines contain
Kyle McBride Head of Customer Experience
the information you need to help
kyle.mcbride@betssongroup.com
you implement the right assets and
Graziella Delceppo Designer
behaviors of our brand on your site.
graziella.delceppo@betssongroup.com
2
Contents
Issue 1.0
Brand Foundations 05
Logos
08
Colours
10
Typography
12
Tone of Voice
17
Shadows
18
Motion
Brand Applications 19
Visual Experience
21
Static
24
Animated
3
Brand Foundations
Issue 1.0
So, what are our brand foundations?
4
Logo
Issue 1.0
Logo Our logo is a combination of the crown symbol and the logotype, which is based on the Penumbra Flare typeface. By default, always use the full logo. The symbol alone can only be used on smaller resolution screens such as mobiles and tablets. To protect the clarity of our logo, we have set an exclusion zone using the ‘o‘ character from the logo to determine the minimum clearance.
5
Logo
Issue 1.0
6
Logo
Issue 1.0
Do
Do
Use the light version against dark backgrounds
Use the dark version against light backgrounds
Do
Do
Single colour usage
Single colour usage
7
Logo
Issue 1.0
Don’t
Don’t
Change the placement of the elements
Change or modify the typeface
Don’t
Don’t
Change the colour of the logo to any other colour that is not
Use any other marks to represent our brand
listed in this style guide
8
Logo
Issue 1.0
Product logos Being a multi-product brand, dedicated logos where created for each product within Kroon Casino. On dedicated pages or artworks, product logos replace the primary logo accordingly.
Symbol
9
Product logo
Logo
Issue 1.0
Product logo usage example
10
Colours
Issue 1.0
Colours The colour palette is primarily composed of 3 main colours - orange, off-white and off-black. Each colour has a lighter and darker tone and will be used to achive the desired contast within the user interface.
11
Colours
Issue 1.0
#FF6A13 - RGB(255,106,19) - CMYK(0,58,93,0)
#151515 - RGB(21,21,21) - CMYK(0,0,0,92)
#F5F5F6 - RGB(245,245,246) - CMYK(0,0,0,4)
12
Issue 1.0
#4FAB23
#040404
13
#151515
#FF6A13
#F05800
#262626
#F5F5F5
#F05800
Colours
Issue 1.0
Typography Proxima Nova and Futura PT are our primary fonts. The former should only be used for headings and titles while the latter should only be used for body text. As a general rule, the minimum font size for legibility is 16px, line height 21px.
14
Typography
Issue 1.0
Proxima Nova Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 The quick brown fox jumps over the lazy dog and takes first place Minimum Font Size: 16px
15
Typography
Issue 1.0
Futura PT Book
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 The quick brown fox jumps over the lazy dog and takes first place Minimum Font Size: 16px
16
Typography
Issue 1.0
Typography usage
Lorem Ipsum
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
On-site banners example
Call-to-Action (CTA) Buttons
- Homepage banner and lobby banner
- Font size 18px, uppercase
17
Typography
Issue 1.0
Reliable and advanced technology
CARD IMAGE
The gaming, security and payment software used by Kroon casino is the most advanced technology available on internet at the moment. Kroon Casino uses the Netent Network for casino and live casino games, live casino games from Evolution Gaming and live casino games from Wirex. The casino software is entirely executed in flash and works on every operating system (Windows, Macintosh and Linux) and in every browser (Internet Explorer, Firefox, Safari, Netscape, Opera and Google Chrome).
Kroon VIP Live Blackjack Play at our exclusive VIP table and win big. Higher limits, higher winnings, the choice is yours. Have fun!
Gaming pleasure Aside from being reliable and secure, a casino of course also has to offer a fun and attractive range of games. The games offered by Kroon Casino are part of the Netent and Evolution Gaming networks, because of this we can regularly offer you new games and challenging jackpots with high rewards. The games load fast and play very smoothly.
Personal services Card example - Live Casino and Promotions pages
When you play at Kroon casino, you will immediately notice the personal approach. You are a guest at Kroon Casino and you will experience it that way. Our customer service employees will personally help you at all times when you have need for this. You will have to explain your story or problem only once, and the customer service employee will ensure that you will be helped in a personal manner. Article example - About Kroon Casino, Terms & Conditions, Responsible Gaming pages and more
18
Colours
Issue 1.0
Tone of Voice We speak to the player in a direct, but professional manner. Keep it simple. The English used should be understandable for non native English speakers. Keep this in mind at all times.
19
Tone of Voice
Issue 1.0
Active, positive, concise and scanable Make statements that are clear, straightforward, correct and informative. Use positive words and phrases. Use short sentences where possible and try not to exceed the limit of 20 words per sentence. Create short alineas that are easy to scan. Let’s use about 3 to 5 sentences to make a point. • Use headers and sub-headers • Use bullet points for enumerations Write for the internet and always keep the user in mind.
20
Tone of Voice
Issue 1.0
Play the game
The game is played
Do
Don’t
Use active sentences like ‘Play the game‘
Try and avoid sentences like ‘The game is played‘ and ‘The game can be played‘
21
Tone of Voice
Issue 1.0
Easy on exclamation marks! Use exclamation marks with care. Don’t overdo it. We are not shouting at our readers. You can use one per alinea. Max!
22
Tone of Voice
Issue 1.0
Play the game!
The game is played!!!
Do
Don’t
Use one exclamation mark per alinea
Don’t overdo it
23
Tone of Voice
Issue 1.0
Capitals Always use capitals in the right place. Only in the beginning of the sentence, for a name of a person, for a section on the site (in navigation) or for the name of a game. Spell ‘Live Casino’ when you refer to Kroon Casino’s Live Casino. But ‘live casino’ in article about the concept live casinos. Use capitals for page titles and navigation: Kroon Casino – The Number One Online Casino.
24
Shadows
Issue 1.0
Shadows Adding shadows creates depth to our banners. We have created a set of rules that should be followed when adding shadows. Always use #151515 at 50% opacity, 33% blurring and X or Y at 6px depending on the direction of the movement.
25
Issue 1.0
26
Motion
Issue 1.0
Motion Motion is an essential guide that will help define the Kroon identity and further increase consistency across all channels, being web, video or print in the near future. Motion is combined with the brand primary colours and shadows in order to create a revealing action.
27
Motion
Issue 1.0
The diagram describes how the uniform curve should be set: Easing animation in CSS webkit-transition: all 700ms cubic-bezier(0.500, 0.000, 0.505, 1.000); moz-transition: all 700ms cubic-bezier(0.500, 0.000, 0.505, 1.000); o-transition: all 700ms cubic-bezier(0.500, 0.000, 0.505, 1.000); transition: all 700ms cubic-bezier(0.500, 0.000, 0.505, 1.000);
animation Animation
webkit-transition-timing-function: cubic-bezier(0.500, 0.000, 0.505, 1.000); moz-transition-timing-function: cubic-bezier(0.500, 0.000, 0.505, 1.000); o-transition-timing-function: cubic-bezier(0.500, 0.000, 0.505, 1.000); transition-timing-function: cubic-bezier(0.500, 0.000, 0.505, 1.000);
Time time
28
Brand Applications
Issue 1.0
So how do we maintain brand consistency?
29
Visual Experience
Issue 1.0
Visual Experience A players first interaction with our brand is through banners across all channels. Use our asset library to combine a visual experience that is persistent across all artworks.
Background Blurred background at 50% gaussian blur or 30% motion blur. Overlay Solid #151515 colour at 50% opacity Foreground Content on the left, imagery on the right. The preferred imagery should contain a maximum of three combined elements
30
Visual Experience
Issue 1.0
31
Visual Experience
Issue 1.0
Responsive banners For tablets and mobiles, remove the product logo, header and subtext and centre out the imagery.
1920 (large desktop)
1280 (laptop)
1024 (tablet)
640 (mobile)
For tablet and mobile, remove logo, header & subtext and centre out imagery.
32
Visual Experience
Issue 1.0
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
Live Casino, Slots, Sports, Table Games & more Now available on Android!
Now available on Android!
Don’t
Don’t
Make sure you have enough contrast between the
Content should not overlay the imagery
foreground and the content
Live Casino, Slots, Sports, Table Games & more Now available on Android!
Don’t
Don’t
Keep the content on the left and the imagery on the right.
Keep composition clear and clean. Don’t overdo it with too
Never swap.
many assets in one artwork.
33
Static
Issue 1.0
Static Off-site static banners - Always use the full Kroon Casino logo - Content - CTA button
34
Static
Issue 1.0
Off-site static banner example
35
Animated
Issue 1.0
Animated Off-site animated banners - Split into 3 sections 1. Imagery + Product logo 2. Imagery + Content 3. Kroon Casino full logo Reveal each section by animating each canvas so move to the right or left.
36
Animated
Issue 1.0
First screen
Second screen
Third screen
Reveal each section by animating each canvas so move to the right or left
Revealing action
37
Issue 1.0
38