OVERVIEW

What is this?

These are the Yelp brand guidelines.

Who is this for?

Every time our brand shows up, it leaves an impression on the hearts and minds of the people who see it. No pressure. These guidelines make sure Yelp is always shining in the best light with consistent, on-brand, accessible, and best-in-class creative.

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 bring the Yelp brand to life in everything we do. We don’t just write pretty words and make pretty designs, we create with purpose. 

Our work is grounded in research, fueled by customer insights, and shaped by endless curiosity. By asking good questions, listening, and learning, we create work that moves hearts and minds, inspires meaningful action, and drives the business forward.

You’ll know us as hard workers, do-whatever-it-takes-ers, and fierce collaborators. When you work with us, your goals are our goals. And the things that keep you up at night, keep us awake too.

We are a group of creative folks that enables fandom inside and outside of Yelp. Doing our job right means turning customers into fans of local businesses, people into fans of Yelp, and along the way, you into fans of us.

Our values
Be smart investors

Make It Count
Be accountable for doing work that matters and right sizing effort / budget spend with business impact in mind. Your time is valuable…use it wisely.

Know your customer

Know Your Sh!t
Master the rules of your craft so you can break them. (You’ll need this to be unboring.) Know what you know, and know what you don’t know.

Listen. Ask. Listen again.
Be curious and seek to understand the world around you. Ask questions and listen. Get to know the people, the business, and the problems.

Do work that moves people

Bring Joy
Have a good time. Make people’s day. Enjoy the journey and the process. Make work not feel like work. Make ads not feel like ads.

Be Good
Be a good human. Earn trust daily by showing up, doing your part, and lending a hand. Assume the best, even when faced with the worst.

Advocate and educate always

Be Open
Be open and honest…feedback is a gift. Embrace change and new ideas. Be open to seeing things from a new perspective. And be open to being wrong. 

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.

Primary brand mark

We look our best when we show up in our full colors, so please use our primary mark whenever possible.

On dark backgrounds, we can use our full-white mark.

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  ↓
Secondary brand mark

Please try to use these as little as possible.

Black and white

For printed applications when color isn’t an option, use the black and white logo.One colorWhen using one-color versions of our logo, make sure backgrounds meet WCAG Guidelines. Use our primary red on a white background.

Download  ↓
One color

When using one-color versions of our logo, make sure backgrounds meet WCAG Guidelines. Use our primary red on a white background.

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.

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

The burst can also be used as a design embellishment.

Approved uses
• Shape Patterns
• Image Masks

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 Dark, mainly for text. To help add range and flexibility in our color palette, we have tints of our primary colors.

(★) Approved background colors

UI Dark Red
#E00707
Used for CTAs
Yelp Red
#FF1A1A


Used for accents, highlights, and emphasis
Red 400
#FA4D4D


Used for backgrounds
Red 100 (★)
#FFECEC


Used for backgrounds
Black Dark
‍#
Black 900
#2D2E2F
Black 600
#6B6D6F
Gray 300
#E3E3E3
White (★)
#FFFFFF
Secondary and tertiary colors

Our secondary palette bring in pops of color* that complement our primary colors. 

Make sure to use only a few of these at a time.

(★) Approved background colors

Simplicity is key.

*Sorry for saying “pops of color.”

Teal 400
#0399BF

Blue 400
#1F8EFF
Green 400
#02A16D
Orange 400
#EC6227
Teal 200 (★)
#B6EDF7

Blue 200 (★)
#D1E6FA
Green 200 (★)
#B5EFDB
Orange 200 (★)
#FFDDBF
Teal 100 (★)
#D5F6FE

Blue 100 (★)
#E6F3FC
Green 100 (★)
#DBF6EE
Orange 100 (★)
#FFEDDD
Ribbon 5 Stars
#FB433C

Ribbon 4 Stars
#FF643D
Ribbon 3 Stars
#FF8742
Ribbon 2 Stars
#FFAD48
Ribbon 1 Star
#FFCC4B

Color composition

Make sure we’re using the right amount of each color in every piece of creative. 


Accessibility

color choices should adhere to the latest WCAG Guidelines.

Keep in mind that the “eye test” for legibility and contrast isn’t enough. Everything must pass the Standard Contrast Ratio threshold.

For example, our White on Yelp Red doesn’t pass for body copy and CTA buttons.

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

Used for primary headlines or sub-headlinesUsed in CTA Buttons. Should be used on all email creative.

Open Sans is used for body copy. Should be used on all email creative.

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  ↓
When we want to make a statement

Druk Text Bold: Uppercase or Sentence case

• Used on marketing headlines only
• 24 characters on 2 lines max for uppercase
• 32 characters on 3 lines max for sentence case

When the above constraints can’t be met we should replace with Poppins Extra Bold

Druk Text Bold - Uppercase


Druk Text Bold - Lowercase


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

• Bright colors and lighting
• Styled, but not stiff or posed
• Real rather than modeled• Color

Subjects

Our brand should feel as human as the humans that come to us to find a new taco spot, or promote their business. 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. 

Color composition

When it comes to composition, keep it simple. 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. 

Adding Color Wherever possible, add accent pops of color from our palette.This can come in the form of backdrops, clothing, objects or props.

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
Lighthearted

We’re just trying to make life a little bit better, one incredible taco or extremely prompt locksmith at a time. So we always look on the bright side, and don’t take ourselves too seriously.

Copy has the right level of lightness
We try to make life a little better by bringing some joy to our words
We’re never intense, heavy, or moody


✓ We are: Bright, Upbeat, Optimistic
X We aren’t: Nonchalant, Uncaring, Distracting/Unfocused

Unboring

Life is too short to settle for boring, so we actively seek out and celebrate the unboring. Unboring isn’t even a real word by the way, but we chose it to show that it’s ok to break the rules sometimes.

We don’t sound like a robot or a textbook
We take opportunities to be clever, creative, and refreshing
We add moments of delight with our words


✓ We are: Unconventional, Creative, Joyful
X We aren’t: Sarcastic, Mean, Over the top

Conversational

Nothing makes us happier than making people feel welcomed and included, so we use simple language that’s easy for everyone to understand.

We are always easy to understand
We use simple language that is not overly-thought about
We choose words that you would use naturally in a relaxed conversation


✓ We are: Warm, Welcoming, Approachable
X We aren’t: Chatty, Fake, Try-hard, Confusing

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

What do emojis, exclamation points, and em dashes have in common? They’re all style choices, and they all tell you something about the person who uses them (or doesn’t use them).

Style matters. It shows personality, indicates tone, and adds consistency. Read on for our top style tips.

For a deeper dive, see our Style Guide.

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

To keep layouts simple, our grid system works with ½ and grids.