OVERVIEW

What and who is this for?

Our mission on the creative team is to amplify Yelp’s mission far and wide and enable fandom for all things local. One of the best ways we know how to do this is with consistent branding.

So welcome to Yelp’s Brand Guidelines!

These exist to help any Yelp employee or partner agency seamlessly understand and be able to replicate Yelp’s brand.

How to use these guidelines?

Whether you need to check up on the brand colors or want to dig deep into brand voice, you’re in the right place. If you’re new or haven’t checked these out in a while, go ahead and read through the details. If you’re familiar but want to spot check something, cmd+F is your best friend.

Our mission

Our mission is to connect people to great local businesses. Yelp is a community of millions dedicated to sharing first-hand experiences to help others live a better day.

People come to Yelp to find businesses they can trust—from restaurants and bars, to boutiques, salons, dentists, mechanics, plumbers, and more.

Businesses come to Yelp to build their online presence and get found when customers are searching for them.

This mission directly affects who we are as a brand, so keep it in the back of your mind.

Yelp’s company principles

We have five principles that guide how we work together as a company. These principles are as old as Yelp, so naturally they helped to inform our brand guidelines.

1. Be tenacious

Battle smart and fight 'til the end. Live for the underdog moments. Turn mistakes into opportunities to learn.

2. Authenticity

Tell the truth. Be straightforward. Over-communicate. No need to spin things.

3. Protect the source

Community and consumers come first. If we don’t maintain consumer trust, we won’t have anything to offer local businesses.

4. Be unboring

Never settle for standard. Creativity over conformity. Be your remarkable self.

5. Play well with others

Treat others with respect. Value diversity in viewpoints. Bring a positive attitude to the table.

BRAND MARK

Our brand mark is the star of the show and the face of our brand. Follow these guidelines to ensure it’s always shining in the right light.

Primary brand mark

The Yelp brand mark is made up of our name and a shape that we lovingly call the burst. It’s an homage to the symbol that pops up over the head of a cartoon character during a moment of discovery. 

This unique mark captures the surge of energy a person feels after discovering a great local business or sharing their latest adventure with the world.

Download  ↓
Light Backgrounds

On light backgrounds use our full color brand mark.

Download  ↓
Dark Backgrounds

The ideal usage of our logo is full color, but in other cases use this all-white version on darker backgrounds.

Download  ↓
Safe Space

The e in Yelp should be used as a guide to establish clear space. Always maintain this minimum clear space, even when proportionally scaling the logo.

Brand Mark Scaling

To ensure legibility we adhere to a 8px scale system with a minimum width on digital screens of 32px. Why 8, you ask? Read on, friend. 

Burst

Our burst can be used by itself in instances where the standard Yelp logo doesn’t work because of size or format restrictions.

Please don't alter or add embellishments to the burst, that’ll only hurt it’s feelings.

The burst should be Yelp Red or white only. The burst can be placed on any color or photo, as long as it does what it was was born to do—stand out.

Download  ↓
Sub brand logos

Our primary brand mark is the building block for our other sub brands. All sub-brand logos should maintain the original horizontal orientation for all digital and print assets.

Download  ↓
No-no's

Our mark was designed to always look its best. Here are some things it wasn’t designed for.

1. Don't stretch or condense
2. Don't separate or remove elements
3. Don't rotate or flip
4. Don't use another typeface
5. Don't alter the color or add effects
6. Don't rearrange elements 
7.Don’t use in the possessive case, either with the logo or the word.
8. Don’t use the logo in a sentence. You can use the word Yelp in a headline in plaintext and include the logo elsewhere.

color

Color palette

Colors bring life to our brand. And while using the wrong colors to represent our brand isn’t life or death, it is pretty important.

Primary colors

Our primary brand color is Yelp Red. It’s core to our visual identity and should be used to highlight or add emphasis.

As a complement to Yelp Red we use Black Base, predominantly used for text. To help add range and flexibility in our color palette we have tints of our primary colors. 

Red Base
#F43939
Red Tint 1
#F66161
Red Tint 2
#F88888
Red Tint 3
#F7BFBF
Red Tint 4
#FCE5E5
Black Base
‍#2D2E2F
Black Tint 1
‍#6E7072
Black Tint 2
#9C9DA1
Black Tint 3
#C0C1C2
Black Tint 4
#D3D4D5
Black Tint 5
#E4E5E6
Black Tint 6
#F5F5F5
Secondary and tertiary colors

Our secondary and tertiary palettes bring in pops of color that complement our primary colors. This also gives us visual flexibility in how we show up as a brand. Make sure to use only a few of these at a time. Simplicity is key.

Tints of our secondary and tertiary colors also give our brand more room for expression beyond our primary colors.

Teal Base
#00838F
Teal Tint 1
#66B5BC
Teal Tint 2
#99CDD2
Teal Tint 3
#CCE6E9
Blue Dark
#0070CC
Blue Tint 1
#1F8EFF
Blue Tint 2
#9FDAFC
Blue Tint 3
#EBF6FF
Green Base
#05A882
Green Tint 1
#69CBB4
Green Tint 2
#9BDCCD
Green Tint 3
#CDEEE6
Orange Base
#FF7E42
Orange Tint
#FFB28E
Light Orange Base
#FFA448
Light Orange Tint
#FFC891
Yellow Base
#FFCB4B
Yellow Tint
#FFE093
Accessibility

Our brand should always feel accessible to anyone. With that in mind, color choices should always adhere to the latest WCAG standards. 

TYPOGRAPHY

Words matter. And so does how we show them. Follow these typographic guidelines to ensure our words show up nice and spiffy. 

Primary typefaces

Poppins is used primarily for headline copy. It’s approachable and friendly.

Open Sans is used primarily for supporting or body copy. It’s versatile, legible and very web-friendly.

H1
Poppins Bold
H2
Poppins Bold
SH1
Poppins Bold
Download  ↓
H3
Open Sans Bold
SH2
Open Sans Bold
B1
Open Sans Semi Bold
B2
Open Sans Regular
Download  ↓
Secondary typefaces

When bolder messaging or tone is called for, we use the Druk typeface. It’s heavy, loud, and has enough weights for a wide variety of use cases.

H1
Druk Text Bold
H1
DRUK CONDENSED SUPER
Download  ↓

When we want to show our quirkier side, we use the Gooper typeface. It’s fun, curvy, and bold. 

H1
Gooper Bold
Download  ↓
Type scale

To ensure beautiful hierarchy and organization of type, we adhere to an eight pixel type scale system. Adhering to this system allows for nice and tidy steps between headlines, subheadlines, and body copy.

Font Size / Line Space (= font size + fontsize/8)

Header 01 (56px / 63px)
Header 02 (48px / 54px)
Header 03 (40px / 45px)
Sub Header 01 (32px / 36px)
Sub Header 02 (24px / 27px)
Body (16px / 18px)

Exceptions: Captions / Legal (12px / 15px)

Tracking: should be at least .12x the font size but feel free to adjust for optics. Just ensure we’re always meeting WCAG standards.
Accessibility

Remember that accessibility note on color? Same for type-sizing and legibility—follow the latest WCAG standards.

Line height (leading) to at least 1.5x the font size;
Spacing following paragraphs to at least 2x the font size;
Letter spacing (tracking) to at least 0.12x the font size;
Word spacing to at least 0.16x times the font size.
Source

ILLUSTRATION

Our illustrations bring personality to our brand—they should show our human side. And that’s good, because we’re a brand designed for human use. Sorry robots.

Principles

• Elevate our users, not ourselves
• Promote diversity and inclusion
• Be human and personable

• Emphasize our community over our product
• Be aspirational and optimistic
• Integrate clear hierarchy and thoughtful layout

A few tips

• Shoot to include an element of whimsy and exaggerated proportions
• Show subtle depth with background elements
• Lean into organic and soft edges (exception: buildings)
• Try to incorporate three levels of depth - foreground, middle ground, and background
• Stick to 1.5px mono-stroke weights


Examples
Use of color

• Yelp Red used to add emphasis on focal point of illustration
• Background elements are less detailed
• Depth is created with color tints

Download Kit ↓
Iconography

Our iconography is created at two sizes: 24x24, 40x40. The detail of the icons increases with its size. Keep the sizing of the icons consistent and uniform. 

24x24
Stroke color: #2B273C
Stroke weight: 2pt

40x40
Stroke color: #2B273C
Stroke weight: 2pt
Red accent fill: #F43939
Gray background: #EEEEEF

24x24
40x40
More guidelines

PHOTOGRAPHY

Photography is another opportunity to humanize our brand and show the real local businesses and customers that make us, us.

Principles

• The photos should feel authentic—avoid images that are overly posed or unnaturally lit
• People in photos should represent our diverse audience
• Composition should be kept simple with a singular focal point or subject

Subjects

Our brand should feel as human as the humans that come to us to promote their business or find a new taco spot. So, the subject of our photography should primarily be… you guessed it, humans. Real, live humans too. No staging, no fake interactions or overly posed moments. Just humans going about their lives connecting with their favorite local businesses.

Lighting

Lighting should always feel natural and bright. Nothing too moody, underexposed, or artificial. Stock photography lighting can often feel stiff, sterile, and fake. So when selecting stock photography be mindful of how the lighting looks.

Composition

When approaching composition, think about simplicity. Never put too many objects in a frame and use the rule of thirds to place the subject of your photograph. Use natural framing and symmetry to help tell the story in your photograph.

Examples

COPYWRITING

What is a brand?

It’s not a clever line on a billboard. It’s not a sassy tweet. It’s the way we make our customers feel. Voice, tone, style—all this stuff creates consistency. Which words we use, where we use them, and how we say them matter to people, so it should matter to us.  

Consistency builds familiarity, which builds trust, which leads to brand love. This guide is here to help us build that familiarity, trust, and love*. 

*Yes, love. The warm, snuggly, comforting type.

Principles of voice

When we speak as Yelp, we are always:
• Empathetic
• Helpful
• Clear
• Human

And, when the timing’s right, we make people’s day.

Be empathetic

When we talk as Yelp, we put ourselves in the hearts and minds of our audience. The more we know about people, the better we are at talking to them. Who are they? What are their hopes and dreams? What stresses them out the most? These are some of the things we ask before we write.

Be helpful

Yelp is here to help businesses be the best they can be and connect consumers to those great local businesses. We’re here to solve problems, not sell stuff. Every time we talk, we should be thoughtful and informative. If what we want to say isn’t helpful or adding value, we shouldn’t say it.

Be clear

Lots of different people use Yelp, so we use simple language that everyone can understand. We don’t use slang or jargon, and we don’t use big words when small ones will do. People can’t trust us if they don’t understand us, so we take readability very seriously.

Readability Test →
Be human

We want to build lasting relationships with people, so we need to be likable. We write the way we talk, which means we aren’t afraid to bend the rules of grammar if it helps us be more conversational. Our words should sound natural, like a conversation between friends. No offense to robots, but people generally prefer speaking with other people.

Make someone's day

We always look for opportunities to make people smile. Sometimes that means using a little humor, but more often it means getting straight to the point with the right information at the perfect time. We do whatever it takes to make whoever we’re with have a great experience.

Tone

Remember that note about empathy? Read it again, because we need lots of empathy to figure out tone. Our voice is always Yelp, but our tone adjusts depending on who we’re talking to and what the situation is. 

We exist so people can be enthusiastic about their favorite burrito or the store that sells good socks. So yes, we should be enthusiastic too. 

But we also exist to help multi-loc execs streamline their operations. And we also exist to help local businesses—who are generally busy and stressed—find new customers. And we also exist so people can hire a good plumber when their sink explodes. 

So respect the audience’s state of mind when talking to them. We’re here to make things feel better, not worse.

Style

Style matters. It carries voice, indicates tone, and adds consistency to brand. For a complete overview of style considerations, please refer to the Style Guide. Otherwise, here are some top tips.

Sentence case

We use sentence case for everything—headlines and supporting copy. This is a deliberate choice to meet our principle of “be human”. (Title case is harder to read, gives a sense of gravitas, and is harder for anyone to execute.) 

This guideline goes across marketing and product. The only exception is content and performance marketing, where title case serves an SEO function.

Oxford comma

We use the Oxford—or serial—comma, always. This means no matter what, we’ll never be confusing, which ladders up to our “be clear” principle of voice. This goes for all channels.

Things we don’t like: Clichés

Clichés have been repeated millions of times. Why would we copy someone else’s ideas when we can just be ourselves? Also, clichés can be confusing. Let’s not make people think more than they have to.

Things we don’t like: Puns

We’re not saying they’re totally banned, but…. When puns are executed poorly or heavily, writing can become stale and predictable, much like clichés. Puns also feel written, which can go against our “be human” principle. They can also be hard work for the audience—if a play on words has multiple meanings, that means the reader has to unpack it many times. So good puns in the right context are OK, but make sure they work. Here’s some advice:

• Don’t overuse them
• Don’t force them
• Don’t make them confusing
• Do consider adding tongue-in-cheek self awareness
     • e.g. Seafood? Eat it. (Get it? OK we’ll stop.)

Offensive Content

This should go without saying: racism, bigotry, sexism, misogyny, and prejudice of any kind have no place at Yelp. Everything we say should be inclusive. (For more on inclusivity, see pronouns.)

Swearing

We are humans, but we’re classy ones. At least, when we’re at our day jobs. “Damn” is fine, but anything stronger is not! When writing as Yelp, keep it PG. That goes for stand-in words too, like “motherclucker.”

Sexual Innuendo

Like we said, we’re classy. Sex jokes might be amusing to some people, but they’re just not our style. We don’t need sex to be cool or funny. Same goes for drugs.

Slang & trendy language

Yelp is for everyone, and everyone doesn’t “get” slang. So, we don’t use it. While fad words like YOLO and swag go out of style, Yelp stays classic.

“Yelp” merged into words

Yelp stands alone! As well as cannibalizing our brand, merging “Yelp” into other words can be confusing. It isn’t a very human way to work the brand into copy. Imagine “Nikestronomy” or “Lululemonliciousness” and you get the idea.

Writing about people

Yelp's voice is gender-neutral. As a progressive company, our communications should not suggest we make assumptions about the gender of our audience. Yelp is a product for people, built by people—it’s important that Yelp is respectful and inclusive in ways big and small. Here are a few tips to ensure your writing remains everyone-inclusive:

• When writing in the third person, use they as a gender-neutral pronoun.

• Don't refer to a group as guys or gals, regardless of the gender of the group.

• Don't refer to a group of women as girls or a singular woman as a girl, even if you are a woman writing about women.

• Use neutral nouns, e.g. server instead of waitress or waiter and driverless instead of unmanned.

• Avoid modifying nouns to establish gender: Comedian and not comedienne, host and not hostess. Actor is preferable to actress, per the Screen Actors Guild.

• There's no need to clarify gender for professions, so avoid constructions like male nurse or female doctor. 
When writing about a specific person, use whichever pronouns they prefer. If you're uncertain, don't use pronouns.

Writing for Product

We have a whole separate style guide dedicated to UX writing (web and app) to check out. Whether you’re looking for general best practice or specific style questions—like, “how do we format date ranges?”—the copy Cookbook has everything you need.

Motion

Motion can be, well, moving. So how we incorporate it into our brand is critical to how we resonate with our customers. 

Principles

• Our motion is delightful and joy inducing
• Our motion is never heavy-handed or self-gratuitous
• We prefer to keep things simple, subtle and helpful
• Easing is our friend. No. Hard. Stops. Please.
• We shouldn’t distract or detract with our motion
• It should always feel complementary to our narrative
• Should incorporate tenets of good motion design

Motion elements

Timing: A “grid of time” creates consistent rhythm. Animation is defined as multiples of a base grid.

Elevation: Utilizing the Z-axis to support spatial organization aids in creating a visual hierarchy we refer to as “atmosphere.”

Mass: Objects in the physical world have mass, thus they speed up from a standstill and slow down to a stop. When using easing:
use ease-in-out for moving point-to-point
use ease-out for entering elements
use ease-in for exiting elements
use linear for opacity or color changes

Motion types

Effects: Attributes are animated over time to create a vocabulary of effects.
Enter & Exit: The appearance or disappearance of an object on the screen.
Emphasis: Drawing attention to an object that is already on the screen.
Transitional: Informing the user that a context change is taking place.
Personality & Branding: Characteristics or sequences of engaging animation that create surprise and delight.

Examples

GRID SYSTEMS

Our brand will show up in thousands of formats (takes a bow), so we need a method to that madness. Welcome, grid systems. They help us scale our brand today, tomorrow and hopefully years down the line when we’re showing up in space. 

We use a 12 column, 8px grid system. Based on the format of our application the gutters and margins scale up and down by, you guessed it, 8pt. Why 8 you ask? Read on, friend.

1920x1080
Download  ↓
1080x1080
Download  ↓
1080x1920
Download  ↓
Examples