Visual

The BrandExtract look

If our brand is about inspiration and belief, then the design elements we choose better be awesome. They must be equal parts smart, compelling, vibrant, fascinating and beautiful. The BrandExtract look is distinctly our own. Follow these guidelines to create this look, and at the same time you’ll be creating consistency, trust and long-term value in our brand.

Logo System

The BrandExtract logo system uses an icon and a wordmark in various configurations.

Horizontal Lockup — Preferred

This is the preferred way to express our logo. Never alter the relationship between Stu and the wordmark.

Vertical Lockup

Only go vertical when space isn’t adequate for the horizontal version, or in occasional cases when we want to put more emphasis on Stu.

Icon

Our icon is affectionately known as Stu. Stu’s got a lot of great ideas stewing around in his head, so many that they can’t help but bubble right out of the top. As you can see, Stu’s intensely focused, smart as heck, and most important, open-minded. Stu rarely should appear alone – only in cases where there’s an established familiarity with our brand or space is too limited for him to appear with our wordmark.

Wordmark

Our wordmark is clean and dynamic. We like it best with Stu nearby. In fact, only use the wordmark alone when space or printing restrictions do not allow for Stu.

Logo Spacing

When placing any of our logo versions inside a container or near other design elements, make sure they have enough space to breathe. Use the height of the “E” in our wordmark as the minimum amount of clear space around the entire logo.

Minimum Size

To ensure the logos preserve their visual impact and legibility in both print and digital formats, never go smaller than these sizes.

Digital: 144px wide | Print: 1.5" wide
Digital: 104px wide | Print: 1" wide

Logo Misuse

Of course you already know this, but we gotta say it anyway. Never modify or distort our logo in any way. The list of “don’ts” could go on forever, but here are a few of the biggies:

Use against busy or low-contrast backgrounds
Change the orientation of Stu
Add additional elements
Add drop shadows, gradients or special effects
Stretch, squeeze or rotate

Color

The BrandExtract logo features our primary colors. Whenever you’re creating anything in our brand, this is where you start.

Tints and shades are a great way to add highlights and shadows to illustrations and web components. They can also be used for charts and graphs with complex data sets that may require more colors than the primary, secondary and tertiary color palettes contain.

Primary Colors

Eggplant

HEX
33234B
RGB
51,35,75
CMYK
86,92,40,40
PMS
2695
T1
HEX A198A9
C5 M10 Y0 K34
R161 G152 B169
T4
HEX 4B3C5D
C20 M35 Y0 K64
R75 G60 B93
T2
HEX 80748B
C8 M17 Y0 K46
R128 G116 B139
S1
HEX 281C3B
C32 M53 Y0 K77
R40 G28 B59
T3
HEX 645672
C12 M25 Y0 K55
R100 G86 B114
S2
HEX 211731
C33 M53 Y0 K81
R33 G23 B49
Accessibility Test
16px
24px
White text
Pass
Pass
Sky Blue text
Not legible
Pass
Chartreuse text
Pass
Pass

Sky Blue

HEX
177DB3
RGB
23,125,179
CMYK
76,26,0,0
PMS
7689
T1
HEX D3DCEB
C10 M6 Y0 K8
R211 G220 B235
T4
HEX 6696C3
C10 M6 Y0 K8
R102 G150 B195
T2
HEX ADC2DC
C21 M12 Y0 K14
R173 G194 B220
S1
HEX 146B99
C10 M6 Y0 K8
R20 G107 B153
T3
HEX 89ABCF
C34 M17 Y0 K19
R137 G171 B207
S2
HEX 0F567C
C10 M6 Y0 K8
R15 G86 B124
Accessibility Test
16px
24px
White text
Pass
Pass
Eggplant text
Not legible
Pass
Chartreuse text
Not legible
Not legible

Chartreuse

HEX
C5D230
RGB
197,210,48
CMYK
27,3,99,0
PMS
382
T1
HEX F2F4DA
C1 M0 Y11 K4
R242 G244 B218
T4
HEX D6DD7A
C3 M0 Y45 K13
R214 G221 B122
T2
HEX E8EBB9
C1 M0 Y21 K8
R232 G235 B185
S1
HEX B1BD2B
C6 M0 Y77 K26
R177 G189 B43
T3
HEX DFE499
C34 M17 Y0 K19
R223 G228 B153
S2
HEX 97A125
C6 M0 Y77 K37
R151 G161 B37
Accessibility Test
16px
24px
White text
Not legible
Not legible
Sky Blue text
Not legible
Not legible
Eggplant text
Pass
Pass

Secondary Colors

Lime Green

HEX
86BD40
RGB
134,189,64
CMYK
53,4,100,0
PMS
376
T1
HEX E6EFD8
C4 M0 Y10 K6
R230 G239 B216
T4
HEX ACCD7B
C16 M0 Y40 K20
R172 G205 B123
T2
HEX D3E3B8
C7 M0 Y19 K11
R211 G227 B184
S1
HEX 6E9C35
C30 M0 Y66 K39
R110 G156 B53
T3
HEX BFD799
C11 M0 Y29 K16
R191 G215 B153
S2
HEX 4E6E25
C30 M0 Y66 K57
R78 G110 B37
Accessibility Test
16px
24px
White text
Not legible
Not legible
Eggplant text
Pass
Pass
Chartreuse text
Not legible
Not legible

Rose Lavender

HEX
DBB4D4
RGB
219,180,212
CMYK
11,32,0,0
PMS
679
T1
HEX F5EEF5
C0 M3 Y0 K4
R245 G238 B245
T4
HEX E4CBE1
C0 M11 Y1 K11
R228 G203 B225
T2
HEX EFE2EE
C0 M5 Y1 K6
R239 G226 B238
S1
HEX BF9DB9
C0 M18 Y3 K25
R191 G157 B185
T3
HEX EAD6E8
C0 M9 Y1 K8
R234 G214 B232
S2
HEX B091AA
C0 M18 Y3 K31
R176 G145 B170
Accessibility Test
16px
24px
White text
Not legible
Not legible
Eggplant text
Pass
Pass
Chartreuse text
Not legible
Not legible

Fuchsia

HEX
EC3F96
RGB
236,63,150
CMYK
0,89,1,0
PMS
232
T1
HEX FADEEA
C0 M11 Y6 K2
R250 G222 B234
T4
HEX F087B5
C0 M44 Y25 K6
R240 G135 B181
T2
HEX F6C1D8
C0 M21 Y12 K4
R246 G193 B216
S1
HEX C93680
C0 M73 Y36 K21
R201 G54 B128
T3
HEX F3A3C6
C0 M33 Y19 K5
R243 G163 B198
S2
HEX A32C67
C0 M73 Y37 K36
R163 G44 B103
Accessibility Test
16px
24px
White text
Not legible
Pass
Eggplant text
Not legible
Pass
Chartreuse text
Not legible
Not legible

Coral

HEX
EF3A2F
RGB
239,58,47
CMYK
0,92,91,0
PMS
1788
T1
HEX FCDBCD
C0 M13 Y19 K1
R252 G219 B205
T4
HEX F38064
C0 M47 Y59 K5
R243 G128 B100
T2
HEX F9BCA5
C0 M25 Y34 K2
R249 G188 B165
S1
HEX C93128
C0 M76 Y80 K21
R201 G49 B40
T3
HEX F69D82
C0 M36 Y47 K4
R246 G157 B130
S2
HEX A62821
C0 M76 Y80 K35
R166 G40 B33
Accessibility Test
16px
24px
White text
Not legible
Pass
Eggplant text
Not legible
Pass
Chartreuse text
Not legible
Not legible

Tertiary Colors

Aqua

HEX
6BC9CA
RGB
107,201,202
CMYK
57,0,31,0
PMS
325
T1
HEX E4F3F2
C6 M0 Y0 K5
R228 G243 B242
T4
HEX 9ED8D8
C27 M0 Y0 K15
R158 G216 B216
T2
HEX CDE9E9
C12 M0 Y0 K9
R205 G233 B233
S1
HEX 57A3A3
C47 M0 Y0 K36
R87 G163 B163
T3
HEX B5E0E0
C19 M0 Y0 K12
R181 G224 B224
S2
HEX 458282
C75 M34 Y46 K8
R69 G130 B130
Accessibility Test
16px
24px
White text
Not legible
Not legible
Eggplant text
Pass
Pass
Chartreuse text
Not legible
Not legible

Powder Blue

HEX
B3C5E5
RGB
179,197,229
CMYK
28,26,0,0
PMS
658
T1
HEX EEF0F8
C4 M3 Y0 K3
R238 G240 B248
T4
HEX C9D5EC
C15 M10 Y0 K7
R201 G213 B236
T2
HEX E2E7F4
C7 M5 Y0 K4
R226 G231 B244
S1
HEX A1B1CF
C22 M14 Y0 K19
R161 G177 B207
T3
HEX D5DEF0
C11 M7 Y0 K6
R213 G222 B240
S2
HEX 8F9DB8
C22 M15 Y0 K28
R143 G157 B184
Accessibility Test
16px
24px
White text
Not legible
Not legible
Eggplant text
Pass
Pass
Chartreuse text
Not legible
Not legible

Smoke

HEX
80878C
RGB
128,135,140
CMYK
53,41,38,4
PMS
430
T1
HEX F2F2F2
C4 M2 Y2 K0
R242 G242 B242
T4
HEX A3A6AA
C4 M2 Y0 K33
R163 G166 B170
T2
HEX CBCBCD
C1 M1 Y0 K20
R203 G203 B205
S1
HEX 6D7378
C9 M4 Y0 K53
R109 G115 B120
T3
HEX B6B8BB
C3 M2 Y0 K27
R182 G184 B187
S2
HEX 525659
C8 M3 Y0 K65
R82 G86 B89
Accessibility Test
16px
24px
White text
Not Legible
Pass
Eggplant text
Not legible
Pass
Chartreuse text
Not Legible
Not Legible

Navy

Accessibility Test

Business Documents and Digital Printing

Charcoal

Use charcoal for body copy in business documents with long-form text (Ex: Proposify and Project Plans). This saves ink while upholding the integrity of the brand.

HEX
191919
RGB
25,25,25
CMYK
0,0,0,90

Color Combinations

The good news: we have an abundant and vibrant color palette. The bad news: we have an abundant and vibrant color palette. There are a dizzying number of possible combinations, but not everything works well with everything else. In most cases, start with our primary eggplant color as a base and build from there. Here are some combinations that work well.

Typography

Fresh, stylish, smart typography is a key element in BrandExtract’s personality. We have selected three type families that give us immense flexibility and a look of our own. Whenever possible, these fonts should be used in all communications.

Primary — Public Sans

This font family is used primarily for headlines and body copy where visual interest is key.

Belief takes faith. You can’t imagine something new or push beyond what you thought was possible unless you are willing to take that leap of faith.
Belief takes faith. You can’t imagine something new or push beyond what you thought was possible unless you are willing to take that leap of faith.
Belief takes faith. You can’t imagine something new or push beyond what you thought was possible unless you are willing to take that leap of faith.
Belief takes faith. You can’t imagine something new or push beyond what you thought was possible unless you are willing to take that leap of faith.

Secondary — GT Sectra Fine

This typeface is best used as an accent for expressive moments, such as callouts and quotes.

We build brands that people believe in.

Tertiary— IBM Plex Mono

This typeface is used as an accent for numbers and technical details and expressions.

Monday & Tuesday : 8am-3pm
Wednesday & Thursday : 8am-12pm
Friday & Saturday : 8am-3pm
Sunday : 8am-10pm
Monday & Tuesday : 8am-3pm
Wednesday & Thursday : 8am-12pm
Friday & Saturday : 8am-3pm
Sunday : 8am-10pm
Monday & Tuesday : 8am-3pm
Wednesday & Thursday : 8am-12pm
Friday & Saturday : 8am-3pm
Sunday : 8am-10pm

Pattern

We have created a pattern system to support our brand story and bring consistency to our communications. It simultaneously brings vibrancy and sensibility, movement and stability, order and endless possibility. Yes, it has been carefully crafted to do all of that. While the pattern system gives you great flexibility in both shape and color to set the right tone for your design, it must be used with balance and taste.

Our patterns are best used to create backgrounds, layering or blended graphics. They can create continuity between different types of content, and they can provide subtle texture and visual interest to add life to your design.

The Building Blocks

Our pattern system is comprised of geometric shapes and dots in various colors from the BE palette. These elements interact to form patterns of varying complexity that reflect the tone of the communication. Sparse patterns represent big-picture thinking and clear guidance. Dense patterns depict disciplined process, data science, and deep experience. Below you can see examples of how we can use our pattern system across all forms of BrandExtract communications.

1x1

2x2

4x4

8x8

Dots

Sparse

Dense

Monochromatic (Dark)

Monochromatic (Light)

Illustration

From the smallest icon, to a sprawling wall graphic, illustrations are important elements in our brand look. We have created a distinct illustration style, which can be applied across a spectrum of complexity.

Simple

Use patterns with larger shapes to depict simple objects and backgrounds.

Complex

More intricate patterns can be used to depict scenes with multiple objects, structures and energies.

People

Our style for illustrating people uses our geometric elements to capture the essence of human interaction. The key is to keep it simple. Use expressive shapes to suggest human characteristics, such as a triangle for the nose, a quarter-circle to create a smiling mouth, and so on. Remember to represent diversity when illustrating people.

Hybrid

There are certain cases when it’s appropriate to create illustrations that are not built from our brand shapes and patterns. Yet we still want brand consistency across our communications. In these cases, use our patterns as discrete background graphics, or as layers blended into the overall illustration.

Photography

Our photography style exudes confidence, intelligence, advancement and fun. Our look falls on the warmer side of the light spectrum, with desaturated tones.

People

Photography of BrandExtract people is created in house. The aesthetic is smart, authentic and inviting.

Culture

BrandExtract people are fun and creative. Our photography should reflect this when we shoot company outings and events.

Capturing real action is preferred, but if we need to shoot a staged photo, the look should feel candid and playful. You have free rein to be creative here. Even trendy. Try non-traditional framing, backgrounds and props.

Industry

When we need to depict one of our client’s industries for our own purposes, such as newsletters and social posts, bring the BrandExtract pattern into play. Choose background colors and shapes to bring life and interest to the industry photo.

Video

Video is a powerful communicator, and we use it a lot. We concept, write and design videos for all uses – product launches, global corporate events, CEO messages, rebrand introductions, our own thought-leadership posts, and much more. On the production side, we partner with some of the best companies in the business – experts in everything from talking head to documentary style to 3D animation.

Scripted and Produced

Scripted videos are delivered by on-camera talent, voiceover actors, “real people” such as a CEO or other company leader – or any combination of these. These videos are usually embellished by b-roll footage, graphics, animations, music and sound design. We use this style to create everything from sizzles to social posts, previews to product launches, company messages to culture pieces.

Documentary Style

These videos are interview driven and have a more spontaneous and immediate look and feel. We usually use this style to produce case studies, product demos, leadership messages, and our own culture videos. By their nature, these videos feel authentic and human – generally, they look and feel less “produced.”

In-House Technical Guidelines

Here’s how to get the best results when shooting video using our own Canon cameras.

Specs

23.98 fps, 1/50 for standard video
Shoot interviews in 4K for maximum crop flexibility
Canon C300 MK II, C-log 2, Cinema Gamut with 1.5-2 stops over-exposure
60fps, 1/120 for slow motion
Green screens should be shot in 2K 4:4:4 on the C300 as possible
Canon 5D MK IV, Log, sRGB with 1-1.5 stop over-exposure

Interviews

If possible, use two cameras for maximum edit flexibility
Subjects should look natural in their environment
Attire should be smart casual – what the subject wears, say, on a Tuesday
Use natural light whenever possible
Use natural light whenever possible
Use medium and close-up shots to make it more personal
Raise cameras to the subject’s eye-level