Logos

The Help Scout logo is the most immediate representation of our company, our culture, and our brand. These guidelines describe how to use it consistently in its proper, approved forms.

The logo

Use the full logo whenever possible.

Help Scout logo
2-color, light background
Help Scout logo
White, dark background

The mark

The Help Scout mark should only be used in cases where a company icon or avatar is required (traditionally constrained to a perfect square or circle). In all other cases, use the logo.

Square icon

Help Scout logo
Help Scout logo
Help Scout logo
Help Scout logo

Circle icon

Reduce the size of the mark by 15% when placing it within a circle.

Help Scout logo
Help Scout logo
Help Scout logo
Help Scout logo

Clear space

The logo must always be surrounded by open space, free from any other element. The minimum spacing is equivalent to the height of the capital “H” in Help Scout on all four sides.

Help Scout logo

Color

The colors in our palette communicate the reliability of our product and the authenticity of our team’s values. They enhance the user experience, from the way customers engage with our product to the connections we forge through our content.

Primary colors

Blue
500
#1292EE
100
#F3FBFF
200
#D6EDFF
300
#A0D4FF
400
#57B0FB
500
#1292EE
600
#0077CC
700
#005CA4
800
#034077
900
#002651
Charcoal
500
#405261
200
#93A1B0
300
#748494
400
#556575
500
#405261
600
#314351
700
#253642
800
#1d2b36
Ash
500
#D5DCE1
200
#F9FAFA
300
#F1F3F5
400
#E5E9EC
500
#D5DCE1
600
#C5CED6
700
#B7C2CC
800
#A5B2BD

Secondary colors

Gold
500
#FFC555
100
#FFF9EF
200
#FFF2D7
300
#FFE7B8
400
#FDD88E
500
#FFC555
600
#FAB347
700
#E89635
800
#CE7129
900
#B24319
Green
500
#56C288
100
#F5FFF9
200
#E3fBEE
300
#C2F0D7
400
#87DBAE
500
#56C288
600
#39AC6E
700
#268C55
800
#106236
900
#003C1C
Pink
500
#FFB3C3
100
#FFF9FB
200
#FFEEF1
300
#FFE1E7
400
#FFCCD7
500
#FFB3C3
600
#FD9AAE
700
#FF819A
800
#FC5D7D
900
#F23459
Lavender
500
#9FA6FF
100
#F9F9FF
200
#EBECFF
300
#D9DCFD
400
#B9BEFF
500
#9FA6FF
600
#818AEC
700
#6269C5
800
#404996
900
#232A5C
Indigo
500
#527CEB
100
#F2F6FF
200
#DFE7FF
300
#B2C8FB
400
#79A1F8
500
#527CEB
600
#3B64D2
700
#2549A8
800
#16337F
900
#071E57
Whale Tail
500
#8AABF1
100
#F3F7FF
200
#E5EDFE
300
#D0DEFD
400
#AFC7F9
500
#8AABF1
600
#7296E1
700
#5174BB
800
#304F8B
900
#142F5E

Accessibility

As a customer-centric brand, we strive to make color decisions that are friendly toward all levels of vision. Our standard is AA, meaning the text color and background color have a contrast ratio of at least 4.5.

There’s a better way to talk to your customers.

Charcoal 800 Headline - AAA 14.47:1
Learn More
White type on Indigo 600 - AA 5.33:1

Exceptions

In some cases, color helps us communicate more clearly. In the case of status notifications and notes, we make accessibility exceptions to ensure these important messages are visually distinct.

Our note interface is colored yellow to make it visually apparent that the message will be visible to teammates only, and not to customers.

Typography

Help Scout's primary typeface is Graphik. It lets other visual elements do the talking, but its friendly x-height is easy on the eyes. The typeface is used at various weights, primarily Regular (400) and Medium (500). To ensure optimum legibility, it’s best to avoid Light (300) or lighter weights.

Headings

All headlines are set in Graphic Medium (500) and have letter-spacing set to -.35px.

H1

Icon Mobile

36px

Icon Desktop

46px

There’s a better way to talk to your customers.

H2

Icon Mobile

24px

Icon Desktop

30px

There’s a better way to talk to your customers.

H3

18px

There’s a better way to talk to your customers.

Content

Paragraphs are set in Graphik Regular (400).

Large

Icon Mobile

18px

Icon Desktop

20px

Help Scout is designed with your customers in mind. Provide email and live chat with a personal touch, and deliver help content right where your customers need it, all in one place, all for one low price.

Medium

18px

Help Scout is designed with your customers in mind. Provide email and live chat with a personal touch, and deliver help content right where your customers need it, all in one place, all for one low price.

Small

15px

Help Scout is designed with your customers in mind. Provide email and live chat with a personal touch, and deliver help content right where your customers need it, all in one place, all for one low price.

Illustration

We use illustration to center our brand around storytelling. Our illustrations demonstrate the benefits we want to bring to people’s lives by using our product.

Where we use illustration

Our illustration voice is characterized by delight, humanity, and sophistication. Woven into all of our brand illustration is an overarching narrative of helpfulness — accomplishing something by working together with others, or through empowering oneself with the right tools.

On the marketing site

Illustrations tell a cohesive story that flows through the design of a single page. These narratives center around themes of helpfulness, collaboration, and progression.

Within the product

Spot illustrations are used sparingly in the product to clarify messaging, or to delight customers with visual “Easter eggs.”

To express our brand voice

Across other applications, we use illustration to express our brand to ourselves and to the world. Illustrations convey the delight, sophistication, and humanity that make our brand voice uniquely our own.

The style

Help Scout’s illustration style is comprised of loose, expressive shapes combined with simplified, flattened perspective and textured brushes.

Chalk brush

Much of the warmth and whimsy in illustrations comes from details like imperfect painted edges. We use a chalk brush with speckled texture for strokes and fills, and use the eraser to create raw, textured edges.

Washy brush

Our washy brush is used for texture and layering within solid shapes. We use this brush at varying levels of flow to adjust the wetness or dryness of the stroke. Different colors from the palette can be layered to create a sense of depth and color play.

Color palette

The main palette is comprised of subtle pastels combined with dark blue accent lines and loose brush textures that add a bright and whimsical flair. Each individual illustration uses a maximum of two colors from the main palette, supported by other tones from the secondary palette.

Building an illustration

Illustration narratives center around themes of helpfulness, collaboration, and progression. In compositions, characters appear in lush physical environments that reinforce the narrative at play.

Characters

The characters in the Help Scout world represent a range of ages, genders, races, body types, and lifestyles. Our characters have expressive features, and they’re unified by some basic drawing principles.

Eyes

Eyes are comprised of a simple dot for the pupil, and an upper eye-line to establish the direction in which the character is looking. Hair styles should reference straight, wavy, and curly hair types. Small stray tendrils of hair convey a sense of candidness and direction.

Facial features are unique to each character. Facial structures vary among angular, round, blocky, long, short, and wide shapes. Nose shapes are specific to each character, varying from round to pointed, and from small to large.

Dimension and flatness

This style is simultaneously simplified and dimensional. Objects in our illustrations are not absolutely flat, but don't go so far as to read as fully dimensional. Silhouettes and shapes are legible at a glance, with shadows filling in a bit of detail.

Environments

Lush backgrounds pull from the “backgrounds” palette as well as the two colors used in the main elements of the illustration, to avoid drawing weight away from the main foreground characters. When placing a character in their environment, their feet are placed on different angles as opposed to standing flat. This conveys a sense of forward-moving motion and depth to the scene.

Do's and don'ts

  • Make characters specific, rather than generic – think about their clothing, facial features, body types, and so on.
  • When scaling a larger illustration down to a spot, pare down the number of outlined strokes and small details.
  • At smaller scales, add extra padding between shapes to keep compositions feeling airy and balanced.
  • Don’t use more than three primary palette colors in an illustration unless it’s a special exception.
  • Don't pile on excess texture and three-dimensional shadows. Be careful to maintain the overall “flat” style.

Graphic Elements

Following the lead of our illustration style, graphic elements are used to frame and support product visuals, inject brand voice, and create continuity throughout all of our brand's touchpoints.

On the marketing site

Brush swashes help frame and set the stage for product visuals. The subtle texture helps bridge the worlds of brand illustration and product UI.

Within the product

Graphic accents breathe life into our software. You can find colorful brush strokes in photoless avatars and throughout our checkout flow.

Keeping us connected

Shapes and linework help keep the right information front and center on our company retreat to Lisbon, Portugal.

An extension of our brand voice

Graphic signatures find their way into email headers, blog callouts, and display ads. These keep our brand connected and are tailored to the message at hand.