Design
Guidelines The new brandbook for DESIGN.BOX
CREATIVEX DESIGN
CLIENT
125 Herold Avenue, Anywhere
Phone 34 5678 68
DESIGN.BOX
5624 Winterland
E-Mail info@your-company.com
345, Spring Avenue, Somewhere
United States
Web www.your-company.com
5624 Dreamland
Brand guidelines for DESIGN.BOX
About this brand This identity guideline is a tool designed to project the image, values, and aspirations behind the brand. It is the cornerstone of all communication efforts and must be followed carefully to ensure a consistent style and quality of presentation. Every participating institution is responsible for representing or coordinating the use of the brand along with an individual institution’s brand.
You never get a second chance to make a first impression. - Andrew Grant, Even -
2
Designed by CreativeX
Table of contents
01 THE LOGO The Logo and its usage
6
Black, white and grey scale
7
Logo construction and clearspace
8
Mininmum logo sizes and incorrect uses
9
02 TYPOGRAPHY The primary & secondary font
12
Typography and hierachy
14
03 COLOR SYSTEM The Logo color palette
18
Secondary color palette
19
The moodboard
20
04 THE STATIONERY The letterhead
24
The business card and envelope
25
05 THE IMAGERY The imagery & color effects
28
06 GRID SYSTEMS Print grid systems
32
Web grid systems
34
07 ADDITIONAL Office supllies
40
Corporate icons
42
Checklist 44 Help or Feedback?
45
3
Brand guidelines for DESIGN.BOX
The logo design
4
Designed by CreativeX
01 Our logo is the touchstone of our brand and one of the most valuable assets. We must ensure its proper usage. 1. The logo and its usage / 2. Black, white and gray scale / 3. Logo construction + clearspace / 4. Mininum logo sites and incorrect uses
5
Brand guidelines for DESIGN.BOX
The general logo
The logo and usage
The corporate logo is presented through the use of
The icon
colors, shapes and typography.
The word mark The tagline
The colors are a fresh green and a dark green combined with a powerful blueberry.
The DESIGN.BOX logo combines three elements: the DESIGN.BOX logotype,the tagline and the icon as a graphical element. These elements should never be changed. Position, size, and color, along with the spatial and proportional relationships of the DESIGN.BOX logo elements, are predetermined and should not be altered.
Used consistently, they will reinforce public awareness of the company.
6
DARK VERSION
LIGHT VERSION
A variant of use when the background is
A variant of use when the background is dark
light colored.
colored.
Designed by CreativeX
100% black
Black, white and grayscale Sometimes, often due to production costs, only one color of ink is available and so the Logo must be reproduced using only one color. In this scenario, the logo, logotype, or symbol must be used following the convention of using a light color type on a dark background or in a dark color type on a light background. The logotype and the symbol must be clearly distinguishable from the background
70% black
color.
You must honor the DESIGN.BOX Logo palette when possible, using black or white if necessary.
100% white
7
Brand guidelines for DESIGN.BOX
FULL LOGO AND LOGO ICON
Logo construction + clearspace
1,25 x
The DESIGN.BOX logo requires serperation from the other elements around it. The space required on all sides is roughly eqivalent to the cap heighth of the logo type. It never should be less than that. The logo must always fit into the clearspace area and can not be intervened by other graphical elements
Whenever you use the logo, it should be surrounded with clearspace to ensure its visibility.
which could hinder legibility of the brand.
Please note that text or pictorial figures which have strong impact or impression should not be placed near the logos even though you keep the isolation area blank.
If you use the logo icon as a single object, it also needs clearspace all around.
8
Designed by CreativeX
MINIMUM LOGO SIZES
THE LOGO
SYMBOL
ICON
There are no predeterminded sizes for the
For digital uses the minimum size for the
DESIGN.BOX logo. Scale and proportion
standard logo is 120 px. This is the smallest
should be determined by the available
size apart from when using an ICO. The size
space, function and visibility. In print the
for the ICOs is 16 px.
minimum size is 34 mm width, for the symbol it is 10 mm width.
34 mm
10 mm
16 px
LOGO: INCORRECT USE Please note: The logo cannot be changed! Although creativity is appreciated please do not alter the logo in anyway! DON’T rotate the logo
DON’T add a drop shadow
DON’T rearrange elements
DON’T stretch the logo
Don’t use different colors
DON’T outline the logo
DON’T add gradients
DON’T use it over an image
9
Brand guidelines for DESIGN.BOX
The typography
10
Designed by CreativeX
02 Typography is 95% of design – it’s a driving force in all forms of communication art 1. The primary and secondary font / 2. Typography and hierachy / 3. Character and paragraph styles
11
Brand guidelines for DESIGN.BOX
Primary font Playfair DESIGNER: CLAUS EGGERS SØRENSEN Playfair is a transitional design. From the time of enlightenment in the late 18th century, the broad nib quills were replaced by pointed steel pens. This influenced typographical letterforms to become increasingly detached from the written ones. Developments in printing technology, ink, and paper making, made it possible to print letterforms of high contrast and delicate hairlines.
This font should be used in all DESIGN.BOX communications to project a consistent visual identity. This includes promotional materials, advertising, digital assets, and printed materials.
Playfair Display REGULAR ITALIC BOLD BOLD ITALC BLACK BLACK ITALIC Specimens ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!Ӥ$%&/()=?;,.:-_
12
Designed by CreativeX
Roboto LIGHT REGULAR ITALIC BOLD BOLD ITALIC BLACK
Secondary font roboto DESIGNER: CHRISTIAN ROBERTSON Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
This serif font is available in 10 weights. We use 3 of them. The regular, italic and bold versions. The subline of the logo uses the regular weight.
Specimens ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!Ӥ$%&/()=?;,.:-_
13
Brand guidelines for DESIGN.BOX
Typography and hierachy
Main title: Playfair display 60 pt bold
Size is the simplest way to create contrast between different
Headline one
typographic elements in your design. With three levels of typography, the font size generally starts out largest on top (level one; your most important information) and decreases in size as you move down the page.
Title header Heading 1: Playfair display 48 pt regular
Heading 2: Playfair display 30 pt italic Layout, for both print and screen, is one of the most important aspects of graphic design. Designs that extend across multiple pages or screens, whether containing large or small amounts of type, must be carefully controlled in a way that is enticing and is easy for all to access.
Here are some of the most common technics for the designs.
Headline two Heading 3: Roboto 24 pt italic
Headline three Heading 4: Roboto 14 pt regular
HEADLINE FOUR
14
Designed by CreativeX
Character & paragraph styles BASIC TEXT BOLD UPPERCASE
Basic text italic
Basic text regular gray
ONSEQUIAE RATAM NOS MOLOREPUDAM ULPA IUR MA VOLORATIS ESSIMODIA SI CONECER ROREPELICIA ILLUPTIOSAM ANDIGNIANT POS MINIMETUR, QUODICA TESEQUATUR, ACCUM RENDAM. EHENITEM SIMOLOR.,
Ciis eumendi gnimos aut labores sequis sunt quam fuga. Nequos eum facea vollab ius, odis ad moloreh endest, sum il exerio. Ique alit que dolupta musantis re que dero et abore. Hitis ipictias et, sum, ut aut Soluptas expernatet eos sa ilicae nonem acil.
Antem autem que perum as et la verum dolum doles deliaep
List with bullets
List with numbers
Basic text white center Accum niti blamus. Iberro con rem etum accum reperferatem esseque nonsenist ulpa ea doluptati ariae acid quas de omnihilia dero voluptasped quis cullabo. Ro eatibuscia doluptatiae pratecto vitam ulpa doloriorunt eius audit evelecae.
• Ciis eumendi gnimos aut labores etiam tu est • Sequis sunt quam fuga. • equos eum facea vollab ius, odis ad moloreh endest, sum il exerio. • Incidus, ipsam as eicillatur, volescit, aut expliquae es coria cusam earunt voluptis qui utateturi
tatibus voluptatia volecat emporen daernam, vernatur? Quia dolorate nonsernat.Obis sam quos est eaturioris magnis aperestem illuptur magnihicias ullorit rehenia consequo doluptatae.
1. Denducil liquis re, quis eum sequi odiam recum, 2. Im res con reicti dolut pliqui blabores samus essum ut omnimolut quam, que pos as maio.
3. Me pero doluptat et pa si utatur re, to quisci ullaborro blaut quiaturi officit ianima consequos el eius vent,
4. In explibus, te eosapit earchil imostrum expliquunt.
15
Brand guidelines for DESIGN.BOX
The color system
16
Designed by CreativeX
03 With 93% of customers influenced by colors and visual appearance, make sure you pick the right colors for your company. 1. The logo color palette / 2. Secondary olor palette/ 3. Moodboards
17
Brand guidelines for DESIGN.BOX
100%
80%
The logo color palette
PRIMARY COLOR SPRING GREEN
60%
(choice for icon)
COLOR CODES CMKY
48 / 0 / 100 / 0
RGB
155 / 195/ 28
HEX #9ac21b Pantone 376 C
40%
HKS
67 Z
20%
100%
USE OF COLOR FOR THE PRINTED & DIGITAL LOGO. The following palette has been selected for use in DESIGN.BOX communcations. Lighter tints of these colors are also allowed., but the Logotype + background may only be used with a 100% tint. The primary colors include a light spring and a dark green, that embodies the creativity and dynamic of the company. The
80%
PRIMARY COLOR FOREST
60%
CMKY
100 / 0 / 50 / 59
RGB
0 / 85 / 80
HEX #00544f
(choice for icon) 40%
additional color is a dark gray to underline the seriousity of your
COLOR CODES
Pantone 330 C HKS
56 N
business. 20%
A comprehensive color palette has been developed to provide flexibility while creating a unified, recognizable appearance across all communications.
100%
80%
PRIMARY COLOR ANTHRAZIT (font color)
18
COLOR CODES CMKY 15 / 0 / 0 / 90
60%
RGB
52 / 58 / 63
HEX #343a3f 40%
20%
Pantone 433 C HKS 97N
Designed by CreativeX
100%
80%
SECONDARY COLOR LIGHT BEIGE
60%
COLOR CODES CMKY
16 / 6 / 24 / 0
RGB
224 / 228 / 204
HEX #E0E4CC
(choice for backgrounds) 40%
Pantone 453 C HKS
89N (40%)
20%
100%
Secondary color palette The secondary color palette includes specifications for Pantone
80%
SECONDARY COLOR OCEAN BLUE
COLOR CODES CMKY 73 / 3 / 27 / 0
60%
40%
RGB
colors on coated stock (C) and HKS on natural paper (N). When reproduced using the four-color process (CMYK), and when creating PowerPoint presentations (RGB).
22 / 177 / 191
HEX #16b1bf
The palette allows the addition of secondary colors to enrich the
Pantone 361 C
DESIGN.BOX visual identity as a whole. Lighter tints of these
HKS
colors are also allowed.
50 K
These colors are complementary to our official colors, but are not recognizable identifiers for our company. Use the both orange colors sparingly.
20%
100%
80%
SECONDARY COLOR COOL GRAY
COLOR CODES CMKY 14 / 9 / 8 / 70
60%
40%
20%
RGB
98 / 100 / 101
HEX #626364 Pantone 10 C HKS
92 K 19
Brand guidelines for DESIGN.BOX
Moodboard green If you are using the primary color palette, just take photos with some green in it. This color should contain a lot of yellow. Don’t use photos with too much blue in it.
20
Designed by CreativeX
Moodboard blue If you are using the secondary color palette, just take photos with cyan in it. This color should contain a lot of blue. Don’t use photos with too much red or yellow in it. You can also use photos with gray colorscheme.
21
Brand guidelines for DESIGN.BOX
The stationery
22
Designed by CreativeX
04 When it comes to developing the stationery, consistency is the key for all layouts and designs 1. The letterhead / 2. Business card and envelope
23
Brand guidelines for DESIGN.BOX
210 mm
The letterhead Our stationery is one of the most widespread forms of contact
Clean and simple, we designed our stationary to align with our visual system. The letterhead features the logo in the top left corner with the business contact information on the opposite site.
Dimensions: DIN A4 (297 x 210 mm)
Paper: 100 g/m² offset white
24
297 mm
for business and corporate communications.
Designed by CreativeX
BUSINESS CARDS The business card will be used for all official contact and communication of our company. These are the approved layouts.
Dimension: 85 mm x 55 mm
Print: 350 g/m² glossy white paper
ENVELOPES The envelope will be used for all official contact and communication of our company. These are the approved layouts.
Dimension: Din lang with address window
Print: 80g/m² offset white paper with window, self-adhesive
NOTICE: The backside of all envelopes will be plain. Other formats are allowed.
25
Brand guidelines for DESIGN.BOX
The imagery
26
Designed by CreativeX
05 Brand image is the overall impression in consumers’ mind that is formed from all sources 1. The imagery & color effects / 2. Examples and rules
27
Brand guidelines for DESIGN.BOX
The imagery + color effects Good imagery helps to reinforce our values and creativity. Any photography needs to be professional in its approach and engaging in its content. It is essential for our DESIGN.BOX brand, because it creates emotions and has a distinct personality. Avoid clichĂŠs and obvious poses.
The uniqueness of each photo will help to reiterate the independent spirit of our brand.
28
Designed by CreativeX CMYK
EXAMPLES AND RULES REQUIREMENTS: 1. Use desaturated colors with light vintage feel 2. For photos with people use only single persons (max. 2 persons if required.
3. All photos should be light and clean 4. Use the optimal image detail, so that it looks like zoomed into the picture.
5. Also allowed are grayscale images for print and web 6. Use of imagery that demonstrates creativity, nature or persons.
7. Use CMYK (RGB for web) modus, when the background is white or the colorscheme fits with the colors of DESIGN.BOX. Grayscale
70% beige
8. Use grayscale images, when the colorscheme doesn’t fit with the background.
9. Use grayscale images with color overlay, when you want to write some text on it.
29
Brand guidelines for DESIGN.BOX
The grid system
30
Designed by CreativeX
06 Using a grid system is one way to achieve a level of consistency that would be otherwise extremely difficult to master 1. Print grid system / 2. Web grid system / 3. Mobile devices
31
Brand guidelines for DESIGN.BOX
Print grid systems USE ON DIN A4 AND LETTER FORMAT The grid is used as a guide for how to place text, photos and advertisements on the page. The font size that you use should be proportionate to the grid. Using a font that is too large will cause odd hyphenation and breaks, which can be difficult to read and using a typeface that is too small can cause strain on a reader trying to get from the start of a line to the end.
The 12 column grid is always the basic. For special prints, a 6 column grid is also allowed.
Use 2, 3, 4, 6, 8, 10 or 12 columns for the layout
32
Designed by CreativeX
GRID SYSTEMS FOR IMAGES
33
Brand guidelines for DESIGN.BOX
GRID SYSTEM WEB LAYOUT The layout is based on a 12 columns bootstrap grid system.
Web grid systems USE ON DIFFERENT DEVISES. Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here are some examples. The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops).
Please follow the rules, to have a consistant visual appearance.
34
Designed by CreativeX
WIRE FRAMES General information of the content and layout of each page.
4 column grid
6 column grid
Custom layout
Portfolio page
Product page
Article right
Article left
Blog
Landing page
Team members
35
Brand guidelines for DESIGN.BOX
LOGO PLACEMENT
Mobile devices
To place the DESIGN.BOX logo please use the approved grid system. It is based on a 6 column grid. Other ways are not allowed.
USE ON MOBILE PHONE. Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here are some examples. The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops).
Please follow the rules, to have a consistant visual appearance. See more Âť
36
Designed by CreativeX
TABLET VERTICAL GRID The layout is based on a 8 columns bootstrap grid system. Please use the approved layout
FONTS The fonts Playfair Display and Roboto can also be used on the web. Playfair is always used for the big headlines, Roboto for the basic text and smaller headlines.
COLOR The basic color for the websites is always white. Use light beige to highlight some articles. The green colors are only used for headlines, underlines or icons.
NAVIGATION The navigation is always on the top right. Use lowercase letters for it.
37
Brand guidelines for DESIGN.BOX
The additional
38
Designed by CreativeX
07 An organization, no matter how well designed, is only as good as the people who live and work in it. 1. Office supplies / 2. Corporate icons
39
Brand guidelines for DESIGN.BOX
Office supplies When used on t-shirts, mugs etc. any of the approved logos can be used. The symbol may also be used separately from the lettering. For the background use always white, spring green, forest and anthrazit. Other colors are not allowed.
T-Shirt design on white, spring green, forest and anthrazit. The logo size is 300 mm x 280 mm. Please use the shown logo colors.
40
Designed by CreativeX
OTHER SUPPLIES For other office supplies use always the same color, no matter what printable object you use. Possible are:
Mugs or coffee to go cups Basecaps Tote or paper bags Pencil or ball pen USB Sticks Mobile phone cover etc.
These are only some examples of possible supplies.
41
Brand guidelines for DESIGN.BOX
Corporate icons The icons are pictograms displayed on the screen or print layout in order to help to navigate through the content. The icon itself is a comprehensible symbol of a software tool, function, or a data file, accessible on the system and is more like a traffic sign than a detailed illustration of the actual entity it represents
The icons are always used with the round background in print and web. They are available in 2 different color combinations.
ICONS FOR WHITE BACKGROUND
42
Designed by CreativeX
MINIMUM ICON SIZE
The minimun size for the icon usable in web is 8,5 mm for print designs 14 mm
MAXIMUM ICON SIZE
ICONS FOR DARK BACKGROUND
The maximum size for the icon usable in web is 20 mm for print designs 55 mm
43
Brand guidelines for DESIGN.BOX
The checklist Best to have a checklist. Then you know you’ve done everything perfectly!
01 THE LOGO Only use approved versions of the logo. Please check that you have respected the minimum size and exclusion zone requirements. The logo should not appear on color backgrounds without being reversed out.
02 COLOR Please make sure that only your approved primary and secondary colors are used.
03 TYPOGRAPHY Use the font Aleo for all top headings. For body text and smaller headings use font Roboto. Both fonts are also available for web.
04 IMAGERY Use desatured photos with vintage color, grayscale photos or photos with color overlay. Please follow the rules.
Thank you!
44
Designed by CreativeX
Help or feedback? to provide feedback, share informations or seek answers to questions you may have about this brand, please contact:
JANE WHITEMORE Brand development manager 125 Herold Avenue, Anywhere 5624 Winterland United States Phone +22 (0) 44 34 5678 68 Fax
+22 (0) 44 34 5678 70
E-Mail whitemore@your-company.com
EUGENE BUNDY Brand communication manager 125 Herold Avenue, Anywhere 5624 Winterland United States Phone +22 (0) 44 34 5678 69 Fax
+22 (0) 44 34 5678 70
E-Mail bundy@your-company.com
45
CREATIVEX DESIGN
CLIENT
125 Herold Avenue, Anywhere
Phone 34 5678 68
DESIGN.BOX
5624 Winterland
E-Mail info@your-company.com
345, Spring Avenue, Somewhere
United States
Web www.your-company.com
5624 Dreamland