queralt style guide
Post on 09-Mar-2016
217 Views
Preview:
DESCRIPTION
TRANSCRIPT
SECTION NAME
1
TABLE OF CONTENTS
01 Brand Basics
03 Logo Do’s and Don’ts
05 Color Palette
07 Typography Basics
09 Website Typograpy
10 Website Graphic Elements
11 Logo Update Recommendation
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.
1
BRAND BASICS
Clear Space
80 px
1 inch
SMALLEST FOR WEB
SMALLEST FOR PRINT
2
BRAND BASICS
CLEAR SPACE
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 guaran-
teed 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.
TECHNICAL DETAILS
Typeface Times New Roman Regular
Small Caps with modified Q
Color Queralt Red
#e74047
C30 M90 Y72 K0
Pantone Coated 52-15C
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.
3
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 STANDARD
This version of the logo will be the
most common, especially in printing.
02 STANDARD ON GREY
This type of application is used on
the website but can also be used in
print pieces.
03 SPECIAL APPLICATION
This type of application should be
used on more special situations like
banners and full bleed pages.
04 OTHER BACKGROUNDS
To mantain consistency, it’s important
that you avoid using other colors in
association with your brand.
05 DON’T USE EFFECTS
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.
07 LAST BUT NOT LEAST
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.
4
LOGO DO”S AND DON’TS
01
02
03 06
07
05
04
5
COLOR PALETTE
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
Medium Grey
Backgrounds & Special Text
#bdcaca
C26 M13 Y18 K0
Pantone Coated 175-2C
Queralt Dark Grey
Text, Backgrounds, and Graphics
#343a3a
C30 M90 Y72 K0
Pantone Coated 426C
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
Queralt Red
Signature Brand Color
#e74047
C30 M90 Y72 K0
PANTONE P 52-15C
6
COLOR PALETTE
01 ALWAYS USE VECTORS IMAGES ( .EPS)
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 USE PANTONES FOR OFFSET PRINTING
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 USE CMYK FOR PROCESS PRINTING
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.
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.
7
TYPOGRAPHY BASICS
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp QqRrSsTtUuVvWwXxYyZz0123456789
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp QqRrSsTtUuVvWwXxYyZz0123456789
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp QqRrSsTtUuVvWwXxYyZz0123456789
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPp QqRrSsTtUuVvWwXxYyZz0123456789
AaAa
8
TYPOGRAPHY BASICS
LATO | WEBSITE TYPEFACE
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.
TIMES NEW ROMAN | LOGO TYPEFACE
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.
9
WEBSITE TYPOGRAPY
WEBSITE GUIDELINES
This paragraph text is set at 16 px with a leading of 21px. You have the ability to highlight import-ant information and links in this text by applying the black weight (one weight heavier than bold.)
Lato Regular 32px/40pxH1
H2
H3
H4
P
Lato Regular 32px/40px
LATO REGULAR 14PX/18PX
LATO REGULAR 14 PX/ 18PX
10
WEBSITE GRAPHIC ELEMENTS
Special Headline Text with a red bar.
40%
Small Vector Graphics
Queralt Dark Grey and white
01 02 03
Medium Sized Icon Based
Queralt Red and white
Infographic/Large Illustrations
Full grey color palette and Queralt
Red as a spot color
11
UPDATE RECOMMENDATION
Queralt
RECOMMENDATION 1
Humanistic, Friendly , Modern
12
UPDATE RECOMMENDATION
Queralt
RECOMMENDATION 2
Stearn, Mature, Elegant
top related