qwikq

2010 Brandbook

Contents

1. Logo 2. Typeface3. Colors4. Tone of voice5. Images6. Video7. The Widget8. In store experience

Our logo reflects the qwikq core values: humble, modern, professional, but not typically corporate

Logo

4

qwikq

5

How to use the logo.

01 Use the logo on a white background or with a customizable color (see page X)

02 If the backgroundcolor is too dark, it’s appropriate to invert the logo.

Colors

6

01

02

qwikqqwikq

qwikq qwikq

7

01 The minimum size of the logo is 45px high

02 When displayed under 80 px high, use the version with the text to the right

Sizes and variations

8

01

02

02

45px

qwikq

qwikq

45px

80px

9

How NOT to use the logo.

01 Never use other colors than black or white for the logo

02 Never place the logo on top of a picture or pattern

03 Never tilt the logo

04 Never put effects such as dropshadow, emboss or gradients over the logo

10

01

03 04

02

qwikq

qwikqqwikq

qwikq

11

We use Colaborate as our coroporate font. The logo uses ColaborateRegular, while headlines and text use either ColaborateLight or ColaborateThin. It’s simple, relatable and easy to read.

Our Font

01 Light

Typography

AaABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖabcdefghijklmnopqrstuvwxyzåäö1234567890 (.,:;@!?%&)

12

02 Regular

03 Thin

Aa

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖabcdefghijklmnopqrstuvwxyzåäö1234567890 (.,:;@!?%&)

ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖabcdefghijklmnopqrstuvwxyzåäö1234567890 (.,:;@!?%&)

13

Web Font

Windows: Arial

Typography

AaABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖabcdefghijklmnopqrstuvwxyzåäö1234567890 (.,:;@!?%&)

14

For the web we chose two substituting fonts, Arial for Windows and Helvetica for Mac. These provide better readability for screens.

Mac: Helvetica

AaABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖabcdefghijklmnopqrstuvwxyzåäö1234567890 (.,:;@!?%&)

15

These are our main colors. They are simple and reflect trust, openess and humbleness.

Green, black and white

Color

RGB 0/0/0CMYK 0/0/0/100HEX #000000

RGB 56/181/74CMYK 75/0/100/0HEX # 38b54a

50% Opacity

RGB 242/240/240CMYK 4/3/3/0HEX #f1f1f1

RGB 255/255/255CMYK 0/0/0/0HEX # ffffff

16

17

The tone of QwikQ will be a vital part in creating a coherent but equally appealing communication for both customers and businesses alike. Here are some keywords to guide this communication.

Tone of Voice

18

Sincere

Humble

Simple

CleanFriendly

Professional

19

We like photos. Use photos often in relation to the qwikq brand. Some keywords for pictures are:Bright, calm and warm. Either black/white or color.When using colorphotos, they should lean against earthy tones such as green, brown and yellow.Always have people in the pictures, smiling, doing things they like. Never use pictures of people waiting or standing in line. We don’t want to be associated with waiting and the negative sides of queing. If you don’t want to cover a whole page with a picture, put it in a circular mask.

Images

20

21

32

33

The qwikwidget is one of our main channels of interaction with the customer. It’s intuitive, natural and customizable depending on what site it’s displayed on. This is the default look of the widget, wich serves as a guideline for customizing it.

The Widget

Default state 1 Default state 2

34

Default state 3

Default state 4

35

295px

184px This button can be color-modified to fit your corporate color

Always allow for at least 20 px spacing around the widget

Put your company name or logo inside this box

Customization and Examples

36

Example for Swedbank

Example for Systembolaget

37

38

This is our example of how the in-store experience with qwikq could look and feel like. It’s based on the widget to make the whole experience seemless and coherent. The customization options are the same as for the widget; the company logo, the button and the location.

In-store

39

40

41