Yelp | Cookbook
YELP DESIGN SYSTEM
The System
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.
Our system carries through with the food analogy by using ingredients for our styles, recipes for our components, and entrees for complex components.
Ingredients
A system of type and color styles designed with accessibility in mind, used across our recipes.
Typefaces
Colors
Our global color spectrum exists to make color in Cookbook more scalable. These shades are designed to be harmonious and accessible, so that as our color needs expand we have an existing selection of colors to pick from to bring into our product.
Grayscale
User Interface
Icons & Illustrations
Illustration is used to enhance the written word and expound on concepts by providing visual representation and meaning. Illustrations can provide a deeper understanding of a feature, product, or the brand. The goal should be to make an image that works in conjunction with the provided headline and body text.
Icons
Illustrations
Recipes & Entrees
A series of scalable components that bring consistency to your interactions with Yelp products.
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. Don’t overcomplicate the experience—choice isn’t always freedom and less really is more. Our presence shouldn’t be overwhelming, but not absent either. We’re friendly shepherds.
Help me get it done
Strive to help users walk away with what they were looking for—even more, when appropriate. Give the right information at the right time and avoid anything more or less. Be an insightful, knowledgeable guide, but not overbearing. Keep intent clear. Helping the business does not automatically mean being unhelpful to users.
Earn my trust everyday
Give accurate information and relevant navigation. Respect people’s time and attention and trust will come naturally. Think about what they need, as well as what we would like. Offer thoughtful connections and clear value for users and businesses. We’re a business, but a respectful one, so don’t be afraid to champion the user and their needs.
Make me feel understood
Create an inclusive space for our diverse community of users and business owners. Be adaptable to changing environments and varying needs. Experiences should be just and created for all, regardless of experience, location, race, sex, or anything else. Lead by example: challenge stereotypes and champion voices that need uplifting the most.
Treat me like a person
Get to know who we’re designing for. Are they a new user? A power user? A business owner? Think about where they are and where they’re headed next. How is this real person feeling? Design with positivity, when it feels right. Empower users to live meaningful lives through Yelp—do this with empathy, and they will naturally come back for more.