qwikq
2010 Brandbook
Contents
1. Logo 2. Typeface 3. Colors 4. Tone of voice 5. Images 6. Video 7. The Widget 8. In store experience
Logo
Our logo reflects the qwikq core values: humble, modern, professional, but not typically corporate
4
qwikq
5
How to use the logo. Colors 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.
6
01
qwikq
qwikq
qwikq
qwikq
02
7
Sizes and variations 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
8
01 45px
02 45px
qwikq
02
80px
qwikq
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
02
qwikq
03
qwikq
04
qwi
kq
qwikq
11
Typography
Our Font 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. 01 Light
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ abcdefghijklmnopqrstuvwxyzåäö 1234567890 (.,:;@!?%&)
12
02 Regular
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ abcdefghijklmnopqrstuvwxyzåäö 1234567890 (.,:;@!?%&)
03 Thin
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ abcdefghijklmnopqrstuvwxyzåäö 1234567890 (.,:;@!?%&)
13
Typography
Web Font For the web we chose two substituting fonts, Arial for Windows and Helvetica for Mac. These provide better readability for screens.
Windows: Arial
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ abcdefghijklmnopqrstuvwxyzåäö 1234567890 (.,:;@!?%&)
14
Aa
Mac: Helvetica
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ abcdefghijklmnopqrstuvwxyzåäö 1234567890 (.,:;@!?%&)
15
Color
Green, black and white These are our main colors. They are simple and reflect trust, openess and humbleness.
RGB 0/0/0 CMYK 0/0/0/100 HEX #000000
RGB 56/181/74 CMYK 75/0/100/0 HEX # 38b54a 50% Opacity
RGB 242/240/240 CMYK 4/3/3/0 HEX #f1f1f1
RGB 255/255/255 CMYK 0/0/0/0 HEX # ffffff
16
17
Tone of Voice 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.
18
Humble Sincere
Simple Professional
Friendly
Clean 19
Images 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.
20
21
32
33
The Widget 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.
Default state 1
34
Default state 2
Default state 3
Default state 4
35
Customization and Examples 295px
Put your company name or logo inside this box
184px
This button can be color-modified to fit your corporate color Always allow for at least 20 px spacing around the widget
36
Example for Swedbank
Example for Systembolaget
37
In-store 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.
38
39
40
41