eBay Evo Design System

# eBay Evo — Design Style Reference

```yaml
# How this file was made. Sources are first-party; nothing here is
# read from a rendered page. Full breakdown at source_page below.
method: partial
confidence: medium
verified_at: unknown
source_page: https://www.designsystems.one/design-systems/ebay-design
sources:
  - https://playbook.ebay.com/design-system
```

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by eBay. "eBay Evo" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** eBay Evo
**Owner:** eBay
**Official documentation:** https://playbook.ebay.com/design-system
**Visual character:** Marketplace utility with logo-color playfulness: Market Sans everywhere, one commerce blue, pill buttons sized for buy-it-now thumbs.

---

## Summary

A two-sided marketplace system tuned for high-density commerce.

_Editorial confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product. Field-level evidence: 0/73 claims source-linked, 0/73 dated. Confidence is not verification; validate canonical values before implementation._

[Inspect every field and its evidence](https://www.designsystems.one/api/style-spec?system=ebay-design)

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| eBay Blue | `#3665f3` | `--ebay-blue` | Primary actions and links (Evo) |
| Text | `#191919` | `--ebay-text` | Primary text |
| Secondary Text | `#707070` | `--ebay-text-secondary` | Secondary text |
| White | `#ffffff` | `--ebay-white` | Surfaces |
| Light Surface | `#f7f7f7` | `--ebay-surface` | Subtle background |
| Border | `#c7c7c7` | `--ebay-border` | Borders |
| Red / Alert | `#e0103a` | `--ebay-red` | Errors and urgency |
| Green / Success | `#05823f` | `--ebay-green` | Success |
| Yellow Accent | `#f7b100` | `--ebay-yellow` | Brand accent (logo yellow) |

## Typography

- **Body:** Market Sans — weights 400, 700 — `'Market Sans', Arial, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| giant-1 | `46px` | `56px` |
| large-1 | `24px` | `32px` |
| medium | `16px` | `24px` |
| regular | `14px` | `20px` |
| small | `12px` | `16px` |

## Spacing

Base unit: `8px`

Scale: `4px` · `8px` · `16px` · `24px` · `32px` · `48px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `8px` |
| large | `16px` |
| pill | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| card | `0 2px 7px rgba(0,0,0,0.15)` |

## Motion

| Name | Value |
| --- | --- |
| default | `250ms ease` |

## Quick start (CSS)

```css
/* eBay Evo — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Native dp/sp values are omitted, never silently converted.
   Official reference: https://playbook.ebay.com/design-system
   Field evidence: https://www.designsystems.one/api/style-spec?system=ebay-design */

:root {
  /* Color */
  --ebay-blue: #3665f3; /* Primary actions and links (Evo) */
  --ebay-text: #191919; /* Primary text */
  --ebay-text-secondary: #707070; /* Secondary text */
  --ebay-white: #ffffff; /* Surfaces */
  --ebay-surface: #f7f7f7; /* Subtle background */
  --ebay-border: #c7c7c7; /* Borders */
  --ebay-red: #e0103a; /* Errors and urgency */
  --ebay-green: #05823f; /* Success */
  --ebay-yellow: #f7b100; /* Brand accent (logo yellow) */

  /* Typography */
  --font-body: 'Market Sans', Arial, sans-serif;

  /* Type scale */
  --text-giant-1: 46px; /* line-height 56px */
  --text-large-1: 24px; /* line-height 32px */
  --text-medium: 16px; /* line-height 24px */
  --text-regular: 14px; /* line-height 20px */
  --text-small: 12px; /* line-height 16px */

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  /* Radius */
  --radius-default: 8px;
  --radius-large: 16px;
  --radius-pill: 9999px;

  /* Elevation */
  --shadow-card: 0 2px 7px rgba(0,0,0,0.15);

  /* Motion */
  --motion-default: 250ms ease;
}
```

## Origin

eBay's design system has matured under the Evo and Skin programs over many years, codifying patterns from a marketplace older than most modern design systems. The publicly-shared Playbook crystallized this work into a navigable reference covering web and the eBay native apps used by hundreds of millions of buyers and sellers.

## Governance

Centralized design and engineering ownership inside eBay; component changes ship through internal release management with explicit accessibility gates. Public guidance is the windowed view; the production component library is largely internal.

## Known for

- Density patterns for item grids and search results that work across long-tail categories without breaking down at scale.
- Localization muscle — eBay ships across dozens of locales and the system handles right-to-left, varying currency formats, and region-specific surfaces unusually well.
- Buyer-and-seller dual-mode design — the same system has to serve casual shoppers and power sellers running real businesses.

## Underrated

- The filter and refinement patterns for category-heavy search are quietly best-in-class — facets, range pickers, and applied-filter chips are well-documented.
- Their typography ramp (Market Sans) is engineered for reading dense product titles and prices at small sizes, not just hero copy.

## Watch out for

- Patterns assume marketplace dynamics — bidding, watching, listing — that don't map onto single-vendor commerce or content surfaces.
- Visual identity is heavily eBay-flavored. The Playbook's value is the patterns; the colors and type are not lift-and-shift assets.

## Components worth studying

- **ItemCard** — Dense product card with image, title, price, condition, and seller signal — works in lists and grids.
- **FilterDrawer** — Mobile-first refinement surface with stacked filter groups, applied-chip review, and sticky apply.
- **BidButton / Watch** — Two-mode call-to-action that switches between immediate purchase and bid commitments.

## When to choose eBay Evo

Study eBay Evo if you're building two-sided marketplaces, classifieds, or any product where dense inventory and aggressive filtering are the core experience. Don't apply it whole to single-brand commerce — it carries marketplace assumptions.

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of eBay Evo by eBay — A two-sided marketplace system tuned for high-density commerce. Character: Marketplace utility with logo-color playfulness: Market Sans everywhere, one commerce blue, pill buttons sized for buy-it-now thumbs. Use a primary colour near #f7b100, the typeface "Market Sans" (or a close equivalent), corner radius around 8px, a spacing rhythm on a 8px base. Lean into what it's known for: Density patterns for item grids and search results that work across long-tail categories without breaking down at scale. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official references

- [eBay Playbook](https://playbook.ebay.com/design-system)
- [eBay Engineering blog](https://innovation.ebayinc.com/)
- [Skin (legacy reference)](https://er.ebay.com/skin/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/ebay-design) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._