Design and Brand Guidelines Fonts, Colors, Icons
Contact Address
Phone
Online
Keypoint Intelligence
+ 1 973-797-2100
[email protected]
80 Little Falls Road, Suite 5 Fairfield, NJ 07004 United States
www.keypointintelligence.com
Corporate Typeface Typography plays a crucial role in the design of your brand identity, and it can have as much impact as a graphic or a logo.
Montserrat (Primary)
Open Sans (Secondary)
Montserrat is a well-balanced contemporary serif with
Open Sans is a humanist sans-serif typeface designed by
roots in calligraphy. It is a text typeface with moderate
Steve Matteson, commissioned by Google and released
contrast, well suited for body text.
in 2011. It is based on his previous Droid Sans design,
A paragraph set in Montserrat will make a memorable
designed for Android mobile devices, but slightly wider.
appearance because of its brushed curves in contrast
Featuring wide apertures on many letters and a large
with driving serifs. The overall typographic voice of
x-height (tall lower-case letters), the typeface is highly
Montserrat perfectly conveys the mood of a modern
legible on screen and at small sizes. It belongs to the
day story, or an art essay.
humanist genre of sans-serif typefaces, with a true italic.
Technically, Montserrat is optimised for screen appearance and works equally well in print.
As of July 2018 it is the second most served on Google Fonts, with over four billion views per day on more than 20 million websites.
Verdana (Optional) Used mainly for email text.
Visual Brand Guidelines | Corporate Typography
21
Primary Typeface
Monserrat Montserrat is a free typeface and can be downloaded here.
Styles
Regular Regular Italic Bold Bold Italic Extra Bold Extra Bold Italic
ABCDEFGHIJKL NOPQRSTUVWXYZ abcdefghijklnop qrstuvwxyz 1234567890!@£$%^& Montserrat Regular ABCDEFGHIJKLNOPQRSTUVWXYZ abcdefghijklnopqrstuvwxyz 1234567890!@£$%^&
Montserrat Bold ABCDEFGHIJKLNOPQRSTUVWXYZ abcdefghijklnopqrstuvwxyz 1234567890!@£$%^&
Visual Brand Guidelines | Corporate Typography
22
Secondary Typeface
Open Sans Open Sans is a free typeface that can be downloaded here.
Styles
Regular Regular Italic Bold Bold Italic
ABCDEFGHIJKL NOPQRSTUVWXYZ abcdefghijklnop qrstuvwxyz 1234567890!@£$%^& Open Sans Regular ABCDEFGHIJKLNOPQRSTUVWXYZ abcdefghijklnopqrstuvwxyz 1234567890!@£$%^&
Montserrat Bold ABCDEFGHIJKLNOPQRSTUVWXYZ abcdefghijklnopqrstuvwxyz 1234567890!@£$%^&
Visual Brand Guidelines | Corporate Typography
23
Optional Typeface
Verdana Verdana is a free typeface that is usually available as a default option already installed on every computer device.
Styles
Regular Regular Italic Bold Bold Italic
ABCDEFGHIJKL NOPQRSTUVWXYZ abcdefghijklnop qrstuvwxyz 1234567890!@£$%^& Verdana Regular ABCDEFGHIJKLNOPQRSTUVWXYZ abcdefghijklnopqrstuvwxyz 1234567890!@£$%^&
Verdana Bold ABCDEFGHIJKLNOPQRSTUVWXYZ abcdefghijklnopqrstuvwxyz 1234567890!@£$%^&
Visual Brand Guidelines | Corporate Typography
24
Corporate Color Strategy Cobalt 500 (Primary)
Crusta 500 (Secondary)
The primary color for Keypoint Intelligence is Cobalt Blue. This color is specified in
The secondary color for Keypoint Intelligence is Crusta Orange. This color is specified
many different tones from light to dark, and it can be identified by using color grades
in many different tones from light to dark, and it can be identified by using color
(example: 500 is the main grade color).
grades (example: 500 is the main grade color).
Cobalt
500
RGB: 34, 160, 150
HEX: #223d96
CMYK: 100, 89, 4, 1
RGB: 244, 245, 250
HEX: #f4f5fa
CMYK: 3, 2, 0, 0
RGB: 233, 236, 245
HEX: #e9ecf5
RGB: 200, 207, 229
Crusta
500
RGB: 243, 111, 33
HEX: #f36f21
CMYK: 0, 70, 98, 0
50
RGB: 254, 248, 244
HEX: #fef8f4
CMYK: 0, 2, 2, 0
50
CMYK: 7, 4, 1, 0
100
RGB: 254, 241, 233
HEX: #fef1e9
CMYK: 0, 5, 6, 0
100
HEX: #c8cfe5
CMYK: 20, 13, 2, 0
200
RGB: 252, 219, 200
HEX: #fcdbc8
CMYK: 1, 16, 18, 0
200
RGB: 164, 177, 213
HEX: #a7b1d5
CMYK: 34, 25, 2, 0
300
RGB: 250, 197, 166
HEX: #fac5a6
CMYK: 0, 26, 33, 0
300
RGB: 100, 119, 182
HEX: #6477b6
CMYK: 66, 53, 2, 0
400
RGB: 247, 154, 100
HEX: #f79a64
CMYK: 0, 47, 65, 0
400
RGB: 34, 160, 150
HEX: #223d96
CMYK: 100, 89, 4, 1
500
RGB: 243, 111, 33
HEX: #f36f21
CMYK: 0, 70, 98, 0
500
RGB: 31, 55, 135
HEX: #1f3787
CMYK: 100, 92, 15, 3
600
RGB: 219, 100, 30
HEX: #db641e
CMYK: 10, 73, 100, 1
600
RGB: 26, 46, 113
HEX: #1a2e71
CMYK: 100, 94, 26, 13
700
RGB: 182, 83, 25
HEX: #b65319
CMYK: 21, 77, 100, 10
700
RGB: 20, 37, 90
HEX: #14255a
CMYK: 100, 94, 34, 29
800
RGB: 146, 67, 20
HEX: #924314
CMYK: 29, 79, 100, 26
800
RGB: 17, 30, 74
HEX: #111e4a
CMYK: 100, 93, 39, 42
900
RGB: 119, 54, 16
HEX: #773610
CMYK: 33, 80, 100, 39
900
Visual Brand Guidelines | Corporate Color
27
Secondary Colors
Lockmara 500 (Light Blue) This version of blue (Lochmara Blue) can be used in some intances, but not heavily across all Keypoint Intelligence deliverables. It is only meant to help in areas where highlights are needed.
Secondary colors are useful in cases where they are needed for extra support or to highlight important areas. This secondary color set allows for more options, too. Note: By no means should these secondary colors be used to heavily replace or accidentally overwelm the Keypoint Intelligence brand.
Visual Brand Guidelines | Corporate Color
Lochmara
500
RGB: 33, 115, 186
HEX: #2173ba
CMYK: 85, 52, 0, 0
RGB: 241, 246, 252
HEX: #f1f6fc
CMYK: 4, 1, 0, 0
50
RGB: 231, 240, 250
HEX: #e7f0fa
CMYK: 8, 2, 0, 0
100
RGB: 192, 220, 240
HEX: #c0dcf0
CMYK: 23, 5, 1, 0
200
RGB: 152, 199, 232
HEX: #98c7e8
CMYK: 38, 10, 1, 0
300
RGB: 78, 157, 214
HEX: #4e9dd6
CMYK: 66, 26, 0, 0
400
RGB: 33, 115, 186
HEX: #2173ba
CMYK: 85, 52, 0, 0
500
RGB: 0, 105, 180
HEX: #0069b4
CMYK: 91, 59, 0, 0
600
RGB: 0, 87, 150
HEX: #005796
CMYK: 98, 71, 13, 2
700
RGB: 16, 72, 120
HEX: #104878
CMYK: 100, 78, 28, 12
800
RGB: 19, 58, 97
HEX: #133a61
CMYK: 100, 81, 36, 26
900
28
Tertiary Colors
French-Gray 500 (Gray)
Abbey 500 (Dark Gray)
This version of gray (French-Gray) can be used in some intances, but not heavily
This version of gray (Abbey) can be used in some intances, but not heavily across all
across all Keypoint Intelligence deliverables. It is only meant to help in areas where
Keypoint Intelligence deliverables. It is only meant to help in areas where highlights
highlights are needed.
are needed.
French-Gray
500
RGB: 193, 194, 200
HEX: #c1c2c8
CMYK: 24, 19, 15, 0
RGB: 251, 253, 255
HEX: #fbfdff
CMYK: 1, 0, 0, 0
RGB: 247, 248, 249
HEX: #f7f8f9
RGB: 241, 241, 243
Abbey
500
RGB: 85, 86, 90
HEX: #55565a
CMYK: 65, 57, 52, 29
50
RGB: 247, 248, 249
HEX: #f7f8f9
CMYK: 2, 1, 1, 0
50
CMYK: 2, 1, 1,0
100
RGB: 239, 238, 239
HEX: #efeeef
CMYK: 5, 4, 3, 0
100
HEX: #f1f1f3
CMYK: 4, 3, 2, 0
200
RGB: 214, 213, 213
HEX: #d6d5d5
CMYK: 15, 12, 12, 0
200
RGB: 231, 231, 233
HEX: #e7e7e9
CMYK: 8, 6, 5, 0
300
RGB: 187, 188, 190
HEX: #bbbcbe
CMYK: 27, 21, 20, 0
300
RGB: 211, 213, 218
HEX: #d3d5da
CMYK: 16, 12, 9, 0
400
RGB: 137, 136, 139
HEX: #89888b
CMYK: 49, 41, 39, 4
400
RGB: 193, 194, 200
HEX: #c1c2c8
CMYK: 24, 19, 15, 0
500
RGB: 85, 86, 90
HEX: #55565a
CMYK: 65, 57, 52, 29
500
RGB: 174, 175, 182
HEX: #aeafb6
CMYK: 33, 26, 22, 0
600
RGB: 77, 77, 81
HEX: #4d4d51
CMYK: 67, 60, 54, 35
600
RGB: 144, 146, 151
HEX: #909297
CMYK: 46, 37, 34, 2
700
RGB: 64, 65, 68
HEX: #404144
CMYK: 69, 62, 57, 45
700
RGB: 117, 117, 122
HEX: #75757a
CMYK: 58, 48, 43, 11
800
RGB: 51, 52, 54
HEX: #333436
CMYK: 71, 64 , 60, 56
800
RGB: 96, 96, 98
HEX: #606062
CMYK: 62, 54, 51, 23
900
RGB: 41, 42, 43
HEX: #292a2b
CMYK: 72, 66, 62, 65
900
Visual Brand Guidelines | Corporate Color
29
Gradient Colors Examples of How to Use Gradients Not everything in the Keypoint Intelligence brand uses solid colors. Sometimes we use gradients in graphics or backgrounds.
Blue Gradient (most widely used)
Orange Gradient
This blue gradient uses a color combination of the primary blue (Cobalt
This orange gradient uses a color combination of the secondary orange
500), the secondary blue (Lochmara 500), and the tertiary blue.
(Crusta 500) and a shade of the same color (Crusta 900).
Cobalt
500
Lochmara
Color Combination
500
Crusta
500
Crusta
900
Color Combination
Cobalt
Lochmara
Crusta 500
Crusta 900
RGB
34, 160, 150
33, 115, 186
RGB
243, 111, 33
119, 54, 16
HEX
#223d96
#2173ba
HEX
#f36f21
#773610
CMYK
100, 89, 4, 1
85, 52, 0, 0
CMYK
0, 70, 98, 0
33, 80, 100, 39
Visual Brand Guidelines | Corporate Color
30
Corporate Iconography Examples of How to Use Icons Against Other Colors
Examples from the
Wherever possible, icons should be created in a flat style using Keypoint Intelligence
Keypoint Intelligence
French Grey (700 or lower) paired with one other Keypoint Intelligence color.
Icon:
Icon:
Cobalt-200
Crusta-200
Background:
Background:
Cobalt-500
Crusta-500
An icon is a pictogram displayed on a screen or print layout to help the user navigate through the content in an easier way. The icon itself is a small picture or symbol serving as a quick, intuitive representation of a software tool, a function, or a data file.
Download the Icon Set Keypoint Intelligence works with a library of icons that can be found here. Icon:
Icon:
French-Gray-700
Crusta-700
Background:
Background:
French-Gray-100
Crusta-300
Visual Brand Guidelines | Corporate Color
Iconography System
How to Use the Icon System • • •
Only with a backround Minimum stroke size: 0.5 pt Upscale only proportional
35