Cookbook

Cookbook is Yelp's design system for digital experiences, and follows Brad Frost's Atomic Design methodology. Our system carries through with the food analogy by using ingredients for our styles, recipes for our components, and entrees for complex components.

Ingredients
Ingredients
Recipes
Recipes
Entrees
Entrees
Templates
Templates
Pages
Pages
Cookbook
Cookbook
Play video

Ingredients

A system of type and color styles designed with accessibility in mind, used across our Recipes.

Regular
Dark
Light

Red

Primary brand color, used on primary buttons, badges, and map pins. Also used as error/destructive color.

Regular
Dark
Light

Teal

Link/active text color, also used for selections (e.g. pills, checkboxes) and Biz secondary buttons.

Poppins font specimen

Poppins

Primary display type, used for headings and emphasis text.

Open Sans font specimen

Open Sans

Primary body type, used for paragraphs, links, and more.

Recipes & Entrees

A series of scalable components that bring consistency to your interactions with Yelp products.

Live
Needs setup
Pending
1

Badges

Small indicators that highlight important information.

Buttons

Actionable touchpoints users engage with.

Review ribbons

Row of stars to display or input a business rating.

Selection pill

Selections

Features and options that can be selected within the UI.

Yelp's Design Principles

Good design is subjective, so we built a set of considerations that help us assess the quality of our work and make critical decisions.

Don’t make me think!

Lead the way with intentional, clear design and make navigation feel smooth and seamless.

Make me feel understood

Create an inclusive space for our diverse community of users and business owners.

Help me get it done

Strive to help users walk away with what they were looking for—even more, when appropriate.

Treat me like a person

Get to know who we’re designing for. Think about where they are and where they’re headed next.

Earn my trust every day

Give accurate information and relevant navigation. Respect people’s time and trust will come naturally.

Yelp Design

Yelp Product Design is a close-knit team of product designers, researchers, writers, program managers, and illustrators connecting millions of people with great local businesses.

San FranciscoHQ
Toronto
London

Copyright © 2004–2024 Yelp Inc. Yelp, Yelp logo, Yelp burst and related marks are registered trademarks of Yelp.