Issuu on Google+

Brand Guide


Grow empowers businesses to become data-driven and accelerate growth with easy-to-use, custom data dashboards. With Grow, enterprise-quality data insights are attainable for any business.


Table of Contents


Color

29

From the CEO

1

Be the Brand

3

Color palette

31

Focus on the Why

5

Gradient

32

Core Values

7

Logo

33

Catch the Ferry

9

Logo Placement

37

Wash the Windows

10

Violations

39

Solve the Problem

11

Spacing

40

Make the Oer

12

Brand Pillars & Voice

13

Photos

42

Authentic & Reliable

15

Banners & Backgrounds

55

Constructive & Creative

17

Ads

57

Enthusiastic & Dedicated

19

Brand Apparel

59

Visual Identity

21

Typography

23

Fonts

25

Heirarchy

26

Imagery

41


From the CEO


As CEO of my last company, Logica, I felt crushing pressure to perform and lead my team. Then, we learned to rally our team around the data and metrics that truly mattered. The result was transformational, and our growth accelerated dramatically. That transformational experience is what we’re providing customers with Grow—we’re helping them unlock their potential by delivering the easiest, most powerful tool to access and use data, so teams can unite around the metrics that matter most. This brand book outlines guiding principles that inform the way we tell our story visually, verbally, and behaviorally. We want our customers to rely on Grow to help them win, and we accomplish that by consistently delivering a Grow brand experience that is worthy of recommendation. We’re committed to building a great company and a great brand at Grow. Thank you for the meaningful contributions you’re making to our brand and to our business. - Rob

2


Be the Brand


Our brand is more than just an idea on paper. It’s more than our logo, our tagline, or our swag. Our brand is the embodiment of our company. The Grow brand encompasses all of the experiences and expectations people associate with us. These experiences start inside the company, with all of us. This book will help you understand our brand, what it stands for, and how to express it, so you can be an eective ambassador of the Grow brand.

4


Focus on the Why


People don’t buy what we do. They buy why we do it. So why do we design and deliver simple but powerful dashboards? Because we believe companies have the power to transform the way they do business—from how they lead their teams to how they make day-to-day decisions—by focusing on the right metrics. People who use Grow want to unleash their potential.

Why

We believe companies have the power to transform the

How

We design powerful, easy-to-use software, and teach

What

way they do business by focusing on the right metrics.

users how to get the most out of their data.

Our business intelligence dashboards provide customers the easiest way to unify their data and get customized business insights.

6


Core Values


The Grow core values underlie our work, how we interact with each other, and which strategies we employ to fulfill our mission. They are the practices we use (or should be using) every day in everything we do.

8


Catch the Ferry Catch the ferry means we’re scrappy, resourceful, and do more with less—it’s part of our DNA. During Grow’s product-market fit (a.k.a. broke) phase, Rob, Jake Young, and Jason had a trade show in Seattle. With limited revenue and few clients, they loaded the huge trade show box in the back of Rob’s truck and drove the whole way. After fourteen hours on the road, they arrived in town to find nearly every nearby hotel completely booked. The best option left was a hotel located an hour away … by ferry. It was rough, but they got up at 4 a.m. in order to catch the ferry to make it to the conference on time.


Wash the Windows Wash the windows means there is no “not my job�; when we recognize a need, we take initiative to take care of it. In 2016, a rogue sprinkler head blighted our mountain view with hard water stains. After overhearing complaints about the dirty windows, Linda ran home during lunch to get supplies and then went to work until the windows were absolutely pristine. No one asked her to do it. She just saw what needed to be done and did it.

10


Solve the Problem Solve the problem means we exist to serve and solve problems for our customers— even if those problems aren’t precisely in our job descriptions. One of our customers sent Ryan Voorhis an email late at night asking for help with his kid’s homework assignment: Ryan, My son is doing a science project and since he is in sixth grade, he is just doing the color comparison of an acidic solution when a base is added. But I am unable to determine how to graph it. Can you please provide your expertise? Sorry to trouble you, but I am stumped how to plot it when we actually did not measure the pH value of the water. Arun Sekaran, PMP Millenium Medical Corp. Chief Executive Officer

Ryan pulled out his computer, asked some questions, did some research, and responded with chart examples and an explanation of how they worked, even though it was late and Grow is not a homework helpline. But we are professional problem solvers who care about our customers, so he did it anyways.


Make the Offer Make the offer means we believe in taking action, not “analysis paralysis”— done trumps perfect every time. We have confidence that things will work out, and we know how to stay flexible. We were down to two final candidates: Both were phenomenal and had unique strengths. It was a decision we discussed for days. Finally, Alan said, “Here’s my advice: Just make the offer.” Meaning, it doesn’t matter. Just start moving and the right decision will make itself known. (And by the way, our offer to Candidate A was turned down. But it was okay, because we already had equally outstanding Candidate B as well. See? The right decision revealed itself.)

12


Brand Pillars & Voice


“When you write like everyone else, you’re saying, ‘Our products are like everyone else’s.’” – Jason Fried

Our brand voice is our personality. It’s the words, phrases, and characteristics unique to our brand that set us apart. Grow’s voice and tone permeate all interactions between our audience and brand—for better or worse. As such, a consistent Grow voice is essential. The following principles and guidelines will help your communications stay in line with the Grow brand identity.

14


Authentic & Reliable We are about people, not pretense. We are warm, relatable, and human as we interact with our audience. We empathize with their problems, and we seek to earn and retain their trust. Supporting Characteristics: Warm, Relatable, Empathetic, Trustworthy, Respectful


HOW TO: Be Friendly, Not Best Friends Relationships take time to develop; speak to your audience with authentic warmth, not false intimacy. Be human—after all, you’re communicating with other humans. Demonstrate that you care. Speak Their Language Know what motivates your audience, and what perspective or background knowledge they bring to the table. Take cues from them and meet them where they are. Communicate clearly and warmly, so your audience feels guided, supported, and confident. Be Consistent Consistency is key to a cohesive brand identity because it creates a seamless journey from marketing to sales to product use, which fosters trust and good vibes with our audiences. Be Fresh, Not Hipster-Fresh Our voice is fresh but grounded, and never too serious or too hip. Or, borrowing the words of OpenTable, “Speak from the perspective of being a modern company with a long-standing commitment to an industry it has deep knowledge about.”

16


Constructive & Creative We’re builders who want to help our audience succeed. Our team possesses a wealth of knowledge and expertise that we are eager to use and share. Supporting Characteristics: Useful, Smart, Accurate, Expert, Generous, Builders, Innovators, Problem Solvers


HOW TO: Seek First to Understand First, understand the specific needs, questions, or concerns of your audience. Tailor your words to them. Then to Be Understood Above all, strive for clarity. Use language that is simple yet smart, clear, and conversational. Use technical language only where necessary and appropriate. Avoid being indirect, vague, or verbose. Be Generous and Eager to Help Consciously seek to make every interaction the best it can be. Anticipate needs before they arise, and be generous with what you know. Teach Them to Fish Don’t patronize or coddle. Instead, empower our audience with the knowledge they need to do things on their own. When you do take the reins, explain your processes and invite questions so they can learn from you.

18


Enthusiastic & Dedicated We passionately believe in the pursuit of potential. We are confident, encouraging, and committed, without taking ourselves too seriously. Supporting Characteristics: Confident, Passionate, Committed, Encouraging, Believers, Engaging, Interesting, Upbeat


HOW TO: Be Positive Focus on what is possible with Grow—emphasize the benefit for the customer as much as possible. Don’t be a threatening harbinger of doom and gloom. With customers, always try to frame things in the affirmative. Be Engaging Assuming that your content is already both clear and concise, make it interesting. Use active voice, rather than passive. Have a smart sense of humor, but always take context into consideration. Make the Customer the Hero Don’t just drily list features—showcase how they benefit and empower the customer. Teach and encourage them, so they have the opportunity to shine. Be Mindful of the Medium Always consider the platform for each piece of content, its strengths and weaknesses. Ensure that your message is appropriate for the situation, particularly where humor is concerned.

20


Visual Identity


Purpose of the Guide This guide is for any person creating written or visual content in behalf of Grow, to help our team present a cohesive and consistent brand identity to our audience, and thereby foster trust and good vibes.

22


Typography


Typography is a key component in communicating the Grow brand and maintaining a consistent brand identity across platforms and touchpoints. Our primary typeface is Gotham, a strong, contemporary font that evokes Grow’s forward-thinking approach to solving problems, and dedication to simplicity. We use Gotham Light, Book, and Medium weights. Light is our standard weight, used for headers, body copy, etc. Book weight is used for links and bold emphasis, while Medium weight provides an additional level of emphasis, if needed.

24


Fonts Gotham Light

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Gotham Book

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Gotham Medium

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890


Hierarchy

Headline 1 Headline 2

Gotham Light, 44px, #141519 height: 2px, length: 100px, Surf to Tidal

Gotham Light, 32 px, #88898f

Description

Gotham Light, 18 px, #141519

Body

Gotham Light, 14 px, #141519

Link

Gotham Book, 18 px, #27b5e1

Button

Button

Gotham Book, 18 px, #27b5e1 5px radius, 2px border

Use the following equation to find the correct line height: [ font-size * 1.618 = line-height ]

26


Headline 1 Description ipsum dolor sit amet consectetur adism. Aenean commodo ex a quam sagittis at. Button


Headline 2 Body lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit neque neque. Praesent eu ornare erat. Integer ex arcu, iaculis non massa non, tempus porttitor purus. Fusce ac molestie felis. Nunc et nibh facilisis, semper nunc vitae, sagittis odio. Maecenas aliquam, lectus quis tempor placerat, est sapien aliquet leo. Donec eleifend lobortis sollicitudin. Donec ut tortor auctor, cursus sem at, dapibus dui. Etiam maximus imperdiet quam non eleifend. Nunc eu massa tempor, fermentum velit ac, varius odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

28


Color


Tidal

Surf

PANTONE+ / 638 U RGB / 39 181 225 CMYK / 69 7 4 0 HEX / 27B5E1

RGB / 0 137 239 CMYK / 77 41 0 0 HEX / 0089E5

PANTONE+ / 7479 U* RGB / 40 235 119 CMYK / 62 0 78 0

RGB / 31 170 100 CMYK / 79 6 83 0

HEX / 28EB77

HEX / 1FAA64

Slate

PANTONE+ / 5395 U RGB / 65 67 77 CMYK / 72 65 51 39 HEX / 41434D

RGB / 20 21 25 CMYK / 76 69 63 79 HEX / 141519

Nimbus

PANTONE P / 179-1 U RGB / 241 242 242 CMYK / 4 2 3 0 HEX / F9F9F9

RGB / 136 137 143 CMYK / 49 41 36 3 HEX / 88898F

30


Color Palette The color palette is fresh, bold, and clean. When using color, Tidal should be used most of the time, with Surf used only sparingly. They are supported by a neutral foundation of grays and white. Each color in the palette is paired with a darker shade to provide

Neutral

Neutral

Secondary

Primary

options for monochromatic use.


Gradient This gradient can be used in multiple forms of media but is inherently used with the Grow logomark. Surf must always reside at the top of the gradient.

Angle to be -75° or 15° to the left of the top point

32


Logo


The Grow logo portrays simplicity and harmony. It is stable and rigid to convey confidence, yet remains organic and fluid to connect the concept of growth through a symbolic rendition of a graph, a core aspect of Grow. It is pure, spontaneous, and forward-thinking, allowing itself to be utilized and easily identified. It is clean, memorable, and deep with meaning. The logo is an invaluable asset of the company and its visual identity. It is a guarantee of quality that unites all of our communications. Please respect the logo, treat it properly, and follow the guidelines that have been thoughtfully created.

34


Horizontal lockup

Vertical lockup

Icon

Wordmark

When choosing an icon and wordmark style, consider the background, and select the option that is the most readable. Primarily, use the gradient icon along with the dark or light wordmark that provides the most contrast with the background. An exception should be made, however, for solid white backgrounds: In this case, use the dark icon and wordmark for a bolder look. If every style of the logo is diďŹƒcult to read, reconsider your background image, or add an overlay to increase contrast.


Dark icon and wordmark Use on white or busy light background

Gradient icon with light wordmark Use on dark, simple background

Gradient icon with dark wordmark Use on light, simple background

Light icon and wordmark Use on dark background

36


Logo Placement When choosing which logo orientation to use, always consider space constraints, page position, and prominence. To the extent possible, use the orientation that best fills the available space while retaining the integrity of the logo. Always use the vertical lockup for square spaces.

For example, we use the horizontal lockup on the navigation bar of grow.com because it allows the logo to remain prominent within the height constraints of the bar.

For headers or footers, use the vertical lockup, unless height is constrained below 40 px, in which case the horizontal lockup can be used. If width is also constrained below 40 px, use the icon alone, with a minimum width of 16px. (Total minimum width including whitespace = 32px.) Avoid placing the logo in the bottom left corner of a page. When the logo is overlaid on images, or on a slide presentation, the vertical lockup should be used in the bottom right corner, with a minimum width of 100 px. Remember to take required whitespace into account. When the logo is centered in the middle of a space, use the vertical lockup. Never place text blocks to the left of the logo, regardless of logo orientation.


38


Violations Do not change the Grow logo. Presentation of the logo deserves special attention. Here are examples of improper uses of the Grow logo.

GROW Incorrect gradient

Stroke

Font change

Rotated

Skewed

Stretched

Icon position change

Dropshadow

Unapproved color


Spacing x When combining the logo with other graphic elements, give it room to breathe. The empty space around the logo should be at least half the width of the icon. To maintain the visual impact and integrity of the logo, minimum width is 16 pixels.

16px

x x

40


Imagery


Photos Photographs should feel unstaged and lively, with a style that is slightly artistic while maintaining the clean, fresh aesthetic that encompasses all elements of the Grow brand. The imagery we use falls into three primary categories: Product, Lifestyle, and Landscape. Product images are very minimal, drawing the focus to the Grow app. The styling is sleek and modern. Always use a white background when the product is shown alone. Light dashboards are preferred, although dark dashboards can be used sparingly. Lifestyle images depict candid interactions with natural lighting. The backgrounds are minimalistic, never busy. People are often shown using technology. Landscape images are often used for backgrounds, and typically feature mountains, water, beaches, and greenery. These images are subtly compelling and adventuresome, with understated (but never gloomy) colors. Outdoor lifestyle photos featuring people may be used, and should spark a sense of aspiration.

42


Product Photo


Product Photo

44


Why this image fails:

Do this instead:

Background is plain and dark

Choose light backgrounds to maintain the clean, inviting feel of Grow Use dark dashboards sparingly


Why this image fails:

Do this instead:

This image uses an old dashboard

Always stay up-to-date with the current design of Grow

46


Lifestyle Photo


Lifestyle Photo

48


Why this image fails:

Do this instead:

Subjects are too posed, not candid

Capture subjects in media res (“in the midst of things”)—interacting or conversing with one another

Gestures and expressions are unnatural (and cheesy)


Why this image fails:

Do this instead:

Too posed and unnatural, especially the hands

Pick naturally posed and interacting subjects (how often do you stare and smile at your computer?)

Subject is overly styled—overdone hair, makeup, clothing

Select subjects that look like normal people, not styled stock models 50


Landscape Photo


Landscape Photo

52


Why this image fails:

Do this instead:

Silly poses just aren’t our vibe

Use active outdoors photos, but ensure the image’s focus is appropriate

Draws too much attention to the subject’s shirtlessness

Avoid funny pictures—if you’re unsure, consult marketing


Why this image fails:

Do this instead:

Image is too busy and lacks organic lines

Avoid cityscapes Choose images of nature or people under natural light 54


Banners & Backgrounds When using images for banners or backgrounds, blur the image if it’s too sharp or distracting, then overlay with #B2B2B2 at 40%-70% opacity.

Overlay: #B2B2B2 40%-70% opacity

When you need a simple banner, use the gradient (see page 32) with appropriate colors and at the correct angle. Add a white, vertical logo to add branding to the banner.


Built for your entire organization, customized for you

56


Ads Show the product as much as possible when creating ads. Keep the advertisement clean and simple while displaying our product’s features.

Your business command center. 2 Weeks

Start a Trial

Your business command center.

Done for you


58


Brand Apparel


60


Grow Brand Guide