Yelp Brand Design System Deep-Dive

1. Brand Overview

Yelp’s design language is instantly recognizable — bold red accents, clean typography, and a utilitarian interface built for speed. It’s a platform that’s all about connecting people to local businesses, and the design reflects that mission: minimal ornamentation, heavy emphasis on clarity, and UI elements that read as “functional first.” The vibe is professional but approachable, with enough personality to feel human without sacrificing efficiency.

The audience here is broad: everyone from a foodie checking restaurant reviews to a homeowner hiring a plumber. This means the interface needs to be universally legible, work across demographics, and perform across devices. Yelp nails this through a restrained palette, clear typography, and a consistent 8px spacing system.

Philosophically, Yelp’s brand design says: “We’re the trustworthy directory. We don’t need to shout — just give you the info fast.” The layout is stripped of unnecessary complexity. Buttons are clear, links are obvious, and typography is tuned for quick scanning. The use of color is tight — primary red for brand moments, blue for interactive emphasis, and a range of grays for hierarchy.

What I love is how Yelp’s UI feels “dense but navigable.” You can pack in a ton of data — reviews, ratings, filters — without collapsing into chaos. That’s a testament to their grid discipline and consistent component styling.

One surprise is the occasional splash of bright cyan (#42cbef) on hover states. It’s a break from the otherwise muted palette, injecting a bit of playfulness into interactions. The rest of the color system is utilitarian: blacks, grays, whites, and brand red dominate. This keeps the visual hierarchy predictable.

In short: Yelp’s design system is built for clarity, consistency, and high-density information display. The rules are tight, and that’s why it works across millions of listings without feeling messy.

2. Color System

2.1 Primary Colors

The hero here is brand red #da1516 — a deep, assertive red that commands attention without leaning into neon territory. Psychologically, it’s urgency + trust in one hit. Red in UI often signals “action” or “attention,” and Yelp uses it primarily for the logo, key CTAs, and active states.

Interestingly, it’s not overused. The secondary workhorse is blue — specifically #007692 — which functions for links and certain interactive elements. This combo (red for brand, blue for function) avoids the “too much red” trap.

Competitor comparison: TripAdvisor leans heavily on green, Google Maps uses blue + red pins, and OpenTable sticks to deep reds. Yelp’s red is more saturated and assertive, making it stand out in app icons and search results.

2.2 Complete Palette

2.3 Color Relationships

• Contrast: Core text (#2d2e2f) on white background has strong contrast — comfortably WCAG AA compliant.
• Links: Primary link blue (#007692) on white is high contrast, though it’s darker than standard web blue.
• Brand Red: On white, it’s fine. On dark gray (#2d2e2f), it’s borderline for small text — better kept for icons/buttons.
• Accessibility: The cyan hover (#42cbef) is bright enough to be seen, but when used at 12% opacity, it’s purely decorative — not for critical info.

No dark mode evident in this data — system is optimized for light backgrounds.

2.4 Usage Guide

DO:

• Use #da1516 for main CTAs and brand logos only.
• Use #007692 for text links, never for filled buttons.
• Keep #0000ee for legacy link styles with underline.

AVOID:

• Red on blue — too jarring.
• Cyan for static text — keep it for hover states.
• Using opacity whites for text — they’re intended for overlays.

3. Typography

3.1 Font Families

• Poppins — Modern sans-serif for headings.
• Open Sans — Body text, captions, links.
• Times — Rare use, possibly legacy or specific legal copy.
• Arial — Fallback for system text and buttons.

Fallbacks are standard (Helvetica Neue, Helvetica, Arial), no custom font hosting indicated (no Google Fonts or Adobe Fonts in sources).

3.2 Type Scale

3.3 Hierarchy

Large headings (48px Poppins) are rare — likely hero sections. Most headings sit between 20px and 28px, keeping density high.

Open Sans dominates body copy — legible at small sizes, neutral tone. The occasional serif (Times) is an odd choice — probably for specific brand/legal contexts. Line heights are generous for small text, tight for big headings — smart for scanability.

4. Spacing & Layout

4.1 Spacing Scale

Yelp runs an 8px base grid — everything is a multiple of 4px, but 8px is the primary rhythm.

Common values:

• 8px — ubiquitous (97 occurrences)
• 16px — major padding (115 occurrences)
• 48px — big section spacing (20 occurrences)
• 4px — micro gaps (24 occurrences)
• 12px, 20px, 24px — common vertical rhythm values.

4.2 Layout

Breakpoints are numerous — Yelp is clearly tuned for multiple devices:

• Smallest: 149px (!)
• Common mobile: 400px, 425px, 500px
• Tablet: 768px, 896px
• Desktop: 1024px, 1240px, 1280px

This is a fluid-responsive approach — not just 3 breakpoints. Likely adaptive layouts for content density control.

5. Visual Elements

Border Radius

Ranges from 0px (square) to 10000px (full pill). Common:

• 3px — small buttons, divs
• 4px — inputs, buttons
• 8px — search bars
• 100% — full round buttons/icons
• 10000px — pill shapes (category chips)

I love the commitment to consistent rounding — no random 6px/7px values.

Shadows

Minimal:

• Main: rgba(0, 0, 0, 0.15) 0px 0px 18px 0px — soft ambient.
• Rare inset shadows.

This is a mostly-flat design — shadows are subtle and functional.

Borders

Light gray (#f0f0f0, #e3e3e3) for dividers. Occasionally brand-colored borders (#e00707) for emphasis.

6. Components

6.1 Buttons

Primary (Red)

• Default: #d71616 bg, white text, 8px radius, 10px x 16px padding.
• Hover: #1eaedb bg, white text, shadow.
• Focus: Black outline, #1eaedb bg.
• Active: White text.

Secondary (Transparent)

• Default: White at 12% opacity, white text, 4px radius.
• Hover: #1eaedb bg, white text.
• Focus: Black outline.

Tertiary (Blue text)

• Default: White at 50% bg, #007692 text, 5px radius.
• Hover: White text, #1eaedb bg.

Circular Action

• Default: White bg, black text, 100% radius.
• Hover: Light gray overlay.

6.2 Links

Six styles:

• Blue bold (#007692) — no underline, hover to muted blue.
• Web blue (#0000ee) — underlined, hover removes underline.
• White — hover to muted blue.
• Black bold — hover to muted blue.
• Dark gray bold — hover to muted blue.
• Gray — hover to muted blue.

6.3 Forms

Inputs:

• Default text input: White bg, light gray text, 4px radius.
• Focus: Black outline, #1eaedb bg, white text.
• Search: Same styling, dark gray text.

6.4 Cards

No explicit card data, but divs with 4px/8px radius and light borders suggest flat cards with minimal shadow.

7. Design Tokens

:root {
  /* Colors */
  --color-dark-gray: #2d2e2f;
  --color-white: #ffffff;
  --color-medium-gray: #6b6d6f;
  --color-teal-blue: #007692;
  --color-web-blue: #0000ee;
  --color-brand-red: #da1516;
  --color-bright-cyan: #42cbef;
  --color-white-30: rgba(255,255,255,0.3);
  --color-white-15: rgba(255,255,255,0.15);
  --color-gray-2: rgba(107,109,111,0.02);
  --color-cyan-12: rgba(66,203,239,0.12);

  /* Typography */
  --font-poppins: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-open-sans: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-times: Times, serif;
  --font-arial: Arial, sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-96: 96px;
  --space-200: 200px;

  /* Border Radius */
  --radius-0: 0px;
  --radius-2: 2px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-5: 5px;
  --radius-8: 8px;
  --radius-17: 17px;
  --radius-20: 20px;
  --radius-50: 50px;
  --radius-full: 100%;
  --radius-pill: 10000px;

  /* Shadows */
  --shadow-soft: rgba(0, 0, 0, 0.15) 0px 0px 18px 0px;
}

8. AI Coding Assistant Prompt

# Yelp Design System Specification

You are a Yelp design expert. Build UIs matching their visual language exactly.

## Brand Context
Yelp values clarity, consistency, and quick access to information. The design is functional-first, with tight color control and an 8px spacing grid. Bold red marks brand moments, blue handles functional interactions, and gray scales build hierarchy.

## Color Palette
- Dark Gray: #2d2e2f — Primary text, icons
- White: #ffffff — Background, inverted text
- Medium Gray: #6b6d6f — Secondary text
- Teal Blue: #007692 — Links, accents
- Web Blue: #0000ee — Legacy links with underline
- Brand Red: #da1516 — CTAs, logo
- Bright Cyan: #42cbef — Hover accent
- White 30%: rgba(255,255,255,0.3) — Overlay
- White 15%: rgba(255,255,255,0.15) — Subtle overlay
- Gray 2%: rgba(107,109,111,0.02) — Hover bg
- Cyan 12%: rgba(66,203,239,0.12) — Hover overlay

## Typography
- Headings: Poppins, "Helvetica Neue", Helvetica, Arial
- Body: Open Sans, "Helvetica Neue", Helvetica, Arial
- Serif special: Times
- System fallback: Arial

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 48px | 700 | 1.17 | Page titles |
| H1-sm | 28px | 700 | 1.29 | Section headings |
| H2 | 20px | 700 | 1.30 | Subheads |
| Body | 16px | 400 | 1.50 | Main content |
| Body-bold | 16px | 600 | 1.50 | Emphasis text |
| Link-bold | 16px | 700 | 1.50 | Nav links |
| Caption | 14px | 400 | 1.43 | Metadata |
| Caption-bold | 14px | 700 | 1.43 | Emphasis metadata |
| Small | 12px | 400 | 1.33 | Legal, fine print |

## Spacing & Grid
Base: 8px grid.
Scale: 1px, 4px, 5px, 6px, 8px, 10px, 12px, 13px, 14px, 15px, 16px, 20px, 24px, 32px, 40px, 48px, 56px, 64px, 96px, 200px.

## Border Radius
none: 0px — square containers
sm: 3px — small buttons
md: 4px — inputs, buttons
lg: 8px — search bars
full: 100% — round buttons
pill: 10000px — chips

## Shadows & Depth
- Soft ambient: rgba(0, 0, 0, 0.15) 0px 0px 18px 0px
Mostly flat — shadows are subtle.

## Component Specifications

### Primary Button
Default:
- bg: #d71616
- color: #ffffff
- padding: 10px 16px
- radius: 8px
Hover:
- bg: #1eaedb
- shadow: rgba(0,0,0,0.3) 0px 1px 4px
Focus:
- outline: 2px solid #000000
Active:
- color: #ffffff

### Secondary Button
Default:
- bg: rgba(255,255,255,0.12)
- color: #ffffff
- radius: 4px
Hover:
- bg: #1eaedb
Focus:
- outline: 2px solid #000000

### Input Field
Default:
- bg: #ffffff
- color: #c8c9ca
- radius: 4px
Focus:
- outline: 1px solid #000000
- bg: #1eaedb
- color: #ffffff

## Layout & Responsive Rules
Breakpoints: 400px, 425px, 768px, 1024px, 1240px, 1280px.
Use fluid grids — adjust density per breakpoint.

## Interaction Rules
- Transition: 150ms ease for hover/focus
- Focus indicators: 2px solid black
- Hover opacity: 0.9 on interactive bg changes

## DO
- Use only palette colors
- Stick to 8px grid
- Use Poppins for headings, Open Sans for body
- Keep radius consistent per component type

## DON'T
- Invent new colors
- Mix sharp and rounded corners
- Overuse shadows

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #d71616;
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 400;
  font-size: 13.3333px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #1eaedb;
  box-shadow: rgba(0,0,0,0.3) 0px 1px 4px;
}
.btn-primary:focus {
  outline: 2px solid #000000;
}
```

Input:
```css
.input {
  background: #ffffff;
  color: #c8c9ca;
  border-radius: 4px;
  padding: 13px 16px;
}
.input:focus {
  background: #1eaedb;
  color: #ffffff;
  border: 1px solid #000000;
}
```

9. Summary

TL;DR — Yelp’s design system is utilitarian, tightly controlled, and optimized for dense information display. Bold red marks brand moments, blue drives interaction, and an 8px grid keeps everything aligned.

Brand Keywords:

• clarity-first
• grid-disciplined
• functional-minimalist
• red-accented