Kroon Casino

Page 1

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


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.