SECTION NAME
1
This style guide is designed to be a simple reference for everything you need to know about your brand identity. It’s organized by key areas and laid out in simple spreads for ease of use. No electricity needed– just the desire to get things done and look good in the process.
TABLE OF CONTENTS 01 03 05 07 09 10 11
Brand Basics Logo Do’s and Don’ts Color Palette Typography Basics Website Typograpy Website Graphic Elements Logo Update Recommendation
BRAND BASICS
Clear Space
80 px
SMA LLE ST FOR W E B
1 inch
SMA LL E ST FOR P RIN T
1
BRAND BASICS
Clarity and consistency are very important aspects of building and maintaining a strong brand. These are some very basic guidelines for making sure your logo consistently stands out and remains easily recognizable.
C L E A R S PAC E The spacing between the Queralt logo and any other graphic element should always be equal to the logos x-height (the height of a lowercase x). This is a guaranteed way for making sure your logo remains easy to read and doesn’t get lost alongside other brands. MINIMUM SIZE To guarantee legibility the logo should never be smaller than 1 inch wide in print production or 80px wide on digital displays. Following these guidelines is especially important for digital displays since the logos serif’s get very difficult to read below the 80px threshold. T E C H N I CA L DE TA I L S Typeface Times New Roman Regular Small Caps with modified Q Color Queralt Red #e74047 C30 M90 Y72 K0 Pantone Coated 52-15C
2
LOGO DO”S AND DON’TS
In order to maintain consistency over the treatment of your brand, this section is designed to give you an overview of proper logo treatments as well as common mistakes to avoid.
01 STAN DARD This version of the logo will be the most common, especially in printing. 02 STAN DARD ON GR E Y This type of application is used on the website but can also be used in print pieces. 03 SP E CIAL AP P LICAT I O N This type of application should be used on more special situations like banners and full bleed pages.
0 4 OT H E R B AC KG R O U N DS To mantain consistency, it’s important that you avoid using other colors in association with your brand. 0 5 DO N ’T U S E E F F E C TS Effects like drop shadows take away from the elegance and the readability of the logo and should be avoided. 06 FOCUS ON CLARITY The current type style in the logo is very light and makes it difficult to read over image backdrops. Also, following this rule should create some differentiation between the Queralt brand and it’s satellite products like iQ3. 0 7 L AST B U T N OT L E AST It is probably more obvious than the other rules, but in no case is it ever ok to stretch the typography. It degrades the legibility as well as the aesthetic appeal that makes Queralt’s brand unique.
3
LOGO DO”S AND DON’TS
01
04
02
05
03
06
07
4
COLOR PALETTE
Queralt Red Signature Brand Color #e74047 C30 M90 Y72 K0 PANTONE P 52-15C
Call To Action Blue Call to action spot color #00bccc C71 M0 Y22 K0 Pantone Coated P 121-6C
Call To Action Orange Call to action spot color #ffc63d C0 M22 Y86 K0 Pantone Coated P 10-7C
Queralt Dark Grey Text, Backgrounds, and Graphics #343a3a C30 M90 Y72 K0 Pantone Coated 426C
Medium Grey Backgrounds & Special Text #bdcaca C26 M13 Y18 K0 Pantone Coated 175-2C
Light Grey Backgrounds #dbe3e3 C13 M6 Y8 K0 Pantone Coated P 130-1C
Ultralight Grey Backgrounds #eff5f5 C5 M1 Y2 K0 Pantone Coated P 115-1C
5
COLOR PALETTE
Given the minimal nature of the logo, color in many cases, is as essential to the brand as the actual typography. This section provides all the proper color profiles for print and web.
01 ALWAYS U S E V E C TO R S I M AG E S ( . E P S ) To ensure you get the best print quality, you should always use vector based files whenever possible to get fine, non pixelated edges, and the most accurate color profile. 02 U SE PAN TO N E S F O R O F F S E T P R I N T I N G Offset printing is a printing process used for larger volume print jobs (like magazines and brochures) and uses pantone spot colors and lithographic plates. Pantones are the most effective way of getting accurate color in large print jobs. 03 U SE CMY K F O R P R O C E S S P R I N T I N G Process printing is used for lower quantity printing and uses more conventional techniques. When printing in this way you should use the CMYK color profiles to ensure the best quality print. CMYK profiles also works best on normal ink-jet and laser printers.
6
TYPOGRAPHY BASICS
Aa Aa AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp QqRrSsTtUuVvWwXxYyZz0123456789
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp QqRrSsTtUuVvWwXxYyZz0123456789
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp QqRrSsTtUuVvWwXxYyZz0123456789
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp QqRrSsTtUuVvWwXxYyZz0123456789
7
TYPOGRAPHY BASICS
LATO | W E BS IT E T Y PEFAC E Lato is a sanserif typeface family designed in the Summer 2010 by Warsaw based designer Łukasz Dziedzic. His goals was to create a typeface that would seem quite “transparent” when used in body text but would display some original traits when used in larger sizes. He used classical proportions to give the letter forms familiar harmony and elegance. The semi-rounded details of the letters give Lato a feeling of warmth, while the strong structure provides stability and seriousness. TIME S N E W RO M A N | LO G O T Y PEFAC E In 1931, The Times of London commissioned the Monotype Corporation, under the direction of Stanley Morison, to design a newspaper typeface. The Times, as a newspaper in a class by itself, needed not a general trade type, however good, but a face whose strength of line, firmness of contour, and economy of space fulfilled the specific editorial needs. Times New Roman, drawn by Victor Lardent and initially released in 1932, is the result.
8
WEBSITE TYPOGRAPY WEBSITE GUIDELINES
H1 Lato Regular 32px/40px H2 Lato Regular 32px/40px
9
H3
LATO REGULAR 14PX/18PX
H4
LATO REGULAR 14 PX/ 18PX
P
This paragraph text is set at 16 px with a leading of 21px. You have the ability to highlight important information and links in this text by applying the black weight (one weight heavier than bold.)
WEBSITE GRAPHIC ELEMENTS
01
02
03
Small Vector Graphics Queralt Dark Grey and white
Medium Sized Icon Based Queralt Red and white
Infographic/Large Illustrations Full grey color palette and Queralt Red as a spot color
40%
Special Headline Text with a red bar.
10
UPDATE RECOMMENDATION
Queralt
RE COMME N DAT I O N 1 Humanistic, Friendly , Modern
11
UPDATE RECOMMENDATION
Queralt
RE COMME N DAT I O N 2 Stearn, Mature, Elegant
12